diff --git a/packages/.template/src/styled/Styled{{capitalize component}}.ts b/packages/.template/src/styled/Styled{{capitalize component}}.ts index fbe6f6d34be..3e506a0f490 100644 --- a/packages/.template/src/styled/Styled{{capitalize component}}.ts +++ b/packages/.template/src/styled/Styled{{capitalize component}}.ts @@ -28,7 +28,7 @@ const colorStyles = (props: IStyled{{capitalize component}}Props) => { background-color: ${backgroundColor}; color: ${foregroundColor}; - :hover { + &:hover { background-color: ${hoverBackgroundColor}; } @@ -65,7 +65,7 @@ export const Styled{{capitalize component}} = styled.div.attrs sizeStyles(props)}; - :focus { + &:focus { outline: none; } diff --git a/packages/avatars/src/elements/Avatar.tsx b/packages/avatars/src/elements/Avatar.tsx index 385e09f502a..ec2b5ca1646 100644 --- a/packages/avatars/src/elements/Avatar.tsx +++ b/packages/avatars/src/elements/Avatar.tsx @@ -21,15 +21,16 @@ import { Text } from './components/Text'; const AvatarComponent = forwardRef( ( { + backgroundColor, + badge, + children, + foregroundColor, isSystem, size, status, - children, - badge, + statusLabel, surfaceColor, - backgroundColor, - foregroundColor, - ...props + ...other }, ref ) => { @@ -59,9 +60,9 @@ const AvatarComponent = forwardRef( }, [computedStatus, badge]); const shouldValidate = computedStatus !== undefined; - const statusLabel = useText( + const ariaLabel = useText( AvatarComponent, - props, + { statusLabel }, 'statusLabel', defaultStatusLabel, shouldValidate @@ -78,7 +79,7 @@ const AvatarComponent = forwardRef( $foregroundColor={foregroundColor} aria-atomic="true" aria-live="polite" - {...props} + {...other} > {Children.only(children)} {!!computedStatus && ( @@ -86,7 +87,7 @@ const AvatarComponent = forwardRef( $size={size} $type={computedStatus} $surfaceColor={surfaceColor} - aria-label={statusLabel} + aria-label={ariaLabel} as="figcaption" > {computedStatus === 'active' ? ( diff --git a/packages/chrome/src/styled/body/StyledMain.tsx b/packages/chrome/src/styled/body/StyledMain.tsx index 0b1eb5e0d3f..780bf6adcbf 100644 --- a/packages/chrome/src/styled/body/StyledMain.tsx +++ b/packages/chrome/src/styled/body/StyledMain.tsx @@ -19,7 +19,7 @@ export const StyledMain = styled.main.attrs({ background-color: ${props => getColor({ theme: props.theme, variable: 'background.default' })}; overflow: auto; - :focus { + &:focus { outline: none; } diff --git a/packages/colorpickers/src/elements/ColorPicker/ColorWell.tsx b/packages/colorpickers/src/elements/ColorPicker/ColorWell.tsx index e6a0209cf15..3b03a99967e 100644 --- a/packages/colorpickers/src/elements/ColorPicker/ColorWell.tsx +++ b/packages/colorpickers/src/elements/ColorPicker/ColorWell.tsx @@ -97,8 +97,8 @@ export const ColorWell: React.FC = React.memo( onMouseDown={handleMouseDown} > ); diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledColorWellThumb.ts b/packages/colorpickers/src/styled/ColorPicker/StyledColorWellThumb.ts index 9d4abe76479..e93f42a08b6 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledColorWellThumb.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledColorWellThumb.ts @@ -12,8 +12,8 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming' const COMPONENT_ID = 'colorpickers.colorpicker_colorwell_thumb'; interface IStyledSaturationPointerProps { - top: number; - left: number; + $top: number; + $left: number; } const colorStyles = ({ theme }: ThemeProps) => { @@ -45,8 +45,8 @@ export const StyledColorWellThumb = styled.div.attrs` position: absolute; diff --git a/packages/colorpickers/src/styled/ColorPicker/StyledHexField.ts b/packages/colorpickers/src/styled/ColorPicker/StyledHexField.ts index 6f3b052b9cb..b177ac78d4c 100644 --- a/packages/colorpickers/src/styled/ColorPicker/StyledHexField.ts +++ b/packages/colorpickers/src/styled/ColorPicker/StyledHexField.ts @@ -17,7 +17,7 @@ const COMPONENT_ID = 'colorpickers.colorpicker_hex_field'; export const StyledHexField = styled(Field as unknown as 'div').attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION, - spellcheck: false + spellCheck: false })` display: flex; flex-basis: 0; /* [1] */ diff --git a/packages/datepickers/src/styled/StyledHeaderPaddle.ts b/packages/datepickers/src/styled/StyledHeaderPaddle.ts index 9430a8118a8..7eaaa8147dc 100644 --- a/packages/datepickers/src/styled/StyledHeaderPaddle.ts +++ b/packages/datepickers/src/styled/StyledHeaderPaddle.ts @@ -56,12 +56,12 @@ const colorStyles = ({ theme }: ThemeProps) => { return css` color: ${foreground}; - :hover { + &:hover { background-color: ${backgroundHover}; color: ${foregroundHover}; } - :active { + &:active { background-color: ${backgroundActive}; color: ${foregroundActive}; } diff --git a/packages/dropdowns.legacy/src/elements/Autocomplete/Autocomplete.tsx b/packages/dropdowns.legacy/src/elements/Autocomplete/Autocomplete.tsx index 35bfcf4c241..540225c02c5 100644 --- a/packages/dropdowns.legacy/src/elements/Autocomplete/Autocomplete.tsx +++ b/packages/dropdowns.legacy/src/elements/Autocomplete/Autocomplete.tsx @@ -111,7 +111,7 @@ export const Autocomplete = forwardRef( {!isOpen && {children}} { setIsFocused(true); diff --git a/packages/dropdowns.legacy/src/elements/Menu/Items/HeaderIcon.tsx b/packages/dropdowns.legacy/src/elements/Menu/Items/HeaderIcon.tsx index 8e20bb1d963..f3a13aa5e3c 100644 --- a/packages/dropdowns.legacy/src/elements/Menu/Items/HeaderIcon.tsx +++ b/packages/dropdowns.legacy/src/elements/Menu/Items/HeaderIcon.tsx @@ -7,16 +7,13 @@ import React, { HTMLAttributes } from 'react'; import { StyledHeaderIcon } from '../../../styled'; -import useMenuContext from '../../../utils/useMenuContext'; /** * @extends HTMLAttributes */ export const HeaderIcon = React.forwardRef>( (props, ref) => { - const { isCompact } = useMenuContext(); - - return ; + return ; } ); diff --git a/packages/dropdowns.legacy/src/elements/Multiselect/Multiselect.tsx b/packages/dropdowns.legacy/src/elements/Multiselect/Multiselect.tsx index 6155e16ea34..6df7a437f41 100644 --- a/packages/dropdowns.legacy/src/elements/Multiselect/Multiselect.tsx +++ b/packages/dropdowns.legacy/src/elements/Multiselect/Multiselect.tsx @@ -373,7 +373,7 @@ export const Multiselect = React.forwardRef( } } }, - isVisible: isFocused || inputValue || selectedItems.length === 0, + $isVisible: isFocused || inputValue || selectedItems.length === 0, isCompact: props.isCompact, role: 'combobox', ref: mergeRefs([inputRef, externalInputRef]), diff --git a/packages/dropdowns.legacy/src/elements/Select/Select.tsx b/packages/dropdowns.legacy/src/elements/Select/Select.tsx index 95bb32aabc4..6ef0b77b465 100644 --- a/packages/dropdowns.legacy/src/elements/Select/Select.tsx +++ b/packages/dropdowns.legacy/src/elements/Select/Select.tsx @@ -220,7 +220,7 @@ export const Select = React.forwardRef( ` +})` display: flex; position: absolute; top: 0; diff --git a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectInput.ts b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectInput.ts index 16b131ff103..fe56bdb0e2d 100644 --- a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectInput.ts +++ b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectInput.ts @@ -13,22 +13,26 @@ const COMPONENT_ID = 'dropdowns.multiselect_input'; interface IStyledMultiselectInputProps { isCompact: boolean; - isVisible: boolean; + $isVisible: boolean; } -const visibleStyling = (props: IStyledMultiselectInputProps & ThemeProps) => { - const margin = props.isVisible ? `${props.theme.space.base / 2}px` : 0; - const minWidth = props.isVisible ? `${props.theme.space.base * 15}px` : 0; +const visibleStyling = ({ + $isVisible, + isCompact, + theme +}: IStyledMultiselectInputProps & ThemeProps) => { + const margin = $isVisible ? `${theme.space.base / 2}px` : 0; + const minWidth = $isVisible ? `${theme.space.base * 15}px` : 0; let height = '0'; - if (props.isVisible) { - height = `${props.theme.space.base * (props.isCompact ? 5 : 8)}px`; + if ($isVisible) { + height = `${theme.space.base * (isCompact ? 5 : 8)}px`; } return css` - opacity: ${!props.isVisible && 0}; + opacity: ${!$isVisible && 0}; margin: ${margin}; - width: ${!props.isVisible && 0}; + width: ${!$isVisible && 0}; min-width: ${minWidth}; height: ${height}; `; diff --git a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts index 31c43d53327..c0ebf390f8d 100644 --- a/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts +++ b/packages/dropdowns.legacy/src/styled/multiselect/StyledMultiselectMoreAnchor.ts @@ -34,7 +34,7 @@ export const StyledMultiselectMoreAnchor = styled.div.attrs({ variable: props.$isDisabled ? 'foreground.disabled' : 'foreground.primary' })}; - :hover { + &:hover { text-decoration: ${props => !props.$isDisabled && 'underline'}; } diff --git a/packages/dropdowns.legacy/src/styled/select/StyledInput.ts b/packages/dropdowns.legacy/src/styled/select/StyledInput.ts index 4318c0842b6..fa637d1ee42 100644 --- a/packages/dropdowns.legacy/src/styled/select/StyledInput.ts +++ b/packages/dropdowns.legacy/src/styled/select/StyledInput.ts @@ -23,7 +23,7 @@ const hiddenStyling = css` `; export interface IStyledInputProps { - isHidden?: boolean; + $isHidden?: boolean; } export const StyledInput = styled(Input).attrs({ @@ -31,7 +31,7 @@ export const StyledInput = styled(Input).attrs({ 'data-garden-version': PACKAGE_VERSION, isBare: true })` - ${props => props.isHidden && hiddenStyling}; + ${props => props.$isHidden && hiddenStyling}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/dropdowns/src/elements/combobox/Option.tsx b/packages/dropdowns/src/elements/combobox/Option.tsx index 3a7703ffeef..8d83d7b4d4f 100644 --- a/packages/dropdowns/src/elements/combobox/Option.tsx +++ b/packages/dropdowns/src/elements/combobox/Option.tsx @@ -25,7 +25,22 @@ import { OptionMeta } from './OptionMeta'; import { toOption } from './utils'; const OptionComponent = forwardRef( - ({ children, icon, isDisabled, isHidden, isSelected, label, type, value, ...props }, ref) => { + ( + { + children, + icon, + isDisabled, + isHidden, + isSelected, + label, + type, + value, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + tagProps, + ...props + }, + ref + ) => { const contextValue = useMemo(() => ({ isDisabled, type }), [isDisabled, type]); const { activeValue, getOptionProps, isCompact } = useComboboxContext(); const isActive = value === activeValue; diff --git a/packages/forms/src/elements/common/Message.tsx b/packages/forms/src/elements/common/Message.tsx index 4bf721df06d..68918d9e8ce 100644 --- a/packages/forms/src/elements/common/Message.tsx +++ b/packages/forms/src/elements/common/Message.tsx @@ -54,7 +54,7 @@ export const Message = React.forwardRef( MessageComponent = StyledMessage; } - let combinedProps = { $validation: validation, validationLabel, ...other }; + let combinedProps = { $validation: validation, $validationLabel: validationLabel, ...other }; if (getMessageProps) { combinedProps = getMessageProps(combinedProps); @@ -63,7 +63,7 @@ export const Message = React.forwardRef( const ariaLabel = useText( Message, combinedProps, - 'validationLabel', + '$validationLabel', validation as string, validation !== undefined ); diff --git a/packages/grid/src/elements/Col.tsx b/packages/grid/src/elements/Col.tsx index a6fbcfa1b11..a86e036f62f 100644 --- a/packages/grid/src/elements/Col.tsx +++ b/packages/grid/src/elements/Col.tsx @@ -16,20 +16,86 @@ import useGridContext from '../utils/useGridContext'; * * @extends HTMLAttributes */ -export const Col = React.forwardRef(({ size, ...props }, ref) => { - const { columns, gutters, debug } = useGridContext(); +export const Col = React.forwardRef( + ( + { + alignSelf, + alignSelfLg, + alignSelfMd, + alignSelfSm, + alignSelfXl, + alignSelfXs, + lg, + md, + offset, + offsetLg, + offsetMd, + offsetSm, + offsetXl, + offsetXs, + order, + orderLg, + orderMd, + orderSm, + orderXl, + orderXs, + size, + sm, + textAlign, + textAlignLg, + textAlignMd, + textAlignSm, + textAlignXl, + textAlignXs, + xl, + xs, + ...other + }, + ref + ) => { + const { columns, gutters, debug } = useGridContext(); - return ( - - ); -}); + return ( + + ); + } +); Col.displayName = 'Grid.Col'; diff --git a/packages/grid/src/elements/Grid.tsx b/packages/grid/src/elements/Grid.tsx index 66a6d0a115f..ff2bac6973d 100644 --- a/packages/grid/src/elements/Grid.tsx +++ b/packages/grid/src/elements/Grid.tsx @@ -14,15 +14,12 @@ import { Row } from './Row'; import { Col } from './Col'; export const GridComponent = React.forwardRef( - ({ columns, debug, ...props }, ref) => { - const value = useMemo( - () => ({ columns, gutters: props.gutters!, debug }), - [columns, props.gutters, debug] - ); + ({ columns, gutters, debug, ...other }, ref) => { + const value = useMemo(() => ({ columns, gutters: gutters!, debug }), [columns, gutters, debug]); return ( - + ); } diff --git a/packages/grid/src/elements/Row.tsx b/packages/grid/src/elements/Row.tsx index e9c14621d84..1281abe8a01 100644 --- a/packages/grid/src/elements/Row.tsx +++ b/packages/grid/src/elements/Row.tsx @@ -16,11 +16,61 @@ import { StyledRow } from '../styled'; * * @extends HTMLAttributes */ -export const Row = React.forwardRef(({ wrap, ...props }, ref) => { - const { gutters, debug } = useGridContext(); +export const Row = React.forwardRef( + ( + { + alignItems, + alignItemsXs, + alignItemsSm, + alignItemsMd, + alignItemsLg, + alignItemsXl, + justifyContent, + justifyContentXs, + justifyContentSm, + justifyContentMd, + justifyContentLg, + justifyContentXl, + wrap, + wrapXs, + wrapSm, + wrapMd, + wrapLg, + wrapXl, + ...props + }, + ref + ) => { + const { gutters, debug } = useGridContext(); - return ; -}); + return ( + + ); + } +); Row.displayName = 'Grid.Row'; diff --git a/packages/grid/src/elements/pane/components/Splitter.tsx b/packages/grid/src/elements/pane/components/Splitter.tsx index 9e21f8d5371..7a48e8b766a 100644 --- a/packages/grid/src/elements/pane/components/Splitter.tsx +++ b/packages/grid/src/elements/pane/components/Splitter.tsx @@ -130,8 +130,8 @@ const SplitterComponent = forwardRef( )} > { }); it('renders debug styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('background-color', expect.any(String)); }); describe('Columns', () => { it('renders 12 columns by default', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('max-width', `${(1 / 12) * 100}%`); }); it('renders column', () => { [4, 8, 16, 24].forEach(columns => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('max-width', `${(1 / columns) * 100}%`); }); @@ -45,7 +45,7 @@ describe('StyledCol', () => { it('renders gutters', () => { SPACE.forEach(size => { if (size) { - const { container } = render(); + const { container } = render(); const padding = math(`${DEFAULT_THEME.space[size]} / 2`); expect(container.firstChild).toHaveStyleRule('padding-right', padding); @@ -55,7 +55,7 @@ describe('StyledCol', () => { }); it('collapses gutters', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('padding-right', '0'); expect(container.firstChild).toHaveStyleRule('padding-left', '0'); @@ -70,14 +70,14 @@ describe('StyledCol', () => { }); it('renders auto width', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('width', 'auto'); }); it('renders max-width for sizes', () => { [1, 2, 3, 5, 8].forEach(size => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('max-width', `${(size / 12) * 100}%`); }); @@ -87,7 +87,7 @@ describe('StyledCol', () => { it('renders min width according to size and breakpoint', () => { [1, 2, 3, 5, 8].forEach(size => { Object.keys(DEFAULT_THEME.breakpoints).forEach(breakpoint => { - const props = { [breakpoint]: size }; + const props = { [`$${breakpoint}`]: size }; const { container } = render(); const minWidth = (DEFAULT_THEME.breakpoints as any)[breakpoint]; @@ -103,7 +103,7 @@ describe('StyledCol', () => { describe('Align Self', () => { it('renders flex alignments', () => { ALIGN_SELF.forEach(alignSelf => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule( 'align-self', @@ -115,7 +115,7 @@ describe('StyledCol', () => { it('renders flex alignment responsively', () => { ALIGN_SELF.forEach(alignSelf => { Object.keys(DEFAULT_THEME.breakpoints).forEach(breakpoint => { - const key = `alignSelf${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; + const key = `$alignSelf${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; const props = { [key]: alignSelf }; const { container } = render(); @@ -143,7 +143,7 @@ describe('StyledCol', () => { }; TEXT_ALIGN.forEach(textAlign => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('text-align', alignments[textAlign]); }); @@ -159,7 +159,7 @@ describe('StyledCol', () => { TEXT_ALIGN.forEach(textAlign => { Object.keys(DEFAULT_THEME.breakpoints).forEach(breakpoint => { - const key = `textAlign${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; + const key = `$textAlign${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; const props = { [key]: textAlign }; const { container } = render(); @@ -174,7 +174,7 @@ describe('StyledCol', () => { it('renders RTL text alignment in RTL direction', () => { TEXT_ALIGN.forEach(textAlign => { - const { container } = renderRtl(); + const { container } = renderRtl(); const alignments = { start: 'right', @@ -191,7 +191,7 @@ describe('StyledCol', () => { describe('Offsets', () => { it('renders offsets over 12', () => { [1, 2, 3, 5, 8].forEach(offset => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('margin-left', `${(offset / 12) * 100}%`); }); @@ -199,7 +199,7 @@ describe('StyledCol', () => { it('renders offsets over 12 in RTL direction', () => { [1, 2, 3, 5, 8].forEach(offset => { - const { container } = renderRtl(); + const { container } = renderRtl(); expect(container.firstChild).toHaveStyleRule('margin-right', `${(offset / 12) * 100}%`); }); @@ -208,7 +208,7 @@ describe('StyledCol', () => { it('renders offsets over 12 responsively', () => { [1, 2, 3, 5, 8].forEach(offset => { Object.keys(DEFAULT_THEME.breakpoints).forEach(breakpoint => { - const key = `offset${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; + const key = `$offset${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; const props = { [key]: offset }; const { container } = render(); @@ -225,7 +225,7 @@ describe('StyledCol', () => { describe('Order', () => { it('renders flex orders', () => { [1, 2, 3, 5, 8].forEach(order => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule( 'order', @@ -238,7 +238,7 @@ describe('StyledCol', () => { it('renders flex orders', () => { [1, 2, 3, 5, 8].forEach(order => { Object.keys(DEFAULT_THEME.breakpoints).forEach(breakpoint => { - const key = `order${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; + const key = `$order${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; const props = { [key]: order }; const { container } = render(); @@ -257,13 +257,13 @@ describe('StyledCol', () => { }); it('renders flex order first', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('order', '-1'); }); it('renders flex order last', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('order', '13'); }); diff --git a/packages/grid/src/styled/StyledCol.ts b/packages/grid/src/styled/StyledCol.ts index ab841b2186c..cd72eefa130 100644 --- a/packages/grid/src/styled/StyledCol.ts +++ b/packages/grid/src/styled/StyledCol.ts @@ -12,11 +12,40 @@ import { AlignSelf, Breakpoint, GridNumber, IColProps, IGridProps, TextAlign } f const COMPONENT_ID = 'grid.col'; -interface IStyledColProps extends Omit, ThemeProps { - columns?: IGridProps['columns']; - gutters?: IGridProps['gutters']; - sizeAll?: IColProps['size']; - debug?: IGridProps['debug']; +interface IStyledColProps extends ThemeProps { + $columns?: IGridProps['columns']; + $gutters?: IGridProps['gutters']; + $sizeAll?: IColProps['size']; + $debug?: IGridProps['debug']; + $xs?: IColProps['xs']; + $sm?: IColProps['sm']; + $md?: IColProps['md']; + $lg?: IColProps['lg']; + $xl?: IColProps['xl']; + $alignSelf?: IColProps['alignSelf']; + $alignSelfXs?: IColProps['alignSelfXs']; + $alignSelfSm?: IColProps['alignSelfSm']; + $alignSelfMd?: IColProps['alignSelfMd']; + $alignSelfLg?: IColProps['alignSelfLg']; + $alignSelfXl?: IColProps['alignSelfXl']; + $textAlign?: IColProps['textAlign']; + $textAlignXs?: IColProps['textAlignXs']; + $textAlignSm?: IColProps['textAlignSm']; + $textAlignMd?: IColProps['textAlignMd']; + $textAlignLg?: IColProps['textAlignLg']; + $textAlignXl?: IColProps['textAlignXl']; + $offset?: IColProps['offset']; + $offsetXs?: IColProps['offsetXs']; + $offsetSm?: IColProps['offsetSm']; + $offsetMd?: IColProps['offsetMd']; + $offsetLg?: IColProps['offsetLg']; + $offsetXl?: IColProps['offsetXl']; + $order?: IColProps['order']; + $orderXs?: IColProps['orderXs']; + $orderSm?: IColProps['orderSm']; + $orderMd?: IColProps['orderMd']; + $orderLg?: IColProps['orderLg']; + $orderXl?: IColProps['orderXl']; } const colorStyles = ({ theme }: IStyledColProps) => { @@ -41,7 +70,7 @@ const flexStyles = ( order: GridNumber | undefined, props: IStyledColProps ) => { - const margin = offset && `${math(`${offset} / ${props.columns} * 100`)}%`; + const margin = offset && `${math(`${offset} / ${props.$columns} * 100`)}%`; let flexBasis; let flexGrow; let maxWidth; @@ -57,7 +86,7 @@ const flexStyles = ( maxWidth = '100%'; width = 'auto'; } else if (size !== undefined) { - flexBasis = `${math(`${size} / ${props.columns} * 100`)}%`; + flexBasis = `${math(`${size} / ${props.$columns} * 100`)}%`; flexGrow = 0; maxWidth = flexBasis; } @@ -77,7 +106,7 @@ const flexStyles = ( if (order === 'first') { flexOrder = -1; } else if (order === 'last') { - flexOrder = math(`${props.columns} + 1`); + flexOrder = math(`${props.$columns} + 1`); } else { flexOrder = order; } @@ -112,8 +141,8 @@ const mediaStyles = ( `; }; -const sizeStyles = ({ theme, gutters }: IStyledColProps) => { - const padding = gutters ? math(`${theme.space[gutters!]} / 2`) : 0; +const sizeStyles = ({ theme, $gutters }: IStyledColProps) => { + const padding = $gutters ? math(`${theme.space[$gutters!]} / 2`) : 0; return css` padding-right: ${padding}; @@ -130,72 +159,72 @@ export const StyledCol = styled.div.attrs({ ${props => flexStyles( - !props.sizeAll && (props.xs || props.sm || props.md || props.lg || props.xl) + !props.$sizeAll && (props.$xs || props.$sm || props.$md || props.$lg || props.$xl) ? undefined - : props.sizeAll || false, - props.alignSelf, - props.textAlign, - props.offset, - props.order, + : props.$sizeAll || false, + props.$alignSelf, + props.$textAlign, + props.$offset, + props.$order, props )}; ${sizeStyles}; - ${props => props.debug && colorStyles(props)}; + ${props => props.$debug && colorStyles(props)}; ${props => mediaStyles( props.theme.breakpoints.xs, - props.xs, - props.alignSelfXs, - props.textAlignXs, - props.offsetXs, - props.orderXs, + props.$xs, + props.$alignSelfXs, + props.$textAlignXs, + props.$offsetXs, + props.$orderXs, props )}; ${props => mediaStyles( props.theme.breakpoints.sm, - props.sm, - props.alignSelfSm, - props.textAlignSm, - props.offsetSm, - props.orderSm, + props.$sm, + props.$alignSelfSm, + props.$textAlignSm, + props.$offsetSm, + props.$orderSm, props )}; ${props => mediaStyles( props.theme.breakpoints.md, - props.md, - props.alignSelfMd, - props.textAlignMd, - props.offsetMd, - props.orderMd, + props.$md, + props.$alignSelfMd, + props.$textAlignMd, + props.$offsetMd, + props.$orderMd, props )}; ${props => mediaStyles( props.theme.breakpoints.lg, - props.lg, - props.alignSelfLg, - props.textAlignLg, - props.offsetLg, - props.orderLg, + props.$lg, + props.$alignSelfLg, + props.$textAlignLg, + props.$offsetLg, + props.$orderLg, props )}; ${props => mediaStyles( props.theme.breakpoints.xl, - props.xl, - props.alignSelfXl, - props.textAlignXl, - props.offsetXl, - props.orderXl, + props.$xl, + props.$alignSelfXl, + props.$textAlignXl, + props.$offsetXl, + props.$orderXl, props )}; @@ -203,6 +232,6 @@ export const StyledCol = styled.div.attrs({ `; StyledCol.defaultProps = { - columns: 12, + $columns: 12, theme: DEFAULT_THEME }; diff --git a/packages/grid/src/styled/StyledGrid.spec.tsx b/packages/grid/src/styled/StyledGrid.spec.tsx index 223bcd6c526..91dcb54a510 100644 --- a/packages/grid/src/styled/StyledGrid.spec.tsx +++ b/packages/grid/src/styled/StyledGrid.spec.tsx @@ -29,7 +29,7 @@ describe('StyledGrid', () => { }); it('renders debug styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('box-shadow', expect.any(String)); }); @@ -38,7 +38,7 @@ describe('StyledGrid', () => { it('renders gutters', () => { SPACE.forEach(size => { if (typeof size === 'string') { - const { container } = render(); + const { container } = render(); const padding = math(`${DEFAULT_THEME.space[size]} / 2`); expect(container.firstChild).toHaveStyleRule('padding-right', padding); @@ -48,7 +48,7 @@ describe('StyledGrid', () => { }); it('collapses gutters', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('padding-right', '0'); expect(container.firstChild).toHaveStyleRule('padding-left', '0'); diff --git a/packages/grid/src/styled/StyledGrid.ts b/packages/grid/src/styled/StyledGrid.ts index e4053d856f8..7a9c23517d6 100644 --- a/packages/grid/src/styled/StyledGrid.ts +++ b/packages/grid/src/styled/StyledGrid.ts @@ -12,21 +12,21 @@ import { IGridProps } from '../types'; const COMPONENT_ID = 'grid.grid'; -const colorStyles = ({ theme, debug }: IStyledGridProps) => { +const colorStyles = ({ theme, $debug }: IStyledGridProps) => { const borderColor = - debug && + $debug && getColor({ theme, hue: 'crimson', shade: 700, transparency: theme.opacity[600] }); - const borderWidth = debug && math(`${theme.borderWidths.sm} * 2`); + const borderWidth = $debug && math(`${theme.borderWidths.sm} * 2`); return css` color-scheme: only ${theme.colors.base}; /* prettier-ignore */ - box-shadow: ${debug && + box-shadow: ${$debug && ` -${borderWidth} 0 0 0 ${borderColor}, ${borderWidth} 0 0 0 ${borderColor} @@ -34,8 +34,8 @@ const colorStyles = ({ theme, debug }: IStyledGridProps) => { `; }; -const sizeStyles = ({ theme, gutters }: IStyledGridProps) => { - const padding = gutters ? math(`${theme.space[gutters!]} / 2`) : 0; +const sizeStyles = ({ theme, $gutters }: IStyledGridProps) => { + const padding = $gutters ? math(`${theme.space[$gutters!]} / 2`) : 0; return css` padding-right: ${padding}; @@ -43,7 +43,10 @@ const sizeStyles = ({ theme, gutters }: IStyledGridProps) => { `; }; -interface IStyledGridProps extends Omit, ThemeProps {} +interface IStyledGridProps extends ThemeProps { + $debug?: IGridProps['debug']; + $gutters?: IGridProps['gutters']; +} export const StyledGrid = styled.div.attrs({ 'data-garden-id': COMPONENT_ID, @@ -63,6 +66,6 @@ export const StyledGrid = styled.div.attrs({ `; StyledGrid.defaultProps = { - gutters: 'md', + $gutters: 'md', theme: DEFAULT_THEME }; diff --git a/packages/grid/src/styled/StyledRow.spec.tsx b/packages/grid/src/styled/StyledRow.spec.tsx index 7d4a45dbf4e..6afb869faab 100644 --- a/packages/grid/src/styled/StyledRow.spec.tsx +++ b/packages/grid/src/styled/StyledRow.spec.tsx @@ -21,7 +21,7 @@ describe('StyledRow', () => { }); it('renders debug styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('box-shadow', expect.any(String)); }); @@ -30,7 +30,7 @@ describe('StyledRow', () => { it('renders gutters for each size', () => { SPACE.forEach(size => { if (typeof size === 'string') { - const { container } = render(); + const { container } = render(); const margin = math(`${DEFAULT_THEME.space[size]} / 2`); expect(container.firstChild).toHaveStyleRule('margin-right', `-${margin}`); @@ -40,7 +40,7 @@ describe('StyledRow', () => { }); it('collapses gutters', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('margin-right', '-0'); expect(container.firstChild).toHaveStyleRule('margin-left', '-0'); @@ -50,7 +50,7 @@ describe('StyledRow', () => { describe('Align Items', () => { it('renders with each flex alignment position', () => { ALIGN_ITEMS.forEach(alignItems => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule( 'align-items', @@ -62,7 +62,7 @@ describe('StyledRow', () => { it('renders flex alignment responsively', () => { ALIGN_ITEMS.forEach(alignItems => { Object.keys(DEFAULT_THEME.breakpoints).forEach(breakpoint => { - const key = `alignItems${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; + const key = `$alignItems${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; const props = { [key]: alignItems }; const { container } = render(); @@ -83,7 +83,7 @@ describe('StyledRow', () => { describe('Justify Content', () => { it('renders flex justification for each value', () => { JUSTIFY_CONTENT.forEach(justifyContent => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule( 'justify-content', @@ -95,7 +95,7 @@ describe('StyledRow', () => { it('renders flex justification for each value responsively', () => { JUSTIFY_CONTENT.forEach(justifyContent => { Object.keys(DEFAULT_THEME.breakpoints).forEach(breakpoint => { - const key = `justifyContent${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; + const key = `$justifyContent${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; const props = { [key]: justifyContent }; const { container } = render(); @@ -117,7 +117,7 @@ describe('StyledRow', () => { describe('Wrap', () => { it('renders flex wrapping', () => { WRAP.forEach(wrap => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('flex-wrap', wrap); }); @@ -126,7 +126,7 @@ describe('Wrap', () => { it('renders flex wrapping responsively', () => { WRAP.forEach(wrap => { Object.keys(DEFAULT_THEME.breakpoints).forEach(breakpoint => { - const key = `wrap${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; + const key = `$wrap${breakpoint[0].toUpperCase()}${breakpoint.substring(1)}`; const props = { [key]: wrap }; const { container } = render(); diff --git a/packages/grid/src/styled/StyledRow.ts b/packages/grid/src/styled/StyledRow.ts index 470905a7c51..0bf9dddb97b 100644 --- a/packages/grid/src/styled/StyledRow.ts +++ b/packages/grid/src/styled/StyledRow.ts @@ -12,10 +12,27 @@ import { AlignItems, IGridProps, IRowProps, JustifyContent, Wrap } from '../type const COMPONENT_ID = 'grid.row'; -interface IStyledRowProps extends Omit, ThemeProps { - gutters?: IGridProps['gutters']; - wrapAll?: IRowProps['wrap']; - debug?: IGridProps['debug']; +interface IStyledRowProps extends ThemeProps { + $gutters?: IGridProps['gutters']; + $debug?: IGridProps['debug']; + $alignItems?: AlignItems; + $alignItemsXs?: AlignItems; + $alignItemsSm?: AlignItems; + $alignItemsMd?: AlignItems; + $alignItemsLg?: AlignItems; + $alignItemsXl?: AlignItems; + $justifyContent?: JustifyContent; + $justifyContentXs?: JustifyContent; + $justifyContentSm?: JustifyContent; + $justifyContentMd?: JustifyContent; + $justifyContentLg?: JustifyContent; + $justifyContentXl?: JustifyContent; + $wrapAll?: IRowProps['wrap']; + $wrapXs?: Wrap; + $wrapSm?: Wrap; + $wrapMd?: Wrap; + $wrapLg?: Wrap; + $wrapXl?: Wrap; } const colorStyles = ({ theme }: IStyledRowProps) => { @@ -73,8 +90,8 @@ const mediaStyles = ( `; }; -const sizeStyles = ({ theme, gutters }: IStyledRowProps) => { - const margin = gutters ? math(`${theme.space[gutters!]} / 2`) : 0; +const sizeStyles = ({ theme, $gutters }: IStyledRowProps) => { + const margin = $gutters ? math(`${theme.space[$gutters!]} / 2`) : 0; return css` margin-right: -${margin}; @@ -89,56 +106,56 @@ export const StyledRow = styled.div.attrs({ display: flex; box-sizing: border-box; - ${props => flexStyles(props.alignItems, props.justifyContent, props.wrapAll)} + ${props => flexStyles(props.$alignItems, props.$justifyContent, props.$wrapAll)} ${sizeStyles}; - ${props => props.debug && colorStyles(props)}; + ${props => props.$debug && colorStyles(props)}; ${props => mediaStyles( props.theme.breakpoints.xs, - props.alignItemsXs, - props.justifyContentXs, - props.wrapXs + props.$alignItemsXs, + props.$justifyContentXs, + props.$wrapXs )}; ${props => mediaStyles( props.theme.breakpoints.sm, - props.alignItemsSm, - props.justifyContentSm, - props.wrapSm + props.$alignItemsSm, + props.$justifyContentSm, + props.$wrapSm )}; ${props => mediaStyles( props.theme.breakpoints.md, - props.alignItemsMd, - props.justifyContentMd, - props.wrapMd + props.$alignItemsMd, + props.$justifyContentMd, + props.$wrapMd )}; ${props => mediaStyles( props.theme.breakpoints.lg, - props.alignItemsLg, - props.justifyContentLg, - props.wrapLg + props.$alignItemsLg, + props.$justifyContentLg, + props.$wrapLg )}; ${props => mediaStyles( props.theme.breakpoints.xl, - props.alignItemsXl, - props.justifyContentXl, - props.wrapXl + props.$alignItemsXl, + props.$justifyContentXl, + props.$wrapXl )}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; StyledRow.defaultProps = { - wrapAll: 'wrap', + $wrapAll: 'wrap', theme: DEFAULT_THEME }; diff --git a/packages/grid/src/styled/pane/StyledPaneSplitter.ts b/packages/grid/src/styled/pane/StyledPaneSplitter.ts index 0d261531c76..045bf5f4da9 100644 --- a/packages/grid/src/styled/pane/StyledPaneSplitter.ts +++ b/packages/grid/src/styled/pane/StyledPaneSplitter.ts @@ -18,8 +18,8 @@ import { Orientation } from '../../types'; const COMPONENT_ID = 'pane.splitter'; interface IStyledPaneSplitterProps { - orientation?: Orientation; - isFixed?: boolean; + $orientation?: Orientation; + $isFixed?: boolean; } const colorStyles = ({ theme }: IStyledPaneSplitterProps & ThemeProps) => { @@ -51,8 +51,8 @@ const colorStyles = ({ theme }: IStyledPaneSplitterProps & ThemeProps) => { const size = math(`${theme.shadowWidths.md} * 2`); const separatorSize = math(`${theme.borderWidths.sm} * 2`); @@ -67,7 +67,7 @@ const sizeStyles = ({ let separatorWidth; let separatorHeight; - switch (orientation) { + switch ($orientation) { case 'top': cursor = 'row-resize'; top = offset; @@ -130,7 +130,7 @@ const sizeStyles = ({ right: ${right}; bottom: ${bottom}; left: ${left}; - cursor: ${isFixed ? 'pointer' : cursor}; + cursor: ${$isFixed ? 'pointer' : cursor}; width: ${width}; height: ${height}; diff --git a/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts b/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts index 9a885b461fe..1556816e2b9 100644 --- a/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts +++ b/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts @@ -10,8 +10,8 @@ import { ChevronButton } from '@zendeskgarden/react-buttons'; import { Orientation } from '../../types'; interface IStyledSplitterButtonProps { - orientation: Orientation; - isRotated: boolean; + $orientation: Orientation; + $isRotated: boolean; } export const getSize = (theme: DefaultTheme) => theme.space.base * 6; @@ -26,18 +26,22 @@ const sizeStyles = ({ theme }: ThemeProps) => { `; }; -const transformStyles = (props: IStyledSplitterButtonProps & ThemeProps) => { +const transformStyles = ({ + $isRotated, + $orientation, + theme +}: IStyledSplitterButtonProps & ThemeProps) => { let degrees = 0; - if (props.isRotated) { - degrees = props.theme.rtl ? -180 : 180; + if ($isRotated) { + degrees = theme.rtl ? -180 : 180; } - if (props.orientation === 'end') { - degrees += props.theme.rtl ? -90 : 90; - } else if (props.orientation === 'start') { - degrees += props.theme.rtl ? 90 : -90; - } else if (props.orientation === 'bottom') { + if ($orientation === 'end') { + degrees += theme.rtl ? -90 : 90; + } else if ($orientation === 'start') { + degrees += theme.rtl ? 90 : -90; + } else if ($orientation === 'bottom') { degrees += 180; } diff --git a/packages/grid/src/styled/pane/StyledPaneSplitterButtonContainer.ts b/packages/grid/src/styled/pane/StyledPaneSplitterButtonContainer.ts index 2b8cd5031d2..555ef24b397 100644 --- a/packages/grid/src/styled/pane/StyledPaneSplitterButtonContainer.ts +++ b/packages/grid/src/styled/pane/StyledPaneSplitterButtonContainer.ts @@ -15,9 +15,9 @@ import { Orientation, PLACEMENT } from '../../types'; const COMPONENT_ID = 'pane.splitter_button_container'; interface IStyledSplitterButtonContainerProps { - orientation: Orientation; - placement: (typeof PLACEMENT)[number]; - splitterSize: number; + $orientation: Orientation; + $placement: (typeof PLACEMENT)[number]; + $splitterSize: number; } const colorStyles = ({ theme }: ThemeProps) => { @@ -36,9 +36,9 @@ const colorStyles = ({ theme }: ThemeProps) => { const positionStyles = ({ theme, - placement, - splitterSize, - orientation + $orientation, + $placement, + $splitterSize }: IStyledSplitterButtonContainerProps & ThemeProps) => { let top; let left; @@ -47,10 +47,10 @@ const positionStyles = ({ const size = getSize(theme); const inset = `-${size / 2}px`; - if (placement === 'center' || splitterSize < size * 3) { - const center = `${splitterSize / 2 - size / 2}px`; + if ($placement === 'center' || $splitterSize < size * 3) { + const center = `${$splitterSize / 2 - size / 2}px`; - switch (`${orientation}-${theme.rtl ? 'rtl' : 'ltr'}`) { + switch (`${$orientation}-${theme.rtl ? 'rtl' : 'ltr'}`) { case 'top-ltr': case 'top-rtl': top = inset; @@ -79,7 +79,7 @@ const positionStyles = ({ const offset = `${size}px`; /* istanbul ignore next */ - switch (`${orientation}-${placement}-${theme.rtl ? 'rtl' : 'ltr'}`) { + switch (`${$orientation}-${$placement}-${theme.rtl ? 'rtl' : 'ltr'}`) { case 'top-end-ltr': case 'top-end-rtl': case 'top-start-rtl': @@ -157,7 +157,7 @@ const minimumSplitterSize = (theme: DefaultTheme) => */ export const StyledPaneSplitterButtonContainer = styled.div` display: ${props => - props.splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined}; + props.$splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined}; position: absolute; /* prettier-ignore */ transition: diff --git a/packages/loaders/src/elements/Dots.tsx b/packages/loaders/src/elements/Dots.tsx index 1201de6a913..6859dd81c69 100644 --- a/packages/loaders/src/elements/Dots.tsx +++ b/packages/loaders/src/elements/Dots.tsx @@ -61,18 +61,18 @@ export const Dots = forwardRef( return ( - - - + + + ); diff --git a/packages/loaders/src/elements/Inline.tsx b/packages/loaders/src/elements/Inline.tsx index f5356bdde2a..e55fb1ce89e 100644 --- a/packages/loaders/src/elements/Inline.tsx +++ b/packages/loaders/src/elements/Inline.tsx @@ -28,8 +28,8 @@ export const Inline = forwardRef(({ size, color, .. // eslint-disable-next-line jsx-a11y/prefer-tag-over-role */ export const Progress = React.forwardRef( - ({ value, size, 'aria-label': label, ...other }, ref) => { + ({ color, value, size, 'aria-label': label, ...other }, ref) => { const percentage = Math.max(0, Math.min(100, value!)); const ariaLabel = useText(Progress, { 'aria-label': label }, 'aria-label', 'Progress'); @@ -38,12 +38,13 @@ export const Progress = React.forwardRef( aria-valuemin={0} aria-valuenow={percentage} role="progressbar" - size={size!} + $size={size!} + $color={color} ref={ref} aria-label={ariaLabel} {...other} > - + ); } diff --git a/packages/loaders/src/elements/Spinner.tsx b/packages/loaders/src/elements/Spinner.tsx index ca6ff570f33..2f07dc0a106 100644 --- a/packages/loaders/src/elements/Spinner.tsx +++ b/packages/loaders/src/elements/Spinner.tsx @@ -74,19 +74,19 @@ export const Spinner = forwardRef( return ( diff --git a/packages/loaders/src/styled/StyledDots.ts b/packages/loaders/src/styled/StyledDots.ts index a78b8fa9077..abad2ef0911 100644 --- a/packages/loaders/src/styled/StyledDots.ts +++ b/packages/loaders/src/styled/StyledDots.ts @@ -16,12 +16,12 @@ const StyledDotsCircle = styled.circle.attrs({ `; interface IStyledDotProps { - duration: number; + $duration: number; } const animationStyles = (animationName: Keyframes, props: IStyledDotProps) => { return css` - animation: ${animationName} ${props.duration}ms linear infinite; + animation: ${animationName} ${props.$duration}ms linear infinite; `; }; diff --git a/packages/loaders/src/styled/StyledInline.ts b/packages/loaders/src/styled/StyledInline.ts index 1bd8dfe934c..9543ddbc6a2 100644 --- a/packages/loaders/src/styled/StyledInline.ts +++ b/packages/loaders/src/styled/StyledInline.ts @@ -11,12 +11,12 @@ import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming' const COMPONENT_ID = 'loaders.inline'; interface IStyledInlineProps { - size: number; - color: string; + $size: number; + $color: string; } -const colorStyles = ({ theme, color }: IStyledInlineProps & ThemeProps) => { - const options = color.includes('.') ? { variable: color, theme } : { hue: color, theme }; +const colorStyles = ({ theme, $color }: IStyledInlineProps & ThemeProps) => { + const options = $color.includes('.') ? { variable: $color, theme } : { hue: $color, theme }; return css` color: ${getColor(options)}; @@ -45,8 +45,8 @@ export const StyledInline = styled.svg.attrs(props => ({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION, viewBox: '0 0 16 4', - width: props.size, - height: props.size * 0.25 + width: props.$size, + height: props.$size * 0.25 }))` ${colorStyles}; diff --git a/packages/loaders/src/styled/StyledProgress.ts b/packages/loaders/src/styled/StyledProgress.ts index 17a838730ca..b38002e3bd9 100644 --- a/packages/loaders/src/styled/StyledProgress.ts +++ b/packages/loaders/src/styled/StyledProgress.ts @@ -9,8 +9,8 @@ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; import { Size } from '../types'; -const sizeToHeight = (size: Size, theme: DefaultTheme) => { - switch (size) { +const sizeToHeight = ($size: Size, theme: DefaultTheme) => { + switch ($size) { case 'small': return theme.space.base / 2; case 'medium': @@ -20,19 +20,18 @@ const sizeToHeight = (size: Size, theme: DefaultTheme) => { } }; -const sizeToBorderRadius = (size: Size, theme: DefaultTheme) => sizeToHeight(size, theme) / 2; +const sizeToBorderRadius = ($size: Size, theme: DefaultTheme) => sizeToHeight($size, theme) / 2; interface IStyledProgressBackgroundProps { - size: Size; - borderRadius?: number; - color?: string; + $size: Size; + $color?: string; } const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background'; const colorStyles = ({ theme, - color + $color }: IStyledProgressBackgroundProps & ThemeProps) => { const backgroundColor = getColor({ theme, @@ -43,8 +42,8 @@ const colorStyles = ({ }); let options; - if (color) { - options = color.includes('.') ? { variable: color, theme } : { hue: color, theme }; + if ($color) { + options = $color.includes('.') ? { variable: $color, theme } : { hue: $color, theme }; } else { options = { variable: 'border.successEmphasis', theme }; } @@ -57,13 +56,12 @@ const colorStyles = ({ `; }; -export const StyledProgressBackground = styled.div.attrs(props => ({ +export const StyledProgressBackground = styled.div.attrs({ 'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID, - 'data-garden-version': PACKAGE_VERSION, - borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme) -}))` + 'data-garden-version': PACKAGE_VERSION +})` margin: ${props => props.theme.space.base * 2}px 0; - border-radius: ${props => props.borderRadius}px; + border-radius: ${props => sizeToBorderRadius(props.$size, props.theme)}px; ${colorStyles}; @@ -71,25 +69,21 @@ export const StyledProgressBackground = styled.div.attrs(props => ({ +export const StyledProgressIndicator = styled.div.attrs({ 'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID, - 'data-garden-version': PACKAGE_VERSION, - height: props.height || sizeToHeight(props.size, props.theme), - borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme) -}))` + 'data-garden-version': PACKAGE_VERSION +})` transition: width 0.1s ease-in-out; - border-radius: ${props => props.borderRadius}px; + border-radius: ${props => sizeToBorderRadius(props.$size, props.theme)}px; background: currentcolor; - width: ${props => props.value}%; - height: ${props => props.height}px; + width: ${props => props.$value}%; + height: ${props => sizeToHeight(props.$size, props.theme)}px; ${props => retrieveComponentStyles(PROGESS_INDICATOR_COMPONENT_ID, props)} `; diff --git a/packages/loaders/src/styled/StyledSVG.spec.tsx b/packages/loaders/src/styled/StyledSVG.spec.tsx index f981a7005e1..6b5ddb4c90a 100644 --- a/packages/loaders/src/styled/StyledSVG.spec.tsx +++ b/packages/loaders/src/styled/StyledSVG.spec.tsx @@ -15,21 +15,21 @@ type Args = ['light' | 'dark', string]; describe('StyledSVG', () => { it('applies font-size if provided', () => { const { container } = render( - + ); expect(container.firstChild).toHaveStyleRule('font-size', '12px'); }); it('defaults font-size to inherit if not provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('font-size', 'inherit'); }); it('applies color if provided', () => { const { container } = render( - + ); expect(container.firstChild).toHaveStyleRule('color', PALETTE.red[700]); @@ -40,7 +40,7 @@ describe('StyledSVG', () => { ['dark', 'inherit'] ])('applies the default color in "%s" mode if none is provided', (mode, color) => { const { container } = getRenderFn(mode)( - + ); expect(container.firstChild).toHaveStyleRule('color', color); @@ -51,11 +51,9 @@ describe('StyledSVG', () => { const height = '4em'; const { container } = render( - + ); - expect(container.firstChild).toHaveAttribute('width', width); - expect(container.firstChild).toHaveAttribute('height', height); expect(container.firstChild).toHaveAttribute('viewBox', `0 0 ${width} ${height}`); }); }); diff --git a/packages/loaders/src/styled/StyledSVG.ts b/packages/loaders/src/styled/StyledSVG.ts index 03f33f6f344..10dbf6cd281 100644 --- a/packages/loaders/src/styled/StyledSVG.ts +++ b/packages/loaders/src/styled/StyledSVG.ts @@ -9,17 +9,17 @@ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; interface IStyledSVGProps { - dataGardenId: string; - color?: string; - fontSize?: string | number; - width: number | string; - height: number | string; - containerWidth?: string; - containerHeight?: string; + 'data-garden-id': string; + $color?: string; + $fontSize?: string | number; + $width: number | string; + $height: number | string; + $containerWidth?: string; + $containerHeight?: string; } -const colorStyles = ({ theme, color = 'inherit' }: IStyledSVGProps & ThemeProps) => { - const options = color.includes('.') ? { variable: color, theme } : { hue: color, theme }; +const colorStyles = ({ theme, $color = 'inherit' }: IStyledSVGProps & ThemeProps) => { + const options = $color.includes('.') ? { variable: $color, theme } : { hue: $color, theme }; return css` color: ${getColor(options)}; @@ -29,17 +29,15 @@ const colorStyles = ({ theme, color = 'inherit' }: IStyledSVGProps & ThemeProps< export const StyledSVG = styled.svg.attrs(props => ({ 'data-garden-version': PACKAGE_VERSION, xmlns: 'http://www.w3.org/2000/svg', - width: props.width, - height: props.height, focusable: 'false', - viewBox: `0 0 ${props.width} ${props.height}`, + viewBox: `0 0 ${props.$width} ${props.$height}`, role: 'img' }))` - width: ${props => props.containerWidth || '1em'}; - height: ${props => props.containerHeight || '0.9em'}; - font-size: ${props => props.fontSize || 'inherit'}; + width: ${props => props.$containerWidth || '1em'}; + height: ${props => props.$containerHeight || '0.9em'}; + font-size: ${props => props.$fontSize || 'inherit'}; ${colorStyles}; - ${props => retrieveComponentStyles(props.dataGardenId, props)}; + ${props => retrieveComponentStyles(props['data-garden-id'], props)}; `; diff --git a/packages/loaders/src/styled/StyledSpinnerCircle.spec.tsx b/packages/loaders/src/styled/StyledSpinnerCircle.spec.tsx index 04d7c4bb5c0..96770095f5f 100644 --- a/packages/loaders/src/styled/StyledSpinnerCircle.spec.tsx +++ b/packages/loaders/src/styled/StyledSpinnerCircle.spec.tsx @@ -14,8 +14,8 @@ describe('StyledSpinnerCircle', () => { const { getByTestId } = render( diff --git a/packages/loaders/src/styled/StyledSpinnerCircle.ts b/packages/loaders/src/styled/StyledSpinnerCircle.ts index df20378c772..3b38126b797 100644 --- a/packages/loaders/src/styled/StyledSpinnerCircle.ts +++ b/packages/loaders/src/styled/StyledSpinnerCircle.ts @@ -8,8 +8,8 @@ import styled from 'styled-components'; interface IStyledSpinnerCircleProps { - dasharrayValue: number; - strokeWidthValue: number; + $dasharrayValue: number; + $strokeWidthValue: number; transform: string; } @@ -20,8 +20,8 @@ export const StyledSpinnerCircle = styled.circle.attrs` /* empty-source */ diff --git a/packages/modals/src/elements/Footer.tsx b/packages/modals/src/elements/Footer.tsx index 998ef970212..c7cd0354505 100644 --- a/packages/modals/src/elements/Footer.tsx +++ b/packages/modals/src/elements/Footer.tsx @@ -18,7 +18,7 @@ export const Footer = React.forwardRef { const { isLarge } = useModalContext(); - return ; + return ; } ); diff --git a/packages/modals/src/styled/StyledFooter.spec.tsx b/packages/modals/src/styled/StyledFooter.spec.tsx index 225b43952b4..23baa9751d0 100644 --- a/packages/modals/src/styled/StyledFooter.spec.tsx +++ b/packages/modals/src/styled/StyledFooter.spec.tsx @@ -19,7 +19,7 @@ describe('StyledFooter', () => { }); it('renders large styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule( 'border-top', diff --git a/packages/modals/src/styled/StyledFooter.ts b/packages/modals/src/styled/StyledFooter.ts index 4c4ea39081e..dff3bd2d7dd 100644 --- a/packages/modals/src/styled/StyledFooter.ts +++ b/packages/modals/src/styled/StyledFooter.ts @@ -11,7 +11,7 @@ import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming' const COMPONENT_ID = 'modals.footer'; interface IStyledFooter { - isLarge?: boolean; + $isLarge?: boolean; } export const StyledFooter = styled.div.attrs({ @@ -23,10 +23,10 @@ export const StyledFooter = styled.div.attrs({ align-items: center; justify-content: flex-end; border-top: ${props => - props.isLarge && + props.$isLarge && `${props.theme.borders.sm} ${getColor({ theme: props.theme, variable: 'border.default' })}`}; padding: ${props => - props.isLarge + props.$isLarge ? `${props.theme.space.base * 8}px ${props.theme.space.base * 10}px` : `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px ${ props.theme.space.base * 8 diff --git a/packages/notifications/src/elements/toaster/ToastSlot.tsx b/packages/notifications/src/elements/toaster/ToastSlot.tsx index 54bcbca0072..2facaf002a7 100644 --- a/packages/notifications/src/elements/toaster/ToastSlot.tsx +++ b/packages/notifications/src/elements/toaster/ToastSlot.tsx @@ -68,8 +68,8 @@ export const ToastSlot = ({ toasts, placement, zIndex, limit, ...props }: IToast return ( diff --git a/packages/notifications/src/elements/toaster/styled.ts b/packages/notifications/src/elements/toaster/styled.ts index d3a8a789760..1e6e2922b34 100644 --- a/packages/notifications/src/elements/toaster/styled.ts +++ b/packages/notifications/src/elements/toaster/styled.ts @@ -13,12 +13,12 @@ export const TRANSITION_CLASS = 'garden-toast-transition'; const DEFAULT_DURATION = '400ms'; -export const StyledFadeInTransition = styled.div<{ isHidden: boolean; placement: Placement }>` +export const StyledFadeInTransition = styled.div<{ $isHidden: boolean; placement: Placement }>` transition: opacity ${DEFAULT_DURATION} ease-in 300ms; - opacity: ${p => (p.isHidden ? '0 !important' : 1)}; + opacity: ${p => (p.$isHidden ? '0 !important' : 1)}; margin-bottom: ${p => p.theme.space.base * 2}px; - ${p => p.isHidden && hideVisually()} + ${p => p.$isHidden && hideVisually()} &.${TRANSITION_CLASS}-enter { transform: translateY( @@ -65,8 +65,8 @@ export const StyledFadeInTransition = styled.div<{ isHidden: boolean; placement: `; interface IStyledTransitionContainerProps { - toastPlacement: Placement; - toastZIndex?: number; + $toastPlacement: Placement; + $toastZIndex?: number; } const placementStyles = (props: ThemeProps & IStyledTransitionContainerProps) => { @@ -105,7 +105,7 @@ const placementStyles = (props: ThemeProps & IStyledTransitionCont bottom: ${verticalDistance}; `; - switch (props.toastPlacement) { + switch (props.$toastPlacement) { case 'top-start': if (props.theme.rtl) { return topRightStyles; @@ -142,7 +142,7 @@ const placementStyles = (props: ThemeProps & IStyledTransitionCont export const StyledTransitionContainer = styled.div` position: fixed; - z-index: ${props => props.toastZIndex}; + z-index: ${props => props.$toastZIndex}; ${placementStyles}; `; diff --git a/packages/pagination/src/styled/OffsetPagination/StyledList.ts b/packages/pagination/src/styled/OffsetPagination/StyledList.ts index 202b2cbd51a..9e3d2f0459c 100644 --- a/packages/pagination/src/styled/OffsetPagination/StyledList.ts +++ b/packages/pagination/src/styled/OffsetPagination/StyledList.ts @@ -34,7 +34,7 @@ export const StyledList = styled.ul.attrs({ ${colorStyles} - :focus { + &:focus { outline: none; } diff --git a/packages/pagination/src/styled/OffsetPagination/StyledPageBase.ts b/packages/pagination/src/styled/OffsetPagination/StyledPageBase.ts index be4ffe23dcc..29d90fe00c6 100644 --- a/packages/pagination/src/styled/OffsetPagination/StyledPageBase.ts +++ b/packages/pagination/src/styled/OffsetPagination/StyledPageBase.ts @@ -88,8 +88,9 @@ const colorStyles = ({ theme }: ThemeProps) => { background-color: ${currentActiveBackgroundColor}; } - :disabled, - [aria-disabled='true'] { + /* stylelint-disable-next-line no-descending-specificity */ + &:disabled, + &[aria-disabled='true'] { background-color: transparent; color: ${disabledColor}; } @@ -144,7 +145,7 @@ export const StyledPageBase = styled.button.attrs({ border: 0; /* [2] */ } - :disabled, + &:disabled, [aria-disabled='true'] { cursor: default; } diff --git a/packages/tables/src/elements/SortableCell.tsx b/packages/tables/src/elements/SortableCell.tsx index 5d5e182f27d..bdacedb37e4 100644 --- a/packages/tables/src/elements/SortableCell.tsx +++ b/packages/tables/src/elements/SortableCell.tsx @@ -24,7 +24,7 @@ import { */ export const SortableCell = forwardRef( ({ sort, cellProps = {}, width, children, ...sortableButtonProps }, ref) => { - const { isMinimum, isTruncated, hasOverflow } = cellProps; + const { isMinimum, isTruncated, hasOverflow, ...otherCellProps } = cellProps; let ariaSortValue = 'none'; if (sort === 'asc') { @@ -43,7 +43,7 @@ export const SortableCell = forwardRef( $isMinimum={isMinimum} $isTruncated={isTruncated} $hasOverflow={hasOverflow} - {...cellProps} + {...otherCellProps} > {children} diff --git a/packages/tags/src/elements/Tag.tsx b/packages/tags/src/elements/Tag.tsx index ba02859e9e0..1ab4504210c 100644 --- a/packages/tags/src/elements/Tag.tsx +++ b/packages/tags/src/elements/Tag.tsx @@ -12,9 +12,19 @@ import { StyledTag } from '../styled'; import { Close } from './Close'; import { Avatar } from './Avatar'; -const TagComponent = forwardRef(({ size, hue, ...otherProps }, ref) => ( - -)); +const TagComponent = forwardRef( + ({ isPill, isRound, isRegular, size, hue, ...other }, ref) => ( + + ) +); TagComponent.displayName = 'Tag'; diff --git a/packages/tags/src/styled/StyledTag.spec.tsx b/packages/tags/src/styled/StyledTag.spec.tsx index a7de1ba7059..abfe1cbf050 100644 --- a/packages/tags/src/styled/StyledTag.spec.tsx +++ b/packages/tags/src/styled/StyledTag.spec.tsx @@ -31,51 +31,51 @@ describe('StyledTag', () => { describe('Pill', () => { it('renders pill styling', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('border-radius', '100px'); }); it('renders small styling', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('min-width', '24px'); }); it('renders large styling', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('min-width', '48px'); }); }); it('renders round styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('border-radius', '50%'); }); it('renders regular weight styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('font-weight', undefined); }); describe('size', () => { it('renders small styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('height', '16px'); }); it('renders medium styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('height', '20px'); }); it('renders large styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('height', '32px'); }); @@ -94,7 +94,7 @@ describe('StyledTag', () => { it.each([['light'], ['dark']])('renders using a "grey" hue in %s mode', mode => { const renderFn = mode === 'light' ? render : renderDark; - const { container } = renderFn(); + const { container } = renderFn(); const backgroundColor = mode === 'dark' ? PALETTE.grey[300] : PALETTE.grey[700]; const foregroundColor = mode === 'dark' ? PALETTE.grey[1100] : PALETTE.white; @@ -104,7 +104,7 @@ describe('StyledTag', () => { it.each([['light'], ['dark']])('renders using a "blue" hue in %s mode', mode => { const renderFn = mode === 'light' ? render : renderDark; - const { container } = renderFn(); + const { container } = renderFn(); const backgroundColor = mode === 'dark' ? PALETTE.blue[600] : PALETTE.blue[700]; const foregroundColor = mode === 'dark' ? PALETTE.grey[1100] : PALETTE.white; @@ -114,7 +114,7 @@ describe('StyledTag', () => { it.each([['light'], ['dark']])('renders using a "red" hue in %s mode', mode => { const renderFn = mode === 'light' ? render : renderDark; - const { container } = renderFn(); + const { container } = renderFn(); const backgroundColor = mode === 'dark' ? PALETTE.red[600] : PALETTE.red[700]; const foregroundColor = mode === 'dark' ? PALETTE.grey[1100] : PALETTE.white; @@ -124,7 +124,7 @@ describe('StyledTag', () => { it.each([['light'], ['dark']])('renders using a "green" hue in %s mode', mode => { const renderFn = mode === 'light' ? render : renderDark; - const { container } = renderFn(); + const { container } = renderFn(); const backgroundColor = mode === 'dark' ? PALETTE.green[600] : PALETTE.green[700]; const foregroundColor = mode === 'dark' ? PALETTE.grey[1100] : PALETTE.white; @@ -134,7 +134,7 @@ describe('StyledTag', () => { it.each([['light'], ['dark']])('renders using a "yellow" hue in %s mode', mode => { const renderFn = mode === 'light' ? render : renderDark; - const { container } = renderFn(); + const { container } = renderFn(); const foregroundColor = mode === 'dark' ? PALETTE.grey[1100] : PALETTE.yellow[900]; expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.yellow[400]); @@ -143,7 +143,7 @@ describe('StyledTag', () => { it.each([['light'], ['dark']])('renders using a "kale" hue in %s mode', mode => { const renderFn = mode === 'light' ? render : renderDark; - const { container } = renderFn(); + const { container } = renderFn(); const backgroundColor = mode === 'dark' ? PALETTE.kale[500] : PALETTE.kale[800]; const foregroundColor = mode === 'dark' ? PALETTE.grey[1100] : PALETTE.white; @@ -153,20 +153,20 @@ describe('StyledTag', () => { it.each([['light'], ['dark']])('renders using a custom hue for %s mode', mode => { const renderFn = mode === 'light' ? render : renderDark; - const { container } = renderFn(); + const { container } = renderFn(); const backgroundColor = mode === 'dark' ? PALETTE.azure[500] : PALETTE.azure[700]; expect(container.firstChild).toHaveStyleRule('background-color', backgroundColor); }); it('renders a dark foreground on a light background', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[1100]); }); it('renders a light foreground on a dark background', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('color', PALETTE.white); }); diff --git a/packages/tags/src/styled/StyledTag.ts b/packages/tags/src/styled/StyledTag.ts index 76103f6eb7e..5de6223ad51 100644 --- a/packages/tags/src/styled/StyledTag.ts +++ b/packages/tags/src/styled/StyledTag.ts @@ -22,18 +22,26 @@ import { ITagProps } from '../types'; const COMPONENT_ID = 'tags.tag_view'; +interface IStyledTagProps extends ThemeProps { + $hue?: ITagProps['hue']; + $isPill?: ITagProps['isPill']; + $isRegular?: ITagProps['isRegular']; + $isRound?: ITagProps['isRound']; + $size?: ITagProps['size']; +} + /* * 1. Anchor element reset * 2. Tags show focus state whether performed by mouse or keyboard */ -const colorStyles = ({ theme, hue }: ITagProps & ThemeProps) => { +const colorStyles = ({ theme, $hue }: IStyledTagProps) => { let backgroundColor; let foregroundColor; - if (hue) { + if ($hue) { foregroundColor = getColor({ theme, variable: 'foreground.onEmphasis' }); - switch (hue) { + switch ($hue) { case 'grey': case 'neutralHue': backgroundColor = getColor({ @@ -84,7 +92,7 @@ const colorStyles = ({ theme, hue }: ITagProps & ThemeProps) => { const darkTheme = { ...theme, colors: { ...theme.colors, base: 'dark' } } as IGardenTheme; const variable = 'foreground.onEmphasis'; - backgroundColor = getColor({ theme, hue }); + backgroundColor = getColor({ theme, hue: $hue }); foregroundColor = readableColor( backgroundColor, getColor({ theme: darkTheme, variable }), @@ -121,7 +129,7 @@ const colorStyles = ({ theme, hue }: ITagProps & ThemeProps) => { `; }; -const sizeStyles = (props: ITagProps & ThemeProps) => { +const sizeStyles = ({ $isPill, $isRound, $size, theme }: IStyledTagProps) => { let borderRadius; let padding; let height; @@ -129,46 +137,46 @@ const sizeStyles = (props: ITagProps & ThemeProps) => { let minWidth; let avatarSize; - if (props.size === 'small') { - borderRadius = props.theme.borderRadii.sm; - padding = props.theme.space.base; - height = props.theme.space.base * 4; - fontSize = props.theme.fontSizes.xs; + if ($size === 'small') { + borderRadius = theme.borderRadii.sm; + padding = theme.space.base; + height = theme.space.base * 4; + fontSize = theme.fontSizes.xs; avatarSize = 0; - } else if (props.size === 'large') { - borderRadius = props.theme.borderRadii.md; - padding = props.theme.space.base * 3; - height = props.theme.space.base * 8; - fontSize = props.theme.fontSizes.sm; - avatarSize = props.theme.space.base * 6; + } else if ($size === 'large') { + borderRadius = theme.borderRadii.md; + padding = theme.space.base * 3; + height = theme.space.base * 8; + fontSize = theme.fontSizes.sm; + avatarSize = theme.space.base * 6; } else { - borderRadius = props.theme.borderRadii.sm; - padding = props.theme.space.base * 2; - height = props.theme.space.base * 5; - fontSize = props.theme.fontSizes.sm; - avatarSize = props.theme.space.base * 4; + borderRadius = theme.borderRadii.sm; + padding = theme.space.base * 2; + height = theme.space.base * 5; + fontSize = theme.fontSizes.sm; + avatarSize = theme.space.base * 4; } - let avatarBorderRadius = props.size === 'large' ? math(`${borderRadius} - 1`) : borderRadius; + let avatarBorderRadius = $size === 'large' ? math(`${borderRadius} - 1`) : borderRadius; const avatarMargin = (height - avatarSize) / 2; - const avatarTextMargin = props.isRound ? avatarMargin : avatarMargin * 2; + const avatarTextMargin = $isRound ? avatarMargin : avatarMargin * 2; - if (props.isRound) { + if ($isRound) { borderRadius = '50%'; padding = 0; minWidth = height; avatarBorderRadius = '50%'; - } else if (props.isPill) { + } else if ($isPill) { borderRadius = '100px'; avatarBorderRadius = '50%'; - if (props.size === 'small') { - padding = props.theme.space.base * 1.5; - minWidth = props.theme.space.base * 6; - } else if (props.size === 'large') { - minWidth = props.theme.space.base * 12; + if ($size === 'small') { + padding = theme.space.base * 1.5; + minWidth = theme.space.base * 6; + } else if ($size === 'large') { + minWidth = theme.space.base * 12; } else { - minWidth = props.theme.space.base * 7.5; + minWidth = theme.space.base * 7.5; } } @@ -186,8 +194,8 @@ const sizeStyles = (props: ITagProps & ThemeProps) => { } & ${StyledAvatar} { - margin-${props.theme.rtl ? 'right' : 'left'}: -${padding - avatarMargin}px; - margin-${props.theme.rtl ? 'left' : 'right'}: ${avatarTextMargin}px; + margin-${theme.rtl ? 'right' : 'left'}: -${padding - avatarMargin}px; + margin-${theme.rtl ? 'left' : 'right'}: ${avatarTextMargin}px; border-radius: ${avatarBorderRadius}; width: ${avatarSize}px; min-width: ${avatarSize}px; /* prevent flex shrink */ @@ -195,7 +203,7 @@ const sizeStyles = (props: ITagProps & ThemeProps) => { } & ${StyledClose} { - margin-${props.theme.rtl ? 'left' : 'right'}: -${padding}px; + margin-${theme.rtl ? 'left' : 'right'}: -${padding}px; border-radius: ${borderRadius}; width: ${height}px; height: ${height}px; @@ -203,14 +211,14 @@ const sizeStyles = (props: ITagProps & ThemeProps) => { `; }; -export const StyledTag = styled.div.attrs({ +export const StyledTag = styled.div.attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION -})` +})` display: inline-flex; flex-wrap: nowrap; align-items: center; - justify-content: ${props => props.isRound && 'center'}; + justify-content: ${props => props.$isRound && 'center'}; transition: box-shadow 0.1s ease-in-out; box-sizing: border-box; border: 0; /*