feat(icons): add status pattern #1774

nkrantz · 2021-08-13T19:26:47Z

Add status icons
Create Status Label Pattern doc page
Create live examples

Contributing to Twilio

All third-party contributors acknowledge that any contributions they provide will be made under the same open-source license that the open-source project is provided under.

I acknowledge that all my contributions will be made under the project's license.

changeset-bot · 2021-08-13T19:26:50Z

🦋 Changeset detected

Latest commit: 6ac5ccb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@twilio-paste/design-tokens	Patch
@twilio-paste/core	Patch
@twilio-paste/icons	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2021-08-13T19:36:17Z

✔️ Deploy Preview for paste-docs ready!

🔨 Explore the source changes: 6ac5ccb

🔍 Inspect the deploy log: https://app.netlify.com/sites/paste-docs/deploys/612fabfe62835700071b5c8d

😎 Browse the preview: https://deploy-preview-1774--paste-docs.netlify.app

github-actions · 2021-08-13T19:44:59Z

Size Change: +513 B (0%)

Total Size: 634 kB

Filename	Size	Change
`packages/paste-design-tokens/dist/themes/console/tokens.common.js`	3.81 kB	+69 B (+2%)
`packages/paste-design-tokens/dist/themes/console/tokens.es6.js`	3.75 kB	+68 B (+2%)
`packages/paste-design-tokens/dist/themes/dark/tokens.common.js`	3.23 kB	+60 B (+2%)
`packages/paste-design-tokens/dist/themes/dark/tokens.es6.js`	3.18 kB	+60 B (+2%)
`packages/paste-design-tokens/dist/themes/sendgrid/tokens.common.js`	3.19 kB	+66 B (+2%)
`packages/paste-design-tokens/dist/themes/sendgrid/tokens.es6.js`	3.14 kB	+66 B (+2%)
`packages/paste-design-tokens/dist/tokens.common.js`	3.84 kB	+63 B (+2%)
`packages/paste-design-tokens/dist/tokens.es6.js`	3.78 kB	+61 B (+2%)

ℹ️ View Unchanged

Filename	Size
`packages/paste-color-contrast-utils/dist/index.es.js`	14.9 kB
`packages/paste-color-contrast-utils/dist/index.js`	15.3 kB
`packages/paste-core/components/alert-dialog/dist/index.es.js`	1.69 kB
`packages/paste-core/components/alert-dialog/dist/index.js`	1.99 kB
`packages/paste-core/components/alert/dist/index.es.js`	1.26 kB
`packages/paste-core/components/alert/dist/index.js`	1.61 kB
`packages/paste-core/components/anchor/dist/index.es.js`	1.53 kB
`packages/paste-core/components/anchor/dist/index.js`	1.85 kB
`packages/paste-core/components/avatar/dist/index.es.js`	1.74 kB
`packages/paste-core/components/avatar/dist/index.js`	2.06 kB
`packages/paste-core/components/badge/dist/index.es.js`	1.86 kB
`packages/paste-core/components/badge/dist/index.js`	2.17 kB
`packages/paste-core/components/base-radio-checkbox/dist/index.es.js`	1.13 kB
`packages/paste-core/components/base-radio-checkbox/dist/index.js`	1.5 kB
`packages/paste-core/components/breadcrumb/dist/index.es.js`	1.08 kB
`packages/paste-core/components/breadcrumb/dist/index.js`	1.41 kB
`packages/paste-core/components/button/dist/index.es.js`	5.59 kB
`packages/paste-core/components/button/dist/index.js`	5.84 kB
`packages/paste-core/components/card/dist/index.es.js`	726 B
`packages/paste-core/components/card/dist/index.js`	1.07 kB
`packages/paste-core/components/checkbox/dist/index.es.js`	2.34 kB
`packages/paste-core/components/checkbox/dist/index.js`	2.65 kB
`packages/paste-core/components/combobox/dist/index.es.js`	13.2 kB
`packages/paste-core/components/combobox/dist/index.js`	13.6 kB
`packages/paste-core/components/date-picker/dist/index.es.js`	8.3 kB
`packages/paste-core/components/date-picker/dist/index.js`	8.65 kB
`packages/paste-core/components/disclosure/dist/index.es.js`	2.26 kB
`packages/paste-core/components/disclosure/dist/index.js`	2.6 kB
`packages/paste-core/components/display-pill-group/dist/index.es.js`	829 B
`packages/paste-core/components/display-pill-group/dist/index.js`	1.16 kB
`packages/paste-core/components/form-pill-group/dist/index.es.js`	1.36 kB
`packages/paste-core/components/form-pill-group/dist/index.js`	1.7 kB
`packages/paste-core/components/form/dist/index.es.js`	256 B
`packages/paste-core/components/form/dist/index.js`	692 B
`packages/paste-core/components/heading/dist/index.es.js`	918 B
`packages/paste-core/components/heading/dist/index.js`	1.25 kB
`packages/paste-core/components/help-text/dist/index.es.js`	923 B
`packages/paste-core/components/help-text/dist/index.js`	1.27 kB
`packages/paste-core/components/inline-control-group/dist/index.es.js`	956 B
`packages/paste-core/components/inline-control-group/dist/index.js`	1.3 kB
`packages/paste-core/components/input-box/dist/index.es.js`	2.05 kB
`packages/paste-core/components/input-box/dist/index.js`	2.34 kB
`packages/paste-core/components/input/dist/index.es.js`	1.51 kB
`packages/paste-core/components/input/dist/index.js`	1.86 kB
`packages/paste-core/components/label/dist/index.es.js`	1.13 kB
`packages/paste-core/components/label/dist/index.js`	1.48 kB
`packages/paste-core/components/list/dist/index.es.js`	984 B
`packages/paste-core/components/list/dist/index.js`	1.31 kB
`packages/paste-core/components/menu/dist/index.es.js`	1.9 kB
`packages/paste-core/components/menu/dist/index.js`	2.23 kB
`packages/paste-core/components/modal/dist/index.es.js`	2.66 kB
`packages/paste-core/components/modal/dist/index.js`	2.99 kB
`packages/paste-core/components/pagination/dist/index.es.js`	3.15 kB
`packages/paste-core/components/pagination/dist/index.js`	3.42 kB
`packages/paste-core/components/paragraph/dist/index.es.js`	642 B
`packages/paste-core/components/paragraph/dist/index.js`	984 B
`packages/paste-core/components/popover/dist/index.es.js`	1.48 kB
`packages/paste-core/components/popover/dist/index.js`	1.83 kB
`packages/paste-core/components/radio-group/dist/index.es.js`	1.59 kB
`packages/paste-core/components/radio-group/dist/index.js`	1.93 kB
`packages/paste-core/components/screen-reader-only/dist/index.es.js`	652 B
`packages/paste-core/components/screen-reader-only/dist/index.js`	996 B
`packages/paste-core/components/select/dist/index.es.js`	1.57 kB
`packages/paste-core/components/select/dist/index.js`	1.89 kB
`packages/paste-core/components/separator/dist/index.es.js`	778 B
`packages/paste-core/components/separator/dist/index.js`	1.11 kB
`packages/paste-core/components/skeleton-loader/dist/index.es.js`	1.02 kB
`packages/paste-core/components/skeleton-loader/dist/index.js`	1.37 kB
`packages/paste-core/components/spinner/dist/index.es.js`	744 B
`packages/paste-core/components/spinner/dist/index.js`	1.14 kB
`packages/paste-core/components/table/dist/index.es.js`	1.74 kB
`packages/paste-core/components/table/dist/index.js`	2.07 kB
`packages/paste-core/components/tabs/dist/index.es.js`	2.06 kB
`packages/paste-core/components/tabs/dist/index.js`	2.39 kB
`packages/paste-core/components/textarea/dist/index.es.js`	5.04 kB
`packages/paste-core/components/textarea/dist/index.js`	5.08 kB
`packages/paste-core/components/time-picker/dist/index.es.js`	8.51 kB
`packages/paste-core/components/time-picker/dist/index.js`	8.82 kB
`packages/paste-core/components/toast/dist/index.es.js`	3.04 kB
`packages/paste-core/components/toast/dist/index.js`	3.35 kB
`packages/paste-core/components/tooltip/dist/index.es.js`	1.11 kB
`packages/paste-core/components/tooltip/dist/index.js`	1.46 kB
`packages/paste-core/components/truncate/dist/index.es.js`	604 B
`packages/paste-core/components/truncate/dist/index.js`	947 B
`packages/paste-core/core-bundle/dist/alert-dialog.js`	210 B
`packages/paste-core/core-bundle/dist/alert.js`	194 B
`packages/paste-core/core-bundle/dist/anchor.js`	197 B
`packages/paste-core/core-bundle/dist/animation-library.js`	211 B
`packages/paste-core/core-bundle/dist/aspect-ratio.js`	205 B
`packages/paste-core/core-bundle/dist/avatar.js`	200 B
`packages/paste-core/core-bundle/dist/badge.js`	199 B
`packages/paste-core/core-bundle/dist/base-radio-checkbox.js`	218 B
`packages/paste-core/core-bundle/dist/box.js`	195 B
`packages/paste-core/core-bundle/dist/breadcrumb.js`	204 B
`packages/paste-core/core-bundle/dist/button.js`	201 B
`packages/paste-core/core-bundle/dist/card.js`	199 B
`packages/paste-core/core-bundle/dist/checkbox.js`	201 B
`packages/paste-core/core-bundle/dist/clipboard-copy-library.js`	219 B
`packages/paste-core/core-bundle/dist/color-contrast-utils.js`	219 B
`packages/paste-core/core-bundle/dist/combobox-primitive.js`	213 B
`packages/paste-core/core-bundle/dist/combobox.js`	203 B
`packages/paste-core/core-bundle/dist/customization.js`	206 B
`packages/paste-core/core-bundle/dist/date-picker.js`	205 B
`packages/paste-core/core-bundle/dist/design-tokens.js`	209 B
`packages/paste-core/core-bundle/dist/disclosure-primitive.js`	213 B
`packages/paste-core/core-bundle/dist/disclosure.js`	204 B
`packages/paste-core/core-bundle/dist/display-pill-group.js`	217 B
`packages/paste-core/core-bundle/dist/dropdown-library.js`	211 B
`packages/paste-core/core-bundle/dist/flex.js`	196 B
`packages/paste-core/core-bundle/dist/form-pill-group.js`	215 B
`packages/paste-core/core-bundle/dist/form.js`	197 B
`packages/paste-core/core-bundle/dist/grid.js`	196 B
`packages/paste-core/core-bundle/dist/heading.js`	199 B
`packages/paste-core/core-bundle/dist/help-text.js`	204 B
`packages/paste-core/core-bundle/dist/index.js`	1.17 kB
`packages/paste-core/core-bundle/dist/inline-control-group.js`	218 B
`packages/paste-core/core-bundle/dist/input-box.js`	206 B
`packages/paste-core/core-bundle/dist/input.js`	200 B
`packages/paste-core/core-bundle/dist/label.js`	196 B
`packages/paste-core/core-bundle/dist/list.js`	195 B
`packages/paste-core/core-bundle/dist/media-object.js`	202 B
`packages/paste-core/core-bundle/dist/menu-primitive.js`	210 B
`packages/paste-core/core-bundle/dist/menu.js`	196 B
`packages/paste-core/core-bundle/dist/modal-dialog-primitive.js`	219 B
`packages/paste-core/core-bundle/dist/modal.js`	196 B
`packages/paste-core/core-bundle/dist/non-modal-dialog-primitive.js`	224 B
`packages/paste-core/core-bundle/dist/pagination.js`	199 B
`packages/paste-core/core-bundle/dist/paragraph.js`	202 B
`packages/paste-core/core-bundle/dist/popover.js`	201 B
`packages/paste-core/core-bundle/dist/radio-group.js`	208 B
`packages/paste-core/core-bundle/dist/reakit-library.js`	211 B
`packages/paste-core/core-bundle/dist/screen-reader-only.js`	214 B
`packages/paste-core/core-bundle/dist/select.js`	197 B
`packages/paste-core/core-bundle/dist/separator.js`	199 B
`packages/paste-core/core-bundle/dist/sibling-box.js`	206 B
`packages/paste-core/core-bundle/dist/skeleton-loader.js`	211 B
`packages/paste-core/core-bundle/dist/spinner.js`	198 B
`packages/paste-core/core-bundle/dist/stack.js`	200 B
`packages/paste-core/core-bundle/dist/style-props.js`	202 B
`packages/paste-core/core-bundle/dist/styling-library.js`	210 B
`packages/paste-core/core-bundle/dist/table.js`	195 B
`packages/paste-core/core-bundle/dist/tabs-primitive.js`	210 B
`packages/paste-core/core-bundle/dist/tabs.js`	196 B
`packages/paste-core/core-bundle/dist/text.js`	195 B
`packages/paste-core/core-bundle/dist/textarea.js`	198 B
`packages/paste-core/core-bundle/dist/theme.js`	196 B
`packages/paste-core/core-bundle/dist/time-picker.js`	206 B
`packages/paste-core/core-bundle/dist/toast.js`	195 B
`packages/paste-core/core-bundle/dist/tooltip-primitive.js`	212 B
`packages/paste-core/core-bundle/dist/tooltip.js`	198 B
`packages/paste-core/core-bundle/dist/truncate.js`	198 B
`packages/paste-core/core-bundle/dist/types.js`	196 B
`packages/paste-core/core-bundle/dist/uid-library.js`	208 B
`packages/paste-core/layout/aspect-ratio/dist/index.es.js`	709 B
`packages/paste-core/layout/aspect-ratio/dist/index.js`	1.11 kB
`packages/paste-core/layout/flex/dist/index.es.js`	2.1 kB
`packages/paste-core/layout/flex/dist/index.js`	2.42 kB
`packages/paste-core/layout/grid/dist/index.es.js`	2.1 kB
`packages/paste-core/layout/grid/dist/index.js`	2.4 kB
`packages/paste-core/layout/media-object/dist/index.es.js`	982 B
`packages/paste-core/layout/media-object/dist/index.js`	1.3 kB
`packages/paste-core/layout/stack/dist/index.es.js`	1.18 kB
`packages/paste-core/layout/stack/dist/index.js`	1.51 kB
`packages/paste-core/primitives/box/dist/index.es.js`	3.12 kB
`packages/paste-core/primitives/box/dist/index.js`	3.38 kB
`packages/paste-core/primitives/combobox/dist/index.es.js`	168 B
`packages/paste-core/primitives/combobox/dist/index.js`	579 B
`packages/paste-core/primitives/disclosure/dist/index.es.js`	155 B
`packages/paste-core/primitives/disclosure/dist/index.js`	570 B
`packages/paste-core/primitives/menu/dist/index.es.js`	209 B
`packages/paste-core/primitives/menu/dist/index.js`	622 B
`packages/paste-core/primitives/modal-dialog/dist/index.es.js`	23.5 kB
`packages/paste-core/primitives/modal-dialog/dist/index.js`	23.4 kB
`packages/paste-core/primitives/non-modal-dialog/dist/index.es.js`	176 B
`packages/paste-core/primitives/non-modal-dialog/dist/index.js`	590 B
`packages/paste-core/primitives/sibling-box/dist/index.es.js`	744 B
`packages/paste-core/primitives/sibling-box/dist/index.js`	1.16 kB
`packages/paste-core/primitives/tabs/dist/index.es.js`	153 B
`packages/paste-core/primitives/tabs/dist/index.js`	572 B
`packages/paste-core/primitives/text/dist/index.es.js`	2.69 kB
`packages/paste-core/primitives/text/dist/index.js`	2.99 kB
`packages/paste-core/primitives/tooltip/dist/index.es.js`	163 B
`packages/paste-core/primitives/tooltip/dist/index.js`	578 B
`packages/paste-customization/dist/index.es.js`	2.08 kB
`packages/paste-customization/dist/index.js`	2.38 kB
`packages/paste-libraries/animation/dist/index.es.js`	24.2 kB
`packages/paste-libraries/animation/dist/index.js`	24.5 kB
`packages/paste-libraries/clipboard-copy/dist/index.es.js`	1.67 kB
`packages/paste-libraries/clipboard-copy/dist/index.js`	1.7 kB
`packages/paste-libraries/dropdown/dist/index.es.js`	26.4 kB
`packages/paste-libraries/dropdown/dist/index.js`	26.5 kB
`packages/paste-libraries/reakit/dist/index.es.js`	48.4 kB
`packages/paste-libraries/reakit/dist/index.js`	48.6 kB
`packages/paste-libraries/styling/dist/index.es.js`	26.6 kB
`packages/paste-libraries/styling/dist/index.js`	27 kB
`packages/paste-libraries/uid/dist/index.es.js`	1.72 kB
`packages/paste-libraries/uid/dist/index.js`	2.1 kB
`packages/paste-style-props/dist/index.es.js`	5.15 kB
`packages/paste-style-props/dist/index.js`	5.68 kB
`packages/paste-theme/dist/index.es.js`	3.32 kB
`packages/paste-theme/dist/index.js`	3.56 kB
`packages/paste-types/dist/index.es.js`	20 B
`packages/paste-types/dist/index.js`	20 B

_{compressed-size-action}

codesandbox-ci · 2021-08-13T19:47:17Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

cypress · 2021-08-13T19:47:42Z

Test summary

4 • 0 • 0 • 0 • 0

Run details


Project	Paste
Status	Passed
Commit	`6ac5ccb`
Started	Sep 1, 2021 5:01 PM
Ended	Sep 1, 2021 5:02 PM
Duration	01:16 💡
OS	Linux Ubuntu - 20.04
Browser	Electron 83

View run in Cypress Dashboard ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

andioneto

Great work! Most of my comments are around layout and format type things. Generally looks really good 🙌

packages/paste-website/src/component-examples/StatusPatternExamples.tsx

packages/paste-website/src/pages/patterns/status-pattern/index.mdx

.changeset/shaggy-masks-drop.md

packages/paste-design-tokens/tokens/aliases/color-palette.yml

packages/paste-website/src/component-examples/StatusPatternExamples.tsx

packages/paste-website/src/pages/patterns/status/index.mdx

packages/paste-website/src/component-examples/StatusPatternExamples.tsx

These are fixed now!

packages/paste-website/src/pages/patterns/status/index.mdx

chore(icon): add changeset chore(icons): revised changeset

chore(tokens): add text icon colors for status chore(tokens): add changeset chore(tokens): add text color icon tokens chore(tokens): fix errors, alias value, snapshots

docs(status-label): add status label page to sidebar docs(status-label): add content chore(website): add text content to status pattern chore(website): add tables and LivePreviews chore(website): add more LivePreviews for Status chore(website): add more examples to Status chore(website): add even more examples to status chore(website): convert anchors to mdx chore(website): fix spelling/linting errors chore(website): change URL of page chore(website): fix examples to use color directly chore(website): update title and design edits Update packages/paste-website/src/pages/patterns/status/index.mdx Co-authored-by: Sarah <li.sarah.y@gmail.com> Update packages/paste-website/src/pages/patterns/status/index.mdx Co-authored-by: Sarah <li.sarah.y@gmail.com> Update packages/paste-website/src/pages/patterns/status/index.mdx Co-authored-by: Sarah <li.sarah.y@gmail.com> Merge branch 'icons/status' of https://github.com/twilio-labs/paste into icons/status chore(website): incorporate design edits chore(website): remove connectivity mentions chore(website): cut connectivity example Update packages/paste-website/src/pages/patterns/status/index.mdx Co-authored-by: Loreina Chew <lchew@twilio.com> Update packages/paste-website/src/pages/patterns/status/index.mdx Co-authored-by: Katie Porter <katie@janekporter.com> Update packages/paste-website/src/pages/patterns/status/index.mdx Co-authored-by: Katie Porter <katie@janekporter.com> Update packages/paste-website/src/component-examples/StatusPatternExamples.tsx Co-authored-by: Katie Porter <katie@janekporter.com> Update packages/paste-website/src/component-examples/StatusPatternExamples.tsx Co-authored-by: Katie Porter <katie@janekporter.com> Update packages/paste-website/src/component-examples/StatusPatternExamples.tsx Co-authored-by: Katie Porter <katie@janekporter.com> Update packages/paste-website/src/component-examples/StatusPatternExamples.tsx Co-authored-by: Katie Porter <katie@janekporter.com> Merge branch 'icons/status' of https://github.com/twilio-labs/paste into icons/status chore(website): update status pattern description

