Bump styled-components from 5.3.11 to 6.1.11

web/packages/design/src/AnimatedProgressBar/AnimatedProgressBar.tsx

@@ -66,7 +66,7 @@ const Bar = styled.span`
   overflow: hidden;
   width: 118px;
 
-  ::after {
+  &::after {
     content: '';
     position: absolute;
     top: 0;

web/packages/design/src/Checkbox/Checkbox.tsx

@@ -106,7 +106,7 @@ const Checkmark = styled(Icon.CheckThick)`
 const CheckboxInternal = styled.input.attrs(props => ({
   // TODO(bl-nero): Make radio buttons a separate control.
   type: props.type || 'checkbox',
-}))`
+}))<{ cbSize?: CheckboxSize }>`
   // reset the appearance so we can style the background
   -webkit-appearance: none;
   -moz-appearance: none;

web/packages/design/src/DataTable/StyledTable.tsx

@@ -75,13 +75,13 @@ export const StyledTable = styled.table<BorderRadiusProps>`
     border-top: ${props => props.theme.borders[2]}
       ${props => props.theme.colors.spotBackground[0]};
 
-    :hover {
+    &:hover {
       border-top: ${props => props.theme.borders[2]} rgba(0, 0, 0, 0);
       background-color: ${props => props.theme.colors.levels.surface};
 
       // We use a pseudo element for the shadow with position: absolute in order to prevent
       // the shadow from increasing the size of the layout and causing scrollbar flicker.
-      :after {
+      &:after {
         box-shadow: ${props => props.theme.boxShadow[3]};
         content: '';
         position: absolute;

web/packages/design/src/Input/Input.story.js

@@ -28,5 +28,7 @@ export const Inputs = () => (
   <>
     <Input mb={4} placeholder="Enter SomeText" />
     <Input mb={4} hasError={true} defaultValue="This field has an error" />
+    <Input mb={4} readOnly defaultValue="Read-only field" />
+    <Input mb={4} disabled defaultValue="Disabled field" />
   </>
 );

web/packages/design/src/Input/Input.tsx

@@ -67,20 +67,20 @@ const Input = styled.input<InputProps>`
     border: 1px solid ${props => props.theme.colors.text.slightlyMuted};
   }
 
