Merge pull request #3049 from github/koesie10/styled-transient-props

Use transient props for all styled components

extensions/ql-vscode/src/view/common/Alert.tsx

@@ -3,16 +3,16 @@ import { ReactNode } from "react";
 import { styled } from "styled-components";
 
 type ContainerProps = {
-  type: "warning" | "error";
-  inverse?: boolean;
+  $type: "warning" | "error";
+  $inverse?: boolean;
 };
 
-const getBackgroundColor = ({ type, inverse }: ContainerProps): string => {
-  if (!inverse) {
+const getBackgroundColor = ({ $type, $inverse }: ContainerProps): string => {
+  if (!$inverse) {
     return "var(--vscode-notifications-background)";
   }
 
-  switch (type) {
+  switch ($type) {
     case "warning":
       return "var(--vscode-editorWarning-foreground)";
     case "error":
@@ -20,12 +20,12 @@ const getBackgroundColor = ({ type, inverse }: ContainerProps): string => {
   }
 };
 
-const getTextColor = ({ type, inverse }: ContainerProps): string => {
-  if (!inverse) {
+const getTextColor = ({ $type, $inverse }: ContainerProps): string => {
+  if (!$inverse) {
     return "var(--vscode-editor-foreground)";
   }
 
-  switch (type) {
+  switch ($type) {
     case "warning":
       return "var(--vscode-editor-background)";
     case "error":
@@ -33,8 +33,8 @@ const getTextColor = ({ type, inverse }: ContainerProps): string => {
   }
 };
 
-const getBorderColor = ({ type }: ContainerProps): string => {
-  switch (type) {
+const getBorderColor = ({ $type }: ContainerProps): string => {
+  switch ($type) {
     case "warning":
       return "var(--vscode-editorWarning-foreground)";
     case "error":
@@ -42,7 +42,7 @@ const getBorderColor = ({ type }: ContainerProps): string => {
   }
 };
 
-const getTypeText = (type: ContainerProps["type"]): string => {
+const getTypeText = (type: ContainerProps["$type"]): string => {
   switch (type) {
     case "warning":
       return "Warning";
@@ -108,7 +108,7 @@ export const Alert = ({
   role,
 }: Props) => {
   return (
-    <Container type={type} inverse={inverse} role={role}>
+    <Container $type={type} $inverse={inverse} role={role}>
       <Title>
         {getTypeText(type)}: {title}
       </Title>

extensions/ql-vscode/src/view/common/Dropdown.tsx

@@ -4,7 +4,7 @@ import { styled } from "styled-components";
 
 const DISABLED_VALUE = "-";
 
-const StyledDropdown = styled.select<{ disabled?: boolean }>`
+const StyledDropdown = styled.select`
   width: 100%;
   height: calc(var(--input-height) * 1px);
   background: var(--vscode-dropdown-background);

extensions/ql-vscode/src/view/common/FileCodeSnippet/CodeSnippetMessage.tsx

@@ -27,14 +27,14 @@ const MessageText = styled.div`
 `;
 
 type CodeSnippetMessageContainerProps = {
-  severity: ResultSeverity;
+  $severity: ResultSeverity;
 };
 
 const CodeSnippetMessageContainer = styled.div<CodeSnippetMessageContainerProps>`
   border-color: var(--vscode-editor-snippetFinalTabstopHighlightBorder);
   border-width: 0.1em;
   border-style: solid;
-  border-left-color: ${(props) => getSeverityColor(props.severity)};
+  border-left-color: ${(props) => getSeverityColor(props.$severity)};
   border-left-width: 0.3em;
   padding-top: 1em;
   padding-bottom: 1em;
@@ -58,7 +58,7 @@ export const CodeSnippetMessage = ({
   children,
 }: CodeSnippetMessageProps) => {
   return (
-    <CodeSnippetMessageContainer severity={severity}>
+    <CodeSnippetMessageContainer $severity={severity}>
       <MessageText>
         {message.tokens.map((token, index) => {
           switch (token.t) {
@@ -86,7 +86,7 @@ export const CodeSnippetMessage = ({
         })}
         {children && (
           <>
-            <VerticalSpace size={2} />
+            <VerticalSpace $size={2} />
             {children}
           </>
         )}

extensions/ql-vscode/src/view/common/HorizontalSpace.tsx

@@ -1,7 +1,7 @@
 import { styled } from "styled-components";
 
-export const HorizontalSpace = styled.div<{ size: 1 | 2 | 3 }>`
+export const HorizontalSpace = styled.div<{ $size: 1 | 2 | 3 }>`
   flex: 0 0 auto;
   display: inline-block;
-  width: ${(props) => 0.2 * props.size}em;
+  width: ${(props) => 0.2 * props.$size}em;
 `;

extensions/ql-vscode/src/view/common/TextButton.tsx

@@ -3,12 +3,12 @@ import { styled } from "styled-components";
 
 type Size = "x-small" | "small" | "medium" | "large" | "x-large";
 
-const StyledButton = styled.button<{ size: Size }>`
+const StyledButton = styled.button<{ $size: Size }>`
   background: none;
   color: var(--vscode-textLink-foreground);
   border: none;
   cursor: pointer;
-  font-size: ${(props) => props.size ?? "1em"};
+  font-size: ${(props) => props.$size ?? "1em"};
   padding: 0;
 `;
 
@@ -26,7 +26,7 @@ const TextButton = ({
   children: React.ReactNode;
 }) => (
   <StyledButton
-    size={size}
+    $size={size}
     onClick={onClick}
     className={className}
     title={title}

extensions/ql-vscode/src/view/common/VerticalSpace.tsx

@@ -1,6 +1,6 @@
 import { styled } from "styled-components";
 
-export const VerticalSpace = styled.div<{ size: 1 | 2 | 3 }>`
+export const VerticalSpace = styled.div<{ $size: 1 | 2 | 3 }>`
   flex: 0 0 auto;
-  height: ${(props) => 0.5 * props.size}em;
+  height: ${(props) => 0.5 * props.$size}em;
 `;

extensions/ql-vscode/src/view/data-flow-paths/DataFlowPaths.tsx

@@ -48,9 +48,9 @@ export const DataFlowPaths = ({
 
   return (
     <>
-      <VerticalSpace size={2} />
+      <VerticalSpace $size={2} />
       <SectionTitle>{ruleDescription}</SectionTitle>
-      <VerticalSpace size={2} />
+      <VerticalSpace $size={2} />
 
       <PathsContainer>
         <PathDetailsContainer>
@@ -66,7 +66,7 @@ export const DataFlowPaths = ({
         </PathDropdownContainer>
       </PathsContainer>
 
-      <VerticalSpace size={2} />
+      <VerticalSpace $size={2} />
       <CodePath
         codeFlow={selectedCodeFlow}
         severity={severity}

extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx

@@ -39,12 +39,12 @@ const DependencyContainer = styled.div`
   margin-bottom: 0.8rem;
 `;
 
-const StyledVSCodeTag = styled(VSCodeTag)<{ visible: boolean }>`
-  visibility: ${(props) => (props.visible ? "visible" : "hidden")};
+const StyledVSCodeTag = styled(VSCodeTag)<{ $visible: boolean }>`
+  visibility: ${(props) => (props.$visible ? "visible" : "hidden")};
 `;
 
 const UnsavedTag = ({ modelingStatus }: { modelingStatus: ModelingStatus }) => (
-  <StyledVSCodeTag visible={modelingStatus === "unsaved"}>
+  <StyledVSCodeTag $visible={modelingStatus === "unsaved"}>
     Unsaved
   </StyledVSCodeTag>
 );

extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisRepositoriesStats.tsx

@@ -27,14 +27,14 @@ function getIcon(
     if (variantAnalysisStatus === VariantAnalysisStatus.Canceled) {
       return (
         <>
-          <HorizontalSpace size={2} />
+          <HorizontalSpace $size={2} />
           <ErrorIcon label="Some analyses were stopped" />
         </>
       );
     } else {
       return (
         <>
-          <HorizontalSpace size={2} />
+          <HorizontalSpace $size={2} />
           <ErrorIcon label="Some analyses failed" />
         </>
       );
@@ -42,14 +42,14 @@ function getIcon(
   } else if (skippedRepositoryCount > 0) {
     return (
       <>
-        <HorizontalSpace size={2} />
+        <HorizontalSpace $size={2} />
         <WarningIcon label="Some repositories were skipped" />
       </>
     );
   } else if (variantAnalysisStatus === VariantAnalysisStatus.Succeeded) {
     return (
       <>
-        <HorizontalSpace size={2} />
+        <HorizontalSpace $size={2} />
         <SuccessIcon label="Completed" />
       </>
     );
@@ -68,7 +68,7 @@ export const VariantAnalysisRepositoriesStats = ({
   if (variantAnalysisStatus === VariantAnalysisStatus.Failed) {
     return (
       <>
-        0<HorizontalSpace size={2} />
+        0<HorizontalSpace $size={2} />
         <ErrorIcon label="Variant analysis failed" />
       </>
     );