Add support of styled-components v6

Author: xuesichao

CHANGELOG.md

@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added support for styled-components v6. This change is compatible with both styled-components v5 and v6. styled-components v6 introduces various breaking changes. One major difference is that styled-components v6 omits automatic vendor prefixing by default. If you prefer the v5 behavior, refer to the [styled-components v6 migration guide](https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6) for details.
+
 ### Removed
 
 ### Changed
@@ -74,9 +76,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 
 ### Changed
+
 - Updated `ContentShare` to have optional nameplate prop.
+
 ### Fixed
-- Fix a bug where the `isVideoEnabled` is still true even when the video device is unplugged. 
+
+- Fix a bug where the `isVideoEnabled` is still true even when the video device is unplugged.
 
 - When audio inputs change in a meeting, `AudioInputProvider` will only automatically select a new audio input device if a meeting is joined with `DeviceLabels.Audio` or `DeviceLabels.AudioAndVideo` device labels.
 - Publish `MeetingStatus.Failed` only when a non-terminal failure is encountered. Currently, some Amazon Chime SDK for JavaScript meeting session statuses pass both the `sessionStatus.isFailure()` as well as `sessionStatus.isTerminal()` in JS SDK, thus, for a status if it is in both, it will be considered as non-terminal failure and `MeetingStatus.TerminalFailure` will never get set for such statuses. Check [MeetingSessionStatus](https://github.com/aws/amazon-chime-sdk-js/blob/main/src/meetingsession/MeetingSessionStatus.ts) file for more information on both methods in JS SDK.
@@ -85,18 +90,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-* Add support for Node.js 18.
+- Add support for Node.js 18.
 
 ### Removed
 
 ### Changed
+
 - Updated `VoiceFocusProvider` to destroy the Voice Focus worker thread on unmount.
 - Reverted changes to `BackgroundBlurProvider` and `BackgroundReplacemenProvider` to fix bug related to `isBackgroundBlurSupported` and `isBackgroundReplacementSupported` returning false.
 
 ### Fixed
 
-* Update the documentation to use `GlobalStyles` along with `ThemeProvider`.
-
+- Update the documentation to use `GlobalStyles` along with `ThemeProvider`.
 
 ## [3.4.0] - 2022-09-13
 
@@ -171,7 +176,7 @@ Below is a list of all changes in Amazon Chime SDK React Components Library v3.
 - Remove preset device selection options ("None" and "440 Hz" for audio input device. "None", "Blue", and "SMTP Color Bars" for video input device). Remove `appendSampleDevices` from Props of `CameraSelection`, `MicSelection`, `AudioInputControl`, `AudioInputVFcontrol`, and `VideoInputControl`. Remove `DeviceConfig` type. Remove `additionalDevices` from Props of `useAudioInputs` and `useVideoInputs` hook.
 - Remove `useSelectAudioInputDevice`, `useSelectAudioOutputDevice` and `useSelectVideoInputDevice` hook.
 - Remove use of the deprecated `enableUnifiedPlanForChromiumBasedBrowsers` configuration variable.
-- Remove all deprecated `MeetingSessionStatusCode`.  
+- Remove all deprecated `MeetingSessionStatusCode`.
 - Remove legacy metrics `videoDownstreamGoogFrameHeight`, `videoDownstreamGoogFrameWidth`, `videoUpstreamGoogFrameHeight` and `videoUpstreamGoogFrameWidth` from the `videoStreamMetrics` returned by the `useMediaStreamMetrics` hook to adopt to Amazon Chime SDK for JavaScript V3 changes ([aws/amazon-chime-sdk-js#2086](https://github.com/aws/amazon-chime-sdk-js/pull/2086)).
 - Remove `MeetingSessionConfiguration` properties from `MeetingProvider` props.
 - Remove `deviceLabels`, `eventController`, `logLevel`, `postLogConfig`, `logger`, `enableWebAudio`, and `activeSpeakerPolicy` from `MeetingProvider` props.
@@ -217,7 +222,7 @@ Below is a list of all changes in Amazon Chime SDK React Components Library v3.
 ### Removed
 
 - Remove use of the deprecated `enableUnifiedPlanForChromiumBasedBrowsers` configuration variable.
-- Remove all deprecated `MeetingSessionStatusCode`.  
+- Remove all deprecated `MeetingSessionStatusCode`.
 - Remove legacy metrics `videoDownstreamGoogFrameHeight`, `videoDownstreamGoogFrameWidth`, `videoUpstreamGoogFrameHeight` and `videoUpstreamGoogFrameWidth` from the `videoStreamMetrics` returned by the `useMediaStreamMetrics` hook to adopt to Amazon Chime SDK for JavaScript V3 changes ([aws/amazon-chime-sdk-js#2086](https://github.com/aws/amazon-chime-sdk-js/pull/2086)).
 - Deprecate `useBandwidthMetrics` hook as we already have `useMediaStreamMetrics`.
 - Remove `MeetingSessionConfiguration` properties from `MeetingProvider` props.

src/components/sdk/LocalVideo/index.tsx

@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import { useApplyVideoObjectFit } from '../../../hooks/useApplyVideoObjectFit';
 import { useAudioVideo } from '../../../providers/AudioVideoProvider';
 import { useLocalVideo } from '../../../providers/LocalVideoProvider';
+import { defaultStyledConfig } from '../../../utils/style';
 import VideoTile from '../../ui/VideoTile';
 import { BaseSdkProps } from '../Base';
 
@@ -15,7 +16,7 @@ interface Props extends BaseSdkProps {
   nameplate?: string;
 }
 
-const StyledLocalVideo = styled<any>(VideoTile)`
+const StyledLocalVideo = styled<any>(VideoTile).withConfig(defaultStyledConfig)`
   ${(props) => (!props.active ? 'display: none' : '')};
 `;
 

src/components/sdk/PreviewVideo/index.tsx

@@ -9,10 +9,11 @@ import { useVideoInputs } from '../../../providers/DevicesProvider';
 import { useLocalVideo } from '../../../providers/LocalVideoProvider';
 import { useLogger } from '../../../providers/LoggerProvider';
 import { useMeetingManager } from '../../../providers/MeetingProvider';
+import { defaultStyledConfig } from '../../../utils/style';
 import VideoTile from '../../ui/VideoTile';
 import { BaseSdkProps } from '../Base';
 
-const StyledPreview = styled(VideoTile)`
+const StyledPreview = styled(VideoTile).withConfig(defaultStyledConfig)`
   height: auto;
   background: unset;
 

src/components/ui/Badge/Styled.tsx

@@ -3,10 +3,13 @@
 
 import styled from 'styled-components';
 
+import { defaultStyledConfig } from '../../../utils/style';
 import { baseSpacing, baseStyles } from '../Base';
 import { BadgeProps } from './';
 
-export const StyledBadge = styled.span<Partial<BadgeProps>>`
+export const StyledBadge = styled.span.withConfig(defaultStyledConfig)<
+  Partial<BadgeProps>
+>`
   ${(props) => {
     if (typeof props.value === 'object') {
       const element: JSX.Element = props.value as JSX.Element;

src/components/ui/Button/Styled.tsx

@@ -3,11 +3,13 @@
 
 import styled, { css } from 'styled-components';
 
-import { visuallyHidden } from '../../../utils/style';
+import { defaultStyledConfig, visuallyHidden } from '../../../utils/style';
 import { baseSpacing, baseStyles } from '../Base';
 import { ButtonProps } from './';
 
-export const StyledButton = styled.button<ButtonProps>`
+export const StyledButton = styled.button.withConfig(
+  defaultStyledConfig
+)<ButtonProps>`
   border-radius: ${(props) => props.theme.radii.default};
   font-size: ${(props) => props.theme.fontSizes.text.fontSize};
   padding: 0.5rem 1rem;
@@ -219,7 +221,9 @@ export const StyledIconButton = css<ButtonProps>`
   }
 `;
 
-export const StyledIconButtonWrapper = styled.span`
+export const StyledIconButtonWrapper = styled.span.withConfig(
+  defaultStyledConfig
+)`
   display: inline-block;
   position: relative;
 `;

src/components/ui/Chat/ChannelList/Styled.tsx

@@ -3,11 +3,14 @@
 
 import styled from 'styled-components';
 
+import { defaultStyledConfig } from '../../../../utils/style';
 import { baseSpacing, baseStyles } from '../../Base';
 import { ChannelListProps } from '.';
 import { ChannelItemProps } from './ChannelItem';
 
-export const StyledChannelList = styled.ul<ChannelListProps>`
+export const StyledChannelList = styled.ul.withConfig(
+  defaultStyledConfig
+)<ChannelListProps>`
   display: flex;
   flex-direction: column;
   width: 20rem;
@@ -16,7 +19,9 @@ export const StyledChannelList = styled.ul<ChannelListProps>`
   ${baseSpacing}
 `;
 
-export const StyledChannelItem = styled.li<ChannelItemProps>`
+export const StyledChannelItem = styled.li.withConfig(
+  defaultStyledConfig
+)<ChannelItemProps>`
   position: relative;
 
   ${baseStyles};

src/components/ui/Chat/ChatBubble/Styled.tsx

@@ -3,6 +3,7 @@
 
 import styled from 'styled-components';
 
+import { defaultStyledConfig } from '../../../../utils/style';
 import { BaseProps, baseSpacing, baseStyles } from '../../Base';
 import { MessageVariant } from './ChatBubbleContainer';
 
@@ -15,7 +16,9 @@ interface StyledChatBubbleProps extends BaseProps {
   editable?: boolean;
 }
 
-export const StyledChatBubbleContainer = styled.div<StyledChatBubbleContainerProps>`
+export const StyledChatBubbleContainer = styled.div.withConfig(
+  defaultStyledConfig
+)<StyledChatBubbleContainerProps>`
   display: flex;
   flex-direction: row;
   font-size: 0.65rem;
@@ -32,7 +35,9 @@ export const StyledChatBubbleContainer = styled.div<StyledChatBubbleContainerPro
   ${baseStyles}
 `;
 
-export const StyledChatBubble = styled.div<StyledChatBubbleProps>`
+export const StyledChatBubble = styled.div.withConfig(
+  defaultStyledConfig
+)<StyledChatBubbleProps>`
   background-color: ${(props) => props.theme.chatBubble[props.variant].bgd};
   padding: 0.625rem 1rem;
   border-radius: 4px;
@@ -94,7 +99,7 @@ export const StyledChatBubble = styled.div<StyledChatBubbleProps>`
   ${baseStyles};
 `;
 
-export const StyledChatBubbleInfo = styled.div`
+export const StyledChatBubbleInfo = styled.div.withConfig(defaultStyledConfig)`
   display: flex;
   margin-right: 0.5rem;
   margin-left: auto;

src/components/ui/Chat/InfiniteList/Styled.tsx

@@ -3,6 +3,7 @@
 
 import styled, { keyframes } from 'styled-components';
 
+import { defaultStyledConfig } from '../../../../utils/style';
 import { baseSpacing, baseStyles } from '../../Base';
 import { InfiniteListProps } from './';
 
@@ -18,7 +19,9 @@ const rotate = keyframes`
 
 interface StyledInfiniteListProps extends InfiniteListProps {}
 
-export const StyledInfiniteList = styled.ul<StyledInfiniteListProps>`
+export const StyledInfiniteList = styled.ul.withConfig(
+  defaultStyledConfig
+)<StyledInfiniteListProps>`
   background-color: ${(props) => props.theme.chatBubble.container.bgd};
   overflow-y: scroll;
   display: flex;

src/components/ui/Chat/MessageAttachment/Styled.tsx

@@ -3,13 +3,16 @@
 
 import styled from 'styled-components';
 
+import { defaultStyledConfig } from '../../../../utils/style';
 import { BaseProps, baseSpacing, baseStyles } from '../../Base';
 
 interface StyledMessageAttachmentProps extends BaseProps {
   imgStyles?: string;
 }
 
-export const StyledMessageAttachmentContent = styled.div`
+export const StyledMessageAttachmentContent = styled.div.withConfig(
+  defaultStyledConfig
+)`
   display: flex;
   flex-direction: row;
   padding: 10px;
@@ -30,9 +33,9 @@ export const StyledMessageAttachmentContent = styled.div`
     margin-left: 1rem;
 
     & a:link,
-    a:visited,
-    a:hover,
-    a:active {
+    & a:visited,
+    & a:hover,
+    & a:active {
       color: ${(props) => props.theme.messageAttachment.name.fontColor};
       text-decoration: none;
     }
@@ -45,7 +48,9 @@ export const StyledMessageAttachmentContent = styled.div`
   }
 `;
 
-export const StyledMessageAttachment = styled.div<StyledMessageAttachmentProps>`
+export const StyledMessageAttachment = styled.div.withConfig(
+  defaultStyledConfig
+)<StyledMessageAttachmentProps>`
   color: ${(props) => props.theme.messageAttachment.content.fontColor};
   display: flex;
   flex-direction: column;

src/components/ui/Checkbox/Styled.tsx

@@ -3,10 +3,10 @@
 
 import styled from 'styled-components';
 
-import { visuallyHidden } from '../../../utils/style';
+import { defaultStyledConfig, visuallyHidden } from '../../../utils/style';
 import { StyledCheckboxProps } from './';
 
-export const HiddenCheckbox = styled.input`
+export const HiddenCheckbox = styled.input.withConfig(defaultStyledConfig)`
   ${visuallyHidden};
 
   &[aria-invalid='true'] + .ch-checkbox {
@@ -15,7 +15,9 @@ export const HiddenCheckbox = styled.input`
   }
 `;
 
-export const StyledCheckbox = styled.div<StyledCheckboxProps>`
+export const StyledCheckbox = styled.div.withConfig(
+  defaultStyledConfig
+)<StyledCheckboxProps>`
   background-color: ${(props) => props.theme.inputs.bgd};
   border: ${(props) => props.theme.inputs.border};
   border-radius: ${(props) => props.theme.radii.default};

src/components/ui/ContentTile/index.tsx

@@ -3,9 +3,12 @@
 
 import styled from 'styled-components';
 
+import { createStyledConfig } from '../../../utils/style';
 import { VideoTile } from '../../ui/VideoTile';
 
-export const ContentTile = styled(VideoTile)`
+export const ContentTile = styled(VideoTile).withConfig(
+  createStyledConfig(['nameplate'])
+)`
   background-color: ${({ theme }) => theme.colors.greys.grey80};
 `;
 

src/components/ui/ControlBar/Styled.tsx

@@ -5,6 +5,7 @@ import styled, { css } from 'styled-components';
 
 import { darkTheme } from '../../../theme/dark';
 import { lightTheme } from '../../../theme/light';
+import { defaultStyledConfig } from '../../../utils/style';
 import { baseSpacing, baseStyles } from '../Base';
 import { PopOverItemProps } from '../PopOver/PopOverItem';
 import { ControlBarLayout, ControlBarProps } from '.';
@@ -47,30 +48,26 @@ export const responsiveStyles = (props: StyledControlBarProps) => {
   return css`
     ${({ theme }) => theme.mediaQueries.max.sm} {
       ${unsetPosition}
-      ${(props: StyledControlBarProps) =>
-        isVertical(props.layout) ? layoutMap['left'] : layoutMap['bottom']};
-      box-shadow: ${(props: StyledControlBarProps) =>
-        props.theme.controlBar.shadow};
+      ${isVertical(props.layout) ? layoutMap['left'] : layoutMap['bottom']};
+      box-shadow: ${props.theme.controlBar.shadow};
       border: none;
-      height: ${(props: StyledControlBarProps) =>
-        isVertical(props.layout) && '100%'};
-      width: ${(props: StyledControlBarProps) =>
-        !isVertical(props.layout) && '100%'};
+      height: ${isVertical(props.layout) && '100%'};
+      width: ${!isVertical(props.layout) && '100%'};
     }
 
     ${({ theme }) => theme.mediaQueries.max.xs} {
-      justify-content: ${(props: StyledControlBarProps) =>
-        isVertical(props.layout) ? 'center' : 'space-around'};
+      justify-content: ${isVertical(props.layout) ? 'center' : 'space-around'};
       ${unsetPosition}
-      ${(props: StyledControlBarProps) =>
-        isVertical(props.layout) ? layoutMap['left'] : layoutMap['bottom']};
+      ${isVertical(props.layout) ? layoutMap['left'] : layoutMap['bottom']};
       box-shadow: ${({ theme }) => theme.controlBar.shadow};
       border: none;
     }
   `;
 };
 
-export const StyledControlBar = styled.div<StyledControlBarProps>`
+export const StyledControlBar = styled.div.withConfig(
+  defaultStyledConfig
+)<StyledControlBarProps>`
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -98,7 +95,9 @@ interface StyledControlBarItemProps extends StyledControlBarProps {
   isSelected: boolean;
 }
 
-export const StyledControlBarItem = styled.div<StyledControlBarItemProps>`
+export const StyledControlBarItem = styled.div.withConfig(
+  defaultStyledConfig
+)<StyledControlBarItemProps>`
   margin: ${({ layout }) => (isVertical(layout) ? '0.625rem 0' : '0 0.625rem')};
   display: grid;
   grid-template-rows: ${({ showLabels }) =>

src/components/ui/Flex/Styled.tsx

@@ -3,6 +3,7 @@
 
 import styled, { css } from 'styled-components';
 
+import { defaultStyledConfig } from '../../../utils/style';
 import { baseSpacing, baseStyles } from '../Base';
 import { FlexProps } from './';
 
@@ -47,7 +48,7 @@ const layoutMap = {
   stack,
 };
 
-export const StyledFlex = styled.div<FlexProps>`
+export const StyledFlex = styled.div.withConfig(defaultStyledConfig)<FlexProps>`
   align-items: ${(props) => props.alignItems};
   display: ${(props) => (props.container ? 'flex' : 'block')};
   flex: ${(props) => props.flex || ''};