Skip to content

[SelectAllActions] Update string and style it better #8413

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 4 commits into from
Feb 23, 2023
Merged

[SelectAllActions] Update string and style it better #8413

merged 4 commits into from
Feb 23, 2023

Conversation

@zakwarsame
Copy link
Contributor

@zakwarsame zakwarsame commented Feb 17, 2023 •
edited
Loading

WHY are these changes introduced?

Fixes https://github.com/Shopify/shopify/issues/405948
Fixes https://github.com/Shopify/web/issues/80679

See mockup Example image

When bulk selecting on the Index Table, the gap between the action and string is very minimal and confusing. Expand the mockup above for specifications

WHAT is this pull request doing?

This PR updates by removing the period in between these 2, and adds some gap.

How to 🎩

  • Spin URL
  • Bulk select orders:
    • Ensure there's a gap between the strings besides the first checkbox.
    • Ensure the string 50 selected doesn't have a period at the end.

🎩 checklist

@github-actions
Copy link
Contributor

github-actions bot commented Feb 17, 2023 •
edited
Loading

size-limit report 📦

Path Size
polaris-react-cjs 220.34 KB (0%)
polaris-react-esm 140.12 KB (0%)
polaris-react-esnext 196.04 KB (-0.01% 🔽)
polaris-react-css 42.43 KB (-0.01% 🔽)

@zakwarsame
Copy link
Contributor Author

/snapit

@github-actions
Copy link
Contributor

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

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

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230217142950
yarn add @shopify/polaris@0.0.0-snapshot-release-20230217142950

@zakwarsame
Copy link
Contributor Author

/snapit

@github-actions
Copy link
Contributor

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

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

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230217165831
yarn add @shopify/polaris@0.0.0-snapshot-release-20230217165831

