Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(tokens, icons): add content for connectivity status pattern #1911

Merged
merged 12 commits into from
Oct 6, 2021

Conversation

andioneto
Copy link
Contributor

@andioneto andioneto commented Oct 5, 2021

Description

Add back the Connectivity Status pattern content to the website, and the resources (icons, tokens), required to built out the pattern.

Summary of changes

  • Add design tokens according to the table below
  • Add icons: ConnectivityAvailableIcon, ConnectivityOfflineIcon, ConnectivityUnavailableIcon, ConnectivityBusyIcon
  • Add section to documentation for the "Status Pattern" for the "Connectivity status" variant

Tokens added

Token Default Dark Console
color-text-icon-available palette-green-70 palette-green-70 palette-green-50
color-text-icon-busy palette-orange-65 palette-orange-60 palette-orange-40
color-text-icon-unavailable palette-red-60 palette-red-60 palette-red-50
color-text-icon-offline palette-gray-60 palette-gray-60 palette-gray-10

@andioneto andioneto requested review from a team as code owners October 5, 2021 22:31
@andioneto andioneto requested a review from TheSisb October 5, 2021 22:31
@changeset-bot
Copy link

changeset-bot bot commented Oct 5, 2021

🦋 Changeset detected

Latest commit: dc25155

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/icons Minor
@twilio-paste/design-tokens Minor
@twilio-paste/core 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

@github-actions github-actions bot added Area: Tokens Comments and questions related to tokens Status: Do Not Merge This PR is not yet ready to be merged back into the main branch labels Oct 5, 2021
@andioneto andioneto changed the title feat(icons): add connectivity icons, feat(tokens): add connectivity tokens feat(tokens, icons): add content for connectivity status pattern Oct 5, 2021
@netlify
Copy link

netlify bot commented Oct 5, 2021

✔️ Deploy Preview for paste-theme-designer ready!

🔨 Explore the source changes: dc25155

🔍 Inspect the deploy log: https://app.netlify.com/sites/paste-theme-designer/deploys/615dd198c1f07e0007d983f2

😎 Browse the preview: https://deploy-preview-1911--paste-theme-designer.netlify.app

Copy link
Contributor

@gloriliale gloriliale left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me!

@github-actions
Copy link
Contributor

github-actions bot commented Oct 5, 2021

Size Change: +311 B (0%)

Total Size: 654 kB

Filename Size Change
packages/paste-design-tokens/dist/themes/console/tokens.common.js 3.86 kB +44 B (+1%)
packages/paste-design-tokens/dist/themes/console/tokens.es6.js 3.8 kB +44 B (+1%)
packages/paste-design-tokens/dist/themes/dark/tokens.common.js 3.3 kB +38 B (+1%)
packages/paste-design-tokens/dist/themes/dark/tokens.es6.js 3.25 kB +40 B (+1%)
packages/paste-design-tokens/dist/themes/sendgrid/tokens.common.js 3.24 kB +36 B (+1%)
packages/paste-design-tokens/dist/themes/sendgrid/tokens.es6.js 3.2 kB +35 B (+1%)
packages/paste-design-tokens/dist/tokens.common.js 3.9 kB +36 B (+1%)
packages/paste-design-tokens/dist/tokens.es6.js 3.85 kB +38 B (+1%)
ℹ️ 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.2 kB
packages/paste-core/components/base-radio-checkbox/dist/index.js 1.57 kB
packages/paste-core/components/breadcrumb/dist/index.es.js 1.24 kB
packages/paste-core/components/breadcrumb/dist/index.js 1.57 kB
packages/paste-core/components/button/dist/index.es.js 5.64 kB
packages/paste-core/components/button/dist/index.js 5.89 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.4 kB
packages/paste-core/components/combobox/dist/index.js 13.7 kB
packages/paste-core/components/data-grid/dist/index.es.js 4.26 kB
packages/paste-core/components/data-grid/dist/index.js 4.56 kB
packages/paste-core/components/date-picker/dist/index.es.js 8.51 kB
packages/paste-core/components/date-picker/dist/index.js 8.83 kB
packages/paste-core/components/disclosure/dist/index.es.js 2.4 kB
packages/paste-core/components/disclosure/dist/index.js 2.73 kB
packages/paste-core/components/display-pill-group/dist/index.es.js 924 B
packages/paste-core/components/display-pill-group/dist/index.js 1.25 kB
packages/paste-core/components/form-pill-group/dist/index.es.js 1.54 kB
packages/paste-core/components/form-pill-group/dist/index.js 1.88 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 931 B
packages/paste-core/components/help-text/dist/index.js 1.27 kB
packages/paste-core/components/inline-control-group/dist/index.es.js 964 B
packages/paste-core/components/inline-control-group/dist/index.js 1.31 kB
packages/paste-core/components/input-box/dist/index.es.js 2.05 kB
packages/paste-core/components/input-box/dist/index.js 2.33 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.23 kB
packages/paste-core/components/label/dist/index.js 1.56 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 2.04 kB
packages/paste-core/components/menu/dist/index.js 2.38 kB
packages/paste-core/components/modal/dist/index.es.js 2.83 kB
packages/paste-core/components/modal/dist/index.js 3.15 kB
packages/paste-core/components/pagination/dist/index.es.js 3.37 kB
packages/paste-core/components/pagination/dist/index.js 3.65 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.67 kB
packages/paste-core/components/select/dist/index.js 1.99 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.07 kB
packages/paste-core/components/skeleton-loader/dist/index.js 1.41 kB
packages/paste-core/components/spinner/dist/index.es.js 1.17 kB
packages/paste-core/components/spinner/dist/index.js 1.59 kB
packages/paste-core/components/table/dist/index.es.js 1.8 kB
packages/paste-core/components/table/dist/index.js 2.13 kB
packages/paste-core/components/tabs/dist/index.es.js 2.33 kB
packages/paste-core/components/tabs/dist/index.js 2.65 kB
packages/paste-core/components/textarea/dist/index.es.js 4.95 kB
packages/paste-core/components/textarea/dist/index.js 5 kB
packages/paste-core/components/time-picker/dist/index.es.js 8.54 kB
packages/paste-core/components/time-picker/dist/index.js 8.86 kB
packages/paste-core/components/toast/dist/index.es.js 3.15 kB
packages/paste-core/components/toast/dist/index.js 3.44 kB
packages/paste-core/components/tooltip/dist/index.es.js 1.16 kB
packages/paste-core/components/tooltip/dist/index.js 1.51 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/data-grid.js 204 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.19 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/core-bundle/dist/utils.js 200 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.15 kB
packages/paste-core/primitives/box/dist/index.js 3.42 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 1.09 kB
packages/paste-core/primitives/sibling-box/dist/index.js 1.44 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.73 kB
packages/paste-core/primitives/text/dist/index.js 3.02 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
packages/paste-utils/dist/index.es.js 2.06 kB
packages/paste-utils/dist/index.js 2.42 kB