github-actions bot added the Status: Do Not Merge This PR is not yet ready to be merged back into the main branch label Aug 13, 2021

github-actions bot added Area: Doc Site Related to the documentation website Type: Documentation Improvements or additions to documentation labels Aug 13, 2021

nkrantz changed the title ~~feat(icons): add status svgs~~ feat(icons): add status pattern Aug 19, 2021

github-actions bot added the Area: Tokens Comments and questions related to tokens label Aug 24, 2021

andioneto reviewed Aug 26, 2021

View reviewed changes

TheSisb reviewed Aug 26, 2021

View reviewed changes

.changeset/shaggy-masks-drop.md Outdated Show resolved Hide resolved

packages/paste-design-tokens/tokens/aliases/color-palette.yml Outdated Show resolved Hide resolved

packages/paste-website/src/component-examples/StatusPatternExamples.tsx Outdated Show resolved Hide resolved

gloriliale force-pushed the icons/status branch from 190ba45 to e998a58 Compare August 26, 2021 23:31

gloriliale marked this pull request as ready for review August 26, 2021 23:31

gloriliale requested review from a team as code owners August 26, 2021 23:31

gloriliale requested a review from SiTaggart August 26, 2021 23:31

serifluous previously requested changes Aug 27, 2021

View reviewed changes

github-actions bot added the Type: Tests Adds tests to the code label Aug 30, 2021

loreina reviewed Aug 30, 2021

View reviewed changes

packages/paste-website/src/pages/patterns/status/index.mdx Outdated Show resolved Hide resolved

packages/paste-website/src/pages/patterns/status/index.mdx Outdated Show resolved Hide resolved

kelseycavitt reviewed Aug 31, 2021

View reviewed changes

packages/paste-website/src/pages/patterns/status/index.mdx Show resolved Hide resolved