@zakwarsame zakwarsame merged commit 7bbe096 into main Feb 23, 2023
@zakwarsame zakwarsame deleted the fix-strings branch February 23, 2023 22:56
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Feb 23, 2023
Merged
chazdean pushed a commit that referenced this pull request Feb 27, 2023
@shopify-github-actions-access @github-actions
Version Packages (#8453)
213e79f 
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/stylelint-polaris@8.0.0

### Major Changes

- [#8467](#8467)
[`9ab93132a`](9ab9313)
Thanks [@chloerice](https://github.com/chloerice)! - Configured
`selector-disallowed-list` to disallow Polaris component class name
overrides

### Patch Changes

- Updated dependencies
\[[`0e9fa8433`](0e9fa84),
[`b1768f037`](b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1

## @shopify/polaris-migrator@0.14.0

### Minor Changes

- [#8071](#8071)
[`319479143`](3194791)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Added a
migration for updating the Page component `breadcrumbs` prop to use an
object instead of an array

### Patch Changes

- Updated dependencies
\[[`0e9fa8433`](0e9fa84),
[`9ab93132a`](9ab9313),
[`b1768f037`](b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1
    -   @shopify/stylelint-polaris@8.0.0

## @shopify/polaris@10.32.0

### Minor Changes

- [#8454](#8454)
[`4799b6550`](4799b65)
Thanks [@chazdean](https://github.com/chazdean)! - Removed default
spacing from `Inline`


- [#8484](#8484)
[`cbbb5648c`](cbbb564)
Thanks [@aveline](https://github.com/aveline)! - Removed default `gap`
from `Columns`


- [#8135](#8135)
[`c60617518`](c606175)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! -
Deprecated the `Page` `breadcrumbs` prop in favor of the new
`backAction` prop.


- [#8441](#8441)
[`3537b3aeb`](3537b3a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated
TextContainer in favor of AlphaStack


- [#8418](#8418)
[`4018ee268`](4018ee2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated Grid
component
    Update documentation for deprecated components


- [#8413](#8413)
[`7bbe096e4`](7bbe096)
Thanks [@zakwarsame](https://github.com/zakwarsame)! - updating bulk
actions strings

### Patch Changes

- [#8387](#8387)
[`7f0f2cad1`](7f0f2ca)
Thanks [@aveline](https://github.com/aveline)! - Updated `Columns` to
accept columns aliases


- [#8115](#8115)
[`cc706f4ce`](cc706f4)
Thanks [@mrcthms](https://github.com/mrcthms)! - Grouped PageActions
actions at the trailing edge of the container


- [#8470](#8470)
[`f5e450357`](f5e4503)
Thanks [@aveline](https://github.com/aveline)! - Removed default margin
from `Bleed`

- Updated dependencies
\[[`0e9fa8433`](0e9fa84),
[`b1768f037`](b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1

## @shopify/polaris-cli@0.1.13

### Patch Changes

- Updated dependencies
\[[`319479143`](3194791)]:
    -   @shopify/polaris-migrator@0.14.0

## @shopify/polaris-tokens@6.6.1

### Patch Changes

- [#8456](#8456)
[`0e9fa8433`](0e9fa84)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
`border-caution-subdued` and `border-success-subdued` tokens to improve
color contrast


- [#8483](#8483)
[`b1768f037`](b1768f0)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Adjusted
colors to meet color contrast requirements

## polaris.shopify.com@0.37.0

### Minor Changes

- [#8454](#8454)
[`4799b6550`](4799b65)
Thanks [@chazdean](https://github.com/chazdean)! - Removed default
spacing from `Inline`


- [#7843](#7843)
[`3840f49e9`](3840f49)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - ## Reboot
Pattern Guidance

    -   New layout primitives `Stack`, `Box`, `Grid`, `Row`.
    -   Playroom patched to support larger code snippets.
- New designs and content for the
[patterns](https://polaris.shopify.com/patterns) pages.
    -   Deprecated old patterns:
        ||Old|New|
        \|--\|--\|--\|
        \|**design-patterns** \| `/patterns/design-patterns` \| `404`\|
        \|**page-layouts** \| `/patterns/page-layouts` \| `404`\|
\|**error-messages** \| `/patterns/error-messages` \|
`/content/error-messages`\|
\|**help-content** \| `/patterns/help-content` \|
`/content/help-content`\|
\|**loading** \| `/patterns/loading` \| `/patterns-legacy/loading`\|
\|**new-badge** \| `/patterns/new-badge` \|
`/patterns-legacy/new-badge`\|
\|**pickers** \| `/patterns/pickers` \| `/patterns-legacy/pickers`\|
\|**text-fields** \| `/patterns/text-fields` \|
`/patterns-legacy/text-fields`\|
- Page padding and max-width adjusted such that live previews for
components and patterns always display the desktop breakpoint.


- [#8466](#8466)
[`3b32f3477`](3b32f34)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Adds
documentation for the Page breadcrumbs migration

### Patch Changes

- [#8475](#8475)
[`ba7280068`](ba72800)
Thanks [@chloerice](https://github.com/chloerice)! - Added documentation
for `selector-disallowed-list` `@shopify/stylelint/polaris` rule


- [#8474](#8474)
[`00028952d`](0002895)
Thanks [@jesstelford](https://github.com/jesstelford)! - Refactor
hideFromNav logic to support breadcrumbs


- [#8490](#8490)
[`16f5a3638`](16f5a36)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add caveats to
code examples in Patterns


- [#8491](#8491)
[`39704dccf`](39704dc)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add 'New'
status badge to Patterns nav item


- [#8422](#8422)
[`3975668a2`](3975668)
Thanks [@kyledurand](https://github.com/kyledurand)! - Organized
categories on components page


- [#8473](#8473)
[`597b78ba2`](597b78b)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Remove draft
pattern pages from PatternsPage


- [#8477](#8477)
[`c67d1a5b6`](c67d1a5)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fix global types
file


- [#8418](#8418)
[`4018ee268`](4018ee2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated Grid
component
    Update documentation for deprecated components


- [#8489](#8489)
[`0a525643d`](0a52564)
Thanks [@raquelbreternitz](https://github.com/raquelbreternitz)! - Add
new page on alt text


- [#8410](#8410)
[`2312cbb6a`](2312cbb)
Thanks [@kellydanma](https://github.com/kellydanma)! - Use Close instead
of OK

- Updated dependencies
\[[`7f0f2cad1`](7f0f2ca),
[`4799b6550`](4799b65),
[`cbbb5648c`](cbbb564),
[`c60617518`](c606175),
[`cc706f4ce`](cc706f4),
[`f5e450357`](f5e4503),
[`3537b3aeb`](3537b3a),
[`0e9fa8433`](0e9fa84),
[`4018ee268`](4018ee2),
[`7bbe096e4`](7bbe096),
[`b1768f037`](b1768f0)]:
    -   @shopify/polaris@10.32.0
    -   @shopify/polaris-tokens@6.6.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@zakwarsame @translation-platform @juzser
[SelectAllActions] Update string and style it better (Shopify#8413)
0280f1a 
<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes https://github.com/Shopify/shopify/issues/405948
Fixes https://github.com/Shopify/web/issues/80679

<details> 
<summary> See mockup </summary>

<img
src="https://user-images.githubusercontent.com/12194323/218508583-2b798523-12d8-4a9a-aa3c-32cd5166e7f2.png"
alt="Example image" />

</details>

When bulk selecting on the Index Table, the gap between the action and
string is very minimal and confusing. Expand the mockup above for
specifications

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

This PR updates by removing the period in between these 2, and adds some
gap.

### How to 🎩

- [Spin
URL](https://shop1.shopify.bulk-string.zakaria-warsame.us.spin.dev/admin/orders?inContextTimeframe=none)
- Bulk select orders:
- Ensure there's a gap between the strings besides the first checkbox.
   - Ensure the string `50 selected` doesn't have a period at the end.

<!-- ℹ️ Delete the following for small / trivial changes -->

### 🎩 checklist

- [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

---------

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@shopify-github-actions-access @github-actions @juzser
Version Packages (Shopify#8453)
49f507e 
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/stylelint-polaris@8.0.0

### Major Changes

- [Shopify#8467](Shopify#8467)
[`9ab93132a`](Shopify@9ab9313)
Thanks [@chloerice](https://github.com/chloerice)! - Configured
`selector-disallowed-list` to disallow Polaris component class name
overrides

### Patch Changes

- Updated dependencies
\[[`0e9fa8433`](Shopify@0e9fa84),
[`b1768f037`](Shopify@b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1

## @shopify/polaris-migrator@0.14.0

### Minor Changes

- [Shopify#8071](Shopify#8071)
[`319479143`](Shopify@3194791)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Added a
migration for updating the Page component `breadcrumbs` prop to use an
object instead of an array

### Patch Changes

- Updated dependencies
\[[`0e9fa8433`](Shopify@0e9fa84),
[`9ab93132a`](Shopify@9ab9313),
[`b1768f037`](Shopify@b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1
    -   @shopify/stylelint-polaris@8.0.0

## @shopify/polaris@10.32.0

### Minor Changes

- [Shopify#8454](Shopify#8454)
[`4799b6550`](Shopify@4799b65)
Thanks [@chazdean](https://github.com/chazdean)! - Removed default
spacing from `Inline`


- [Shopify#8484](Shopify#8484)
[`cbbb5648c`](Shopify@cbbb564)
Thanks [@aveline](https://github.com/aveline)! - Removed default `gap`
from `Columns`


- [Shopify#8135](Shopify#8135)
[`c60617518`](Shopify@c606175)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! -
Deprecated the `Page` `breadcrumbs` prop in favor of the new
`backAction` prop.


- [Shopify#8441](Shopify#8441)
[`3537b3aeb`](Shopify@3537b3a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated
TextContainer in favor of AlphaStack


- [Shopify#8418](Shopify#8418)
[`4018ee268`](Shopify@4018ee2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated Grid
component
    Update documentation for deprecated components


- [Shopify#8413](Shopify#8413)
[`7bbe096e4`](Shopify@7bbe096)
Thanks [@zakwarsame](https://github.com/zakwarsame)! - updating bulk
actions strings

### Patch Changes

- [Shopify#8387](Shopify#8387)
[`7f0f2cad1`](Shopify@7f0f2ca)
Thanks [@aveline](https://github.com/aveline)! - Updated `Columns` to
accept columns aliases


- [Shopify#8115](Shopify#8115)
[`cc706f4ce`](Shopify@cc706f4)
Thanks [@mrcthms](https://github.com/mrcthms)! - Grouped PageActions
actions at the trailing edge of the container


- [Shopify#8470](Shopify#8470)
[`f5e450357`](Shopify@f5e4503)
Thanks [@aveline](https://github.com/aveline)! - Removed default margin
from `Bleed`

- Updated dependencies
\[[`0e9fa8433`](Shopify@0e9fa84),
[`b1768f037`](Shopify@b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1

## @shopify/polaris-cli@0.1.13

### Patch Changes

- Updated dependencies
\[[`319479143`](Shopify@3194791)]:
    -   @shopify/polaris-migrator@0.14.0

## @shopify/polaris-tokens@6.6.1

### Patch Changes

- [Shopify#8456](Shopify#8456)
[`0e9fa8433`](Shopify@0e9fa84)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
`border-caution-subdued` and `border-success-subdued` tokens to improve
color contrast


- [Shopify#8483](Shopify#8483)
[`b1768f037`](Shopify@b1768f0)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Adjusted
colors to meet color contrast requirements

## polaris.shopify.com@0.37.0

### Minor Changes

- [Shopify#8454](Shopify#8454)
[`4799b6550`](Shopify@4799b65)
Thanks [@chazdean](https://github.com/chazdean)! - Removed default
spacing from `Inline`


- [Shopify#7843](Shopify#7843)
[`3840f49e9`](Shopify@3840f49)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - ## Reboot
Pattern Guidance

    -   New layout primitives `Stack`, `Box`, `Grid`, `Row`.
    -   Playroom patched to support larger code snippets.
- New designs and content for the
[patterns](https://polaris.shopify.com/patterns) pages.
    -   Deprecated old patterns:
        ||Old|New|
        \|--\|--\|--\|
        \|**design-patterns** \| `/patterns/design-patterns` \| `404`\|
        \|**page-layouts** \| `/patterns/page-layouts` \| `404`\|
\|**error-messages** \| `/patterns/error-messages` \|
`/content/error-messages`\|
\|**help-content** \| `/patterns/help-content` \|
`/content/help-content`\|
\|**loading** \| `/patterns/loading` \| `/patterns-legacy/loading`\|
\|**new-badge** \| `/patterns/new-badge` \|
`/patterns-legacy/new-badge`\|
\|**pickers** \| `/patterns/pickers` \| `/patterns-legacy/pickers`\|
\|**text-fields** \| `/patterns/text-fields` \|
`/patterns-legacy/text-fields`\|
- Page padding and max-width adjusted such that live previews for
components and patterns always display the desktop breakpoint.


- [Shopify#8466](Shopify#8466)
[`3b32f3477`](Shopify@3b32f34)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Adds
documentation for the Page breadcrumbs migration

### Patch Changes

- [Shopify#8475](Shopify#8475)
[`ba7280068`](Shopify@ba72800)
Thanks [@chloerice](https://github.com/chloerice)! - Added documentation
for `selector-disallowed-list` `@shopify/stylelint/polaris` rule


- [Shopify#8474](Shopify#8474)
[`00028952d`](Shopify@0002895)
Thanks [@jesstelford](https://github.com/jesstelford)! - Refactor
hideFromNav logic to support breadcrumbs


- [Shopify#8490](Shopify#8490)
[`16f5a3638`](Shopify@16f5a36)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add caveats to
code examples in Patterns


- [Shopify#8491](Shopify#8491)
[`39704dccf`](Shopify@39704dc)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add 'New'
status badge to Patterns nav item


- [Shopify#8422](Shopify#8422)
[`3975668a2`](Shopify@3975668)
Thanks [@kyledurand](https://github.com/kyledurand)! - Organized
categories on components page


- [Shopify#8473](Shopify#8473)
[`597b78ba2`](Shopify@597b78b)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Remove draft
pattern pages from PatternsPage


- [Shopify#8477](Shopify#8477)
[`c67d1a5b6`](Shopify@c67d1a5)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fix global types
file


- [Shopify#8418](Shopify#8418)
[`4018ee268`](Shopify@4018ee2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated Grid
component
    Update documentation for deprecated components


- [Shopify#8489](Shopify#8489)
[`0a525643d`](Shopify@0a52564)
Thanks [@raquelbreternitz](https://github.com/raquelbreternitz)! - Add
new page on alt text


- [Shopify#8410](Shopify#8410)
[`2312cbb6a`](Shopify@2312cbb)
Thanks [@kellydanma](https://github.com/kellydanma)! - Use Close instead
of OK

- Updated dependencies
\[[`7f0f2cad1`](Shopify@7f0f2ca),
[`4799b6550`](Shopify@4799b65),
[`cbbb5648c`](Shopify@cbbb564),
[`c60617518`](Shopify@c606175),
[`cc706f4ce`](Shopify@cc706f4),
[`f5e450357`](Shopify@f5e4503),
[`3537b3aeb`](Shopify@3537b3a),
[`0e9fa8433`](Shopify@0e9fa84),
[`4018ee268`](Shopify@4018ee2),
[`7bbe096e4`](Shopify@7bbe096),
[`b1768f037`](Shopify@b1768f0)]:
    -   @shopify/polaris@10.32.0
    -   @shopify/polaris-tokens@6.6.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@nayeobkim nayeobkim nayeobkim approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@zakwarsame @nayeobkim