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

[FooterHelp] Add align property #11764

Merged
merged 3 commits into from
Mar 22, 2024
Merged

[FooterHelp] Add align property #11764

merged 3 commits into from
Mar 22, 2024

Conversation

itwasmattgregg
Copy link
Contributor

@itwasmattgregg itwasmattgregg commented Mar 20, 2024

WHY are these changes introduced?

This change will allow UX and devs the ability to chose an alignment for the FooterHelp component. Some footer layouts are being created with left-aligned text and they would like to see the footer help component utilize the same alignment.

WHAT is this pull request doing?

Adds an align property with the options left | center | right with the default continuing to be center.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

@itwasmattgregg
Copy link
Contributor Author

/snapit

Copy link
Contributor

🫰✨ Thanks @itwasmattgregg! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]
yarn add @shopify/[email protected]
yarn add @shopify/[email protected]

@alex-page alex-page requested review from a team and removed request for alex-page March 20, 2024 03:49
@alex-page
Copy link
Member

@itwasmattgregg do you have examples of how needed this is? I don't want folks misusing this?

@Shopify/polaris-ux need an opinion here is this is a pattern we want to scale or a one off.

@itwasmattgregg
Copy link
Contributor Author

The other option would be for us to just not use FooterHelp and we could keep it as a center aligned component in Polaris. Our UX team asked us to contribute this to Polaris if possible.

Copy link
Contributor

@laurkim laurkim left a comment

Choose a reason for hiding this comment

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

Small suggestion and not blocking, but it would be nice to have the new prop documented on the docs for polaris.shopify.com as well

Copy link
Member

@chloerice chloerice left a comment

Choose a reason for hiding this comment

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

Just need to update the website example code to match the new prop values and then CI should pass 👀

polaris.shopify.com/pages/examples/footer-help-align.tsx Outdated Show resolved Hide resolved
polaris.shopify.com/pages/examples/footer-help-align.tsx Outdated Show resolved Hide resolved
Adjust alignment strings

Add block stack import
@laurkim
Copy link
Contributor

laurkim commented Mar 22, 2024

Posting this for visibility but I chatted with @tjonx about adding this at a system level and it was brought up that new patterns for empty states would need this as well

@itwasmattgregg itwasmattgregg merged commit 880f31b into main Mar 22, 2024
13 of 14 checks passed
@itwasmattgregg itwasmattgregg deleted the footer-help-align branch March 22, 2024 16:07
sophschneider pushed a commit that referenced this pull request Mar 26, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/[email protected]

### Minor Changes

- [#11778](#11778)
[`d689bd8f4`](d689bd8)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Added
`PersonSegment` icon

## @shopify/[email protected]

### Minor Changes

- [#11764](#11764)
[`880f31b44`](880f31b)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Added
align property for FooterHelp


- [#11691](#11691)
[`1e613de8b`](1e613de)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - - Added
`ThemeProvider` component
- Removed `html` from theme classes to remove global theme constraint
    -   Updated `useTheme` to be context aware of parent themes
    -   Updated `Portal` component to be context aware of parent themes
    -   Initialized a `dark-experimental` theme


- [#11787](#11787)
[`c3aefafe2`](c3aefaf)
Thanks [@chloerice](https://github.com/chloerice)! - Added support for
destructive `promotodBulkActions` to `BulkActions`

### Patch Changes

- Updated dependencies
\[[`1e613de8b`](1e613de),
[`d689bd8f4`](d689bd8)]:
    -   @shopify/[email protected]
    -   @shopify/[email protected]

## @shopify/[email protected]

### Minor Changes

- [#11691](#11691)
[`1e613de8b`](1e613de)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - - Added
`ThemeProvider` component
- Removed `html` from theme classes to remove global theme constraint
    -   Updated `useTheme` to be context aware of parent themes
    -   Updated `Portal` component to be context aware of parent themes
    -   Initialized a `dark-experimental` theme

## @shopify/[email protected]

### Patch Changes

- Updated dependencies
\[[`1e613de8b`](1e613de)]:
    -   @shopify/[email protected]
    -   @shopify/[email protected]

## @shopify/[email protected]

### Patch Changes

- Updated dependencies
\[[`1e613de8b`](1e613de)]:
    -   @shopify/[email protected]

## [email protected]

### Patch Changes

- Updated dependencies
\[[`1e613de8b`](1e613de)]:
    -   @shopify/[email protected]

## [email protected]

### Patch Changes

- [#11776](#11776)
[`ca8eb99ea`](ca8eb99)
Thanks [@sarahill](https://github.com/sarahill)! - Updated common action
patterns example

- Updated dependencies
\[[`880f31b44`](880f31b),
[`1e613de8b`](1e613de),
[`d689bd8f4`](d689bd8),
[`c3aefafe2`](c3aefaf)]:
    -   @shopify/[email protected]
    -   @shopify/[email protected]
    -   @shopify/[email protected]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
### WHY are these changes introduced?

This change will allow UX and devs the ability to chose an alignment for
the FooterHelp component. Some footer layouts are being created with
left-aligned text and they would like to see the footer help component
utilize the same alignment.

### WHAT is this pull request doing?

Adds an align property with the options `left | center | right` with the
default continuing to be `center`.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [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)

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [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)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
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.

5 participants