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(modal): customization #1903

Merged
merged 12 commits into from
Oct 5, 2021
Merged

feat(modal): customization #1903

merged 12 commits into from
Oct 5, 2021

Conversation

andioneto
Copy link
Contributor

@andioneto andioneto commented Oct 2, 2021

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.

@andioneto andioneto added the Status: WIP This PR is still a work-in-progress. No need to review. label Oct 2, 2021
@changeset-bot
Copy link

changeset-bot bot commented Oct 2, 2021

🦋 Changeset detected

Latest commit: 7b5dc97

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/modal Patch
@twilio-paste/core 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 labels Oct 2, 2021
@netlify
Copy link

netlify bot commented Oct 2, 2021

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

🔨 Explore the source changes: 5c72fd4

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

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

@netlify
Copy link

netlify bot commented Oct 2, 2021

✔️ Deploy Preview for paste-docs ready!

🔨 Explore the source changes: 5c72fd4

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

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

@github-actions
Copy link
Contributor

github-actions bot commented Oct 2, 2021

Size Change: +316 B (0%)

Total Size: 639 kB

Filename Size Change
packages/paste-core/components/modal/dist/index.es.js 2.83 kB +164 B (+6%) 🔍
packages/paste-core/components/modal/dist/index.js 3.15 kB +152 B (+5%) 🔍
ℹ️ 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/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 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.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 1.9 kB
packages/paste-core/components/menu/dist/index.js 2.23 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.06 kB
packages/paste-core/components/skeleton-loader/dist/index.js 1.4 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/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.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.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

@cypress
Copy link

cypress bot commented Oct 2, 2021



Test summary

4 0 0 0Flakiness 0


Run details

Project Paste
Status Passed
Commit 7b5dc97
Started Oct 5, 2021 8:50 PM
Ended Oct 5, 2021 8:51 PM
Duration 00:55 💡
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 2, 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 7b5dc97:

Sandbox Source
@twilio-paste/nextjs-template Configuration

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.

It's looking great so far! Missing tests and changeset but component names are good.

@SiTaggart SiTaggart self-requested a review October 4, 2021 18:28
@netlify
Copy link

netlify bot commented Oct 4, 2021

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

🔨 Explore the source changes: 7b5dc97

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

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

@netlify
Copy link

netlify bot commented Oct 4, 2021

✔️ Deploy Preview for paste-docs ready!

🔨 Explore the source changes: 7b5dc97

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

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

@github-actions github-actions bot added the Type: Tests Adds tests to the code label Oct 4, 2021
@andioneto andioneto marked this pull request as ready for review October 4, 2021 23:58
@andioneto andioneto requested review from a team as code owners October 4, 2021 23:58
@andioneto andioneto removed the Status: WIP This PR is still a work-in-progress. No need to review. label Oct 5, 2021
}: {children: any; 'data-paste-element': string; style: any; className: string},
ref: any
) => (
<div
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Mocking the react portal for this test.

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.

I like the helper functions you made! This is looking good 👍

const modalFooter = screen.getByTestId('modal-footer-test-id');
expect(modalFooter.getAttribute('data-paste-element')).toEqual('MODAL_FOOTER');

const modalFooterActions = modalFooter.firstChild as HTMLElement;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Is this different from using .firstElementChild?

expect.extend(matchers);

jest.mock('@twilio-paste/modal-dialog-primitive', () => {
const actual = jest.requireActual('@twilio-paste/modal-dialog-primitive');
Copy link
Contributor

Choose a reason for hiding this comment

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

I guess I'm a little unsure on why this needs to be mocked, so providing some sort of commentary on the why might be helpful in a code comment.

@andioneto andioneto merged commit a8ba78e into main Oct 5, 2021
@andioneto andioneto deleted the feat-modal-customization branch October 5, 2021 20:53
@TwilioPasteBot TwilioPasteBot mentioned this pull request Oct 5, 2021
abereghici pushed a commit to abereghici/paste that referenced 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 Status: Do Not Merge This PR is not yet ready to be merged back into the main branch Type: Tests Adds tests to the code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants