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

fix(inline-control-group): remove bottom spacing from last child control #974

Merged
merged 3 commits into from Mar 31, 2021

Conversation

SiTaggart
Copy link
Contributor

Taking over from #941

Using stack to create the spacing and general tidy up. Also adding stories to verify no regressions.

@vercel
Copy link

vercel bot commented Nov 25, 2020

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

paste – ./

🔍 Inspect: https://vercel.com/twilio-dsys/paste/JCsNbA6CXeQJEkJkFfDsQK9c5AiM
✅ Preview: https://paste-git-remove-additional-spacing-twilio-dsys.vercel.app

paste-theme-designer – ./

🔍 Inspect: https://vercel.com/twilio-dsys/paste-theme-designer/F9jcX6RTDtHJCe411VnLPHYKYQzZ
✅ Preview: https://paste-theme-designer-git-remove-additional-spacing-twilio-dsys.vercel.app

@cypress
Copy link

cypress bot commented Nov 25, 2020



Test summary

4 0 0 0Flakiness 0


Run details

Project Paste
Status Passed
Commit 658c408
Started Mar 31, 2021 1:49 AM
Ended Mar 31, 2021 1:50 AM
Duration 00:43 💡
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 Nov 25, 2020

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 658c408:

Sandbox Source
@twilio-paste/nextjs-template Configuration

@github-actions
Copy link
Contributor

github-actions bot commented Nov 25, 2020

Size Change: -97 B (0%)

Total Size: 515 kB

