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/stack customization #1722

Merged
merged 4 commits into from
Aug 3, 2021
Merged

Feat/stack customization #1722

merged 4 commits into from
Aug 3, 2021

Conversation

zahnster
Copy link
Contributor

@zahnster zahnster commented Aug 2, 2021

  • Enable stack and stack children to respect element customizations set on the customization provider.
  • Stack and stack children now enable setting an element name on the underlying HTML element, and checks the emotion theme object to determine whether it should merge in custom styles to the ones set by the component author.
  • Stories and tests added to support this change

@zahnster zahnster requested review from a team as code owners August 2, 2021 16:36
@zahnster zahnster requested a review from TheSisb August 2, 2021 16:36
@changeset-bot
Copy link

changeset-bot bot commented Aug 2, 2021

🦋 Changeset detected

Latest commit: f3b3e7c

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/stack 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

@netlify
Copy link

netlify bot commented Aug 2, 2021

✔️ Deploy Preview for paste-docs ready!

🔨 Explore the source changes: f3b3e7c

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

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

@github-actions
Copy link
Contributor

github-actions bot commented Aug 2, 2021

Size Change: +80 B (0%)

Total Size: 617 kB

Filename Size Change
packages/paste-core/layout/stack/dist/index.es.js 1.18 kB +40 B (+4%)
packages/paste-core/layout/stack/dist/index.js 1.51 kB +40 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.26 kB
packages/paste-core/components/alert/dist/index.js 1.61 kB
packages/paste-core/components/anchor/dist/index.es.js 1.52 kB
packages/paste-core/components/anchor/dist/index.js 1.83 kB
packages/paste-core/components/avatar/dist/index.es.js 1.71 kB
packages/paste-core/components/avatar/dist/index.js 2.04 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.54 kB
packages/paste-core/components/button/dist/index.js 5.78 kB
packages/paste-core/components/card/dist/index.es.js 697 B
packages/paste-core/components/card/dist/index.js 1.04 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.5 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/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 889 B
packages/paste-core/components/heading/dist/index.js 1.23 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 1.93 kB
packages/paste-core/components/input-box/dist/index.js 2.23 kB
packages/paste-core/components/input/dist/index.es.js 1.47 kB
packages/paste-core/components/input/dist/index.js 1.82 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 778 B
packages/paste-core/components/list/dist/index.js 1.13 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 570 B
packages/paste-core/components/paragraph/dist/index.js 914 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.55 kB
packages/paste-core/components/select/dist/index.js 1.87 kB
packages/paste-core/components/separator/dist/index.es.js 758 B
packages/paste-core/components/separator/dist/index.js 1.1 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/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/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/dropdown-library.js 211 B
packages/paste-core/core-bundle/dist/flex.js 196 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.11 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.41 kB
packages/paste-core/layout/grid/dist/index.es.js 1.65 kB
packages/paste-core/layout/grid/dist/index.js 1.96 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/primitives/box/dist/index.es.js 3.02 kB
packages/paste-core/primitives/box/dist/index.js 3.29 kB
packages/paste-core/primitives/combobox/dist/index.es.js 142 B
packages/paste-core/primitives/combobox/dist/index.js 561 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.98 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.74 kB
packages/paste-design-tokens/dist/themes/console/tokens.es6.js 3.69 kB
packages/paste-design-tokens/dist/themes/dark/tokens.common.js 3.17 kB
packages/paste-design-tokens/dist/themes/dark/tokens.es6.js 3.12 kB
packages/paste-design-tokens/dist/themes/sendgrid/tokens.common.js 3.12 kB
packages/paste-design-tokens/dist/themes/sendgrid/tokens.es6.js 3.08 kB
packages/paste-design-tokens/dist/tokens.common.js 3.77 kB
packages/paste-design-tokens/dist/tokens.es6.js 3.72 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/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.11 kB
packages/paste-style-props/dist/index.js 5.63 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 Aug 2, 2021



Test summary

4 0 0 0Flakiness 0


Run details

Project Paste
Status Passed
Commit f3b3e7c
Started Aug 3, 2021 4:04 PM
Ended Aug 3, 2021 4:04 PM
Duration 00:50 💡
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 Aug 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 f3b3e7c:

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.

Looks great! I'm curious why you were able to add element = 'STACK' on line 80 without having to also add element to the StackProps. Is it because StackProps extends BoxElementProps which element was already added to?

Stack.propTypes = {
orientation: ResponsiveProp(PropTypes.oneOf(['horizontal', 'vertical'])).isRequired,
spacing: isSpaceTokenProp,
element: PropTypes.string,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Question here, looks like element wasn't added to Media Object's propTypes in that PR. Should it have been, or is this unnecessary?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, it should have

{validChildren.map((child, index) => {
return (
<Box
element={`${element}_CHILD`}
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not sure I understand why we're giving the children an element prop. Wouldn't all of the children have the same name as the parent element and therefore all be styled the same?

Copy link
Contributor

Choose a reason for hiding this comment

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

It creates an element name for the child based on the parent element name, but not exactly the same.

So yes, child elements have the same name, but it is different to the parent. It's potentially easier to see here in the tests https://github.com/twilio-labs/paste/pull/1722/files#diff-160e3be247ff4ca5d35a10f9e526e4cf0aa098b6b43b134a322e93e3c2ab75a4R159

@SiTaggart
Copy link
Contributor

Is it because StackProps extends BoxElementProps which element was already added to?

@nkrantz 100% correct. Well spotted

@github-actions github-actions bot added Type: Tests Adds tests to the code Area: Layout labels Aug 3, 2021
@zahnster zahnster merged commit 5e46a5e into main Aug 3, 2021
@zahnster zahnster deleted the feat/stack-customization branch August 3, 2021 22:04
@TwilioPasteBot TwilioPasteBot mentioned this pull request Aug 3, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Layout Type: Tests Adds tests to the code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants