Skip to contentSkip to navigationSkip to topbar
Paste DSys

Core package changelog

Change Log

21.5.0

Minor Changes

Patch Changes

21.4.0

Minor Changes

  • 219e25c1b #4331 Thanks @PixeledCode! - [AI Chat Log] Update styles of AI Chat Log, add new props, add event component. Deprecates size prop from AIChatMessageBody and move it to AIChatLog
  • 3705495c7 #4318 Thanks @krisantrobus! - [Data visualization library] added helper functions and types to provide support for creating highcharts options for supported chart types

Patch Changes

  • 098c2bbfb #4374 Thanks @nkrantz! - [Box] remove className from BOX_PROPS_TO_BLOCK so that safelySpreadBoxProps doesn't strip away usage of styled. Necessary for One Console chrome team to customize certain components. styled should not be used by other teams and className should not be used at all with Paste components.
  • c0eff2ddc #4354 Thanks @krisantrobus! - [Select] fixed an issue where unmounted select component does not use the correct variant styling

21.3.0

Minor Changes

  • 6040893c0 #4311 Thanks @PixeledCode! - [Label] Update font weight, expose new prop for optional variant and fix require dot causing scrolling issue
  • 404eeec61 #4327 Thanks @nkrantz! - [Chat Composer] add prop autoLink which defaults to true to allow users to disable the AutoLink plugin

Patch Changes

  • bf5666048 #4312 Thanks @krisantrobus! - [Data Visualization Library] update Highcharts native tooltip styles to align more closely with Paste styles including correctly setting the font family
  • 6040893c0 #4311 Thanks @PixeledCode! - [Base Radio Checkbox, Button, Combobox, File Picker, File Uploader, Input, Input Box, Menu, Select, Textarea, Visual Picker] Update styles of form related components
  • 16e8016a0 #4334 Thanks @serifluous! - Visible changes in dark themes only. Redarkened color-background-weak and added color-background-weaker-elevation

21.2.0

Minor Changes

  • 986703e4a #4291 Thanks @krisantrobus! - [TextArea] exposed a prop to allow the minRows to be configured effectively setting the min height

Patch Changes

  • 986703e4a #4291 Thanks @krisantrobus! - [DataGridCell] reworked the click events triggered to allow interactive elements to correctly pull focus

21.1.0

Minor Changes

Patch Changes

21.0.0

Major Changes

  • f48211e56 #4258 Thanks @PixeledCode! - [all packages]: Upgrade to React 19 and drop support for React 16. Paste only supports the three latest versions of React. If you're using Paste in a React 17, 18, or 19 app, you should be able to upgrade with full backwards compatibility. If you experience any issues, please let us know on Github.

Patch Changes

20.23.0

Minor Changes

  • b5e73f1a7 #4264 Thanks @krisantrobus! - [Design Tokens] added a new build script to generate a CSS file that applies variables for individual themes using the body[data-theme] attribute.
  • b5e73f1a7 #4264 Thanks @krisantrobus! - [Theme] Added the property useCssVariables which allows the color values to be pulled from CSS variables instead of static values

Patch Changes

20.22.0

Minor Changes

  • 3e9bf5fbd #4230 Thanks @nkrantz! - [Side Panel] Update mobile styles, add useSidePanelState hook, animation fixes
  • dbd869a0c #4261 Thanks @krisantrobus! - [Design tokens] added new background token, colorBackgroundWeakest and updated dark mode user shadow token in dark themes
  • 50da0778c #4236 Thanks @krisantrobus! - [ChartProvider] added a new component that will wrap chart instances to control and share the state to child charting components

Patch Changes

  • dbd869a0c #4261 Thanks @krisantrobus! - [Button, Card, InputBox, Table] updated design tokens used for background color in preparation for theme changes

20.21.0

Minor Changes

  • 2fba6b9cd #4207 Thanks @nkrantz! - [Design Tokens] Update aliases and add new tokens for elevation foundations

Patch Changes

20.20.0

Minor Changes

  • 077d397e4 #4167 Thanks @nkrantz! - [Blockquote] add default bottom margin of space-70 to Blockquote, add marginBottom prop for the option to remove bottom margin when necessary.
  • 932a03f23 #4173 Thanks @krisantrobus! - [Lexical Library] exported additional helper functions and commands to allow advanced editor node manipulation programatically
  • 36bd1e305 #4168 Thanks @PixeledCode! - [Blockquote]: Added a new Blockquote component to library to act as a stylized text wrapper for a quotation and source.

Patch Changes

20.19.0

Minor Changes

  • dbd982f8d #4157 Thanks @nkrantz! - [Example Text] create new component Example Text which is a stylized text wrapper that distinguishes user input examples from body text.
  • a4404eab3 #4136 Thanks @krisantrobus! - [Design Tokens] added new design tokens shadowBorderBottomWeak and shadowBorderBottomInverseWeaker to support new feature, KeybaordKey.
  • a4404eab3 #4136 Thanks @krisantrobus! - [KeyboardKey] added a new component to display visual indicators for keyboard shortcuts available to users

Patch Changes

20.18.1

Patch Changes

20.18.0

Minor Changes

  • 7c93dafd5 #4140 Thanks @PixeledCode! - [Side Modal]: Align SideModalFooterActions to left. This change is to make Side Modal more aligned with Side Panel component. If you want to keep the actions on the right, you can use the justifyContent prop to align them to the right. If you are keeping them on the left, it's recommended to move the primary action to the left and the secondary action to the right.

Patch Changes

20.17.0

Minor Changes

  • 52ea25758 #4094 Thanks @nkrantz! - [Status Badge] add new size value "borderless" which removes padding and border (box shadow) for a less stylized option of Status Badge for use in Tables and other crowded layouts.
  • 0d10a085b #4067 Thanks @krisantrobus! - [Design Token] added new box shadows to support scrollable styling on inverse colored components

Patch Changes

  • afba2aeba #4102 Thanks @PixeledCode! - [Visual Picker]: Fix Visual Picker checkbox doesn't work in firefox when checkbox is clicked on directly

20.16.0

Minor Changes

  • 43bd80a01 #4054 Thanks @PixeledCode! - [Timeline]: Added a new Timeline component to the library to display events in chronological order
  • 37acfcdf6 #4049 Thanks @nkrantz! - [Combobox] Add new prop usePortal which defaults to true. The prop was introduced to address a bug when Comboboxes are placed in Popovers. usePortal should be set to false when using a Combobox inside a Popover in order to retain full functionality.
  • 31defbae0 #4060 Thanks @krisantrobus! - [Design Tokens] added a new design token for color-border-new-weak and made changes to color-text-icon-warning in the Twilio theme to support design updates to Alert and Callout components
  • d108aeb7f #4065 Thanks @PixeledCode! - [Progress Steps] Add ProgressStepsContent component to add additional content during vertical orientation
  • bc7d13f43 #4051 Thanks @nkrantz! - [Button Group] add justifyContent prop on unattached button groups. Use flex for unattached button groups.
  • b20a3a1a8 #4053 Thanks @krisantrobus! - [Data Visualization]: added a new helper function, applyPasteHighchartsModules, that applies any number of modules to Highcharts setting accesibility required.

Patch Changes

  • ae522366f #4072 Thanks @nkrantz! - [Badge] add a min-width of size-base-50 to small badges to ensure badges with only one character (e.g. "1") render as a circle rather than an oval.
  • 7ae14af12 #4011 Thanks @cogwizzle! - [Sidebar] Updating the unselected Sidebar Disclosure Header and SidebarNavigationItems.
  • f612d1ba6 #4047 Thanks @krisantrobus! - [FormPillGroup] fixed a bug where long text in a form pill would wrap and break styling. Text within FormPill is now truncated so FormPill(s) will not stretch beyond FormPillGroup width.
  • f612d1ba6 #4047 Thanks @krisantrobus! - [Combobox] added ellipse styling to text that exceeds length of a single select combobox when not active

20.15.0

Minor Changes

  • 8cdebfe6c #4018 Thanks @nkrantz! - [FormPillGroup] added a new variant 'tree' to support different interactions for FormPill where selecting the item triggers other flows instead of updating state directly. Reference Filters Pattern for in depth use case.
  • 8cdebfe6c #4018 Thanks @nkrantz! - [Popover] Added a new button variant to trigger the popover PopoverFormPillButton, only to be used as part of complex filters pattern
  • fe8825efc #3989 Thanks @PixeledCode! - - [Design Tokens] Add new base sizing tokens and update description of existing sizing tokens
  • 4ea2bcc63 #3978 Thanks @cogwizzle! - [Form Pill Group] Adding size property to the FormPillGroup component. Sizes include default and "large".
  • b04532dad #3987 Thanks @PixeledCode! - [Design tokens]: Add new notification tokens:
    • color-background-notification
    • shadow-border-notification
    • shadow-border-bottom-notification-stronger
  • b315321db #4002 Thanks @nkrantz! - [Side Panel] Create SidePanelFooter exported from the Side Panel package for actions or chat composers. Make scrollbar color of SidePanelBody slightly darker for better visibility. Small improvements to spacing and alignment of SidePanelHeader.
  • d3d74e540 #4009 Thanks @krisantrobus! - [Corner Ornament] Release a new component that controls the posiitoning of another elements in relation to a parent component to be displayed as a corner ornament

Patch Changes

  • 9838a4f18 #3994 Thanks @nkrantz! - [Chat Composer] Increase max-height of ChatComposerContainer so that it's greater than the max-height of ChatComposer and doesn't create a vertical scrollbar when the default max-height is reached.
  • b315321db #4002 Thanks @nkrantz! - [AI Chat Log] Remove padding-x on AI Chat Log to prevent double padding when log is used within a Side Panel container.
  • b315321db #4002 Thanks @nkrantz! - [Chat Composer] Add width="100%" to ChatComposerContainer to prevent composer from shrinking when no value

20.14.0

Minor Changes

  • 3302f72e4 #3927 Thanks @krisantrobus! - [AIChatLog]: Added a new AIChatLog component to the library to display interactions between AI entities
  • 7779a24e5 #3964 Thanks @krisantrobus! - [ChatComposer] Added new components to allow contained variants, actions buttons and attachments
  • b5e6d3fd1 #3962 Thanks @krisantrobus! - [Icons] Added 5 new icons: AuthenticationIcon, TemplateMessageIcon, TriggerIcon, ProductUnifiedProfilesIcon and UnstarIcon. Also updated 2 icons: ProductSupportIcon and SupportIcon

Patch Changes

  • 96eb7cf0f #3918 Thanks @cogwizzle! - Changing the property name, onConfirmDisabled, in AlertDialog component. The property is called isConfirmDisabled. Non breaking change.
  • 3302f72e4 #3927 Thanks @krisantrobus! - [Button] Add border radius 20 to size="reset" buttons which can be overridden by passing a border radius token to variant="reset" and size="reset" buttons

20.13.0

Minor Changes

  • 5bb1b010b #3903 Thanks @nkrantz! - [Icons] add 8 new icons: CartIcon, CustomerCareIcon, PaymentIcon, RepeatPurchaseIcon, TransferIcon, UpsellIcon, WinbackIcon, and ProductAccountDashboardIcon, and modify 1 existing icon: ProductAdminAccountsIcon.
  • bb893822d #3827 Thanks @nkrantz! - [Side Panel] add new Side Panel component. Side panel is a container that pushes the main page content when open.
  • dfb08d575 #3884 Thanks @nkrantz! - [Icons] Add 6 new icons: ProductConversationalInsightsIcon, DataArrayIcon, DataBooleanIcon, DataNumberIcon, DataObectIcon, and DataStringIcon.

Patch Changes

  • 1177b8f06 #3878 Thanks @cogwizzle! - Adding help text to the paste button component via JSDoc to ensure the design system guidance is accessible via the Language Server output. Minor updates to the syntax of the button component to modernize it.
  • d6c1b73ad #3805 Thanks @nkrantz! - [List] improve text alignment for OrderedDisplayList between the list item number and the corresponding heading.
  • 7d5c312f7 #3846 Thanks @TheSisb! - [Modal] fix padding around ModalFooter for when the content overflows and scrolls.
  • 825dc39a3 #3917 Thanks @krisantrobus! - [Input] updated focus stylings on increment/decrement buttons for number input type on both default and inverse variants
  • a3b7520bf #3904 Thanks @nkrantz! - [Side Panel] Fix positioning of close button when no header actions are being used by adding justifyContent="space-between"

20.12.0

Minor Changes

  • 33800d2f9 #3835 Thanks @TheSisb! - [List] add OrderedDisplayList, OrderedDisplayListItem, and OrderedDisplayListHeading components.

    These new components provide a visually enhanced numbered list to improve the scannability of sequential steps.

Patch Changes

  • 9d096e572 #3841 Thanks @TheSisb! - [Codeblock] fix an error when triggering the copy button while using React v18.

  • c020edefc #3834 Thanks @nkrantz! - [Spinner] Fix a bug that previously occured when a Safari user zoomed in on a page with a Spinner. The animated track moving around the Spinner circle would lose its center and appear off of the circle. This was due to the fact that Safari does not accept "center" as a value for the transformOrigin property. The fix was to remove the extra animations for Safari windows only.

  • Updated dependencies [33800d2f9, 9ab72f5b6, 9d096e572, c020edefc]:

20.11.0

Minor Changes

  • dc599cecb #3798 Thanks @nkrantz! - [Design tokens] add 6 new shadow border tokens for brand badges:

    • shadow-border-brand-10
    • shadow-border-brand-20
    • shadow-border-brand-30
    • shadow-border-bottom-brand-10-strong
    • shadow-border-bottom-brand-20-strong
    • shadow-border-bottom-brand-30-strong
  • 1430b8c80 #3808 Thanks @nkrantz! - [Icons] Add new icons SentimentNeutral, SentimentPositive, SentimentNegative, and Folder

Patch Changes

20.10.0

Minor Changes

  • e954efd02 #3773 Thanks @nkrantz! - [Design tokens] add new border radius tokens (40-90) for new homepage and ai kit'
  • 67c25a7c9 #3788 Thanks @SiTaggart! - [design-tokens]: added three new branding accent background colors and a new text color token to be used on top of those. Updated 3 branding background colors in the Twilio and twilio-dark themes

Patch Changes

20.9.0

Minor Changes

  • 3c3ec9b76 #3746 Thanks @TheSisb! - [Textarea] add maxRows prop which sets a max height the textarea can grow based on its content.

Patch Changes

20.8.0