Filename Size Change
packages/paste-core/components/checkbox/dist/index.es.js 2.35 kB -32 B (-1%)
packages/paste-core/components/checkbox/dist/index.js 2.66 kB -29 B (-1%)
packages/paste-core/components/inline-control-group/dist/index.es.js 956 B -26 B (-3%)
packages/paste-core/components/inline-control-group/dist/index.js 1.3 kB -20 B (-2%)
packages/paste-core/components/radio-group/dist/index.es.js 1.59 kB +4 B (0%)
packages/paste-core/components/radio-group/dist/index.js 1.93 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size Change
packages/paste-core/components/alert/dist/index.es.js 1.26 kB 0 B
packages/paste-core/components/alert/dist/index.js 1.61 kB 0 B
packages/paste-core/components/anchor/dist/index.es.js 1.51 kB 0 B
packages/paste-core/components/anchor/dist/index.js 1.83 kB 0 B
packages/paste-core/components/avatar/dist/index.es.js 1.59 kB 0 B
packages/paste-core/components/avatar/dist/index.js 1.93 kB 0 B
packages/paste-core/components/base-radio-checkbox/dist/index.es.js 1.12 kB 0 B
packages/paste-core/components/base-radio-checkbox/dist/index.js 1.5 kB 0 B
packages/paste-core/components/breadcrumb/dist/index.es.js 1.08 kB 0 B
packages/paste-core/components/breadcrumb/dist/index.js 1.41 kB 0 B
packages/paste-core/components/button/dist/index.es.js 10 kB 0 B
packages/paste-core/components/button/dist/index.js 10.3 kB 0 B
packages/paste-core/components/card/dist/index.es.js 697 B 0 B
packages/paste-core/components/card/dist/index.js 1.04 kB 0 B
packages/paste-core/components/combobox/dist/index.es.js 13.2 kB 0 B
packages/paste-core/components/combobox/dist/index.js 13.5 kB 0 B
packages/paste-core/components/disclosure/dist/index.es.js 2.27 kB 0 B
packages/paste-core/components/disclosure/dist/index.js 2.61 kB 0 B
packages/paste-core/components/form/dist/index.es.js 256 B 0 B
packages/paste-core/components/form/dist/index.js 692 B 0 B
packages/paste-core/components/heading/dist/index.es.js 889 B 0 B
packages/paste-core/components/heading/dist/index.js 1.23 kB 0 B
packages/paste-core/components/help-text/dist/index.es.js 927 B 0 B
packages/paste-core/components/help-text/dist/index.js 1.28 kB 0 B
packages/paste-core/components/input-box/dist/index.es.js 1.92 kB 0 B
packages/paste-core/components/input-box/dist/index.js 2.22 kB 0 B
packages/paste-core/components/input/dist/index.es.js 1.32 kB 0 B
packages/paste-core/components/input/dist/index.js 1.67 kB 0 B
packages/paste-core/components/label/dist/index.es.js 1.13 kB 0 B
packages/paste-core/components/label/dist/index.js 1.48 kB 0 B
packages/paste-core/components/list/dist/index.es.js 778 B 0 B
packages/paste-core/components/list/dist/index.js 1.13 kB 0 B
packages/paste-core/components/menu/dist/index.es.js 1.8 kB 0 B
packages/paste-core/components/menu/dist/index.js 2.15 kB 0 B
packages/paste-core/components/modal/dist/index.es.js 2.57 kB 0 B
packages/paste-core/components/modal/dist/index.js 2.88 kB 0 B
packages/paste-core/components/paragraph/dist/index.es.js 570 B 0 B
packages/paste-core/components/paragraph/dist/index.js 914 B 0 B
packages/paste-core/components/popover/dist/index.es.js 1.45 kB 0 B
packages/paste-core/components/popover/dist/index.js 1.8 kB 0 B
packages/paste-core/components/screen-reader-only/dist/index.es.js 652 B 0 B
packages/paste-core/components/screen-reader-only/dist/index.js 996 B 0 B
packages/paste-core/components/select/dist/index.es.js 1.55 kB 0 B
packages/paste-core/components/select/dist/index.js 1.86 kB 0 B
packages/paste-core/components/separator/dist/index.es.js 759 B 0 B
packages/paste-core/components/separator/dist/index.js 1.1 kB 0 B
packages/paste-core/components/spinner/dist/index.es.js 744 B 0 B
packages/paste-core/components/spinner/dist/index.js 1.14 kB 0 B
packages/paste-core/components/table/dist/index.es.js 1.74 kB 0 B
packages/paste-core/components/table/dist/index.js 2.07 kB 0 B
packages/paste-core/components/tabs/dist/index.es.js 2.02 kB 0 B
packages/paste-core/components/tabs/dist/index.js 2.34 kB 0 B
packages/paste-core/components/textarea/dist/index.es.js 5 kB 0 B
packages/paste-core/components/textarea/dist/index.js 5.05 kB 0 B
packages/paste-core/components/toast/dist/index.es.js 3 kB 0 B
packages/paste-core/components/toast/dist/index.js 3.32 kB 0 B
packages/paste-core/components/tooltip/dist/index.es.js 1.1 kB 0 B
packages/paste-core/components/tooltip/dist/index.js 1.45 kB 0 B
packages/paste-core/components/truncate/dist/index.es.js 588 B 0 B
packages/paste-core/components/truncate/dist/index.js 934 B 0 B
packages/paste-core/components/typography/dist/index.es.js 1.38 kB 0 B
packages/paste-core/components/typography/dist/index.js 1.74 kB 0 B
packages/paste-core/core-bundle/dist/alert.js 194 B 0 B
packages/paste-core/core-bundle/dist/anchor.js 197 B 0 B
packages/paste-core/core-bundle/dist/animation-library.js 211 B 0 B
packages/paste-core/core-bundle/dist/aspect-ratio.js 205 B 0 B
packages/paste-core/core-bundle/dist/avatar.js 200 B 0 B
packages/paste-core/core-bundle/dist/base-radio-checkbox.js 218 B 0 B
packages/paste-core/core-bundle/dist/box.js 195 B 0 B
packages/paste-core/core-bundle/dist/breadcrumb.js 204 B 0 B
packages/paste-core/core-bundle/dist/button.js 201 B 0 B
packages/paste-core/core-bundle/dist/card.js 199 B 0 B
packages/paste-core/core-bundle/dist/checkbox.js 201 B 0 B
packages/paste-core/core-bundle/dist/combobox-primitive.js 213 B 0 B
packages/paste-core/core-bundle/dist/combobox.js 203 B 0 B
packages/paste-core/core-bundle/dist/customization.js 206 B 0 B
packages/paste-core/core-bundle/dist/design-tokens.js 209 B 0 B
packages/paste-core/core-bundle/dist/disclosure-primitive.js 213 B 0 B
packages/paste-core/core-bundle/dist/disclosure.js 204 B 0 B
packages/paste-core/core-bundle/dist/dropdown-library.js 211 B 0 B
packages/paste-core/core-bundle/dist/flex.js 196 B 0 B
packages/paste-core/core-bundle/dist/form.js 197 B 0 B
packages/paste-core/core-bundle/dist/grid.js 196 B 0 B
packages/paste-core/core-bundle/dist/heading.js 199 B 0 B
packages/paste-core/core-bundle/dist/help-text.js 204 B 0 B
packages/paste-core/core-bundle/dist/index.js 1.01 kB 0 B
packages/paste-core/core-bundle/dist/inline-control-group.js 218 B 0 B
packages/paste-core/core-bundle/dist/input-box.js 206 B 0 B
packages/paste-core/core-bundle/dist/input.js 200 B 0 B
packages/paste-core/core-bundle/dist/label.js 196 B 0 B
packages/paste-core/core-bundle/dist/list.js 195 B 0 B
packages/paste-core/core-bundle/dist/media-object.js 202 B 0 B
packages/paste-core/core-bundle/dist/menu-primitive.js 210 B 0 B
packages/paste-core/core-bundle/dist/menu.js 196 B 0 B
packages/paste-core/core-bundle/dist/modal-dialog-primitive.js 219 B 0 B
packages/paste-core/core-bundle/dist/modal.js 196 B 0 B
packages/paste-core/core-bundle/dist/non-modal-dialog-primitive.js 224 B 0 B
packages/paste-core/core-bundle/dist/paragraph.js 202 B 0 B
packages/paste-core/core-bundle/dist/popover.js 201 B 0 B
packages/paste-core/core-bundle/dist/radio-group.js 208 B 0 B
packages/paste-core/core-bundle/dist/reakit-library.js 211 B 0 B
packages/paste-core/core-bundle/dist/screen-reader-only.js 214 B 0 B
packages/paste-core/core-bundle/dist/select.js 197 B 0 B
packages/paste-core/core-bundle/dist/separator.js 199 B 0 B
packages/paste-core/core-bundle/dist/sibling-box.js 206 B 0 B
packages/paste-core/core-bundle/dist/spinner.js 198 B 0 B
packages/paste-core/core-bundle/dist/stack.js 200 B 0 B
packages/paste-core/core-bundle/dist/style-props.js 202 B 0 B
packages/paste-core/core-bundle/dist/styling-library.js 210 B 0 B
packages/paste-core/core-bundle/dist/table.js 195 B 0 B
packages/paste-core/core-bundle/dist/tabs-primitive.js 210 B 0 B
packages/paste-core/core-bundle/dist/tabs.js 196 B 0 B
packages/paste-core/core-bundle/dist/text.js 195 B 0 B
packages/paste-core/core-bundle/dist/textarea.js 198 B 0 B
packages/paste-core/core-bundle/dist/theme.js 196 B 0 B
packages/paste-core/core-bundle/dist/toast.js 195 B 0 B
packages/paste-core/core-bundle/dist/tooltip-primitive.js 212 B 0 B
packages/paste-core/core-bundle/dist/tooltip.js 198 B 0 B
packages/paste-core/core-bundle/dist/truncate.js 198 B 0 B
packages/paste-core/core-bundle/dist/types.js 196 B 0 B
packages/paste-core/core-bundle/dist/uid-library.js 208 B 0 B
packages/paste-core/layout/aspect-ratio/dist/index.es.js 709 B 0 B
packages/paste-core/layout/aspect-ratio/dist/index.js 1.11 kB 0 B
packages/paste-core/layout/flex/dist/index.es.js 1.62 kB 0 B
packages/paste-core/layout/flex/dist/index.js 1.95 kB 0 B
packages/paste-core/layout/grid/dist/index.es.js 1.65 kB 0 B
packages/paste-core/layout/grid/dist/index.js 1.96 kB 0 B
packages/paste-core/layout/media-object/dist/index.es.js 577 B 0 B
packages/paste-core/layout/media-object/dist/index.js 987 B 0 B
packages/paste-core/layout/stack/dist/index.es.js 1.13 kB 0 B
packages/paste-core/layout/stack/dist/index.js 1.46 kB 0 B
packages/paste-core/primitives/box/dist/index.es.js 1.37 kB 0 B
packages/paste-core/primitives/box/dist/index.js 1.72 kB 0 B
packages/paste-core/primitives/combobox/dist/index.es.js 142 B 0 B
packages/paste-core/primitives/combobox/dist/index.js 561 B 0 B
packages/paste-core/primitives/disclosure/dist/index.es.js 155 B 0 B
packages/paste-core/primitives/disclosure/dist/index.js 570 B 0 B
packages/paste-core/primitives/menu/dist/index.es.js 209 B 0 B
packages/paste-core/primitives/menu/dist/index.js 622 B 0 B
packages/paste-core/primitives/modal-dialog/dist/index.es.js 23.8 kB 0 B
packages/paste-core/primitives/modal-dialog/dist/index.js 23.7 kB 0 B
packages/paste-core/primitives/non-modal-dialog/dist/index.es.js 176 B 0 B
packages/paste-core/primitives/non-modal-dialog/dist/index.js 590 B 0 B
packages/paste-core/primitives/sibling-box/dist/index.es.js 744 B 0 B
packages/paste-core/primitives/sibling-box/dist/index.js 1.16 kB 0 B
packages/paste-core/primitives/tabs/dist/index.es.js 153 B 0 B
packages/paste-core/primitives/tabs/dist/index.js 572 B 0 B
packages/paste-core/primitives/text/dist/index.es.js 1.07 kB 0 B
packages/paste-core/primitives/text/dist/index.js 1.44 kB 0 B
packages/paste-core/primitives/tooltip/dist/index.es.js 163 B 0 B
packages/paste-core/primitives/tooltip/dist/index.js 578 B 0 B
packages/paste-customization/dist/index.es.js 6.41 kB 0 B
packages/paste-customization/dist/index.js 6.68 kB 0 B
packages/paste-libraries/animation/dist/index.es.js 23.8 kB 0 B
packages/paste-libraries/animation/dist/index.js 24.1 kB 0 B
packages/paste-libraries/dropdown/dist/index.es.js 26.4 kB 0 B
packages/paste-libraries/dropdown/dist/index.js 26.5 kB 0 B
packages/paste-libraries/reakit/dist/index.es.js 48.4 kB 0 B
packages/paste-libraries/reakit/dist/index.js 48.6 kB 0 B
packages/paste-libraries/styling/dist/index.es.js 26.6 kB 0 B
packages/paste-libraries/styling/dist/index.js 27 kB 0 B
packages/paste-libraries/uid/dist/index.es.js 1.72 kB 0 B
packages/paste-libraries/uid/dist/index.js 2.1 kB 0 B
packages/paste-style-props/dist/index.es.js 1.9 kB 0 B
packages/paste-style-props/dist/index.js 2.44 kB 0 B
packages/paste-theme/dist/index.es.js 3 kB 0 B
packages/paste-theme/dist/index.js 3.23 kB 0 B
packages/paste-types/dist/index.es.js 20 B 0 B
packages/paste-types/dist/index.js 20 B 0 B

compressed-size-action

@SiTaggart
Copy link
Contributor Author

This is not as easy as first thought. The reason for the bottom margin is for when a group is orientated in a horizontal row and the number of items exceeds the row width space.

image

We can't remove the bottom margin in horizontal layouts entirely as the second row would remove the desired space between rows.

We can't only remove the bottom margin on the last child, because as you can see in the screen shot, there might be more than one dangling options which will introduce the gap along the bottom of the groups.

I'll think about this some more. Maybe, because a group must have a legend all the spacing is top only?

@TheSisb
Copy link
Collaborator

TheSisb commented Dec 1, 2020

I kind of like a rule of marginTop only on our components, with the option to unset the margin. Mixing the two leads to scenarios where the margins collapse sometimes. We also can't predict what comes after an element, but we may have an opinion on what should come before.

@changeset-bot
Copy link

changeset-bot bot commented Mar 26, 2021

🦋 Changeset detected

Latest commit: 658c408

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

This PR includes changesets to release 4 packages
Name Type
@twilio-paste/radio-group Patch
@twilio-paste/core Patch
@twilio-paste/checkbox Patch
@twilio-paste/inline-control-group 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

Copy link
Collaborator

@TheSisb TheSisb left a comment

Choose a reason for hiding this comment

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

Really nice changes and improvements. Mostly nits.

.changeset/two-humans-press.md Outdated Show resolved Hide resolved
.changeset/stupid-zebras-wave.md Outdated Show resolved Hide resolved
.changeset/nervous-moles-sleep.md Outdated Show resolved Hide resolved
- Adjust the vertical spacing on inline control group items, so that we don't leave space below last child item
- Remove the unused value prop and it's prop types
Radio Group was inheriting the interface from inline control group
which doesn't actually use value. So explicitly declare value just for
Radio Group
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants