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

docs: form and display pill group #1879

Merged
merged 5 commits into from
Sep 24, 2021
Merged

docs: form and display pill group #1879

merged 5 commits into from
Sep 24, 2021

Conversation

SiTaggart
Copy link
Contributor

  • updated visual design for both pill types
  • added docs for display pills
  • added docs for form pills

@changeset-bot
Copy link

changeset-bot bot commented Sep 21, 2021

🦋 Changeset detected

Latest commit: 80bf9ce

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

This PR includes changesets to release 5 packages
Name Type
@twilio-paste/display-pill-group Minor
@twilio-paste/core Minor
@twilio-paste/form-pill-group Minor
@twilio-paste/box Patch
@twilio-paste/text Patch

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 Status: Do Not Merge This PR is not yet ready to be merged back into the main branch Area: Components Related to the component library (core) of this system Area: Doc Site Related to the documentation website Area: Primitives Area: Tokens Comments and questions related to tokens Type: Documentation Improvements or additions to documentation labels Sep 21, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Sep 21, 2021

Warnings
⚠️

Changes were made to package.json, but not to yarn.lock - Perhaps you need to run yarn install?

Generated by 🚫 dangerJS against 80bf9ce

@netlify
Copy link

netlify bot commented Sep 21, 2021

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

🔨 Explore the source changes: d8573c1

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

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

@github-actions
Copy link
Contributor

github-actions bot commented Sep 21, 2021

Size Change: +671 B (0%)

Total Size: 638 kB

Filename Size Change
packages/paste-core/components/display-pill-group/dist/index.es.js 924 B +95 B (+11%) ⚠️
packages/paste-core/components/display-pill-group/dist/index.js 1.25 kB +95 B (+8%) 🔍
packages/paste-core/components/form-pill-group/dist/index.es.js 1.54 kB +186 B (+14%) ⚠️
packages/paste-core/components/form-pill-group/dist/index.js 1.88 kB +178 B (+10%) ⚠️
packages/paste-core/primitives/box/dist/index.es.js 3.15 kB +24 B (+1%)
packages/paste-core/primitives/box/dist/index.js 3.42 kB +27 B (+1%)
packages/paste-core/primitives/text/dist/index.es.js 2.73 kB +33 B (+1%)
packages/paste-core/primitives/text/dist/index.js 3.02 kB +33 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.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.61 kB
packages/paste-core/components/button/dist/index.js 5.86 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.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/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 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.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 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.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.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.06 kB
packages/paste-core/components/skeleton-loader/dist/index.js 1.4 kB
packages/paste-core/components/spinner/dist/index.es.js 1.06 kB
packages/paste-core/components/spinner/dist/index.js 1.47 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.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/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/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-design-tokens/dist/themes/console/tokens.common.js 3.79 kB
packages/paste-design-tokens/dist/themes/console/tokens.es6.js 3.73 kB
packages/paste-design-tokens/dist/themes/dark/tokens.common.js 3.24 kB
packages/paste-design-tokens/dist/themes/dark/tokens.es6.js 3.19 kB
packages/paste-design-tokens/dist/themes/sendgrid/tokens.common.js 3.19 kB
packages/paste-design-tokens/dist/themes/sendgrid/tokens.es6.js 3.14 kB
packages/paste-design-tokens/dist/tokens.common.js 3.84 kB
packages/paste-design-tokens/dist/tokens.es6.js 3.79 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

@netlify
Copy link

netlify bot commented Sep 21, 2021

✔️ Deploy Preview for paste-docs ready!

🔨 Explore the source changes: d8573c1

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

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

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 21, 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 80bf9ce:

Sandbox Source
@twilio-paste/nextjs-template Configuration

@cypress
Copy link

cypress bot commented Sep 21, 2021



Test summary

4 0 0 0Flakiness 0


Run details

Project Paste
Status Passed
Commit 80bf9ce
Started Sep 24, 2021 10:42 PM
Ended Sep 24, 2021 10:43 PM
Duration 01:20 💡
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

@netlify
Copy link

netlify bot commented Sep 21, 2021

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

🔨 Explore the source changes: 80bf9ce

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

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

@netlify
Copy link

netlify bot commented Sep 21, 2021

✔️ Deploy Preview for paste-docs ready!

🔨 Explore the source changes: 80bf9ce

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

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

title="Silent demo on keyboard navigation"
></iframe>
</AspectRatio>
</Box>
Copy link
Contributor

Choose a reason for hiding this comment

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

I love this video!! Succinct but detailed, and I feel like I got a lot out of it even just watching it the first time! It pairs quite nicely with the list above there. Big win here!

Copy link
Collaborator

Choose a reason for hiding this comment

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

🔥

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.

It's looking good, just had some comments about clarifying a few things, especially in FormPillGroup

@github-actions github-actions bot removed the Area: Tokens Comments and questions related to tokens label Sep 22, 2021
Copy link
Collaborator

@nkrantz nkrantz left a comment

Choose a reason for hiding this comment

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

Looks good! Just left a few notes

title="Silent demo on keyboard navigation"
></iframe>
</AspectRatio>
</Box>
Copy link
Collaborator

Choose a reason for hiding this comment

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

🔥

@SiTaggart SiTaggart marked this pull request as ready for review September 23, 2021 18:33
@SiTaggart SiTaggart requested review from a team as code owners September 23, 2021 18:33
@github-actions github-actions bot added the Type: Tests Adds tests to the code label Sep 24, 2021
Comment on lines +168 to +188
<LivePreview
scope={{
useComboboxPrimitive,
useMultiSelectPrimitive,
Box,
Label,
Input,
useUID,
useUIDSeed,
ComboboxListbox,
ComboboxListboxGroup,
ComboboxListboxOption,
FormPill,
FormPillGroup,
useFormPillState,
}}
noInline
language="jsx"
>
{multiSelectExample}
</LivePreview>
Copy link
Member

Choose a reason for hiding this comment

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

Any chance you could make this autocomplete, or put the chevron in the field?

Otherwise it looks like customer should be able to type in the field, but it doesn't allow for it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hmmm this is turning out to be way more scope than just Pill docs to get this to work. So two choices:

  1. example stays as is
  2. example is removed.

Copy link
Member

@serifluous serifluous left a comment

Choose a reason for hiding this comment

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

Removing my "request changes" review to unblock, but left 2 new comments.

ok nvm this didn't remove my review.

@SiTaggart SiTaggart removed the Status: Do Not Merge This PR is not yet ready to be merged back into the main branch label Sep 24, 2021
@SiTaggart SiTaggart dismissed serifluous’s stale review September 24, 2021 22:10

dismissed in comment above

@SiTaggart SiTaggart enabled auto-merge (rebase) September 24, 2021 22:11
@SiTaggart SiTaggart merged commit c2bbf43 into main Sep 24, 2021
@SiTaggart SiTaggart deleted the feat/pill-docs branch September 24, 2021 23:18
@TwilioPasteBot TwilioPasteBot mentioned this pull request Sep 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Components Related to the component library (core) of this system Area: Doc Site Related to the documentation website Area: Primitives 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