Minor Changes

  • 55786c61c #3727 Thanks @TheSisb! - [Summary Detail] Add new SummaryDetail component package.

    A Summary Detail is a collapsible container that can be used to hide or show content.

  • e0e69e760 #3731 Thanks @nkrantz! - [Page Header] Create new PageHeaderSeparator component as part of the Page Header package

  • d9f96d7d8 #3739 Thanks @TheSisb! - [ThemeProvider, CustomizationProvider] Now accepts an optional style prop to override element styles.

    This is helpful in scenarios where ThemeProvider isn't wrapping your app root, but instead is nested in your DOM tree and needs some styling overrides.

  • 22a917aed #3740 Thanks @TheSisb! - [Table, DataGrid] Allow passing whiteSpace style prop to Th/DataGridHeader and Td/DataGridCell components.
  • f5a0ae961 #3662 Thanks @nkrantz! - [Page Header] Create new Page Header package. Page Header is a layout component that wraps all top level components on a page.

Patch Changes

  • 855830c89 #3735 Thanks @serifluous! - Remove evergreen font size definitions that inherit from global and update font-size-40 value
  • fbd399636 #3736 Thanks @SiTaggart! - [Theme]: patch bump in Paste fonts to fix a bug in the Twilio sans font regarding backticks not taking up physical space
  • ba0d7bcfb #3709 Thanks @SiTaggart! - [Menu]: Adds overflow scrolling behaviour on menus with a large number of items in, currently defaulting to 10 items

20.7.0

Minor Changes

  • ecbba0427 #3634 Thanks @nkrantz! - [Design tokens] add new box shadow token "shadow-border-right-inverse-strong" for vertical Tabs, update values of "shadow-border-top-primary-strongest" tokens in dark themes.
  • ecbba0427 #3634 Thanks @nkrantz! - [Box] Add new pseydo prop style _disabled_focus_after for controlling styling of disabled tabs.

Patch Changes

  • 4d7e2364d #3649 Thanks @nkrantz! - [Icons] Swap SVGs for ProductDestinationsIcon and ProductSourcesIcon because they were backwards.

20.6.0

Minor Changes

  • 28db966db #3579 Thanks @nkrantz! - [Tabs] Update styles of vertical and horizontal tabs, add new variants full_width and inverse_full_width which do the same thing as fitted tabs, but are more appropriately named.
  • 28db966db #3579 Thanks @nkrantz! - [In Page Navigation] Add vertical styles and update horizontal styles. Updated horizontal styles include a bottom border. Adds a new prop hideBottomBorder for specific cases when the bottom border shouldn't be visible.
  • 2c5f5935e #3584 Thanks @nkrantz! - [Topbar] Add third value to justify prop type on TopbarActions, "center", allowing actions within the topbar to be center justified. For use with ProgressSteps in the Wizard flow.
  • 28db966db #3579 Thanks @nkrantz! - [Design tokens] Add three new box shadow tokens, shadow-border-top-primary, shadow-border-top-inverse-strongest, and shadow-border-top-primary-strongest for use in the tabs package. Add new background color, color-background-inverse-strongest.
  • 28db966db #3579 Thanks @nkrantz! - [Box] Add four new pseudo prop style selectors for use in the tabs package: _selected_after, _focus_selected_after, _selected_hover_after, _focus_selected_hover_after.

Patch Changes

  • b97c0525b #3607 Thanks @SiTaggart! - [List] remove listStyleType from Ordered and Unordered List type signature as it is not passed to the underlying component
  • 949df9e5e #3612 Thanks @nkrantz! - [Customization] Minor change to customization tests to reflect updated prop change from 'variant' to 'variants' on CustomizationProvider.
  • 3d5d1db5e #3601 Thanks @nkrantz! - [Form] Change color of FormSectionDescription from color-text-weak to color-text
  • b97c0525b #3607 Thanks @SiTaggart! - [Tabs primitive] Updated dev depenedencies to include typescript and tsx for running build scripts
  • e238ce11a #3618 Thanks @SiTaggart! - [Modal Dialog Primitive] Updated dev depenedencies to include typescript and tsx for running build scripts
  • e238ce11a #3618 Thanks @SiTaggart! - [Non-modal dialog primitive] Updated dev depenedencies to include typescript and tsx for running build scripts
  • e238ce11a #3618 Thanks @SiTaggart! - [Menu primitve] Updated dev depenedencies to include typescript and tsx for running build scripts
  • e238ce11a #3618 Thanks @SiTaggart! - [Listbox primitive] Updated dev depenedencies to include typescript and tsx for running build scripts
  • e238ce11a #3618 Thanks @SiTaggart! - [Disclosure primitive] Updated dev depenedencies to include typescript and tsx for running build scripts
  • e238ce11a #3618 Thanks @SiTaggart! - [Combobox primitive] Updated dev depenedencies to include typescript and tsx for running build scripts
  • e238ce11a #3618 Thanks @SiTaggart! - [Tooltip primitive] Updated dev depenedencies to include typescript and tsx for running build scripts

20.5.0

Minor Changes

  • 3f6e05d10 #3541 Thanks @nkrantz! - [Data Grid] Add ability to override default "grid" role to be "treegrid" for making custom tree grid components using Data Grid. "treegrid" is the only valid type that can be passed to role.

  • 72ec59143 #3549 Thanks @TheSisb! - [ProgressBar] Added new features and updated the design.

    The ProgressBarLabel component has the following new props:

    • valueLabel which displays a plain text value on the right side of the label.
    • disabled which applies disabled styling on the label.

    The ProgressBar component has updated styling and the following new props:

    • hasError which displays error styling.
    • disabled which displays disabled styling.
  • c023e7345 #3528 Thanks @nkrantz! - [Description List] Adjust spacing on Description List component. Description List was previously inheriting 14px of top and bottom margin from the HTML element. This change removes that spacing, so the component now has 0px of top/bottom margin. The same amount of spacing remains between DescriptionListTerms and DescriptionListDetails. In order to maintain designs with Description Lists, you may have to replace the removed spacing to your layout.

Patch Changes

  • 3f33da826 #3557 Thanks @nkrantz! - [Pagination] Improved TsDoc type annotations. Fix isHovered and isFocused props usage on PaginationArrow so the passed value is actually used.
  • 1a70ec030 #3543 Thanks @nkrantz! - [Chat Composer] Change overflowY from "scroll" to "auto" to prevent non-scrollable scrollbar bug
  • bc51057db #3545 Thanks @SiTaggart! - [Data Grid] Fix issue where form elements in the data-grid that immediately re-render on mount cause the tabIndex management system to faulter.
  • a684a6bc7 #3516 Thanks @abereghici! - chore(data-grid): change isCell function into a type guard and remove unnecessary type assertions

  • bc51057db #3545 Thanks @SiTaggart! - [Select] fix the hydration issue which caused the defaultValue prop to not be respected.

    Since the React v18 upgrade, we were only rendering the children options after the component and html select wrapper had mounted. The select would mount with a defaultValue of a child that didn't exist, then the children would be added, so it wouldn't know what value to select. To fix the hydration and defaultValue together we now re-render the entire Select on mount.

20.4.0

Minor Changes

  • dc8deca8a #3505 Thanks @nkrantz! - [Menu Primitive] new exports for use in the Account Switcher package: MenuPrimitiveInitialState and MenuPrimitiveStateReturn

  • 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.

  • dc8deca8a #3505 Thanks @nkrantz! - [Menu] Add all inherited props from "div" element to MenuGroupProps, add new exports: MenuInitialState and MenuStateReturn

