Skip to contentSkip to navigationSkip to topbar
Figma
Star

Core package changelog


20.8.0

20.8.0 page anchor

Minor Changes

Minor Changes page anchor
  • 38a72ad0c(link takes you to an external page) #2753(link takes you to an external page) Thanks @TheSisb(link takes you to an external page)! - [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.
  • 0cd424df4(link takes you to an external page) #2184(link takes you to an external page) Thanks @loreina(link takes you to an external page)! - [design-tokens] Update alias and add new tokens to be accessible in Dark theme

    • Aliases
      • Added a new alias palette-gray-110
    • Global: background-color
      • Updated color-background-inverse to gray-90
      • Updated color-background-inverse-strong to gray-80
    • Global: border color
      • Added color-border-inverse-weakest token pointing to gray-90
      • Updated color-border-inverse-weaker to gray-80
      • Updated color-border-inverse to gray-50
      • Updated color-border-inverse-strong to gray-20
      • Updated color-border-inverse-stronger to gray-10
      • Neutral
        • Updated color-border-neutral-weak to blue-40
      • Added color-border-error-stronger token pointing to red-90
    • Global: box shadow
      • Added shadow-border-error-stronger pointing to red-90
      • Added shadow-border-inverse-weakest pointing to gray-90
      • Updated shadow-border-inverse-weaker to gray-80
      • Updated shadow-border-inverse to gray-50
        • Updated shadow-border-inverse-strong to gray-20
        • Updated shadow-border-inverse-stronger to gray-10
    • Dark theme: background color
      • Updated color-background to gray-100
      • Updated color-background-strong to gray-90
      • Updated color-background-stronger to gray-80
      • Updated color-background-inverse to gray-90
      • Updated color-background-inverse-strong to gray-80
      • Updated color-background-body to new alias gray-110
      • Updated color-background-overlay to palette-gray-100-transparent-90
      • Updated color-background-row-striped to gray-100
      • Updated color-background-subaccount to gray-90
      • Updated color-background-trial to green-100
      • Brand
        • Updated color-background-brand to gray-100
        • Updated color-background-brand-strong to gray-90
      • Primary
        • Updated color-background-primary-strongest to blue-10
        • Updated color-background-primary-stronger to blue-20
        • Updated color-background-primary-strong to blue-30
        • Updated color-background-primary to blue-60
        • Updated color-background-primary-weak to gray-80
        • Updated color-background-primary-weaker to gray-90
        • Updated color-background-primary-weakest to gray-100
      • Destructive
        • Updated color-background-destructive-strongest to red-10
        • Updated color-background-destructive-stronger to red-20
        • Updated color-background-destructive-strong to red-30
        • Updated color-background-destructive to red-60
        • Updated color-background-destructive-weak to gray-80
        • Updated color-background-destructive-weaker to gray-90
        • Updated color-background-destructive-weakest to gray-100
      • Success
        • Updated color-background-success to green-60
      • Warning
        • Updated color-background-warning to orange-60
      • Error
        • Added color-background-error-stronger pointing to red-20
        • Updated color-background-error-strong to red-40
        • Updated color-background-error to red-60
    • Dark theme: border color
      • Updated color-border-weak to gray-80
      • Updated color-border-weaker to gray-90
      • Inverse
        • Removed color-border-inverse-weaker
        • Removed color-border-inverse
        • Removed color-border-inverse-strong
        • Removed color-border-inverse-stronger
        • Removed color-border-inverse-strongest
      • Primary
        • Updated color-border-primary-strongest to blue-10
        • Updated color-border-primary-stronger to blue-20
        • Updated color-border-primary-strong to blue-30
        • Updated color-border-primary to blue-60
        • Updated color-border-primary-weak to gray-80
        • Updated color-border-primary-weaker to gray-90
        • Updated color-border-primary-weakest to gray-100
      • Destructive
        • Updated color-border-destructive-strongest to red-10
        • Updated color-border-destructive-stronger to red-20
        • Updated color-border-destructive-strong to red-30
        • Updated color-border-destructive to red-60
        • Updated color-border-destructive-weak to gray-80
        • Updated color-border-destructive-weaker to gray-90
        • Updated color-border-destructive-weakest to gray-100
      • Success
        • Updated color-border-success to green-60
        • Updated color-border-success-weak to green-70
      • Warning
        • Updated color-border-warning to orange-60
        • Updated color-border-warning-weak to orange-70
      • Error
        • Added color-border-error-stronger pointing to red-20
        • Updated color-border-error-strong to red-30
        • Updated color-border-error to red-60
        • Updated color-border-error-weak to red-70
      • Neutral
        • Updated color-border-neutral to blue-60
        • Updated color-border-neutral-weak to blue-70
    • Dark theme: box shadow
      • Elevation
        • Update shadow-elevation-10 to black-transparent-40
        • Update shadow-elevation-20 to black-transparent-50
        • Update shadow-elevation-30 to black-transparent-50
      • Focus
        • Updated shadow-focus to gray-60
        • Updated shadow-focus-inverse to gray-50
        • Updated shadow-focus-inset to gray-60
      • Primary
        • Updated shadow-border-primary to blue-60
      • Destructive
        • Updated shadow-border-destructive to red-60
        • Updated shadow-border-destructive-strong to red-30
        • Updated shadow-border-destructive-stronger to red-20
        • Updated shadow-border-destructive-strongest to red-10
      • Error
        • Updated shadow-border-error to red-60
        • Updated shadow-border-error-strong to red-30
      • Inverse
        • Removed shadow-border-inverse-weaker
        • Removed shadow-border-inverse
        • Removed shadow-border-inverse-strong
        • Removed shadow-border-inverse-stronger
        • Removed shadow-border-inverse-strongest
    • Dark theme: text color
      • Updated color-text-weak to gray-50
      • Updated color-text-weaker to gray-80
      • Updated color-text-weakest to new alias gray-110
      • Updated color-text-inverse-weaker to gray-70
      • Link
        • Updated color-text-link-weak to gray-80
        • Updated color-text-link-stronger to gray-0
        • Updated color-text-link-destructive-weak to gray-80
        • Updated color-text-link-destructive-stronger to gray-0
      • Success
        • Updated color-text-success to green-30
      • Neutral
        • Updated color-text-neutral to blue-20
      • New
        • Updated color-text-new to purple-20
      • Icon
        • Updated color-text-icon to gray-50
  • 0cd424df4(link takes you to an external page) #2184(link takes you to an external page) Thanks @loreina(link takes you to an external page)! - [radio-group]

    • Add new customization element RADIO_CONTROL_CIRCLE to controls the styles of the circle within the radio button
    • Update default color to colorTextWeakest
    • Update hover text color to colorTextWeakest and border color to colorBorderPrimaryStronger
    • Update focus text color to colorTextWeakest and border color to colorBorderPrimaryStronger
    • Update active text color to colorTextWeakest
    • Update checked text color to colorTextInverse
    • Update invalid and hover border color to colorBorderErrorStronger
    • Update checked and hover text color to colorTextWeakest and background color to colorBackgroundPrimaryStronger
    • Update checked and focus text color to colorTextWeakest and background color to colorBackgroundPrimaryStronger
    • Update checked and disabled text color to colorTextWeakest
    • Update checked and invalid text color to colorTextInverse
    • Update checked and invalid and hover background color to colorBackgroundErrorStronger and border color to colorBorderErrorStronger
  • 563a76ba3(link takes you to an external page) #2249(link takes you to an external page) Thanks @nkrantz(link takes you to an external page)! - [checkbox]

    • Update the check icon to inherit color from BaseRadioCheckbox
    • Update selectAll background color to default to colorBackground, and use colorBackgroundPrimaryWeakest when checked and not disabled or indeterminate and not disabled
    • Update default color to colorTextWeakest
    • Update hover text color to colorTextWeakest and border color to colorBorderPrimaryStronger
    • Update focus text color to colorTextWeakest and border color to colorBorderPrimaryStronger
    • Update active text color to colorTextWeakest
    • Update checked text color to colorTextInverse
    • Update invalid and hover border color to colorBorderErrorStronger
    • Update checked and hover text color to colorTextWeakest and background color to colorBackgroundPrimaryStronger
    • Update checked and focus text color to colorTextWeakest and background color to colorBackgroundPrimaryStronger
    • Update checked and disabled text color to colorTextWeakest
    • Update checked and invalid text color to colorTextInverse
    • Update checked and invalid and hover background color to colorBackgroundErrorStronger and border color to colorBorderErrorStronger