From 7fb639a63f681994d48b05c62f4d14da59f7ca06 Mon Sep 17 00:00:00 2001 From: Haider Alshamma Date: Wed, 23 Oct 2024 15:52:19 -0400 Subject: [PATCH] feat: refactor away from size to variant BREAKING CHANGE: changes NDSProvider `size` prop to `variant`. The `size` prop was originally used sparingly in some components like the Button and the Icon to resize those components. It was later extended to make all interactive components large enough to be used on a touch screen, through changing the `size` prop directly or by passing a `size` prop to the NDSProvider globally. With this change, we retain the use of the `size` prop for select components, and introduce a `variant` prop that can be passed either to individual components or the NDSProvider globally with the value of either `desktop` or `touch`. --- src/AsyncSelect/AsyncSelect.tsx | 11 +++--- src/AsyncSelect/AsyncSelectComponents.tsx | 17 +++++--- src/BrandedNavBar/BrandLogoContainer.tsx | 2 +- src/Breadcrumbs/Breadcrumbs.story.tsx | 2 +- src/Breadcrumbs/Breadcrumbs.tsx | 10 ++--- src/Breadcrumbs/BreadcrumbsListItem.tsx | 9 ++--- src/Button/Button.story.tsx | 5 +-- src/Button/Button.tsx | 42 ++++++++++++++------ src/Button/IconicButton.story.tsx | 2 +- src/Button/IconicButton.tsx | 15 ++++--- src/Checkbox/Checkbox.story.tsx | 2 +- src/Checkbox/Checkbox.tsx | 10 ++--- src/DatePicker/DatePicker.story.tsx | 2 +- src/DatePicker/DatePicker.tsx | 14 +++---- src/DatePicker/DatePickerInput.tsx | 10 ++--- src/DateRange/DateRange.story.tsx | 6 +-- src/DateRange/DateRange.tsx | 20 +++++----- src/DropdownMenu/DropdownButton.tsx | 9 ++--- src/DropdownMenu/DropdownLink.tsx | 9 ++--- src/DropdownMenu/DropdownMenu.story.tsx | 6 +-- src/DropdownMenu/DropdownMenu.tsx | 10 ++--- src/DropdownMenu/DropdownText.tsx | 7 ++-- src/Input/Input.story.tsx | 6 +-- src/Input/InputField.tsx | 26 ++++++------- src/Link/Link.story.tsx | 2 +- src/Link/Link.tsx | 13 +++---- src/NDSProvider/ComponentSizeContext.tsx | 27 ------------- src/NDSProvider/ComponentVariantContext.tsx | 25 ++++++++++++ src/NDSProvider/NDSProvider.tsx | 29 ++++++++------ src/Radio/Radio.story.tsx | 2 +- src/Radio/Radio.tsx | 11 +++--- src/RangeContainer/RangeContainer.tsx | 8 ++-- src/Select/Select.story.tsx | 2 +- src/Select/Select.tsx | 12 +++--- src/Select/SelectOption.tsx | 27 +++++++------ src/Select/customReactSelectStyles.tsx | 43 ++++++++++++--------- src/Switcher/Switch.tsx | 10 ++--- src/Switcher/Switcher.story.tsx | 11 ++++-- src/Switcher/Switcher.tsx | 12 +++--- src/Tabs/Tab.tsx | 9 ++--- src/Tabs/Tabs.story.tsx | 6 +-- src/Tabs/Tabs.tsx | 12 +++--- src/Textarea/StyledTextarea.tsx | 11 +++--- src/Textarea/Textarea.story.tsx | 11 ++++-- src/Textarea/Textarea.tsx | 8 ++-- src/TimePicker/TimePicker.story.tsx | 6 +-- src/TimePicker/TimePicker.tsx | 17 ++++---- src/TimePicker/TimePickerOption.tsx | 7 ++-- src/TimeRange/TimeRange.tsx | 14 +++---- src/Toggle/Toggle.story.tsx | 2 +- src/Toggle/Toggle.tsx | 16 +++++--- src/Tokens/Tokens.story.tsx | 2 +- src/Type/Text.tsx | 3 +- src/utils/ClickInputLabel.tsx | 10 ++--- 54 files changed, 328 insertions(+), 292 deletions(-) delete mode 100644 src/NDSProvider/ComponentSizeContext.tsx create mode 100644 src/NDSProvider/ComponentVariantContext.tsx diff --git a/src/AsyncSelect/AsyncSelect.tsx b/src/AsyncSelect/AsyncSelect.tsx index a3c268ac6..9d43d6f8f 100644 --- a/src/AsyncSelect/AsyncSelect.tsx +++ b/src/AsyncSelect/AsyncSelect.tsx @@ -11,7 +11,7 @@ import { MaybeFieldLabel } from "../FieldLabel"; import { InlineValidation } from "../Validation"; import customStyles from "../Select/customReactSelectStyles"; import { getSubset } from "../utils/subset"; -import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext"; import { SelectControl, SelectMultiValue, @@ -22,12 +22,11 @@ import { SelectMenu, SelectOption, } from "./AsyncSelectComponents"; -import { DefaultNDSThemeType } from "../theme.type"; type AsyncCustomProps> = { autocomplete?: AsyncProps["isSearchable"]; labelText?: string; - size?: ComponentSize; + variant?: ComponentVariant; requirementText?: string; helpText?: ReactNode; disabled?: AsyncProps["isDisabled"]; @@ -80,7 +79,7 @@ const AsyncSelect = forwardRef( defaultOptions, loadOptions, isClearable, - size, + variant, ...props }: AsyncSelectProps, ref: @@ -93,7 +92,7 @@ const AsyncSelect = forwardRef( const spaceProps = getSubset(props, propTypes.space); const error = !!(errorMessage || errorList); - const componentSize = useComponentSize(size); + const componentVariant = useComponentVariant(variant); return ( @@ -132,7 +131,7 @@ const AsyncSelect = forwardRef( theme={theme as any} components={{ Option: (props) => ( - + {props.children} ), diff --git a/src/AsyncSelect/AsyncSelectComponents.tsx b/src/AsyncSelect/AsyncSelectComponents.tsx index 4c8725b6c..e15495c26 100644 --- a/src/AsyncSelect/AsyncSelectComponents.tsx +++ b/src/AsyncSelect/AsyncSelectComponents.tsx @@ -9,9 +9,9 @@ import { MenuProps, MultiValueProps, } from "react-select"; -import { components, GroupBase } from "react-select"; -import { OptionProps } from "react-windowed-select"; -import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { components, type GroupBase } from "react-select"; +import type { OptionProps } from "react-windowed-select"; +import { type ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext"; import { StyledOption } from "../Select/SelectOption"; export const SelectControl = >( @@ -97,12 +97,17 @@ export const SelectMenu = >( - props: OptionProps & { size?: ComponentSize } + props: OptionProps & { variant?: ComponentVariant } ) { - const size = useComponentSize(props.size); + const variant = useComponentVariant(props.variant); return ( - + {props.children} ); diff --git a/src/BrandedNavBar/BrandLogoContainer.tsx b/src/BrandedNavBar/BrandLogoContainer.tsx index d87b9396f..05961006a 100644 --- a/src/BrandedNavBar/BrandLogoContainer.tsx +++ b/src/BrandedNavBar/BrandLogoContainer.tsx @@ -29,7 +29,7 @@ const BrandLogoContainer = ({ to={brandingLinkTo} as={brandingLinkComponent} underline={false} - size="medium" + variant="desktop" style={{ display: "block" }} > {logoSrc && } diff --git a/src/Breadcrumbs/Breadcrumbs.story.tsx b/src/Breadcrumbs/Breadcrumbs.story.tsx index 5d6f9555c..3e8a29aae 100644 --- a/src/Breadcrumbs/Breadcrumbs.story.tsx +++ b/src/Breadcrumbs/Breadcrumbs.story.tsx @@ -24,7 +24,7 @@ export const _Breadcrumbs = () => ( const DashedBreadcrumbs = dashed(Breadcrumbs); -export const WithDifferentSizes = () => ( +export const WithDifferentVariants = () => ( Default diff --git a/src/Breadcrumbs/Breadcrumbs.tsx b/src/Breadcrumbs/Breadcrumbs.tsx index d0bb4cb3e..a75f4e1ae 100644 --- a/src/Breadcrumbs/Breadcrumbs.tsx +++ b/src/Breadcrumbs/Breadcrumbs.tsx @@ -2,7 +2,7 @@ import React, { isValidElement } from "react"; import { Flex } from "../Flex"; import { Icon } from "../Icon"; import { FlexProps } from "../Flex/Flex"; -import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext"; import BreadcrumbsList from "./BreadcrumbsList"; import { BreadcrumbsListItem, BreadcrumbsListSeparator } from "./BreadcrumbsListItem"; @@ -17,16 +17,16 @@ const insertSeparators = (items: JSX.Element[]) => { }, []); }; -type BreadcrumbsProps = Omit & { size?: ComponentSize }; +type BreadcrumbsProps = FlexProps & { variant?: ComponentVariant }; -const Breadcrumbs = ({ size, as = "nav", children, ...props }: BreadcrumbsProps) => { - const componentSize = useComponentSize(size); +const Breadcrumbs = ({ variant, as = "nav", children, ...props }: BreadcrumbsProps) => { + const componentVariant = useComponentVariant(variant); const allItems = React.Children.map(children, (child, index) => { if (!isValidElement(child)) return null; return ( - + {child} ); diff --git a/src/Breadcrumbs/BreadcrumbsListItem.tsx b/src/Breadcrumbs/BreadcrumbsListItem.tsx index 313071a36..8a734290a 100644 --- a/src/Breadcrumbs/BreadcrumbsListItem.tsx +++ b/src/Breadcrumbs/BreadcrumbsListItem.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; import { space, color, flexbox, layout, variant } from "styled-system"; -import { ComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant } from "../NDSProvider/ComponentVariantContext"; export const BreadcrumbsListSeparator = styled.li( ({ theme }) => ({ @@ -22,7 +22,7 @@ export const BreadcrumbsListSeparator = styled.li( flexbox ); -export const BreadcrumbsListItem = styled.li<{ size: ComponentSize }>( +export const BreadcrumbsListItem = styled.li<{ variant: ComponentVariant }>( ({ theme }) => ({ margin: 0, listStyle: "none", @@ -42,16 +42,15 @@ export const BreadcrumbsListItem = styled.li<{ size: ComponentSize }>( }, }), variant({ - prop: "size", variants: { - large: { + touch: { "a, p": { py: "x2", px: "x0", fontSize: "medium", }, }, - medium: { + desktop: { "a, p": { py: "0", px: "0", diff --git a/src/Button/Button.story.tsx b/src/Button/Button.story.tsx index 25268dbc1..b8b1c6805 100644 --- a/src/Button/Button.story.tsx +++ b/src/Button/Button.story.tsx @@ -25,24 +25,21 @@ _QuietButton.story = { name: "QuietButton", }; -export const WithDifferentSizes = () => ( +export const WithDifferentVariants = () => ( - Create project Create project - Create project Create project Create project - Create project ); diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index d4da78bcc..86bb54058 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -3,17 +3,20 @@ import styled, { useTheme } from "styled-components"; import { space, SpaceProps, variant } from "styled-system"; import { Icon } from "../Icon"; import { DefaultNDSThemeType } from "../theme.type"; -import { useComponentSize, ComponentSize as ContextComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { + useComponentVariant, + ComponentVariant as ContextComponentSize, + ComponentVariant, +} from "../NDSProvider/ComponentVariantContext"; import { subPx } from "../utils"; -type ComponentSize = "small" | "medium" | "large"; - export type ButtonProps = SpaceProps & React.ComponentPropsWithRef<"button"> & { className?: string; icon?: any; iconSide?: "left" | "right"; - size?: ComponentSize; + size?: "small" | "medium"; + variant?: ComponentVariant; fullWidth?: boolean; asLink?: boolean; children?: React.ReactNode; @@ -71,30 +74,45 @@ const WrapperButton = styled.button( padding: `${subPx(theme.space.half)} ${theme.space.x1}`, }, - large: { + medium: { fontSize: "medium", - padding: `${subPx(theme.space.x2)} ${theme.space.x3}`, + padding: `${subPx(theme.space.x1)} ${theme.space.x2}`, }, - - medium: { + }, + }), + ({ theme }) => + variant({ + variants: { + desktop: { fontSize: "medium", padding: `${subPx(theme.space.x1)} ${theme.space.x2}`, }, + touch: { + fontSize: "medium", + padding: `${subPx(theme.space.x2)} ${theme.space.x3}`, + }, }, }), space ); -const Button: React.FC> = React.forwardRef( - ({ children, iconSide = "right", icon, className, asLink, size, ...props }: ButtonProps, ref) => { +const Button = React.forwardRef( + ({ children, iconSide = "right", icon, className, asLink, variant, size, ...props }: ButtonProps, ref) => { const { lineHeights: { smallTextCompressed }, } = useTheme(); - const componentSize = useComponentSize(size as ContextComponentSize); + const componentVariant = useComponentVariant(variant as ContextComponentSize); return ( - + {icon && iconSide === "left" && } {children} {icon && iconSide === "right" && } diff --git a/src/Button/IconicButton.story.tsx b/src/Button/IconicButton.story.tsx index 8bb363973..84f1b6bfd 100644 --- a/src/Button/IconicButton.story.tsx +++ b/src/Button/IconicButton.story.tsx @@ -127,7 +127,7 @@ export const WithACustomFontSize = () => ( const DashedIconicButton = dashed(IconicButton); -export const WithDifferentSizes = () => ( +export const WithDifferentVariants = () => ( Default size diff --git a/src/Button/IconicButton.tsx b/src/Button/IconicButton.tsx index 8dfbbd200..33dd7feb2 100644 --- a/src/Button/IconicButton.tsx +++ b/src/Button/IconicButton.tsx @@ -7,10 +7,10 @@ import icons from "@nulogy/icons"; import { Icon } from "../Icon"; import { Text } from "../Type"; import { DefaultNDSThemeType } from "../theme.type"; -import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext"; interface BaseProps { - size?: ComponentSize; + variant?: ComponentVariant; color?: string; labelHidden?: boolean; icon?: string; @@ -103,13 +103,12 @@ const WrapperButton = styled.button( paddingRight: theme.space.none, }), variant({ - prop: "size", variants: { - large: { + touch: { py: "x1", px: "none", }, - medium: { + desktop: { py: "half", px: "none", }, @@ -130,12 +129,12 @@ const IconicButton = React.forwardRef( iconSize = "x3", fontSize, tooltip, - size, + variant, ...props }, forwardedRef ) => { - const componentSize = useComponentSize(size); + const componentVariant = useComponentVariant(variant); return ( ( aria-label={props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : undefined} className={className} hoverBackgroundColor={hoverBackgroundColor} - size={componentSize} + variant={componentVariant} {...props} > diff --git a/src/Checkbox/Checkbox.story.tsx b/src/Checkbox/Checkbox.story.tsx index 6c77e45aa..abc1a53fe 100644 --- a/src/Checkbox/Checkbox.story.tsx +++ b/src/Checkbox/Checkbox.story.tsx @@ -100,7 +100,7 @@ SetToRequired.story = { const DashedCheckbox = dashed(Checkbox); -export const WithDifferentSizes = () => ( +export const WithDifferentVariants = () => ( diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx index b92761c28..3062f004c 100644 --- a/src/Checkbox/Checkbox.tsx +++ b/src/Checkbox/Checkbox.tsx @@ -8,7 +8,7 @@ import { ClickInputLabel } from "../utils"; import { getSubset, omitSubset } from "../utils/subset"; import { DefaultNDSThemeType } from "../theme.type"; import { addStyledProps } from "../StyledProps"; -import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext"; type NativeInputProps = Omit, "size">; @@ -16,7 +16,7 @@ type CheckboxProps = NativeInputProps & SpaceProps & { children?: React.ReactNode; htmlSize?: number; - size?: ComponentSize; + variant?: ComponentVariant; labelText?: string; checked?: boolean; defaultChecked?: boolean; @@ -131,15 +131,15 @@ const CheckboxInput = styled.input((props) => ({ type Ref = HTMLInputElement; const Checkbox = forwardRef((props, ref) => { - const { size, className, labelText, disabled, checked, required, error, indeterminate } = props; + const { variant, className, labelText, disabled, checked, required, error, indeterminate } = props; - const componentSize = useComponentSize(size); + const componentVariant = useComponentVariant(variant); const spaceProps = getSubset(props, propTypes.space); const restProps = omitSubset(props, propTypes.space); return ( - + ( +export const WithDifferentVariants = () => ( { - size?: ComponentSize; + variant?: ComponentVariant; onChange?: (date: Date) => void; onBlur?: (event: React.FocusEvent) => void; onFocus?: (event: React.FocusEvent) => void; @@ -42,7 +42,7 @@ const DatePicker = forwardRef( ( { dateFormat = DEFAULT_DATE_FORMAT, - size, + variant, errorMessage, errorList, inputProps, @@ -63,7 +63,7 @@ const DatePicker = forwardRef( const [selectedDate, setSelectedDate] = useState(selected); const [ref, setRef] = useState(null); - const componentSize = useComponentSize(size); + const componentVariant = useComponentVariant(variant); useEffect(() => { registerDatePickerLocales(); @@ -118,7 +118,7 @@ const DatePicker = forwardRef( const customInputProps = { ...InputFieldDefaultProps, - inputWidth: componentSize === "large" ? "240px" : "184px", + inputWidth: componentVariant === "touch" ? "240px" : "184px", error: !!(errorMessage || errorList), ...inputProps, placeholder: @@ -128,7 +128,7 @@ const DatePicker = forwardRef( const customInput = ( , "size"> & { - size?: ComponentSize; +type DatePickerInputProps = React.ComponentPropsWithRef<"input"> & { + variant?: ComponentVariant; dateFormat?: string; inputProps?: InputProps; onInputChange?: (e: React.ChangeEvent) => void; @@ -30,7 +30,7 @@ const DatePickerInput = forwardRef( onUpKeyPress, onDownKeyPress, onEnterKeyPress, - size, + variant, "aria-label": ariaLabel, }, ref @@ -65,7 +65,7 @@ const DatePickerInput = forwardRef( onBlur={onBlur} onFocus={onFocus} ref={ref} - size={size} + variant={variant} aria-label={ariaLabel || t("select a date")} autoComplete="off" value={value} diff --git a/src/DateRange/DateRange.story.tsx b/src/DateRange/DateRange.story.tsx index 2a4d632fd..44ea5713d 100644 --- a/src/DateRange/DateRange.story.tsx +++ b/src/DateRange/DateRange.story.tsx @@ -17,7 +17,7 @@ export const Default = () => ( /> ); -export const WithDifferentSizes = () => ( +export const WithDifferentVariants = () => ( ( /> ( /> > = forwardRef( +const DateRange = forwardRef( ( { dateFormat, @@ -80,7 +80,7 @@ const DateRange: React.FC> = forwardRef( locale, endTimeProps, startTimeProps, - size, + variant, ...props }, ref @@ -96,7 +96,7 @@ const DateRange: React.FC> = forwardRef( const [rangeError, setRangeError] = useState(); const { t } = useTranslation(); - const componentSize = useComponentSize(size); + const componentVariant = useComponentVariant(variant); useImperativeHandle(ref, () => ({ dateRef1: { @@ -183,7 +183,7 @@ const DateRange: React.FC> = forwardRef( const startDateInput = ( <> > = forwardRef( /> {showTimes && ( > = forwardRef( <> {showTimes && ( > = forwardRef( /> )} > = forwardRef( <> & StyledProps & { - size?: ComponentSize; + variant?: ComponentVariant; color?: string; theme?: DefaultNDSThemeType; hoverColor?: string; @@ -47,15 +47,14 @@ const DropdownButton = styled.button( }, }), variant({ - prop: "size", variants: { - large: { + touch: { pt: "x2", pr: "x2", pb: "x2", pl: "12px", }, - medium: { + desktop: { pt: "x1", pr: "x2", pb: "x1", diff --git a/src/DropdownMenu/DropdownLink.tsx b/src/DropdownMenu/DropdownLink.tsx index f2671c3ea..174c32f37 100644 --- a/src/DropdownMenu/DropdownLink.tsx +++ b/src/DropdownMenu/DropdownLink.tsx @@ -2,11 +2,11 @@ import React from "react"; import styled from "styled-components"; import { variant } from "styled-system"; import { addStyledProps, StyledProps } from "../StyledProps"; -import { ComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant } from "../NDSProvider/ComponentVariantContext"; interface Props extends React.ComponentPropsWithRef<"a">, StyledProps { disabled?: boolean; - size?: ComponentSize; + variant?: ComponentVariant; color?: string; hoverColor?: string; bgHoverColor?: string; @@ -51,16 +51,15 @@ const DropdownLink = styled.a.withConfig({ paddingLeft: "12px", }), variant({ - prop: "size", variants: { - large: { + touch: { pt: "x2", pr: "x2", pb: "x2", pl: "12px", }, - medium: { + desktop: { pt: "x1", pr: "x2", pb: "x1", diff --git a/src/DropdownMenu/DropdownMenu.story.tsx b/src/DropdownMenu/DropdownMenu.story.tsx index f09f17cdd..665b8e082 100644 --- a/src/DropdownMenu/DropdownMenu.story.tsx +++ b/src/DropdownMenu/DropdownMenu.story.tsx @@ -66,7 +66,7 @@ WithCustomColors.story = { name: "with custom colors", }; -export const WithDifferentSizes = () => ( +export const WithDifferentVariants = () => ( Default menu} @@ -83,7 +83,7 @@ export const WithDifferentSizes = () => ( defaultOpen openAriaLabel="open dropdown" closeAriaLabel="close dropdown" - size="medium" + variant="desktop" > Dropdown Link {}}>Dropdown Button @@ -94,7 +94,7 @@ export const WithDifferentSizes = () => ( defaultOpen openAriaLabel="open dropdown" closeAriaLabel="close dropdown" - size="large" + variant="touch" > Dropdown Link {}}>Dropdown Button diff --git a/src/DropdownMenu/DropdownMenu.tsx b/src/DropdownMenu/DropdownMenu.tsx index b56d37807..e8a121c0f 100644 --- a/src/DropdownMenu/DropdownMenu.tsx +++ b/src/DropdownMenu/DropdownMenu.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from "react"; import propTypes from "@styled-system/prop-types"; import { IconicButton } from "../Button"; -import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext"; import { Popper } from "../Popper"; import { getSubset, omitSubset } from "../utils/subset"; import { StyledProps } from "../StyledProps"; @@ -10,7 +10,7 @@ import DropdownMenuContainer from "./DropdownMenuContainer"; type DropdownMenuProps = { children?: React.ReactNode; className?: string; - size?: ComponentSize; + variant?: ComponentVariant; id?: string; disabled?: boolean; trigger?: () => React.FunctionComponentElement; @@ -53,7 +53,7 @@ const DropdownMenu = React.forwardRef, DropdownMenuProps>( trigger = () => , children, showArrow = true, - size, + variant, disabled, defaultOpen, backgroundColor = "white", @@ -76,7 +76,7 @@ const DropdownMenu = React.forwardRef, DropdownMenuProps>( return transformPropsToModifiers({ boundariesElement }); }, [boundariesElement]); - const componentSize = useComponentSize(size); + const componentVariant = useComponentVariant(variant); return ( , DropdownMenuProps>( ? children : React.Children.map(children, (child) => { if (React.isValidElement(child)) { - return React.cloneElement(child, { size: componentSize, ...child.props }, child.props.children); + return React.cloneElement(child, { size: componentVariant, ...child.props }, child.props.children); } })} diff --git a/src/DropdownMenu/DropdownText.tsx b/src/DropdownMenu/DropdownText.tsx index 669d2e50a..223253190 100644 --- a/src/DropdownMenu/DropdownText.tsx +++ b/src/DropdownMenu/DropdownText.tsx @@ -1,11 +1,10 @@ -import React from "react"; import styled, { CSSObject } from "styled-components"; import { Text } from "../Type"; -import { TextProps } from "../Type/Text"; +import type { TextProps } from "../Type"; import { addStyledProps } from "../StyledProps"; -const DropdownText: React.FC> = styled(Text)( - ({ theme }: TextProps): CSSObject => ({ +const DropdownText = styled(Text)( + ({ theme }): CSSObject => ({ color: theme.colors.darkGrey, fontWeight: theme.fontWeights.medium, display: "block", diff --git a/src/Input/Input.story.tsx b/src/Input/Input.story.tsx index 24924ffca..1911c5565 100644 --- a/src/Input/Input.story.tsx +++ b/src/Input/Input.story.tsx @@ -27,7 +27,7 @@ WithAllProps.story = { name: "with all props", }; -export const WithDifferentSizes = () => ( +export const WithDifferentVariants = () => ( ( requirementText="Required" onChange={action("value changed")} onBlur={action("blurred")} - size="medium" + variant="desktop" required /> ( requirementText="Required" onChange={action("value changed")} onBlur={action("blurred")} - size="large" + variant="touch" required /> diff --git a/src/Input/InputField.tsx b/src/Input/InputField.tsx index 328063132..73c99ebd8 100644 --- a/src/Input/InputField.tsx +++ b/src/Input/InputField.tsx @@ -8,7 +8,7 @@ import { Flex } from "../Flex"; import { subPx } from "../utils"; import { MaybeFieldLabel } from "../FieldLabel"; import type { DefaultNDSThemeType } from "../theme.type"; -import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext"; import Prefix from "./Prefix"; import Suffix from "./Suffix"; @@ -16,7 +16,7 @@ type NativeInputProps = Omit, "size">; export interface InputFieldProps extends NativeInputProps { htmlSize?: number; - size?: ComponentSize; + variant?: ComponentVariant; icon?: string; error?: boolean; labelText?: string; @@ -49,13 +49,13 @@ export const InputField = forwardRef( suffixWidth, inputWidth, iconSize, - size, + variant, htmlSize, ...props }, ref ) => { - const componentSize = useComponentSize(size); + const componentVariant = useComponentVariant(variant); return ( @@ -69,11 +69,11 @@ export const InputField = forwardRef( error={error} ref={ref} size={htmlSize} - scale={componentSize} + variant={componentVariant} inputWidth={inputWidth} {...props} /> - {icon && } + {icon && } @@ -82,7 +82,7 @@ export const InputField = forwardRef( } ); -type StyledInputProps = Omit & { scale: ComponentSize }; +type StyledInputProps = Omit & { variant: ComponentVariant }; const StyledInput = styled.input( ({ theme, inputWidth }): CSSObject => ({ @@ -112,12 +112,11 @@ const StyledInput = styled.input( }), ({ theme }) => variant({ - prop: "scale", variants: { - large: { + touch: { padding: `${subPx(theme.space.x2)}`, }, - medium: { + desktop: { padding: `${subPx(theme.space.x1)}`, }, }, @@ -126,7 +125,7 @@ const StyledInput = styled.input( space ); -const StyledInputIcon = styled(Icon)<{ scale: ComponentSize }>( +const StyledInputIcon = styled(Icon)<{ variant: ComponentVariant }>( ({ theme }) => ({ position: "absolute", right: theme.space.x1, @@ -136,12 +135,11 @@ const StyledInputIcon = styled(Icon)<{ scale: ComponentSize }>( pointerEvents: "none", }), variant({ - prop: "scale", variants: { - large: { + touch: { right: "x2", }, - medium: { + desktop: { right: "x1", }, }, diff --git a/src/Link/Link.story.tsx b/src/Link/Link.story.tsx index 659deeb76..71cfcdbf2 100644 --- a/src/Link/Link.story.tsx +++ b/src/Link/Link.story.tsx @@ -52,7 +52,7 @@ export const WithADifferentFontSize = () => ( const DashedLink = dashed(Link); -export const WithDifferentSizes = () => ( +export const WithDifferentVariants = () => ( Default Link diff --git a/src/Link/Link.tsx b/src/Link/Link.tsx index b32ac798f..9f676091a 100644 --- a/src/Link/Link.tsx +++ b/src/Link/Link.tsx @@ -5,13 +5,13 @@ import { variant } from "styled-system"; import React from "react"; import { DefaultNDSThemeType } from "../theme.type"; import { addStyledProps, StyledProps } from "../StyledProps"; -import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext"; export type LinkProps = React.ComponentPropsWithRef<"a"> & Partial & { underline?: boolean; hover?: string; - size?: ComponentSize; + variant?: ComponentVariant; to?: string; as?: React.ElementType | string; }; @@ -48,9 +48,8 @@ const StyledLink = styled.a( }, }), variant({ - prop: "size", variants: { - large: { + touch: { py: "x2", px: "0", }, @@ -60,10 +59,10 @@ const StyledLink = styled.a( addStyledProps ); -const Link = React.forwardRef(({ size, underline = true, ...props }, ref) => { - const componentSize = useComponentSize(size); +const Link = React.forwardRef(({ variant, underline = true, ...props }, ref) => { + const componentVariant = useComponentVariant(variant); - return ; + return ; }); export default Link; diff --git a/src/NDSProvider/ComponentSizeContext.tsx b/src/NDSProvider/ComponentSizeContext.tsx deleted file mode 100644 index cce41be0c..000000000 --- a/src/NDSProvider/ComponentSizeContext.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { createContext, useContext } from "react"; - -export type ComponentSize = "medium" | "large"; - -type ComponentSizeContextValue = { - size: ComponentSize; -}; - -export const ComponentSizeContext = createContext(undefined); - -export function useComponentSize(selectedSize?: ComponentSize) { - const context = useContext(ComponentSizeContext); - if (!context) { - throw new Error(`useComponentSize must be used within the NDSProvider`); - } - - return selectedSize ?? context.size; -} - -const ComponentSizeContextProvider: React.FC> = ({ - size, - children, -}) => { - return {children}; -}; - -export default ComponentSizeContextProvider; diff --git a/src/NDSProvider/ComponentVariantContext.tsx b/src/NDSProvider/ComponentVariantContext.tsx new file mode 100644 index 000000000..c521b3da1 --- /dev/null +++ b/src/NDSProvider/ComponentVariantContext.tsx @@ -0,0 +1,25 @@ +import React, { createContext, useContext } from "react"; + +export type ComponentVariant = "touch" | "desktop"; + +type ComponentVariantContextValue = { + variant: ComponentVariant; + children?: React.ReactNode; +}; + +export const ComponentVariantContext = createContext(undefined); + +export function useComponentVariant(selectedVariant?: ComponentVariant) { + const context = useContext(ComponentVariantContext); + if (!context) { + throw new Error(`useComponentVariant must be used within the NDSProvider`); + } + + return selectedVariant ?? context.variant; +} + +const ComponentVariantContextProvider = ({ variant, children }: ComponentVariantContextValue) => { + return {children}; +}; + +export default ComponentVariantContextProvider; diff --git a/src/NDSProvider/NDSProvider.tsx b/src/NDSProvider/NDSProvider.tsx index 272c4f906..994f16170 100644 --- a/src/NDSProvider/NDSProvider.tsx +++ b/src/NDSProvider/NDSProvider.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; import { ThemeProvider } from "styled-components"; import { I18nextProvider } from "react-i18next"; -import { desktop } from "../theme"; +import { themes } from "../theme"; import i18n from "../i18n"; import { ThemeType, DefaultNDSThemeType, Breakpoints } from "../theme.type"; import { LocaleContext } from "./LocaleContext"; @@ -9,7 +9,7 @@ import { mergeThemes } from "./mergeThemes.util"; import GlobalStyles from "./GlobalStyles"; import ModalStyleOverride from "./ModalStyleOverride"; import Reset from "./Reset"; -import ComponentSizeContextProvider, { ComponentSize } from "./ComponentSizeContext"; +import ComponentVariantContextProvider, { ComponentVariant } from "./ComponentVariantContext"; export const buildBreakPoints = (breakpointsConfig: Readonly) => ({ ...breakpointsConfig, @@ -24,8 +24,8 @@ type NDSProviderProps = { theme?: ThemeType; locale?: string; disableGlobalStyles?: boolean; - children?: any; - size?: ComponentSize; + children?: React.ReactNode; + variant?: ComponentVariant; }; type AllNDSGlobalStylesProps = { @@ -48,31 +48,38 @@ const AllNDSGlobalStyles = ({ theme, locale, disableGlobalStyles, children }: Al children ); -const NDSProvider: React.FC> = ({ +function NDSProvider({ theme, children, disableGlobalStyles = false, locale = "en_US", - size = "medium", -}) => { + variant = "desktop", +}: NDSProviderProps) { useEffect(() => { i18n.changeLanguage(locale); }, [locale]); - const mergedTheme = mergeThemes(desktop, theme); + if (!(variant in themes)) { + throw new Error( + `Invalid variant "${variant}" provided to NDSProvider. Valid variants are: ${Object.keys(themes).join(", ")}` + ); + } + + const themeVariant = themes[variant]; + const mergedTheme = mergeThemes(themeVariant, theme); const themeWithBreakpoints = { ...mergedTheme, breakpoints: buildBreakPoints(mergedTheme.breakpoints) }; return ( - + {children} - + ); -}; +} export default NDSProvider; diff --git a/src/Radio/Radio.story.tsx b/src/Radio/Radio.story.tsx index d82f6dd87..18a5a94cc 100644 --- a/src/Radio/Radio.story.tsx +++ b/src/Radio/Radio.story.tsx @@ -33,7 +33,7 @@ SetToDisabled.story = { const DashedRadio = dashed(Radio); -export const WithDifferentSizes = () => ( +export const WithDifferentVariants = () => ( diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx index 6dcf7f4c8..1a6b00499 100644 --- a/src/Radio/Radio.tsx +++ b/src/Radio/Radio.tsx @@ -7,7 +7,7 @@ import { Text } from "../Type"; import { ClickInputLabel } from "../utils"; import { DefaultNDSThemeType } from "../theme.type"; import { getSubset, omitSubset } from "../utils/subset"; -import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext"; const radioStyle = (theme: DefaultNDSThemeType) => ({ checked: { @@ -106,7 +106,7 @@ type NativeInputProps = Omit, "size">; type RadioProps = NativeInputProps & SpaceProps & { htmlSize?: number; - size?: ComponentSize; + variant?: ComponentVariant; labelText?: ReactNode; checked?: boolean; defaultChecked?: boolean; @@ -116,13 +116,14 @@ type RadioProps = NativeInputProps & type Ref = HTMLInputElement; const Radio = forwardRef( - ({ disabled = false, error = false, required = false, className, labelText, checked, size, ...props }, ref) => { - const componentSize = useComponentSize(size); + ({ disabled = false, error = false, required = false, className, labelText, checked, variant, ...props }, ref) => { + const componentVariant = useComponentVariant(variant); const spaceProps = getSubset(props, propTypes.space); const restProps = omitSubset(props, propTypes.space); + return ( - + { const spaceProps = getSubset(props, propTypes.space); @@ -37,7 +37,7 @@ const RangeContainer = ({ {startComponent} - - + - {endComponent} diff --git a/src/Select/Select.story.tsx b/src/Select/Select.story.tsx index 469de13b6..12328fa87 100644 --- a/src/Select/Select.story.tsx +++ b/src/Select/Select.story.tsx @@ -143,7 +143,7 @@ export const _Select = () => ( /> ); -export const WithDifferentSizes = () => { +export const WithDifferentVariants = () => { return ( Standard diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx index 2b120975b..7186bfe0d 100644 --- a/src/Select/Select.tsx +++ b/src/Select/Select.tsx @@ -8,7 +8,7 @@ import { Field } from "../Form"; import { MaybeFieldLabel } from "../FieldLabel"; import { InlineValidation } from "../Validation"; import { getSubset } from "../utils/subset"; -import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext"; import customStyles from "./customReactSelectStyles"; import { SelectOption } from "./SelectOption"; @@ -52,7 +52,7 @@ interface CustomProps["defaultMenuIsOpen"]; multiselect?: SelectProps["isMulti"]; maxHeight?: string; - size?: ComponentSize; + variant?: ComponentVariant; error?: boolean; options: NDSOptionType[]; onChange?: (newValue: unknown) => void; @@ -68,7 +68,7 @@ export type NDSSelectProps>( { - size, + variant, options, labelText, requirementText, @@ -104,7 +104,7 @@ const ReactSelect = React.forwardRef( const reactSelectRef = React.useRef(null); const optionsRef = React.useRef(options); - const componentSize = useComponentSize(size); + const componentVariant = useComponentVariant(variant); React.useEffect(() => { checkOptionsAreValid(options); @@ -130,7 +130,7 @@ const ReactSelect = React.forwardRef( theme: themeContext, error, maxHeight, - size: componentSize, + size: componentVariant, windowed: options.length > windowThreshold, })} isDisabled={disabled} @@ -149,7 +149,7 @@ const ReactSelect = React.forwardRef( value={getReactSelectValue(options, value)} isMulti={multiselect} components={{ - Option: (props) => , + Option: (props) => , Control: SelectControl, MultiValue: SelectMultiValue, ClearIndicator: SelectClearIndicator, diff --git a/src/Select/SelectOption.tsx b/src/Select/SelectOption.tsx index 83087e149..288452811 100644 --- a/src/Select/SelectOption.tsx +++ b/src/Select/SelectOption.tsx @@ -3,13 +3,13 @@ import styled from "styled-components"; import { components, OptionProps } from "react-windowed-select"; import { typography } from "styled-system"; import { subPx } from "../utils"; -import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext"; -import { stylesForSize } from "./customReactSelectStyles"; +import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext"; +import { stylesForVariant } from "./customReactSelectStyles"; type SelectOptionProps = { isSelected: boolean; isFocused: boolean; - size: ComponentSize; + variant: ComponentVariant; }; export const StyledOption = styled.div( @@ -33,33 +33,38 @@ export const StyledOption = styled.div( }, }, }), - ({ theme, size }) => - stylesForSize( + ({ theme, variant }) => + stylesForVariant( { - large: { + touch: { div: { padding: subPx(theme.space.x2), }, }, - medium: { + desktop: { div: { padding: subPx(theme.space.x1), }, }, }, - size + variant ) ); interface CustomOptionProps extends OptionProps { - size?: ComponentSize; + variant?: ComponentVariant; } export function SelectOption(props: CustomOptionProps) { - const size = useComponentSize(props.size); + const variant = useComponentVariant(props.variant); return ( - + {props.children} ); diff --git a/src/Select/customReactSelectStyles.tsx b/src/Select/customReactSelectStyles.tsx index 7a907831a..5c6185f5a 100644 --- a/src/Select/customReactSelectStyles.tsx +++ b/src/Select/customReactSelectStyles.tsx @@ -3,7 +3,7 @@ import type { CSSObject } from "styled-components"; import type { GroupBase, MenuPlacement, StylesConfig } from "react-select"; import type { CSSProperties } from "react"; import type { DefaultNDSThemeType } from "../theme.type"; -import type { ComponentSize } from "../NDSProvider/ComponentSizeContext"; +import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext"; const getBorderColor = ({ errored, @@ -73,12 +73,12 @@ export function getMenuBorderRadius({ return border === menuPlacement ? { radius: theme.radii.medium, style: "solid" } : { radius: 0, style: "none" }; } -type SizeConfig = { - [key in ComponentSize]: CSSObject; +type VariantConfig = { + [key in ComponentVariant]: CSSObject; }; -export function stylesForSize(config: SizeConfig, size: ComponentSize = "medium") { - return config[size]; +export function stylesForVariant(config: VariantConfig, variant: ComponentVariant = "desktop") { + return config[variant]; } export function showIndicatorSeparator({ hasValue, isClearable, isMulti }) { @@ -92,7 +92,14 @@ interface Args { const customStyles: >( args: Args -) => StylesConfig = ({ theme, error, maxHeight, windowed, size, hasDefaultOptions = true }) => { +) => StylesConfig = ({ + theme, + error, + maxHeight, + windowed, + variant, + hasDefaultOptions = true, +}) => { return { option: () => ({ height: 38, @@ -188,19 +195,19 @@ const customStyles: ({ @@ -269,20 +276,20 @@ const customStyles: ({ @@ -295,16 +302,16 @@ const customStyles: ({ diff --git a/src/Switcher/Switch.tsx b/src/Switcher/Switch.tsx index 6a8197b19..734a0b75a 100644 --- a/src/Switcher/Switch.tsx +++ b/src/Switcher/Switch.tsx @@ -2,12 +2,12 @@ import React from "react"; import styled from "styled-components"; import { variant } from "styled-system"; import numberFromDimension from "../utils/numberFromDimension"; -import { ComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant } from "../NDSProvider/ComponentVariantContext"; export type SwitchProps = Omit, "value"> & { value?: string; selected?: boolean; - size?: ComponentSize; + variant?: ComponentVariant; }; const Switch = React.forwardRef(({ children, ...rest }, ref) => { @@ -48,13 +48,11 @@ const SwitchButton = styled.button( }), ({ theme }) => variant({ - prop: "size", variants: { - large: { + touch: { padding: `${numberFromDimension(theme.space.x2) - 1}px ${theme.space.x3}`, }, - - medium: { + desktop: { padding: `${numberFromDimension(theme.space.x1) - 1}px ${theme.space.x2}`, }, }, diff --git a/src/Switcher/Switcher.story.tsx b/src/Switcher/Switcher.story.tsx index b159012ac..252e028b4 100644 --- a/src/Switcher/Switcher.story.tsx +++ b/src/Switcher/Switcher.story.tsx @@ -17,7 +17,7 @@ export const WithSelectedValue = () => { ); }; -export const WithDifferentSizes = () => { +export const WithDifferentVariants = () => { const [selectedDefault, setSelectedDefault] = useState("option_1"); const [selectedMedium, setSelectedMedium] = useState("option_1"); const [selectedLarge, setSelectedLarge] = useState("option_1"); @@ -29,12 +29,17 @@ export const WithDifferentSizes = () => { Size - + Medium Size - + Large Size diff --git a/src/Switcher/Switcher.tsx b/src/Switcher/Switcher.tsx index 0c8a9a4ea..a093ef628 100644 --- a/src/Switcher/Switcher.tsx +++ b/src/Switcher/Switcher.tsx @@ -1,19 +1,19 @@ import React, { ReactElement } from "react"; import { Box } from "../Box"; import FocusManager from "../utils/ts/FocusManager"; -import type { ComponentSize } from "../NDSProvider/ComponentSizeContext"; -import { useComponentSize } from "../NDSProvider/ComponentSizeContext"; +import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext"; +import { useComponentVariant } from "../NDSProvider/ComponentVariantContext"; import type { SwitchProps } from "./Switch"; type SwitcherProps = { - size?: ComponentSize; + variant?: ComponentVariant; children?: ReactElement[]; selected?: string; onChange?: (value: string) => void; }; -const Switcher: React.FC> = ({ size, selected, onChange, ...rest }) => { - const componentSize = useComponentSize(size); +const Switcher: React.FC> = ({ variant, selected, onChange, ...rest }) => { + const componentVariant = useComponentVariant(variant); const optionRefs = []; @@ -32,7 +32,7 @@ const Switcher: React.FC> = ({ size, sele const options = (focusedIndex, setFocusedIndex, handleArrowNavigation) => { return React.Children.map(rest.children, (child: ReactElement, index) => { return React.cloneElement(child, { - size: componentSize, + variant: componentVariant, tabIndex: index === focusedIndex ? 0 : -1, selected: isSelected(child.props.value, index), "aria-selected": isSelected(child.props.value, index), diff --git a/src/Tabs/Tab.tsx b/src/Tabs/Tab.tsx index 9a1abdf2d..fc7518116 100644 --- a/src/Tabs/Tab.tsx +++ b/src/Tabs/Tab.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled, { CSSObject } from "styled-components"; import { variant } from "styled-system"; -import { ComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant } from "../NDSProvider/ComponentVariantContext"; const barStyles = (theme): { expanded: CSSObject; default: CSSObject } => ({ expanded: { @@ -41,7 +41,7 @@ const getBarHoverStyles = (selected, disabled, theme) => { }; type TabButtonProps = React.ComponentPropsWithRef<"button"> & { - size?: ComponentSize; + variant?: ComponentVariant; selected?: boolean; fullWidth?: boolean; }; @@ -83,13 +83,12 @@ const TabButton = styled.button( }, }), variant({ - prop: "size", variants: { - large: { + touch: { py: "x2", px: "x4", }, - medium: { + desktop: { py: "x1", px: "x3", }, diff --git a/src/Tabs/Tabs.story.tsx b/src/Tabs/Tabs.story.tsx index 3fdf07570..40d4520d4 100644 --- a/src/Tabs/Tabs.story.tsx +++ b/src/Tabs/Tabs.story.tsx @@ -184,19 +184,19 @@ export const WithConditionallyRenderedTabs = () => ( ); -export const WithDifferentSizes = () => ( +export const WithDifferentVariants = () => ( Tab 1 Content Tab 2 Content - + Tab 1 Content Tab 2 Content - + Tab 1 Content Tab 2 Content diff --git a/src/Tabs/Tabs.tsx b/src/Tabs/Tabs.tsx index 1b1582f33..7f727126a 100644 --- a/src/Tabs/Tabs.tsx +++ b/src/Tabs/Tabs.tsx @@ -5,14 +5,14 @@ import ReactResizeDetector from "react-resize-detector"; import { getSubset } from "../utils/subset"; import FocusManager from "../utils/ts/FocusManager"; import { Box } from "../Box"; -import { ComponentSize, ComponentSizeContext } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant, ComponentVariantContext } from "../NDSProvider/ComponentVariantContext"; import TabContainer from "./TabContainer"; import TabScrollIndicators from "./TabScrollIndicators"; export type TabsProps = { className?: string; selectedIndex?: number; - size?: ComponentSize; + variant?: ComponentVariant; defaultSelectedIndex?: number; renderTabContentOnlyWhenSelected?: boolean; fitted?: boolean; @@ -24,7 +24,7 @@ export type TabsState = { }; class Tabs extends React.Component { - static contextType = ComponentSizeContext; + static contextType = ComponentVariantContext; constructor(props) { super(props); @@ -46,9 +46,9 @@ class Tabs extends React.Component { } getTabs(setFocusToTab, focusedIndex, handleArrowNavigation) { - const { fitted, children, onTabClick, size } = this.props; + const { fitted, children, onTabClick, variant } = this.props; - const componentSize = size ?? this.context.size; + const componentVariant = variant ?? this.context.size; const selectedIndex = this.getSelectedIndex(); const tabs = React.Children.toArray(children); @@ -73,7 +73,7 @@ class Tabs extends React.Component { }, onKeyDown: handleArrowNavigation, index, - size: componentSize, + size: componentVariant, tabIndex: index === focusedIndex ? 0 : -1, selected: index === selectedIndex, "aria-selected": index === selectedIndex, diff --git a/src/Textarea/StyledTextarea.tsx b/src/Textarea/StyledTextarea.tsx index 2614eeff7..eff76d44a 100644 --- a/src/Textarea/StyledTextarea.tsx +++ b/src/Textarea/StyledTextarea.tsx @@ -5,11 +5,11 @@ import { SpaceProps, variant } from "styled-system"; import { space } from "styled-system"; import { subPx } from "../utils"; import { DefaultNDSThemeType } from "../theme.type"; -import { ComponentSize } from "../NDSProvider/ComponentSizeContext"; +import { ComponentVariant } from "../NDSProvider/ComponentVariantContext"; export type StyledTextareaProps = React.ComponentPropsWithRef<"textarea"> & SpaceProps & { - size?: ComponentSize; + variant?: ComponentVariant; theme?: DefaultNDSThemeType; errorMessage?: string; errorList?: string[]; @@ -47,7 +47,7 @@ const getTextareaStyle = (props) => { const StyledTextarea = styled.textarea( space, - ({ theme, isResizeable, size }): CSSObject => ({ + ({ theme, isResizeable }) => ({ display: "block", width: "100%", border: "1px solid", @@ -70,12 +70,11 @@ const StyledTextarea = styled.textarea( }), ({ theme }) => variant({ - prop: "size", variants: { - large: { + touch: { padding: `${subPx(theme.space.x2)}`, }, - medium: { + desktop: { padding: `${subPx(theme.space.x1)}`, }, }, diff --git a/src/Textarea/Textarea.story.tsx b/src/Textarea/Textarea.story.tsx index 8756bbeab..7c4dbbedf 100644 --- a/src/Textarea/Textarea.story.tsx +++ b/src/Textarea/Textarea.story.tsx @@ -71,12 +71,17 @@ export const UsingRefToControlFocus = () => { ); }; -export const WithDifferentSizes = () => { +export const WithDifferentVariants = () => { return (