Patch Changes

  • 7d155c53b #3488 Thanks @nkrantz! - [Slider] Add spacing between min and max range labels, wrap overflow content onto second line, and right-align max range label.
  • 7d155c53b #3488 Thanks @nkrantz! - [Meter] Add spacing between the min and max labels for readability, right-align the max label, and make overflow min/max labels wrap to second line.
  • f1121febc #3514 Thanks @TheSisb! - [Non-modal Dialog Primitive] Fix to always use a portal when rendering, even when using the state hook.
  • e2d2d5c91 #3474 Thanks @SiTaggart! - [User Dialog]: small improvement to the UserDiaglogButton types to omit the color prop type from Global HTML attributes, to prevent a type clash

20.3.0

Minor Changes

  • 4d5dc6842 #3470 Thanks @TheSisb! - [MultiSelect Combobox] allow inversion of control with the internal state so that consumers can manage the selectedItems array themselves. This enables functionality like clearing the selectedItems through an external Button.

Patch Changes

  • 554c23006 #3463 Thanks @nkrantz! - [Meter] Finalize designs of Meter component, bump to Production status, and add documentation.
  • f6320be83 #3462 Thanks @SiTaggart! - [combobox]: improve the way combobox handles hidden labels and conditional help text related aria attributes for improved accessibility
  • 80decbe21 #3478 Thanks @nkrantz! - [Slider] Update designs to reflect generic Paste value bar design with min and max value labels below the visual bar.

  • 455172f9e #3461 Thanks @SiTaggart! - [Codemods] Include new mappings:

    • ProgressBar
    • useMultiselectCombobox
    • useMultiSelectPrimitive

20.2.0

Minor Changes

  • 7bdac721b #3430 Thanks @nkrantz! - [Meter] Create Meter package. Meter is a visual representation of a numerical value within a known range.

Patch Changes

  • 424fa78d5 #3435 Thanks @TheSisb! - [Progress Bar] add new Progress Bar package. A Progress Bar visually displays the progression/duration of a system operation such as downloading, uploading, or processing information.
  • 611a2daaf #3456 Thanks @nkrantz! - [Theme] Change the type of sizeIcon tokens in the GenericThemeShape to be any. Previously they were incorrectly typed as the value of the token in the Twilio theme, which was preventing consumers from passing custom icon sizes using the Customization Provider.
  • e6ebb11f7 #3450 Thanks @TheSisb! - [MultiselectCombobox] fix bug where passing required would block form submit events. required now only blocks the submit event if no items are selected rather than when the input box is blank.
  • 29b6b7b65 #3459 Thanks @TheSisb! - [Combobox] Now opens the dropdown menu upwards when positioned towards the bottom of the viewport.
  • 10da7d27a #3454 Thanks @SiTaggart! - [Button] improved reset variant typing to allow style props enabling the creation of custom buttons

20.1.0

Minor Changes

  • c72b4b538 #3426 Thanks @SiTaggart! - [Chat Log] Better handling of user generated text with line breaks and forward Refs to the ChatLogger component for better control over displaying chat messages
  • feeaa90fa #3421 Thanks @TheSisb! - [React Spectrum Library] export the useProgressBar hook and the useMeter hook
  • 48c8d8271 #3402 Thanks @nkrantz! - [Alert Dialog] Add prop onConfirmDisabled to allow for the confirm button on destructive Alert Dialogs to be conditionally disabled. This interaction is primarily for use in the High Severity Delete Pattern.

Patch Changes

  • eb055b2b4 #3424 Thanks @loreina! - [Menu] Update destructive Menu items to use the new colorTextDestructive token
  • 2a1f8b954 #3425 Thanks @TheSisb! - [Input, Input Box] allow passing type="url" to the Input component for convenient browser validation.

20.0.1

Patch Changes

20.0.0

Major Changes

  • 733709127 #3395 Thanks @SiTaggart! - Modified the compile target of our JavaScript bundles from node to browser to minimize the risk of clashing with RequireJS. This is marked as a major out of an abundance of caution. You shouldn't need to do anything but we wanted you to be aware of the change on the off chance it has unintended consequences

Patch Changes

19.7.0

Minor Changes

  • bb49609a7 #3332 Thanks @TheSisb! - [Editable CodeBlock] Refined the API and added a wrapper and header component.
  • 54afe1ce8 #3378 Thanks @TheSisb! - [Slider] add new Slider package. A Slider is a draggable input that allows a user to select an imprecise numerical value within a range.
  • c4a70d95b #3371 Thanks @TheSisb! - [React-Spectrum-Library] Add wrapper around react-spectrum which exposes the useSlider, useSliderThumb, and useSliderState hooks.
  • 360d79922 #3350 Thanks @nkrantz! - [Visual Picker] Create new Visual Picker package for stylized radio and checkbox groups

Patch Changes

  • 3c8e02a3d #3346 Thanks @SiTaggart! - [Sidebar] fixed an issue with overlay sidebars where the topbar would be over the sidebar when sidebar is expanded
  • 360d79922 #3350 Thanks @nkrantz! - [Checkbox, Radio Group] export HiddenRadio, HiddenRadioState, HiddenCheckbox, and CheckboxIcon from package for use in Visual Picker package
  • 360d79922 #3350 Thanks @nkrantz! - [Inline control group] add new fieldStyleProps property to enable overriding styles for visual picker

  • 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
  • abf6c1912 #3347 Thanks @SiTaggart! - [Combobox] small fix for multiselect combobox listbox positioning now that it uses a portal
  • 360d79922 #3350 Thanks @nkrantz! - [Base Radio Checkbox] add new prop applyHoverStyles for extended styling abilities
  • bb49609a7 #3332 Thanks @TheSisb! - [Sidebar] SidebarNavigationItem now opens external links with the correct default rel and target attributes.
  • 93851962d #3349 Thanks @SiTaggart! - [Avatar]: set transparent background color for image based avatars so that transparent images are displayed as such. Also fix setting the size of icon and image avatars when placed in a group

19.6.0

Minor Changes

  • 61c310e78 #3317 Thanks @SiTaggart! - [Sidebar] Included skip link functionality, allowing consumers an easy way to create application navigation skip links. Added three new required props mainContentSkipLinkID, sidebarNavigationSkipLinkID and topbarSkipLinkID. Plus three optional internationalization props to translate the skip link text
  • 5b0d3f360 #3312 Thanks @nkrantz! - [Utils] Add useMergeRefs util (previously removed because it was unused) for use in the input package.
  • 61ba09fa3 #3309 Thanks @TheSisb! - [Code Editor Library] Add new Code Editor library package which wraps the excellent Monaco editor. Enables building full featured code editors in the browser, like Visual Studio code.
  • 5b0d3f360 #3312 Thanks @nkrantz! - [Box] Add PseudoPropStyles webkit_inner_spin_button and webkit_outer_spin_button and CustomStyleProp -moz-appearance to Box Primitive Style Props for use in the Input package for hiding native components from all browsers.
  • 5b0d3f360 #3312 Thanks @nkrantz! - [Input] Adjust type="number" Input to use native HTML element, add custom styling and functionality.
  • 61ba09fa3 #3309 Thanks @TheSisb! - [Editable Code Block] Add the new EditableCodeBlock component. Enables building code editors in the browser, styled with Paste default styles.
  • 61c310e78 #3317 Thanks @SiTaggart! - [Topbar] Enable application navigation by providing an ID to the topbar for users to jump to via skiplink navigation.

Patch Changes

  • b9d9e7123 #3328 Thanks @SiTaggart! - [Style-props] Create types for responsive versions of basic CSS properties to be use in Box and Text style primitives. Previously they were just static single css property values
  • b9d9e7123 #3328 Thanks @SiTaggart! - [Topbar] Allow responsive display properties on Topbar Actions to enable building responsive and adaptive topbars
  • 8f96d66a9 #3327 Thanks @TheSisb! - [Theme] Update Inter font version from 3.15 to 3.19, which fixes a Chrome issue with number emojis
  • b9d9e7123 #3328 Thanks @SiTaggart! - [Topbar] match z-index level to that of the sidebar so they share the same plane within an application

19.5.0

Minor Changes

  • 83307d2e2 #3306 Thanks @SiTaggart! - [Sidebar] Improved ability to place children, like badges, inside a navigation item and have it positioned nicely by default

Patch Changes

  • c05f8686a #3319 Thanks @SiTaggart! - [Text] exposing missing typography style properties that are allowed via typescript, but aren't actually implemented on the component. These include list-style-type, textOverflow and overflowWrap
  • e2f12ff7a #3299 Thanks @nkrantz! - [User Dialog] adjust padding of list items to more clearly define item groups

19.4.0

Minor Changes

  • 771da3b74 #3296 Thanks @TheSisb! - [SideModal] Add new prop hideOnEsc which enables closing the SideModal when the "Escape" keyboard key is pressed

Patch Changes

  • db35f7150 #3217 Thanks @TheSisb! - [Sidebar] SidebarBetaBadge no longer passes onClick when as="span". Other miscellaneous typescript fixes.
  • db35f7150 #3217 Thanks @TheSisb! - [User Dialog] ensure the user dialog list is correctly labelled for accessibility reasons
  • db35f7150 #3217 Thanks @TheSisb! - [Topbar] Update to the size of the User Dialog trigger for better alignment with other topbar related components
  • 771da3b74 #3296 Thanks @TheSisb! - [SideModal] Fix to correctly focus the close button when the SideModal first opens

19.3.0

Minor Changes

  • a2c1c910a #3272 Thanks @TheSisb! - [ProgressSteps] Add new ProgressSteps package. Progress steps show a user a clear path to complete a complex multi step task.
  • be917a43f #3271 Thanks @TheSisb! - [Chat Log] useChatLogger now exposes a clear function to clear all chats at once. Also, the animations have been slightly adjusted.

Patch Changes

  • 9e5b3b7f0 #3224 Thanks @TheSisb! - [Button] allow passing all style props to Button with variant="reset", effectively making it a Button primitive.
  • 9e5b3b7f0 #3224 Thanks @TheSisb! - [Design tokens] update the shadowFocusInverseInset token in the twilio and twilio-dark themes
  • 1ada1e37c #3260 Thanks @TheSisb! - [Combobox] prevent selection of disabled items when using keyboard navigation and the enter key
  • dd884662b #3279 Thanks @serifluous! - [Design tokens] Make focus shadows in evergreen theme consistent by matching them to twilio theme
  • 76b28cb9d #3255 Thanks @SiTaggart! - [Status] paired iconography should be decorative and paired with visible, descriptive text

19.2.0

Minor Changes

  • 5958ffb5b #3230 Thanks @SiTaggart! - [Menu] Add Menu Badge, and Checkbox and Radio group Menu Items added. Enables the ability to create menus from badges. Enables single and multiselect menu items.
  • 5958ffb5b #3230 Thanks @SiTaggart! - [Status] Introduces a new Status badge for communicating the status of processes and connections. Provides compositions of the Status Pattern for ease of use.
  • 9e6399dda #3208 Thanks @nkrantz! - [Badge] add size prop ("default" and "small") and add new variant ("subaccount"), export styles for Sidebar Beta Badge
  • 5958ffb5b #3230 Thanks @SiTaggart! - Created the Account Switcher and Product Switcher pacakges for use in Topbar and navigation UI kit
  • 5958ffb5b #3230 Thanks @SiTaggart! - [Badge] Update to default badge styles. Makes Badge styles more sharable with other packages.
  • 9e6399dda #3208 Thanks @nkrantz! - [Design tokens] add new box shadow tokens (shadow-border-subaccount, shadow-border-bottom-subaccount, shadow-border-inverse-new, shadow-border-bottom-inverse-new) and text tokens (color-text-subaccount, color-text-inverse-new) and update existing background color token (color-background-subaccount) for use in the subaccount badge and the sidebar beta badge
  • 48e5f1e5c #3225 Thanks @nkrantz! - [Design tokens] Add shadow-focus-inverse-inset token, adjust inverse text tokens for navigation ui kit

Patch Changes

  • 48e5f1e5c #3225 Thanks @nkrantz! - [Button, Help Text, In Page Navigation, Input, Input Box, Label, Select, Tab, Text Area] Update color text tokens for inverse styles
  • 0d57f59af #3171 Thanks @SiTaggart! - [Inline Code] Design upate to the default inline code to match the minimal styles with a view to deprecating "blue" inline code styles
  • 5958ffb5b #3230 Thanks @SiTaggart! - [Menu]: Improved handling of styling checked menu items and reserving space for the checkmark to prevent resizing on selection
  • d0ea87541 #3218 Thanks @nkrantz! - [Design tokens] update shadow-border-user token to fix grouped avatars bug in default theme
  • ed2ae23e2 #3212 Thanks @TheSisb! - [Sidebar] split up SidebarHeader so it now is composable with the new SidebarHeaderLabel and SidebarHeaderIconButton components

19.1.0

Minor Changes

  • d1d3088ca #3160 Thanks @nkrantz! - [Sidebar] Add SidebarCollapseButton and SidebarFooter components. Renamed ContentWrappers
  • dd43b8676 #3192 Thanks @SiTaggart! - [Code Block] Switch the Code block tabs to use the inverse variant of the Tabs component

Patch Changes

  • 1a09aa61d #3146 Thanks @serifluous! - [Design tokens] Fixed visual bugs in Evergreen theme tokens: $color-text-icon-brand-highlight, $color-background-overlay, $color-background-primary-strongest, $color-text-user
  • 0c3861824 #3154 Thanks @TheSisb! - [Theme] theme breakpoint values are now represented as px values instead of rem values. MediaQueries are more easily grokked as px values, and it simplifies development by eliminating variability in widths. In rare cases, some tests - like snapshot tests - may need to be updated.

  • c2de547e4 #3141 Thanks @SiTaggart! - [Design Tokens] adjusting inverse colors for the Twilio and Twilio-Dark themes

    • color-background-body-inverse from gray-110 to gray-100
    • shadow-border-inverse-weakest from gray-90 to gray-100
    • color-border-inverse-weakest from gray-90 to gray-100
  • c2de547e4 #3141 Thanks @SiTaggart! - [Tabs] update horizontal tabs style. They are now visually distinct from the InPageNavigation component.
  • b27913706 #3200 Thanks @TheSisb! - [Styling-library] expand the types allowed for emotion's CacheProvider. This change allows passing container which helps with setting styles on specific elements and shadow dom.
  • dd43b8676 #3192 Thanks @SiTaggart! - [Tabs] allow removing the top padding in the tab panel for greater control over the tab content alignment. Improved prop types to include inverse variants as being valid values to the variant prop.
  • e801b776b #3173 Thanks @SiTaggart! - [Box, Text]: inject the Paste Core version into the DOM for better debugging in consumer applications and remote inspection

19.0.1

Patch Changes

  • 215a44717 #3142 Thanks @TheSisb! - [Combobox] Fix incorrect dropdown menu position when Combobox is opened on a scrolled page.
  • c882c0884 #3140 Thanks @TheSisb! - [Combobox] Multiselect Combobox now correctly clears the input value when selecting an item in the dropdown.
  • ac5a84407 #3110 Thanks @SiTaggart! - [Select] Fixed a bug in dark mode on Windows where the options list was still white and the options were unreadable

19.0.0

Major Changes

  • e45d34c14 #3081 Thanks @nkrantz! - [Toast]

    • Remove __console_patch prop from the Toast package. This was a temporary z-index fix for console that is no longer necessary.
    • Add left prop to the Toast package so that consumers can place their Toasts according to their app's breakpoints. This feature enables mobile responsiveness for Toast.

  • 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.

Minor Changes

Patch Changes

  • 6730aac19 #3112 Thanks @nkrantz! - [Radio button group] Update styles to align with new Paste Twilio theme. Fix vertical spacing and border zIndex bugs.

  • 1e100909f #3105 Thanks @SiTaggart! - [Combobox, Form Pill Group] Updated Combobox styles as part of the One Twilio design update.

    Fixed height and alignment issues with Multi select Combobox and form pills

  • bce889344 #3090 Thanks @SiTaggart! - [Design Tokens, Theme] add ability to override the base font size that Paste uses from the HTML element tag via the new token $font-size-base. Also removes setting font size from the body element for when Paste is embedded into another application with its own styles
  • 3ab2bb6f4 #3114 Thanks @SiTaggart! - [Checkbox, Radio Group, Radio Button Group] improved backwards compat with React 17 types
  • dc07ca41b #3106 Thanks @SiTaggart! - [Side Modal] set screen position to fixed to ensure the dialog is always full height in long scrolling screens'

18.1.0

Minor Changes

  • d4122a492 #3067 Thanks @shleewhite! - [Tabs] Add inverse and inverse_fitted variants. Update styles to align with new Paste Twilio theme
  • 45cdceb92 #3063 Thanks @shleewhite! - [Menu] Add destructive_group_item variant to MenuItem. Update styles to align with new Paste Twilio theme.
  • b87a7c720 #3053 Thanks @shleewhite! - [Minimizable Dialog] Add toggleMinimized function to the object useMinimizableDialogState returns. Update styles to align with new Paste Twilio theme.
  • d4122a492 #3067 Thanks @shleewhite! - [In Page Navigation] Add inverse and inverse_fullWidth variants. Update styles to align with new Paste Twilio theme.
  • b27a244dd #3043 Thanks @shleewhite! - [Inline Code] Add variant prop, with "default" and "minimal" styles. Update styles to align with new Paste Twilio theme.

Patch Changes

  • e7f4fcdaf #3062 Thanks @nkrantz! - [Alert] Update styles to align with new Paste Twilio theme.

    In order to see all of the new style updates, you may have to remove any <Text> component children from your Alerts, passing in the string as a direct child of Alert.

  • 6b159b597 #3069 Thanks @nkrantz! - [Design tokens] update default theme token to fix Avatar styles, no changes to new Twilio theme
  • b942178ad #3052 Thanks @TheSisb! - [Theme] Add theme override via url by using #paste-theme-override=[newtheme].
  • 71ce96cdc #3060 Thanks @SiTaggart! - [Checkbox, Radio group] Update to styles for the One Twilio Design Language refresh
  • 71ce96cdc #3060 Thanks @SiTaggart! - [Radio group] Improved checked state tracking for uncontrolled radios to help with styling
  • a081285f2 #3034 Thanks @SiTaggart! - [Design Tokens]: correct color contrast token pair naming for decorative background 10

  • e7f4fcdaf #3062 Thanks @nkrantz! - [Toast] Update styles to align with new Paste Twilio theme.

    In order to see all of the new style updates, you may have to remove any <Text> component children from your Toasts, passing in the string as a direct child of Toast.

18.0.0

Major Changes

Minor Changes

  • b1ae14e22 #3000 Thanks @shleewhite! - [Detail Text] create the new DetailText component, meant to be used for short pieces of secondary text content.
  • 0acdf3486 #3049 Thanks @SiTaggart! - [Box, Text, Style Props, Theme]: remove checking and warning for deprecated design tokens and themes that have been removed from the system

  • 5f5790d1c #3032 Thanks @shleewhite! - [Popover] Add new props:

    • initialFocusRef: focuses a ref when the Popover opens
    • width: sets the width of the Popover, up to size50.

    Update styles to align with new Paste Twilio theme

Patch Changes

17.7.0

Minor Changes

Patch Changes

17.6.0

Minor Changes

Patch Changes

  • 0b497ed21 #2961 Thanks @shleewhite! - [Icons] update the ChevronDisclosureIcon, deprecate ChevronDisclosureExpandedIcon and ChevronDisclosureCollapsedIcon

17.5.0

Minor Changes

  • b7e429ef5 #2948 Thanks @Niznikr! - [Theme] Add new themes twilio and twilio-dark as part of our new unified design language to be used for Twilio products. Add Twilio Sans Text and Twilio Sans Display fonts used in the themes.
  • 4ae8972b4 #2971 Thanks @TheSisb! - [Theme] Add cacheProviderProps to the ThemeProvider which allows passing a custom key and nonce into Emotion's CacheProvider to get around CSP limitations.

  • b7e429ef5 #2948 Thanks @Niznikr! - [Design Tokens] Add tokens for new themes twilio and twilio-dark:

    • Aliases: color-palette
      • Add palette-red-65
      • Add palette-red-05
      • Add palette-orange-05
      • Add palette-yellow-05
      • Add palette-green-05
      • Add palette-blue-05
      • Add palette-blue-55
      • Add palette-purple-05
  • 4ae8972b4 #2971 Thanks @TheSisb! - [Styling-library] Expose EmotionCacheProvider to pass in a key or nonce to help with Emotion + CSP

Patch Changes

  • 2fe476a71 #2949 Thanks @shleewhite! - [Combobox] Render the listbox in a portal to fix a bug where the contents of the listbox are cut off when it placed inside a scrolling container. Adds a new dependency on @radix-ui/react-use-rect.

17.4.0

Minor Changes

Patch Changes

17.3.0

Minor Changes

  • 45f503712 #2928 Thanks @Niznikr! - [Listbox Primitive] create a new Listbox Primitive component used to build accessible listboxes
  • 135df9631 #2908 Thanks @shleewhite! - [File Uploader] create a new File Uploader component meant to be used in situations where the user needs to upload multiple files.
  • 6e8b78f57 #2923 Thanks @nkrantz! - [Description list] create a new Description List package for displaying small static bits of data

Patch Changes

17.2.0

Minor Changes

  • b742fa207 #2859 Thanks @shleewhite! - [Lexical Library] add export for: CLEAR_EDITOR_COMMAND, CLEAR_EDITOR_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_NORMAL, COMMAND_PRIORITY_LOW, and COMMAND_PRIORITY_EDITOR