-  ::-ms-clear {
+  &::-ms-clear {
     display: none;
   }
 
-  ::placeholder {
+  &::placeholder {
     color: ${props => props.theme.colors.text.muted};
     opacity: 1;
   }
 
-  :read-only {
+  &:read-only {
     cursor: not-allowed;
   }
 
-  :disabled {
+  &:disabled {
     color: ${props => props.theme.colors.text.disabled};
     border-color: ${props => props.theme.colors.text.disabled};
   }

web/packages/design/src/Onboard/WelcomeWrapper.tsx

@@ -61,7 +61,7 @@ const OnboardWrapper = styled.div`
   background-size: cover;
 
   // leveraging pseudo element for opacity/blur
-  ::after {
+  &::after {
     content: '';
     top: 0;
     left: 0;

web/packages/design/src/StepSlider/StepSlider.tsx

@@ -246,8 +246,8 @@ const HiddenBox = styled.div`
   position: absolute;
 `;
 
-const Wrap = styled.div(
-  ({ tDuration }: { tDuration: number }) => `
+const Wrap = styled.div<{ tDuration: number }>(
+  ({ tDuration }) => `
 
  .prev-slide-enter {
    transform: translateX(-100%);

web/packages/design/src/Text/Text.tsx

@@ -36,6 +36,7 @@ import {
   fontWeight,
 } from 'design/system';
 import { fontWeights } from 'design/theme/typography';
+import { shouldForwardTypographyProp } from 'design/system/typography';
 
 interface FontWeightProps {
   fontWeight?: ResponsiveValue<Property.FontWeight | keyof typeof fontWeights>;
@@ -49,7 +50,9 @@ export interface TextProps
     TextAlignProps,
     FontWeightProps {}
 
-const Text = styled.div<TextProps>`
+const Text = styled.div.withConfig({
+  shouldForwardProp: shouldForwardTypographyProp,
+})<TextProps>`
   overflow: hidden;
   text-overflow: ellipsis;
   ${typography}

web/packages/design/src/TextArea/TextArea.story.tsx

@@ -28,6 +28,8 @@ export const TextAreas = () => (
   <>
     <TextArea mb={4} placeholder="Enter Some long text" />
     <TextArea mb={4} hasError={true} defaultValue="This field has an error" />
+    <TextArea mb={4} readOnly defaultValue="This field is read-only" />
+    <TextArea mb={4} disabled defaultValue="This field is disabled" />
     <TextArea
       mb={4}
       resizable={true}

web/packages/design/src/TextArea/TextArea.tsx

@@ -54,7 +54,7 @@ export const TextArea = styled.textarea<TextAreaProps>`
   color: ${props => props.theme.colors.text.main};
   background: inherit;
 
-  ::placeholder {
+  &::placeholder {
     color: ${props => props.theme.colors.text.muted};
     opacity: 1;
   }
@@ -65,11 +65,11 @@ export const TextArea = styled.textarea<TextAreaProps>`
     border: 1px solid ${props => props.theme.colors.text.slightlyMuted};
   }
 
-  :read-only {
+  &:read-only {
     cursor: not-allowed;
   }
 
-  :disabled {
+  &:disabled {
     color: ${props => props.theme.colors.text.disabled};
     border-color: ${props => props.theme.colors.text.disabled};
   }

web/packages/design/src/ThemeProvider/index.tsx

@@ -20,6 +20,7 @@ import React, { useEffect, useState } from 'react';
 import {
   StyleSheetManager,
   ThemeProvider as StyledThemeProvider,
+  WebTarget,
 } from 'styled-components';
 
 import { KeysEnum, storageService } from 'teleport/services/storageService';
@@ -28,6 +29,8 @@ import cfg from 'teleport/config';
 
 import { Theme } from 'gen-proto-ts/teleport/userpreferences/v1/theme_pb';
 
+import isPropValid from '@emotion/is-prop-valid';
+
 import { darkTheme, lightTheme, bblpTheme } from '../theme';
 
 import { GlobalStyle } from './globals';
@@ -110,7 +113,7 @@ const ThemeProvider = props => {
 
   return (
     <StyledThemeProvider theme={theme}>
-      <StyleSheetManager disableVendorPrefixes>
+      <StyleSheetManager shouldForwardProp={shouldForwardProp}>
         <React.Fragment>
           <GlobalStyle />
           {props.children}
@@ -120,4 +123,23 @@ const ThemeProvider = props => {
   );
 };
 
+/**
+ * This function has been taken from the [styled-components library
+ * FAQ](https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default).
+ * It implements the default behavior from styled-components v5. It's required,
+ * because it would be otherwise incompatible with styled-system (or at least
+ * the way we are using it). Not using this function would cause a lot of props
+ * being passed unnecessarily to the underlying elements. Not only it's
+ * unnecessary and potentially a buggy behavior, it also causes a lot of
+ * warnings printed on the console, which in turn causes test failures.
+ */
+export function shouldForwardProp(propName: string, target: WebTarget) {
+  if (typeof target === 'string') {
+    // For HTML elements, forward the prop if it is a valid HTML attribute
+    return isPropValid(propName);
+  }
+  // For other elements, forward all props
+  return true;
+}
+
 export default ThemeProvider;

web/packages/design/src/system/typography.ts

@@ -19,8 +19,10 @@
 import PropTypes from 'prop-types';
 
 import { ResponsiveValue } from 'styled-system';
+import { WebTarget } from 'styled-components';
 
 import { SharedStyles, Theme } from 'design/theme/themes/types';
+import { shouldForwardProp } from 'design/ThemeProvider';
 
 export interface TypographyProps {
   caps?: boolean;
@@ -46,6 +48,26 @@ function getTypography(props: TypographyPropsWithTheme) {
   };
 }
 
+const typographyProps: Required<{ [k in keyof TypographyProps]: boolean }> = {
+  caps: true,
+  bold: true,
+  italic: true,
+  mono: true,
+  breakAll: true,
+  typography: true,
+};
+
+/**
+ * Determines whether a property with a given name should be forwarded down as
+ * an attribute to an underlying HTML tag. To be used along with styled-components
+ */
+export function shouldForwardTypographyProp(
+  propName: string,
+  target: WebTarget
+) {
+  return !typographyProps[propName] && shouldForwardProp(propName, target);
+}
+
 function caps(props: TypographyProps) {
   return props.caps ? { textTransform: 'uppercase' } : null;
 }

web/packages/shared/components/AccessRequests/AssumeStartTime/AssumeStartTime.tsx

@@ -230,7 +230,7 @@ const CalendarPicker = styled(Flex)`
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
-  :hover {
+  &:hover {
     background-color: ${p => p.theme.colors.spotBackground[0]};
     border: 1px solid ${p => p.theme.colors.text.slightlyMuted};
   }

web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx

@@ -281,7 +281,7 @@ export function RequestCheckout<T extends PendingListItem>({
                               theme.colors.buttons.trashButton.default};
                             border-radius: 2px;
 
-                            :hover {
+                            &:hover {
                               background-color: ${({ theme }) =>
                                 theme.colors.buttons.trashButton.hover};
                             }
@@ -570,12 +570,12 @@ const RoleRowContainer = styled.div<{ checked?: boolean }>`
 
   // TODO(bl-nero): That's the third place where we're copying these
   // definitions. We need to make them reusable.
-  :hover {
+  &:hover {
     background-color: ${props => props.theme.colors.levels.surface};
 
     // We use a pseudo element for the shadow with position: absolute in order to prevent
     // the shadow from increasing the size of the layout and causing scrollbar flicker.
-    :after {
+    &:after {
       box-shadow: ${props => props.theme.boxShadow[3]};
       content: '';
       position: absolute;
@@ -638,7 +638,7 @@ function TextBox({
           outline: none;
           background: transparent;
 
-          ::placeholder {
+          &::placeholder {
             color: ${({ theme }) => theme.colors.text.muted};
           }
 

web/packages/shared/components/AwsLaunchButton/AwsLaunchButton.tsx

@@ -193,7 +193,7 @@ const StyledMenuItem = styled(MenuItem)(
     color: ${theme.colors.text.main};
   }
 
-  :last-child {
+  &:last-child {
     border-bottom: none;
     margin-bottom: 8px;
   }
@@ -215,7 +215,7 @@ const StyledInput = styled.input<SpaceProps>(
     outline: none;
   }
 
-  ::placeholder {
+  &::placeholder {
     color: ${theme.colors.text.muted};
     opacity: 1;
   }

web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx

@@ -246,7 +246,7 @@ const ClusterFilter = styled.input(
     border: none;
   }
 
-  ::placeholder {
+  &::placeholder {
     color: ${theme.colors.text.muted};
     opacity: 1;
   }

web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx

@@ -138,7 +138,7 @@ const Dropzone = styled.button`
   border-radius: ${props => props.theme.radii[2]}px;
   font-family: inherit;
 
-  :focus {
+  &:focus {
     border-color: ${props => props.theme.colors.spotBackground[1]};
   }
 `;

web/packages/shared/components/MenuLogin/MenuLogin.tsx

@@ -202,7 +202,7 @@ const StyledMenuItem = styled(MenuItem)(
   border-bottom: 1px solid ${theme.colors.spotBackground[0]};
   min-height: 32px;
 
-  :last-child {
+  &:last-child {
     border-bottom: none;
     margin-bottom: 8px;
   }
@@ -224,7 +224,7 @@ const Input = styled.input<SpaceProps>(
     outline: none;
   }
 
-  ::placeholder {
+  &::placeholder {
     color: ${theme.colors.text.muted};
     opacity: 1;
   }

web/packages/shared/components/ToolTip/ToolTip.tsx

@@ -63,7 +63,7 @@ export const ToolTipInfo: React.FC<
         {...(trigger === 'hover' && triggerOnHoverProps)}
         {...(trigger === 'click' && triggerOnClickProps)}
         css={`
-          :hover {
+          &:hover {
             cursor: pointer;
           }
           vertical-align: middle;

web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx

@@ -313,7 +313,7 @@ const CardOuterContainer = styled(Box)<{ showAllLabels?: boolean }>`
 
     // We use a pseudo element for the shadow with position: absolute in order to prevent
     // the shadow from increasing the size of the layout and causing scrollbar flicker.
-    :after {
+    &:after {
       box-shadow: ${props => props.theme.boxShadow[3]};
       border-radius: ${props => props.theme.radii[3]}px;
       content: '';
@@ -342,7 +342,7 @@ const CardInnerContainer = styled(Flex)<BackgroundColorProps>`
   border-radius: ${props => props.theme.radii[3]}px;
   background-color: ${props => getBackgroundColor(props)};
 
-  :hover {
+  &:hover {
     // Make the border invisible instead of removing it, this is to prevent things from shifting due to the size change.
     border: ${props => props.theme.borders[2]} rgba(0, 0, 0, 0);
   }

web/packages/shared/components/UnifiedResources/FilterPanel.tsx

@@ -644,7 +644,7 @@ const ViewModeSwitchContainer = styled.div`
   .selected {
     background-color: ${props => props.theme.colors.spotBackground[1]};
 
-    :hover {
+    &:hover {
       background-color: ${props => props.theme.colors.spotBackground[1]};
     }
   }
@@ -662,7 +662,7 @@ const ViewModeSwitchButton = styled.button`
 
   background-color: transparent;
 
-  :hover {
+  &:hover {
     background-color: ${props => props.theme.colors.spotBackground[0]};
   }
 `;

web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx

@@ -278,12 +278,12 @@ const RowContainer = styled(Box)`
   transition: all 150ms;
   position: relative;
 
-  :hover {
+  &:hover {
     background-color: ${props => props.theme.colors.levels.surface};
 
     // We use a pseudo element for the shadow with position: absolute in order to prevent
     // the shadow from increasing the size of the layout and causing scrollbar flicker.
-    :after {
+    &:after {
       box-shadow: ${props => props.theme.boxShadow[3]};
       content: '';
       position: absolute;
@@ -315,7 +315,7 @@ const RowInnerContainer = styled(Flex)<BackgroundColorProps>`
   border-bottom: ${props => props.theme.borders[2]}
     ${props => props.theme.colors.spotBackground[0]};
 
-  :hover {
+  &:hover {
     // Make the border invisible instead of removing it, this is to prevent things from shifting due to the size change.
     border-bottom: ${props => props.theme.borders[2]} rgba(0, 0, 0, 0);
   }

web/packages/teleport/src/Console/DocumentKubeExec/DocumentKubeExec.test.tsx

@@ -20,7 +20,7 @@ import { render, screen } from '@testing-library/react';
 
 import '@testing-library/jest-dom';
 
-import { ThemeProvider } from 'styled-components';
+import ThemeProvider from 'design/ThemeProvider';
 import 'jest-canvas-mock';
 import { darkTheme } from 'design/theme';