compressed-size-action

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 5, 2021

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.

Latest deployment of this branch, based on commit dc25155:

Sandbox Source
@twilio-paste/nextjs-template Configuration

@github-actions github-actions bot added Area: Doc Site Related to the documentation website Type: Documentation Improvements or additions to documentation labels Oct 6, 2021
@netlify
Copy link

netlify bot commented Oct 6, 2021

✔️ Deploy Preview for paste-docs ready!

🔨 Explore the source changes: dc25155

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

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

@cypress
Copy link

cypress bot commented Oct 6, 2021



Test summary

3 1 0 0Flakiness 0


Run details

Project Paste
Status Failed
Commit dc25155
Started Oct 6, 2021 5:02 PM
Ended Oct 6, 2021 5:03 PM
Duration 01:00 💡
OS Linux Ubuntu - 20.04
Browser Electron 83

View run in Cypress Dashboard ➡️


Failures

cypress/integration/e2e/link-checker/index.spec.ts Failed
1 Broken link checker > recursively check all website links for any broken links

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

@github-actions github-actions bot added the Type: Tests Adds tests to the code label Oct 6, 2021
@TheSisb TheSisb merged commit d13c109 into main Oct 6, 2021
@TheSisb TheSisb deleted the chore-tokens-status-pattern branch October 6, 2021 18:46
Copy link
Contributor

@loreina loreina left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the table in the description, by chance are the color alias for dark and console theme swapped? Not sure if it's swapped in the table or in the yml code

@TwilioPasteBot TwilioPasteBot mentioned this pull request Oct 6, 2021
abereghici pushed a commit to abereghici/paste that referenced this pull request Oct 8, 2021
…lio-labs#1911)

* chore(paste-design-tokens): add icon text color available

* feat(paste-design-tokens): add default tokens for statuses

* chore(paste-design-tokens): add tokens for dark theme

* chore(paste-design-tokens): add console theme tokens

* chore(paste-design-tokens): add changeset

* feat(icons): add connectivity icons

* chore(tokens): update changeset

* feat(icons): add changeset for new icons

* feat(paste-icons): update build list

* feat(website): add to website

* feat(website): remove unneeded icons

* chore(snapshots): udpate snapshots
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Doc Site Related to the documentation website Area: Tokens Comments and questions related to tokens Status: Do Not Merge This PR is not yet ready to be merged back into the main branch Type: Documentation Improvements or additions to documentation Type: Tests Adds tests to the code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants