Skip to content

Conversation

@kyledurand
Copy link
Member

@kyledurand kyledurand commented Dec 13, 2022

Proof of concept for #7904

aveline and others added 19 commits December 9, 2022 08:22
Fixes #7358

Refactors `Banner` component to use new layout primitive components
Resolves #7340.
Refactors `Modal` and its child components to use our layout primitives.

[Storybook
URL](https://5d559397bae39100201eedc1-nrruulmwsh.chromatic.com/?path=/story/all-components-modal--default).
Refactors `Modal`, `Modal.Section`, `Modal.Header`, and `Modal.Footer`
to use our layout primitives and remove css.

[Storybook
URL](https://5d559397bae39100201eedc1-nrruulmwsh.chromatic.com/?path=/story/all-components-modal--default).
I've tophatted all of our stories as well as the UI for all of our
breakpoints.

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
I'm still of the opinion that our layout components should have some
defaults and the ones we have on bleed may not be right but we need to
use it in more places to figure out what those defaults should be.

For now, this fixes regressions to Banner that were introduced in
#7644
Resolves #7354

- Refactored `ChoiceList` to use primitive Layout components
- Added support for `legend` element to `Box`
- Add support for `fieldset` element to `AlphaStack`

There should be no visual changes.

Co-authored-by: Lo Kim <lo.kim@shopify.com>
Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
### WHY are these changes introduced?

Quick cleanup of Account Connection
@github-actions
Copy link
Contributor

github-actions bot commented Dec 13, 2022

size-limit report 📦

Path Size
polaris-react-cjs 211.16 KB (+0.03% 🔺)
polaris-react-esm 136.37 KB (+0.05% 🔺)
polaris-react-esnext 191.54 KB (-0.33% 🔽)
polaris-react-css 41.73 KB (-0.94% 🔽)

Co-authored-by: Kyle Durand <kyle.durand@shopify.com>
kyledurand added a commit that referenced this pull request Dec 14, 2022
Fixes nested Boxes spacing issues in Safari and Chromatic

🎩 changes on the layout beta branch
[here](#7903)

I think there are still improvements that can be made here but this is a
good first step if it safely unblocks us

Co-authored-by: Lo Kim <lo.kim@shopify.com>
@kyledurand kyledurand closed this Dec 14, 2022
@kyledurand kyledurand deleted the fix-responsive-props branch December 14, 2022 19:03
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
Fixes nested Boxes spacing issues in Safari and Chromatic

🎩 changes on the layout beta branch
[here](Shopify#7903)

I think there are still improvements that can be made here but this is a
good first step if it safely unblocks us

Co-authored-by: Lo Kim <lo.kim@shopify.com>
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.

3 participants