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(popover): adding customization #1915

Merged
merged 5 commits into from Oct 8, 2021
Merged

feat(popover): adding customization #1915

merged 5 commits into from Oct 8, 2021

Conversation

zahnster
Copy link
Contributor

@zahnster zahnster commented Oct 6, 2021

Adds element customization to Popover, including stories and tests.

Customizable aspects:

  • Popover (POPOVER)
  • Popover Trigger Button (POPOVER_BUTTON)
  • Popover Close (POPOVER_CLOSE_BUTTON)
  • Popover Close Icon (POPOVER_CLOSE_ICON)

@zahnster zahnster requested review from a team as code owners October 6, 2021 16:26
@zahnster zahnster requested a review from TheSisb October 6, 2021 16:26
@changeset-bot
Copy link

changeset-bot bot commented Oct 6, 2021

🦋 Changeset detected

Latest commit: 5e5fd1e

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

This PR includes changesets to release 2 packages
Name Type
@twilio-paste/popover 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 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 Type: Tests Adds tests to the code labels Oct 6, 2021
@netlify
Copy link

netlify bot commented Oct 6, 2021

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

🔨 Explore the source changes: 5e5fd1e

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

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

@netlify
Copy link

netlify bot commented Oct 6, 2021

✔️ Deploy Preview for paste-docs ready!

🔨 Explore the source changes: 5e5fd1e

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

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

@github-actions
Copy link
Contributor

github-actions bot commented Oct 6, 2021

Size Change: +110 B (0%)

Total Size: 654 kB

Filename Size Change
packages/paste-core/components/popover/dist/index.es.js 1.53 kB +54 B (+4%)
packages/paste-core/components/popover/dist/index.js 1.88 kB +56 B (+3%)
ℹ️ 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.32 kB
packages/paste-core/components/alert/dist/index.js 1.67 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/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-design-tokens/dist/themes/console/tokens.common.js 3.86 kB
packages/paste-design-tokens/dist/themes/console/tokens.es6.js 3.8 kB
packages/paste-design-tokens/dist/themes/dark/tokens.common.js 3.3 kB
packages/paste-design-tokens/dist/themes/dark/tokens.es6.js 3.25 kB
packages/paste-design-tokens/dist/themes/sendgrid/tokens.common.js 3.24 kB
packages/paste-design-tokens/dist/themes/sendgrid/tokens.es6.js 3.2 kB
packages/paste-design-tokens/dist/tokens.common.js 3.9 kB
packages/paste-design-tokens/dist/tokens.es6.js 3.85 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

@cypress
Copy link

cypress bot commented Oct 6, 2021



Test summary

4 0 0 0Flakiness 0


Run details

Project Paste
Status Passed
Commit 5e5fd1e
Started Oct 7, 2021 8:34 PM
Ended Oct 7, 2021 8:35 PM
Duration 01:15 💡
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

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 6, 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 5e5fd1e:

Sandbox Source
@twilio-paste/nextjs-template Configuration

@TheSisb TheSisb changed the title Customization/popover feat(popover): adding customization Oct 6, 2021
const popoverComp = screen.getByTestId('popover');
const popoverButton = screen.getByTestId('popover-button');

expect(popoverComp.querySelector('[data-paste-element="POPOVER"]')).toHaveStyleRule(
Copy link
Collaborator

Choose a reason for hiding this comment

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

You might be able to just merge this it() block with the previous one, and check for the style and data-paste-element in the same block. Would simplify the test file by not needing the repetitive render boilerplate.

Copy link
Contributor

Choose a reason for hiding this comment

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

Adding to this that could also create a wrapper component and pass it to the render function as a second arg:

{
    wrapper: ({ children }) => (<SomeWrapper>{children}</SomeWrapper>)
}

@zahnster zahnster removed the Status: Do Not Merge This PR is not yet ready to be merged back into the main branch label Oct 6, 2021
const popoverComp = screen.getByTestId('popover');
const popoverButton = screen.getByTestId('popover-button');

expect(popoverComp.querySelector('[data-paste-element="POPOVER"]')).toHaveStyleRule(
Copy link
Contributor

Choose a reason for hiding this comment

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

Adding to this that could also create a wrapper component and pass it to the render function as a second arg:

{
    wrapper: ({ children }) => (<SomeWrapper>{children}</SomeWrapper>)
}

@zahnster zahnster merged commit db9f966 into main Oct 8, 2021
@zahnster zahnster deleted the customization/popover branch October 8, 2021 15:17
@TwilioPasteBot TwilioPasteBot mentioned this pull request Oct 8, 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 Type: Tests Adds tests to the code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants