Box
The Box primitive is one of the pillars of our system. It can be any HTML element and can receive many of our token values as props. We use Box to build most of our other components.
Change Log
11.0.2
Patch Changes
098c2bbfb#4374 Thanks @nkrantz! - [Box] removeclassNamefromBOX_PROPS_TO_BLOCKso thatsafelySpreadBoxPropsdoesn't strip away usage ofstyled. Necessary for One Console chrome team to customize certain components.styledshould not be used by other teams andclassNameshould not be used at all with Paste components.
11.0.1
Patch Changes
262c1b715#4281 Thanks @PixeledCode! - [all packages]: add use client directive to the components and icons. This will make paste library compatible with server components
11.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
- Updated dependencies [
f48211e56]:- @twilio-paste/customization@9.0.0
- @twilio-paste/animation-library@3.0.0
- @twilio-paste/styling-library@4.0.0
- @twilio-paste/style-props@10.0.0
- @twilio-paste/theme@12.0.0
- @twilio-paste/types@7.0.0
10.4.0
Minor Changes
36bd1e305#4168 Thanks @PixeledCode! - [Box]: Add cite prop for use with Blockquote
10.3.0
Minor Changes
ecbba0427#3634 Thanks @nkrantz! - [Box] Add new pseydo prop style_disabled_focus_afterfor controlling styling of disabled tabs.
10.2.0
Minor Changes
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! - [Box] Improved TsDoc type annotations
10.1.0
Minor Changes
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.
10.0.0
Major Changes
733709127#3395 Thanks @SiTaggart! - Modified the compile target of our JavaScript bundles fromnodetobrowserto 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
- Updated dependencies [
733709127]:- @twilio-paste/color-contrast-utils@5.0.0
- @twilio-paste/customization@8.0.0
- @twilio-paste/design-tokens@10.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
9.2.0
Minor Changes
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.
Patch Changes
b9d9e7123#3328 Thanks @SiTaggart! - [Box] Allow responsive values for the CSS properties Box supports as style props.
9.1.0
Minor Changes
c2de547e4#3141 Thanks @SiTaggart! - [Box] add_disabled_focuspseudoprop style
Patch Changes
e801b776b#3173 Thanks @SiTaggart! - [Box, Text]: inject the Paste Core version into the DOM for better debugging in consumer applications and remote inspection
9.0.0
Major Changes
3ab2bb6f4#3114 Thanks @SiTaggart! - ### Breaking changeWe have moved
@types/reactand@types/react-domto 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/reactand@types/react-domare installed as dependencies of your application.
Patch Changes
3ab2bb6f4#3114 Thanks @SiTaggart! - [Box, Sibling-Box, Text] improved backwards compat with React 17 typesUpdated dependencies [
bce889344,3ab2bb6f4]:- @twilio-paste/theme@10.0.0
- @twilio-paste/customization@7.0.0
- @twilio-paste/style-props@8.0.0
- @twilio-paste/types@5.0.0
8.1.0
Minor Changes
71f5b1898#3033 Thanks @gloriliale! - [Box] Add_pressed_disabledand_pressed_activepseudo styles.
8.0.0
Major Changes
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.
Minor Changes
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
Patch Changes
- Updated dependencies [
dbd9bf992,3c89fd83d,d97098846,0acdf3486,ef094db4a,0acdf3486]:- @twilio-paste/design-tokens@9.0.0
- @twilio-paste/customization@6.0.0
- @twilio-paste/animation-library@1.0.0
- @twilio-paste/styling-library@2.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
7.1.2
Patch Changes
7.1.1
Patch Changes
a4c9e70b0#2763 Thanks @shleewhite! - Update ESLint rules, which changed some formatting.
7.1.0
Minor Changes
fcd2de38a#2676 Thanks @shleewhite! - [Box, Style Props] add support for inset CSS property
Patch Changes
7.0.1
Patch Changes
6555c7bf5#2582 Thanks @shleewhite! - [Box] add pressed_focus and pressed_hover pseudoselectors
bd0a3feaa#2625 Thanks @nkrantz! - [Box] add a_checked_hoverpseudo selector style prop for use in switch package
7.0.0
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
- Updated dependencies [
12c4ba22a,364083627,364083627,364083627,364083627]:- @twilio-paste/style-props@6.0.0
- @twilio-paste/design-tokens@8.0.0
- @twilio-paste/theme@8.0.0
- @twilio-paste/customization@5.0.0
6.0.2
Patch Changes
95b65bdfd#2526 Thanks @TheSisb! - [Box] add missing disabled prop and _focus_hover pseudoSelector prop
6.0.1
Patch Changes
ae9dd50f#2466 Thanks @TheSisb! - [All packages] Update our ESBuild version and remove minification of identifiers in our production builds.
6.0.0
Minor Changes
09762f0f#2376 Thanks @andipants12! - [Box] Small updates to usage ofstyledto create theBoxcomponent. Small type updates (to adopt utility types).
Patch Changes
- Updated dependencies [
09762f0f1,09762f0f1]:- @twilio-paste/styling-library@1.0.0
- @twilio-paste/theme@7.0.0
- @twilio-paste/customization@4.0.0
- @twilio-paste/style-props@5.0.0
5.2.0
Minor Changes
28d87c14b#2383 Thanks @andipants12! - [Box, Text, Style-props] CSS types package dependency upgrade
5.1.0
Minor Changes
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
5.0.2
Patch Changes
73c596919#2269 Thanks @SiTaggart! - Fixed a regression with the compilation script that caused incompatible ESM module importing of JSON files.
5.0.1
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.
5.0.0
Patch Changes
- Updated dependencies [
0a52eeee,0a52eeee,04de0d1d,04de0d1d,04de0d1d]:- @twilio-paste/design-tokens@7.0.0
- @twilio-paste/theme@6.0.0
- @twilio-paste/style-props@4.0.0
- @twilio-paste/customization@3.0.0
4.2.5
Patch Changes
b7675915#1985 Thanks @TheSisb! - For debugging purposes we now ship afilename.debug.jsunminified version of each component or library in Paste.
ed5c0a49c#1965 Thanks @shleewhite! - Upgrade Paste to use React 17 by default, but maintain React 16 support for consumers.
4.2.4
Patch Changes
9d32315e#1879 Thanks @SiTaggart! - Added three new pseudo selectors to be used on Box and Text. You can now style selected and hover, selected and focus and selected and focus-visible
4.2.3
Patch Changes
26b25e18#1816 Thanks @SiTaggart! - [Box] exports the getCustomElementStyles utility function
4.2.2
Patch Changes
4964821b#1771 Thanks @richbachman! - [Box] Added the following style props to support input:PsuedoProps:
- __webkit_datetime_edit
- __webkit_calendar_picker_indicator_hover
StyleProps:
- -webkit-text-fill-color
- -webkit-opacity
4.2.1
Patch Changes
8654c408#1785 Thanks @SiTaggart! - [Box]: Box now handles the case where a variant being set on the component, does not appear in the elements object set on the Customization Provider
4.2.0
Minor Changes
14c6fd2e#1743 Thanks @andipants12! - [Box] Add column-gap and row-gap (CSS grid, flex box) to Box API.
4.1.1
Patch Changes
24bdd104#1654 Thanks @richbachman! - [Box] AddedfocusVisbletoPseudoPropStyles.
4.1.0
Minor Changes
7d703959#1599 Thanks @SiTaggart! - [Box] Enable Box to respect element customizations set on the customization provider. Box now enables setting an element name on the underlying HTML element and checks the emotion theme object to determine whether it should merge in custom styles to the ones set by the component author.
4.0.7
Patch Changes
b98b3713#1426 Thanks @SiTaggart! - Add the ability to warn consumers that they are using a deprecated Design Token using prop type validation on the Box and Text component
4.0.6
Patch Changes
4.0.5
Patch Changes
25a1f632#1404 Thanks @SiTaggart! - update internal usage of design tokens to reflect new strong / weak nomenclature
4.0.4
Patch Changes
8fe6a2f4#1368 Thanks @richbachman! - Box: addedfont-variant-numericprop so we can control the usage of alternate glyphs for numbers, fractions, and ordinal markers.
4.0.3
Patch Changes
0eded1fd#1319 Thanks @SiTaggart! - Change internal dependencies to have minor range matching on version numbers
4.0.2
Patch Changes
- Updated dependencies [
514bd5aa]:- @twilio-paste/theme@5.0.1
- @twilio-paste/style-props@3.0.1
4.0.1
Patch Changes
4.0.0
Patch Changes
- Updated dependencies [
4c9ed5ca,26c828d8]:- @twilio-paste/design-tokens@6.6.0
- @twilio-paste/theme@5.0.0
- @twilio-paste/style-props@3.0.0
3.0.1
Patch Changes
- Updated dependencies [
944c3407]:- @twilio-paste/design-tokens@6.5.2
- @twilio-paste/style-props@2.0.1
- @twilio-paste/theme@4.3.1
3.0.0
Patch Changes
- Updated dependencies [
f1675586]:- @twilio-paste/theme@4.3.0
- @twilio-paste/style-props@2.0.0
2.13.2
Patch Changes
a12acb61#1158 Thanks @richbachman! - Pinned all twilio-paste package versions in order to keep them in sync with core when they are updated by changesets.Updated dependencies [
a12acb61,a12acb61]:- @twilio-paste/theme@4.2.2
- @twilio-paste/style-props@1.9.2
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
2.13.1 (2021-01-25)
Note: Version bump only for package @twilio-paste/box
2.13.0 (2021-01-21)
Features
2.12.3 (2021-01-15)
Note: Version bump only for package @twilio-paste/box
2.12.2 (2021-01-07)
Note: Version bump only for package @twilio-paste/box
2.12.1 (2020-12-17)
Note: Version bump only for package @twilio-paste/box
2.12.0 (2020-12-15)
Features
- box: remove propType checking (e780672)
2.11.13 (2020-12-11)
Note: Version bump only for package @twilio-paste/box
2.11.12 (2020-12-11)
Bug Fixes
- box: accomodate the lack of color key on theme (8c861a5)
2.11.11 (2020-12-09)
Note: Version bump only for package @twilio-paste/box
2.11.10 (2020-12-02)
Note: Version bump only for package @twilio-paste/box
2.11.9 (2020-11-11)
Note: Version bump only for package @twilio-paste/box
2.11.8 (2020-11-06)
Note: Version bump only for package @twilio-paste/box
2.11.7 (2020-11-05)
Note: Version bump only for package @twilio-paste/box
2.11.6 (2020-10-23)
Note: Version bump only for package @twilio-paste/box
2.11.5 (2020-10-15)
Note: Version bump only for package @twilio-paste/box
2.11.4 (2020-10-13)
Note: Version bump only for package @twilio-paste/box
2.11.3 (2020-10-07)
Note: Version bump only for package @twilio-paste/box
2.11.2 (2020-10-07)
Note: Version bump only for package @twilio-paste/box
2.11.1 (2020-10-07)
Note: Version bump only for package @twilio-paste/box
2.11.0 (2020-10-07)
Features
- box: allow some select related props in the interface (60876f8)
2.10.6 (2020-09-22)
Note: Version bump only for package @twilio-paste/box
2.10.5 (2020-09-21)
Note: Version bump only for package @twilio-paste/box
2.10.4 (2020-09-15)
Note: Version bump only for package @twilio-paste/box
2.10.3 (2020-09-15)
Note: Version bump only for package @twilio-paste/box
2.10.2 (2020-09-08)
Note: Version bump only for package @twilio-paste/box
2.10.1 (2020-09-08)
Note: Version bump only for package @twilio-paste/box
2.10.0 (2020-09-03)
Features
- box: add support for word-break prop (136893e)
2.9.6 (2020-08-31)
Note: Version bump only for package @twilio-paste/box
2.9.5 (2020-08-31)
Note: Version bump only for package @twilio-paste/box
2.9.4 (2020-08-24)
Note: Version bump only for package @twilio-paste/box
2.9.3 (2020-08-19)
Note: Version bump only for package @twilio-paste/box
2.9.2 (2020-08-12)
Note: Version bump only for package @twilio-paste/box
2.9.1 (2020-08-12)
Note: Version bump only for package @twilio-paste/box
2.9.0 (2020-08-06)
Features
- box: added two style props and refactored typings (06541c8)
2.8.3 (2020-08-04)
Note: Version bump only for package @twilio-paste/box
2.8.2 (2020-08-04)
Note: Version bump only for package @twilio-paste/box
2.8.1 (2020-07-31)
Note: Version bump only for package @twilio-paste/box
2.8.0 (2020-07-30)
Bug Fixes
- box: add link attribute typings and backgroundAttachment (bc33774)
Features
- box: accept typography style props and space X/Y props (882dd4d)
2.7.0 (2020-07-29)
Features
2.6.5 (2020-07-22)
Note: Version bump only for package @twilio-paste/box
2.6.4 (2020-07-15)
Bug Fixes
- box: allow alt and src props on box (0acbaff)
2.6.3 (2020-07-14)
Note: Version bump only for package @twilio-paste/box
2.6.2 (2020-07-14)
Note: Version bump only for package @twilio-paste/box
2.6.1 (2020-07-01)
Note: Version bump only for package @twilio-paste/box
2.6.0 (2020-06-29)
Features
- box: accept textTransform css prop (5cb9c8f)
2.5.5 (2020-06-25)
Note: Version bump only for package @twilio-paste/box
2.5.4 (2020-06-22)
Note: Version bump only for package @twilio-paste/box
2.5.3 (2020-06-18)
Note: Version bump only for package @twilio-paste/box
2.5.2 (2020-06-16)
Note: Version bump only for package @twilio-paste/box
2.5.1 (2020-06-12)
Note: Version bump only for package @twilio-paste/box
2.5.0 (2020-06-10)
Features
- box: enable css 'textOverflow' prop, for ellipsis (af0abd6)
2.4.9 (2020-06-05)
Note: Version bump only for package @twilio-paste/box
2.4.8 (2020-06-01)
Note: Version bump only for package @twilio-paste/box
2.4.7 (2020-06-01)
Note: Version bump only for package @twilio-paste/box
2.4.6 (2020-05-27)
Bug Fixes
- box: allow text-decoration style prop (50aac91)
2.4.5 (2020-05-20)
Bug Fixes
- box: allow ref on the interface of a box (5853b39)
2.4.4 (2020-05-07)
Note: Version bump only for package @twilio-paste/box
2.4.3 (2020-05-07)
Note: Version bump only for package @twilio-paste/box
2.4.2 (2020-05-04)
Bug Fixes
- box: switch to new spacing prop validators (045625e)
2.4.1 (2020-05-01)
Note: Version bump only for package @twilio-paste/box
2.4.0 (2020-04-25)
Features
- box: export interface prevent undefined pseudo selectors (7e6363e)
2.3.1 (2020-04-22)
Note: Version bump only for package @twilio-paste/box
2.3.0 (2020-04-17)
Features
- components: promote text components, spinner and primitive to prod (5605adc)
2.2.10 (2020-04-15)
Note: Version bump only for package @twilio-paste/box
2.2.9 (2020-04-08)
Bug Fixes
- box: package dependencies updated to be correct (87f302a)
2.2.8 (2020-04-07)
Note: Version bump only for package @twilio-paste/box
2.2.7 (2020-04-07)
Bug Fixes
- box: add missing invalid, indeterminate, checked pseudo selectors (a2d1f28)
2.2.6 (2020-04-02)
Note: Version bump only for package @twilio-paste/box
2.2.5 (2020-03-28)
Bug Fixes
- box: remove min-width:0 as a default (7b8e55b)
2.2.4 (2020-03-24)
Bug Fixes
- box: switch from theme-tokens to theme package dep (071e77a)
2.2.3 (2020-03-17)
Note: Version bump only for package @twilio-paste/box
2.2.2 (2020-03-17)
Note: Version bump only for package @twilio-paste/box
2.2.1 (2020-03-11)
Note: Version bump only for package @twilio-paste/box
2.2.0 (2020-03-06)
Bug Fixes
- add missing transitive peerDep on '@styled-system/css' (fdbb813)
Features
- box: add pseudo-class props and missing props (9463ddd)
2.1.12 (2020-03-02)
Note: Version bump only for package @twilio-paste/box
2.1.11 (2020-02-28)
Note: Version bump only for package @twilio-paste/box
2.1.10 (2020-02-26)
Bug Fixes
2.1.9 (2020-02-14)
Bug Fixes
- box: add missing peer deps (2281923)
2.1.8 (2020-02-13)
Note: Version bump only for package @twilio-paste/box
2.1.7 (2020-02-11)
Note: Version bump only for package @twilio-paste/box
2.1.6 (2020-02-11)
Note: Version bump only for package @twilio-paste/box
2.1.5 (2020-02-11)
Note: Version bump only for package @twilio-paste/box
2.1.4 (2020-02-03)
Note: Version bump only for package @twilio-paste/box
2.1.3 (2020-01-24)
Note: Version bump only for package @twilio-paste/box
2.1.2 (2020-01-17)
Note: Version bump only for package @twilio-paste/box
2.1.1 (2019-12-20)
Note: Version bump only for package @twilio-paste/box
2.1.0 (2019-12-19)
Features
- box: use style-props package, create method to safelySpreadProps (dc9f7fb)
2.0.4 (2019-12-05)
Note: Version bump only for package @twilio-paste/box
2.0.3 (2019-11-20)
Note: Version bump only for package @twilio-paste/box
2.0.2 (2019-11-18)
Bug Fixes
- design-tokens: update some blues, reds, and focus shadow (#185) (98d70cc)
- website: remove vague anchor do dont (#177) (8530c56)
2.0.1 (2019-11-12)
Bug Fixes
- prettier updated, updating formatting (8644831)
2.0.0 (2019-11-11)
Features
- icons: delete old icons, add new streamline icons (#129) (571791d)
- enable theme switching on the docsite (#124) (df797e5)
BREAKING CHANGES
icons: removed all the inherited icons since we're moving to a new system
chore(icons): update icon list for storybook
fix(spinner): use new icon
fix(storybook): use new icon for story
fix(story): button icons should be 24px
fix: adjust icon size tokens
feat: add iconSizes as separate key in theme-tokens
feat(icons): icons package to use tokens and update icons
fix(spinner): update to use tokens and new icons
fix(button): use correct spinner size
fix(icons): major icons package fixes
- huge overhaul to build process
- now uses rollup
- builds into cjs and esm directories
- made the package publishable to npm
- moved svg folder out of src, now src only holds react stuff
- updated scripts to use new paths and cleaned up the code
- programmatically generates rollup config from the icon-list command
chore: add new icons dist folders to gitignore
fix: spinner and button icon usage
feat(icons): add rollup icon list cache file
fix(core-bundle): sort packages for consistent builds
chore: use
esminstead ofesin rollup for correctnesschore: yarn.lock
fix(spinner): lint error
chore(icons): move rollup icon list
chore(spinner): use types package in story
fix(spinner): swap out destructured props for explicit props
1.1.0 (2019-10-31)
Features
1.0.0 (2019-10-29)
Features
- box: polish and fix (#125) (d151bad)
- finalise the Text component (#151) (b51c272)
- upgrading to styled-system v5 (#18) (2b3ebd8)
BREAKING CHANGES
box: many Box API changes
fix(theme-tokens): add sizes key for styled-system responsiveness
fix(absolute): update to newer Box
fix(types): allow for responsive values via array
fix(box): update story and light tweaks to OverflowProps
chore: update yarn.lock file
fix(types): many more types fixes
refactor: moved ValueOf into types package
fix(box): eslint error in story
fix(box): using the correct BorderProps definition
fix: we shouldn't allow users to pass the border shorthand, it circumvents tokens
fix: lint errors
fix(website): update box docs
fix(storybook): use theme breakpoints
0.3.1 (2019-09-16)
Note: Version bump only for package @twilio-paste/box
0.3.0 (2019-08-15)
Bug Fixes
- change @paste scope to @twilio-paste (#2) (1d8d2ff)