Patch Changes

  • b742fa207 #2859 Thanks @shleewhite! - [Chat Composer] refactor stories, create a new one called Conversations UI Kit Example.

  • 468b1b6d0 #2894 Thanks @gloriliale! - [Icons] Modify ProductSegmentIcon, add new product icons:

    • ProductAudiencesIcon
    • ProductConnectionsIcon
    • ProductEngageIcon
    • ProductPersonasIcon
    • ProductPrivacyIcon
    • ProductProtocolsIcon
    • ProductReverseETLIcon
    • ProductTraitsIcon
    • ProductUSSDIcon

17.1.0

Minor Changes

  • 026bf7f52 #2799 Thanks @SiTaggart! - [design-tokens, theme] updated mono spaced font in default and dark themes to use the new Twilio Sans Mono font
  • 6af951ded #2806 Thanks @nkrantz! - [Design Tokens]: add 7 new tokens for the Display Heading package: fontSizeDisplay10, fontSizeDisplay20, fontSizeDisplay30, fontWeightExtrabold, lineHeightDisplay10, lineHeightDisplay20, and lineHeightDisplay30.

Patch Changes

17.0.1

Patch Changes

17.0.0

Major Changes

  • 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.

Patch Changes

  • efffcde51 #2782 Thanks @shleewhite! - [Combobox] remove inherited HTML autoComplete prop because it conflicts with the autocomplete prop and remove state prop from Multiselect Combobox because we don't support using it with the useComboboxState hook.

16.0.1

Patch Changes

16.0.0

Major Changes

Minor Changes

Patch Changes

  • d068c208a #2711 Thanks @TheSisb! - [Combobox] Refine typings and styling for group options for Multiselect Combobox.
  • 7599162bc #2710 Thanks @gloriliale! - [Button] add box shadow to toggle button's pressed states to match regular button height
  • b5c19e60e #2685 Thanks @nkrantz! - [Avatar] Prevent underlines from being added to Avatar initials inside of anchors or display pills

15.3.0

Minor Changes

  • 312a3ccf6 #2660 Thanks @TheSisb! - [Utils] Add a useWindowSize hook which can be used to react to window resize events. This hook also returns the current responsive breakpoint index used by the design system.

  • 312a3ccf6 #2660 Thanks @TheSisb! - [Combobox] Several improvements, including the addition of the much awaited MultiselectCombobox component!

    • Improve styling of Combobox menu items
    • Performance improvements around virtualized list items
    • Add a new emptyState prop that is rendered when there are no items in the list.
    • Accessibility improvements.
  • 312a3ccf6 #2660 Thanks @TheSisb! - [Form Pill Group] Allow passing a display prop as either inline-flex or flex (default) to the FormPillGroup container.
  • fcd2de38a #2676 Thanks @shleewhite! - [Side Modal] create a new Side Modal component! This modal sits on top of the page on the right side. It should be used when you want a full height modal where you can interact with the rest of the page while it is open.

Patch Changes

  • 312a3ccf6 #2660 Thanks @TheSisb! - [Combobox Primtiive] Export additional Typescript types for the MultiSelect hook
  • fcd2de38a #2676 Thanks @shleewhite! - [Minimizable Dialog] fix generic HTMLDiv prop extension, add missing propTypes, export all component interfaces, and add missing peer/dev dependencies.

15.2.0

Minor Changes

  • 280c8725d #2641 Thanks @shleewhite! - [Code Block] create a new CodeBlock component, which allows you to display readable blocks of code 🎉
  • 280c8725d #2641 Thanks @shleewhite! - [Syntax Highlighter] Create a new library, @twilio-paste/syntax-highlighter-library. Supports: javascript, jsx, csharp, php, ruby, python, java, json, c, bash, shell, go, and groovy.
  • 257051d67 #2642 Thanks @gloriliale! - [Inline Code] Introducing the Inline Code component! Helpful for all those moments when a piece of text is actually representing code.

Patch Changes

  • 87146566c #2647 Thanks @SiTaggart! - [Combobox] Minor fix to controlled Comboboxes, where the input cursor would always jump to the end of the input string in autocomplete examples, even when you want to amend the beginning or middle. Cursor position should now remain in place as you type or modify the input value.
  • a890926a6 #2651 Thanks @SiTaggart! - [Chat Log]: replaces the deprecated CloseCircleIcon with ClearIcon in the ComposerAttachment component

15.1.0

Minor Changes

  • b79d20d2a #2595 Thanks @TheSisb! - [InputBox, Combobox, Select] InputBox's InputChevronWrapper has refreshed styling which will appear in Select and Combobox. InputBox now exports a getInputChevronIconColor() function which returns a textColor to use for styling the icon child to the InputChevronWrapper.
  • 7e75f8119 #2574 Thanks @SiTaggart! - [table, data-grid] adding sticky header functionality to both the Table and Data Grid components
  • b8c3d33c9 #2623 Thanks @shleewhite! - [Minimizable Dialog] Introducing the all-new Minimizable Dialog component! This component can be used for a chat widget so that users can keep the chat open while they interact with the rest of the page. 🎉
  • bd0a3feaa #2625 Thanks @nkrantz! - [Design tokens] add new icon size and line height tokens (05), adust dark theme background tokens
  • 68d851d7a #2620 Thanks @shleewhite! - [Callout] Introducing the all-new Callout component! This component is useful in those moments when you want to highlight important, static information in a page of text. 🎉

Patch Changes

  • bd0a3feaa #2625 Thanks @nkrantz! - [Box] add a _checked_hover pseudo selector style prop for use in switch package

15.0.0

Major Changes

  • 364083627 #2577 Thanks @zahnster! - [Design tokens] Created a new category of design token, Data Visualization, and subsequently relocated all of the Data Visualization tokens from the generic Color category. If you are using categorized Data Visualization design tokens, you will need to update their reference.

Minor Changes

  • 12c4ba22a #2578 Thanks @TheSisb! - [box, style-props] Enable CSS Grid on Box by adding all the requisite style props to the Box component.

Patch Changes

  • 364083627 #2577 Thanks @zahnster! - [Theme] Updated Data Visualization colors to use the new Data Visualization category from the Design Tokens package.

14.2.0

Minor Changes

  • f510fea8 #2506 Thanks @SiTaggart! - [Alert Dialog, Modal]: changing header and footer elements to be more generic HTML elements to prevent global banner and contentinfo landmarks being placed in the DOM when using just a Dialog
  • 95b65bdfd #2526 Thanks @TheSisb! - [Design Tokens] add color-background-error-strongest and color-text-error-stronger tokens
  • 95b65bdfd #2526 Thanks @TheSisb! - [Form Pill Group] add error variant, update styles, and support disabled pills

  • f9796f1ce #2520 Thanks @gloriliale! - [Chat Log] Add new components for related to events and bookends:

    • ChatBookend
    • ChatBookendItem
    • ChatEvent

Patch Changes

14.1.0

Minor Changes

  • 0aa52162 #2501 Thanks @gloriliale! - [Chat log] Add several new components related to displaying attachments:

    • ComposerAttachmentCard
    • ChatAttachment
    • ChatAttachmentLink
    • ChatAttachmentDescription

Patch Changes

14.0.0

