Switch

b8d79200b #3442 Thanks @TheSisb! - Removed all run-time prop-type checkingfrom Paste components. Paste now ships with only TypeScript types.

ACTION NEEDED: None. This should be 100% backwards compatible.

• @twilio-paste/uid-library@2.0.0
• @twilio-paste/color-contrast-utils@5.0.0
• @twilio-paste/help-text@13.0.0
• @twilio-paste/inline-control-group@13.0.0
• @twilio-paste/label@13.0.0
• @twilio-paste/screen-reader-only@13.0.0
• @twilio-paste/flex@8.0.0
• @twilio-paste/media-object@10.0.0
• @twilio-paste/box@10.0.0
• @twilio-paste/sibling-box@9.0.0
• @twilio-paste/text@10.0.0
• @twilio-paste/customization@8.0.0
• @twilio-paste/design-tokens@10.0.0
• @twilio-paste/icons@12.0.0
• @twilio-paste/animation-library@2.0.0
• @twilio-paste/styling-library@3.0.0
• @twilio-paste/style-props@9.0.0
• @twilio-paste/theme@11.0.0
• @twilio-paste/types@6.0.0

4d1f7c65e #3360 Thanks @SiTaggart! - Improved types where Paste extends the base HTML element that a component is based on, so that the existing blocked styling properties are not exposed as valid properties for the component via Typescript. This leads to less confusion around what is supported by a Paste component.

Existing blocked component properties include:

• className
• style
• color

3ab2bb6f4 #3114 Thanks @SiTaggart! - ### Breaking change

We have moved @types/react and @types/react-dom to peer dependencies of the library. This should allow for greater control and backwards compatibility with older versions of React as Paste is no longer bundling the type libraries.

Your application likely has both of these as dependencies anyway, but it is now up to you to manage that version number.

Action needed

Ensure @types/react and @types/react-dom are installed as dependencies of your application.

3ab2bb6f4 #3114 Thanks @SiTaggart! - [Switch] improved backwards compat with React 17 types

Updated dependencies [1d75f223e, 50cde4668, bce889344, 3ab2bb6f4, 3ab2bb6f4, 3ab2bb6f4]:

• @twilio-paste/icons@11.0.0
• @twilio-paste/theme@10.0.0
• @twilio-paste/box@9.0.0
• @twilio-paste/sibling-box@8.0.0
• @twilio-paste/text@9.0.0
• @twilio-paste/inline-control-group@12.0.0
• @twilio-paste/help-text@12.0.0
• @twilio-paste/label@12.0.0
• @twilio-paste/screen-reader-only@12.0.0
• @twilio-paste/flex@7.0.0
• @twilio-paste/media-object@9.0.0
• @twilio-paste/customization@7.0.0
• @twilio-paste/style-props@8.0.0
• @twilio-paste/types@5.0.0

d97098846 #3020 Thanks @SiTaggart! - This major version included listing all the missing peer dependencies for each Paste package.

If you are using a package from Paste in isolation from Core, when upgrading to this latest version, be sure to correctly install all the missing peer dependencies.

• @twilio-paste/design-tokens@9.0.0
• @twilio-paste/help-text@11.0.0
• @twilio-paste/inline-control-group@11.0.0
• @twilio-paste/label@11.0.0
• @twilio-paste/screen-reader-only@11.0.0
• @twilio-paste/flex@6.0.0
• @twilio-paste/media-object@8.0.0
• @twilio-paste/box@8.0.0
• @twilio-paste/sibling-box@7.0.0
• @twilio-paste/text@8.0.0
• @twilio-paste/customization@6.0.0
• @twilio-paste/icons@10.0.0
• @twilio-paste/animation-library@1.0.0
• @twilio-paste/styling-library@2.0.0
• @twilio-paste/uid-library@1.0.0
• @twilio-paste/style-props@7.0.0
• @twilio-paste/theme@9.0.0
• @twilio-paste/types@4.0.0
• @twilio-paste/color-contrast-utils@4.0.0

38a72ad0c #2753 Thanks @TheSisb! - [Switch] Updated Switch component API to match other form components in Paste.

• SwitchContainer has been replaced with SwitchGroup
• SwitchGroup props changes:
  • removes id?: string
  • removes label: ReactNode - use the new legend prop instead.
  • adds legend: string | NonNullable<React.ReactNode> to replace the old label prop.
  • adds errorText?: string | React.ReactNode to handle error states.
  • adds orientation?: 'vertical' | 'horizontal; to set children orientation.
  • adds i18nRequiredLabel?: string to change the required label for internationalization.
  • adds name: string to label the switch group for forms.
  • adds onChange?: (checked: boolean) => void to handle changes to any child Switch's checked state in a single function.
  • helpText prop now accepts a string.
  • required prop is now optional.
  • element prop default value changed to SWITCH_GROUP from SWITCH_CONTAINER
• Switch props changes:
  • children prop type changed to NonNullable<React.ReactNode>
  • adds hasError?: boolean to handle error states.
  • adds helpText?: string | React.React.Node to add additional context to a switch.
  • adds checked?: boolean to use the Switch in a controlled manner.
  • adds defaultChecked?: boolean to set the default checked value in an uncontrolled manner.