Major Changes

  • 70fb21269 #2454 Thanks @shleewhite! - [Textarea] Update textarea to use @twilio-paste/react-autosize-textarea library and add the resize prop which allows users to resize the textarea height.

Minor Changes

  • 1c7765ac0 #2467 Thanks @andipants12! - [Design tokens] Add a new generic export featuring additional metadata. This can be used in documentation or software tooling.

    • CommonJS export tokens.gatsby.js
    • complimentary declaration file included tokens.gatsby.d.ts
    • Maps token buckets/categories (e.g. "background-colors") to a list of token objects.

Patch Changes

  • ae9dd50f #2466 Thanks @TheSisb! - [Table] removed uneccessarily spread prop on Tr component and set an initial value correctly for the context provider
  • ae9dd50f #2466 Thanks @TheSisb! - [All packages] Update our ESBuild version and remove minification of identifiers in our production builds.

13.0.1

Patch Changes

  • 12a5e83e #2449 Thanks @shleewhite! - Made a slight improvement to the TypeScript typings of several packages for better interoperability.
  • 81fb5944 #2410 Thanks @nkrantz! - [Tabs] Enable left/right arrow key tab switching on vertical tabs in addition to up/down

13.0.0

Major Changes

  • 09762f0f1 #2376 Thanks @andipants12! - [Styling Library] Upgrade to Emotion v11

    • replace @emotion/core with @emotion/react
    • bump @emotion/styled to v11
    • remove emotion, remove emotion-themeing
    • both packages now included with @emotion/react

Minor Changes

  • 09762f0f #2376 Thanks @andipants12! - [Box] Small updates to usage of styled to create the Box component. Small type updates (to adopt utility types).

Patch Changes

12.1.0

Minor Changes

Patch Changes

  • 322400c6 #2282 Thanks @zahnster! - [Animation Library] Updates React Spring dependencies to resolve bug with RequestAnimationFrame calls

12.0.0

Major Changes

Patch Changes

  • 3482db481 #2355 Thanks @TheSisb! - [Design-Tokens] remove the 'Courier New' font from the code font family, falling back to 'Courier' instead.

11.5.0

Minor Changes

  • f5ce8b0c6 #2335 Thanks @andipants12! - [Fix] Remediate erratic scrolling behavior for grouped combobox. Scroll function for the virtualization library was being called even though grouped comboboxes are not virtualized. The jumping behavior on scroll was observed because the indices in the virtual list and the actual list did not match. Added guard to prevent the scroll function from the virtualization library from being called.

Patch Changes

  • b6ccaa266 #2347 Thanks @gloriliale! - [Alert, Modal, Popover, Toast] Adjust close icon's hover state color, which was previously being overwritten.
  • 91d20b99 #2328 Thanks @TheSisb! - [Theme & Customization] Fix an issue where animations would run once regardless of if animations should be disabled.
  • 91d20b99f #2328 Thanks @TheSisb! - [Skeleton-Loader]: Small animation tweak so that the highlight fully moves through the skeleton loader correctly at the end state.

11.4.0

Minor Changes

Patch Changes

11.3.0

Minor Changes

  • b1359c95e #2307 Thanks @SiTaggart! - [Table] Adds the ability to safely render tables for mobile screens using the scrollHorizontally prop. Also adds the noWrap prop to control cell density by preventing line wrapping.
  • b1359c95e #2307 Thanks @SiTaggart! - [Data grid]: inherit more things from the base table component, including the new responsive and no line wrapping behaviours for better table rendering options.
  • cf5878d8 #2285 Thanks @SiTaggart! - [Box, Text] Prevented styling props from being forwarded to their HTML DOM nodes in the browser for a cleaner DOM inspector view

Patch Changes

11.2.0

Minor Changes

  • 55d0528b #2286 Thanks @gloriliale! - [Badge] Update Badge component to add decorative and counter variants, promote to stage 2
  • 27528be7 #2286 Thanks @gloriliale! - [Design Tokens] added new background color, box shadow, text color, border color, border radius tokens to support badge styling

Patch Changes

11.1.2

Patch Changes

11.1.1

Patch Changes

11.1.0

Minor Changes

  • f696cb17e #2200 Thanks @TheSisb! - [data-visualization] Add new package @twilio-paste/data-visualization-library which exports a React hook to theme Highcharts.

  • 0cd424df4 #2184 Thanks @loreina! - [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 #2184 Thanks @loreina! - [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

Patch Changes

  • c867e3f48 #2237 Thanks @SiTaggart! - Updated a build dependency (esbuild) which changes the output of our builds slightly, without materially changing anything about the code.

  • 563a76ba3 #2249 Thanks @nkrantz! - [tooltip]

    • Update tooltip arrow stroke to colorBorderInverseWeaker
    • Update tooltip border color to colorBorderInverseWeaker

  • 563a76ba3 #2249 Thanks @nkrantz! - [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

  • 563a76ba3 #2249 Thanks @nkrantz! - [modal]

    • Update modal header border bottom color to colorBorderWeak
    • Update modal footer border top color to colorBorderWeak

  • 563a76ba3 #2249 Thanks @nkrantz! - [skeleton-loader]

    • Update animated background color to use rgba(255, 255, 255, 0.4)

  • 563a76ba3 #2249 Thanks @nkrantz! - [input-box]

    • Update default box shadow hover to shadowBorderPrimaryStronger
    • Update default box shadow hover when error and not hidden to shadowBorderErrorStronger
    • Update inverse background color when disabled and not hidden to colorBackgroundInverse

  • 563a76ba3 #2249 Thanks @nkrantz! - [button]

    • Update DestructiveButton default text color to colorTextInverse
    • Update PrimaryButton default text color to colorTextInverse
    • Update DestructiveLinkButton active text color to colorTextLinkDestructiveStrongest
    • Update InverseButton box shadow to shadowBorderInverseWeakest
    • Update LinkButton active text color to colorTextLinkStrongest

11.0.1

Patch Changes

  • 72b2db53 #2155 Thanks @andipants12! - [Combobox] Do not conditionally render the useCombobox hook inside the Combobox component.

    • passing a state object from useCombobox via props to the component caused unexpected side effects
    • introduces conditional render of the component with its' own hook invocation, or with the forwarded state object

  • Updated dependencies [72b2db53]:

11.0.0

Major Changes

  • 0a52eeee #2168 Thanks @shleewhite! - [Design Tokens] Deprecated the console theme. The package no longer exports console tokens, the default tokens should be used instead.

Minor Changes

  • 0a52eeee #2168 Thanks @shleewhite! - [Theme] Deprecated the console theme. Using theme="console" in the Theme.Provider returns the default theme and ConsoleThemeShape returns the DefaultThemeShape. The default theme should be used instead.
  • 04de0d1d #2093 Thanks @TheSisb! - [Design Tokens] Add data-visualization tokens for 10 categorical (sequential) colors. These can be used to accessibly theme chart content, like bars in bar charts or lines in line charts.

Patch Changes

  • fd23d95b #2151 Thanks @gloriliale! - [Breadcrumb] spread props onto Anchor or Text of breadcrumb, not the list item wrapping it.
  • c72064fa #2150 Thanks @TheSisb! - [Core] Fixed an incorrect path in the tsconfig.json file. Thanks @abereghici!

10.20.0

Minor Changes

  • ab0b98bc #2088 Thanks @gloriliale! - [Heading] Added the prop "display" to Heading to make aligning Headings with Icons possible

Patch Changes