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

Single complex select exploration #11512

Closed
wants to merge 1,480 commits into from
Closed

Conversation

kyledurand
Copy link
Contributor

WHY are these changes introduced?

Fixes #0000

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

moraleslevi and others added 30 commits December 4, 2023 11:22
### WHY are these changes introduced?

Fixes #9061

### WHAT is this pull request doing?

This removes the visible scrollbars in the `TextField` component when
using `verticalContent`, which were causing a less than ideal visual
appearance. The solution used was to change `overflow: scroll` to
`overflow: auto` so that scrollbars only display when needed.

<details>
  <summary>Before</summary>
  <img src="https://screenshot.click/01-12-xarq1-p4nx8.png">
</details>

<details>
  <summary>After</summary>
  <img src="https://screenshot.click/01-11-kg4v2-7qb6a.png">
</details>
### WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-internal/issues/1077

### WHY are these changes introduced?
Updates avatar background and text colors. 

|Before | After | 
|--|--|
|![Screenshot 2023-11-30 at 9 18
59 AM](https://github.com/Shopify/polaris/assets/21976492/480703ea-e302-42a4-9f81-7fb418ae55b4)|![Screenshot
2023-11-30 at 9 13
37 AM](https://github.com/Shopify/polaris/assets/21976492/80d3da30-b672-4f66-85d9-d76ee10b8127)|
![Screenshot 2023-11-30 at 9 18
43 AM](https://github.com/Shopify/polaris/assets/21976492/f175c9cf-3555-4df6-a7ff-b851953a1a45)|![Screenshot
2023-11-30 at 9 13
14 AM](https://github.com/Shopify/polaris/assets/21976492/e6d24510-35ea-437a-9998-c1a56e18e535)|

### How to 🎩

- 📕
[Storybook](https://5d559397bae39100201eedc1-nmmuuqskmo.chromatic.com/?path=/story/all-components-avatar--all)
- 👀 [Chromatic
Diffs](https://shopify.chromatic.com/build?appId=5d559397bae39100201eedc1&number=21837)
- 🌀
[Spin](https://admin.web.avatar-uplift-fast-follows-bp4.laura-griffee.us.spin.dev)

🖥 [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)
- [ ] 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~
…11281)

### WHY are these changes introduced?

Fixes a breaking change introduced on this
[PR](#10800 (review))
where the `edit-columns` action type was removed.

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

### WHAT is this pull request doing?

Restores the `edit-columns` action 

<img width="162" alt="Screenshot 2023-12-06 at 2 58 53 a m"
src="https://github.com/Shopify/polaris/assets/5873627/2b1cb7cb-91c6-4700-92d6-c11615612b0f">


### 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] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
Fix modal activator focus on close and add new optional activatorWrapper prop
<!--
  ☝️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
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?
Relevant to #10104
Removing @sophschneider chromatic override because this
[PR](#11106) from @sam-b-rose
appears to have resolved the issue. (At the very least I can't replicate
the chromatic bug we were seeing after removal).

Per @alex-page' suggestion, we're going to as the kids say "Let it cook"
on main for a day, to see if chromatic fails. 🤞


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

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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
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

- [#11073](#11073)
[`c3cad73cb`](d84596f)
Thanks [@lntn2022](https://github.com/lntn2022)! - Add PayoutsBlocked
icon


- [#11136](#11136)
[`0b1961c16`](6df65f9)
Thanks [@alex-page](https://github.com/alex-page)! - Update Metaobject
and MetaobjectReference icon SVGs

## @shopify/[email protected]

### Minor Changes

- [#11166](#11166)
[`456f3da42`](deab0f9)
Thanks [@sophschneider](https://github.com/sophschneider)! - Added Card
component default value for roundedAbove prop


- [#11211](#11211)
[`07aa5e979`](7f6fc3f)
Thanks [@sophschneider](https://github.com/sophschneider)! - Added
`size` prop with `slim` and `medium` options to `TextField`


- [#11266](#11266)
[`bf0593e20`](3180f86)
Thanks [@LauraAubin](https://github.com/LauraAubin)! - - Fixed `Modal`
`activator` not regaining focus on close
- Added an `activatorWrapper` prop to `Modal` to support setting the
element that wraps the `activator`


- [#11201](#11201)
[`eca971dca`](e453bb7)
Thanks [@laurkim](https://github.com/laurkim)! - Added documentation for
`Card` examples to support `LegacyCard` compositions


- [#11261](#11261)
[`32cfbecb1`](2dbd4d9)
Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `Avatar`
background and text colors


- [#11219](#11219)
[`97683ac05`](ec008ed)
Thanks [@matallo](https://github.com/matallo)! - - Bumped
`color-text-magic-secondary` to purple 13
    -   Added `tone` prop with `magic` value to `Select`
    -   Added `magic` value to `tone` prop of `Text`
    -   Added `magic-subdued` value to `tone` prop of `Text`


- [#11264](#11264)
[`773daaa0f`](a2e0624)
Thanks [@ryanschingeck](https://github.com/ryanschingeck)! - Added
`maxWidth` prop to SkeletonDisplayText component


- [#11172](#11172)
[`64ee75039`](a14ed4d)
Thanks [@yurm04](https://github.com/yurm04)! - Added the `key` prop to
`Select` component `StrictOption`


- [#11170](#11170)
[`79cadcf4f`](a707318)
Thanks [@laurkim](https://github.com/laurkim)! - Added support for
`paddingInline` and `paddingBlock` on `Box` component with updated
documentation


- [#11115](#11115)
[`45deb1941`](520ccd2)
Thanks [@fatimasajadi](https://github.com/fatimasajadi)! - Fixed hover
state of `IndexTable.Row` when `selectable` is `false`


- [#10633](#10633)
[`53fe61479`](57f9cb8)
Thanks [@mattkubej](https://github.com/mattkubej)! - Updated IndexTable,
ResourceList, and DataTable to have built-in pagination props


- [#10726](#10726)
[`35d92bcd8`](9dd85a1)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated Filters to not
render or perform filters logic if the filters array is empty


- [#10800](#10800)
[`9159e5083`](b27d419)
Thanks [@sirgalleto](https://github.com/sirgalleto)! - Added support for
an `EditColumns` button rendered in the `IndexFilters` deprecating the
`Tabs`'s `edit-columns` action.

    -   `IndexFilters`
- Added support for rendering an Edit Columns button using the
`showEditColumnsButton` flag.
- Added the edition `mode` to the `onEditStart(mode)` callback.
    -   `Tabs`
        -   Removed the `edit-columns` action type.


- [#11221](#11221)
[`799276156`](3ddeb94)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated Pagination to
be correct height of 40px when in the table variant


- [#11263](#11263)
[`04b8fb370`](6d1db5c)
Thanks [@alex-page](https://github.com/alex-page)! - Add storybook
example for all icons in @shopify/polaris-icons


- [#11094](#11094)
[`2c5ca9900`](cdc38ca)
Thanks [@laurkim](https://github.com/laurkim)! - Added support for
`bodyXs` variant and fixed font weight for `headingLg` variant in `Text`
component.
Updated references to font tokens from Polaris v11 to v12 in `Text`
component documentation


- [#11036](#11036)
[`1459f773d`](cae2948)
Thanks [@hughnguy](https://github.com/hughnguy)! - Fixed `TextField`
events not bubbling up when `multiline`

### Patch Changes

- [#10987](#10987)
[`00374f85a`](b38ccaa)
Thanks [@kyledurand](https://github.com/kyledurand)! - Simplified
`Button` code


- [#11211](#11211)
[`07aa5e979`](7f6fc3f)
Thanks [@sophschneider](https://github.com/sophschneider)! - Fixed
transparent background and wrapping in `IndexFilters` on small screens


- [#11211](#11211)
[`07aa5e979`](7f6fc3f)
Thanks [@sophschneider](https://github.com/sophschneider)! - Added
`SearchMinor` icon to `Filters` search field when `mdUp`


- [#11101](#11101)
[`6297e524a`](b3de46b)
Thanks [@AndrewMusgrave](https://github.com/AndrewMusgrave)! - Fixed ref
error in `Tabs` for `CreateViewModal` and removed promoted bulk action
warnings


- [#11203](#11203)
[`8b9ded242`](0b0ec70)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated
IndexTable documentation for when to hide bulk actions


- [#11270](#11270)
[`09df04ca5`](ded5ccd)
Thanks [@moraleslevi](https://github.com/moraleslevi)! - Remove
scrollbars from TextField vertical content


- [#11245](#11245)
[`165c860c2`](f8f37e1)
Thanks [@matallo](https://github.com/matallo)! - - Fixed `onFocus` and
`onBlur` events of Select component


- [#11237](#11237)
[`6b6e27ce0`](015c5ab)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unused
custom icon from dropzone that was used in a test


- [#11103](#11103)
[`786ee94b4`](1388dab)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed Filters
SearchField background in dark mode


- [#11211](#11211)
[`07aa5e979`](7f6fc3f)
Thanks [@sophschneider](https://github.com/sophschneider)! - Fixed
`TextField` clear button to not render when hidden


- [#11169](#11169)
[`90de38843`](e375792)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added expanded
styling to Button


- [#11206](#11206)
[`0e8ab42b4`](0c9e29f)
Thanks [@sophschneider](https://github.com/sophschneider)! - Fixed
disjointed Navigation arrow on small screens


- [#10804](#10804)
[`fe8491507`](f0dadb7)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Add support for
using breakpoint tokens in CSS by using `@custom-media`


- [#11124](#11124)
[`ad504d5be`](9e9a4c2)
Thanks [@sarahill](https://github.com/sarahill)! - Removed bevel from
`pressed` `Button` when focused


- [#11281](#11281)
[`b0edfbb92`](755fd9e)
Thanks [@sirgalleto](https://github.com/sirgalleto)! - Restores the
Tab's `edit-columns` action type


- [#11238](#11238)
[`2df27ed0b`](20f3d30)
Thanks [@alex-page](https://github.com/alex-page)! - Conditionally
render the accessibilityLabel when it is provided


- [#11168](#11168)
[`9c3dd913c`](9d0df2c)
Thanks [@mattkubej](https://github.com/mattkubej)! - [Page] prevent
vertical content shift of header with metadata and actions


- [#11211](#11211)
[`07aa5e979`](7f6fc3f)
Thanks [@sophschneider](https://github.com/sophschneider)! - Replaced
custom `Filters` input with Polaris `TextField`


- [#11123](#11123)
[`ac45afda8`](e0c6ced)
Thanks [@sarahill](https://github.com/sarahill)! - Updated `Button` base
state colors to use `fill` tokens


- [#10599](#10599)
[`b7219863d`](7abcc49)
Thanks [@oksanashopify](https://github.com/oksanashopify)! - Added child
type to IndexTable row


- [#11105](#11105)
[`ecbd6c137`](065c4d8)
Thanks [@sarahill](https://github.com/sarahill)! - Fixed `Tag` icon and
disabled state colors


- [#11012](#11012)
[`c25478fba`](ac42d6c)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `FormLayout`
spacing


- [#10753](#10753)
[`c849ff468`](d5e1537)
Thanks [@stephxshopify](https://github.com/stephxshopify)! - [Modal]
Disallow vertical scroll with use of noScroll


- Updated dependencies
\[[`c58632afa`](ef18aa1),
[`c3cad73cb`](d84596f),
[`0b1961c16`](6df65f9),
[`32cfbecb1`](2dbd4d9),
[`97683ac05`](ec008ed),
[`fe8491507`](f0dadb7)]:
    -   @shopify/[email protected]
    -   @shopify/[email protected]

## @shopify/[email protected]

### Minor Changes

- [#11173](#11173)
[`c58632afa`](ef18aa1)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add 0 tokens
where missing as per [the team's
decision](https://github.com/Shopify/polaris/discussions/7334#discussioncomment-4988991).


- [#11261](#11261)
[`32cfbecb1`](2dbd4d9)
Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `Avatar`
background and text colors


- [#11219](#11219)
[`97683ac05`](ec008ed)
Thanks [@matallo](https://github.com/matallo)! - - Bumped
`color-text-magic-secondary` to purple 13
    -   Added `tone` prop with `magic` value to `Select`
    -   Added `magic` value to `tone` prop of `Text`
    -   Added `magic-subdued` value to `tone` prop of `Text`


- [#10804](#10804)
[`fe8491507`](f0dadb7)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Add support for
using breakpoint tokens in CSS by using `@custom-media`

## @shopify/[email protected]

### Patch Changes

- Updated dependencies
\[[`c58632afa`](ef18aa1),
[`32cfbecb1`](2dbd4d9),
[`97683ac05`](ec008ed),
[`fe8491507`](f0dadb7)]:
    -   @shopify/[email protected]
    -   @shopify/[email protected]

## @shopify/[email protected]

### Patch Changes

- Updated dependencies
\[[`c58632afa`](ef18aa1),
[`32cfbecb1`](2dbd4d9),
[`97683ac05`](ec008ed),
[`fe8491507`](f0dadb7)]:
    -   @shopify/[email protected]

## [email protected]

### Minor Changes

- [#11122](#11122)
[`636d133e2`](ecabcc0)
Thanks [@alex-page](https://github.com/alex-page)! - Update dependencies
and published files to fix vsce publish

### Patch Changes

- Updated dependencies
\[[`c58632afa`](ef18aa1),
[`32cfbecb1`](2dbd4d9),
[`97683ac05`](ec008ed),
[`fe8491507`](f0dadb7)]:
    -   @shopify/[email protected]

## [email protected]

### Minor Changes

- [#11170](#11170)
[`79cadcf4f`](a707318)
Thanks [@laurkim](https://github.com/laurkim)! - Added support for
`paddingInline` and `paddingBlock` on `Box` component with updated
documentation


- [#11109](#11109)
[`533543abd`](00e52f7)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Removed
duplicate content on icon contribution


- [#11078](#11078)
[`ed5d7d6bf`](5009513)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Update icon
contribution guidance


- [#11104](#11104)
[`0e3f591ad`](3ad8d6a)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Added new
content section on how to add an issue to our board rather than creating
your own pr.

### Patch Changes

- [#11203](#11203)
[`8b9ded242`](0b0ec70)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated
IndexTable documentation for when to hide bulk actions


- [#11198](#11198)
[`351433f59`](0cc4349)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed typos in
naming docs


- [#11131](#11131)
[`9db9731c7`](de9e721)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Fixed icon search
and query params from URL


- [#11218](#11218)
[`b83ed4edb`](9317a77)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Fixed link to
tokens from global search


- [#11260](#11260)
[`61cacbfbb`](4196f36)
Thanks [@LauraAubin](https://github.com/LauraAubin)! - Fix column
content alignment for the IndexTable and IndexFilters total column


- [#11094](#11094)
[`2c5ca9900`](cdc38ca)
Thanks [@laurkim](https://github.com/laurkim)! - Added support for
`bodyXs` variant and fixed font weight for `headingLg` variant in `Text`
component.
Updated references to font tokens from Polaris v11 to v12 in `Text`
component documentation
- Updated dependencies
\[[`00374f85a`](b38ccaa),
[`07aa5e979`](7f6fc3f),
[`07aa5e979`](7f6fc3f),
[`456f3da42`](deab0f9),
[`6297e524a`](b3de46b),
[`c58632afa`](ef18aa1),
[`8b9ded242`](0b0ec70),
[`07aa5e979`](7f6fc3f),
[`bf0593e20`](3180f86),
[`eca971dca`](e453bb7),
[`09df04ca5`](ded5ccd),
[`165c860c2`](f8f37e1),
[`c3cad73cb`](d84596f),
[`6b6e27ce0`](015c5ab),
[`0b1961c16`](6df65f9),
[`786ee94b4`](1388dab),
[`32cfbecb1`](2dbd4d9),
[`07aa5e979`](7f6fc3f),
[`90de38843`](e375792),
[`97683ac05`](ec008ed),
[`773daaa0f`](a2e0624),
[`0e8ab42b4`](0c9e29f),
[`fe8491507`](f0dadb7),
[`ad504d5be`](9e9a4c2),
[`b0edfbb92`](755fd9e),
[`64ee75039`](a14ed4d),
[`79cadcf4f`](a707318),
[`45deb1941`](520ccd2),
[`53fe61479`](57f9cb8),
[`35d92bcd8`](9dd85a1),
[`2df27ed0b`](20f3d30),
[`9c3dd913c`](9d0df2c),
[`07aa5e979`](7f6fc3f),
[`9159e5083`](b27d419),
[`799276156`](3ddeb94),
[`ac45afda8`](e0c6ced),
[`b7219863d`](7abcc49),
[`ecbd6c137`](065c4d8),
[`c25478fba`](ac42d6c),
[`04b8fb370`](6d1db5c),
[`c849ff468`](d5e1537),
[`2c5ca9900`](cdc38ca),
[`1459f773d`](cae2948)]:
    -   @shopify/[email protected]
    -   @shopify/[email protected]
    -   @shopify/[email protected]

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Sophie Schneider <[email protected]>
Setting up Spin for internal dev experience improvements
…11271)

### WHY are these changes introduced?

Align our icons in the `polaris-icons/icons/*.svg` directory to be the
same as the ones deployed in the NPM package.

### WHAT is this pull request doing?

- [x] Remove `fill` as we already remove it as a plugin with rollup
- [x] Fix `svgo` config as the `convertPathData` plugin was not
correctly running with the overridden option
- [x] Add a new test to make sure that optimized svg code matches the
code in the `.svg` file
- [x] Remove unnecessary tests that are resolved with `svgo` config and
`yarn optimize`
- [x] Reduce icons library SVG size by `383.75kb`
### WHY are these changes introduced?

Fixes #11214

### WHAT is this pull request doing?

Adds `ClipboardCheckFilledMajor` icon
Closes https://github.com/Shopify/polaris-internal/issues/1264

### WHY are these changes introduced?

Teams are copy pasting Polaris icons because they cannot modify the fill
value based on text color.

### WHAT is this pull request doing?

Safely without breaking changes unblocks the ability to use
`currentColor` through the `inherit` property on the `<Icon>` component.
Ran `npx @turbo/codemod migrate` to upgrade `turbo` to v1.11.1 (see
https://turbo.build/blog/turbo-1-11-0)
<!--
  ☝️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
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Relevant to #10104 

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

### WHAT is this pull request doing?

Implements [solution b
](https://www.chromatic.com/docs/resource-loading/#solution-a-preload-fonts)
for deterministic font loading.

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

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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
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

- [#11292](#11292)
[`2b5ecf8df`](aa3ae32)
Thanks [@alex-page](https://github.com/alex-page)! - Add
ClipboardCheckFilledMajor icon

### Patch Changes

- [#11271](#11271)
[`bd0cede27`](f1d3f38)
Thanks [@alex-page](https://github.com/alex-page)! - - Remove fill as we
already remove it as a plugin with rollup
- Fix svgo config as the convertPathData was not correctly running with
the overridden option
- Add a new test to make sure that optimized svg code matches the code
in the .svg file
    -   Remove unnecessary tests that are resolved with svgo config
    -   Reduce icons library SVG size by 383.75kb

## @shopify/[email protected]

### Minor Changes

- [#11273](#11273)
[`d514150b1`](0c37b37)
Thanks [@alex-page](https://github.com/alex-page)! - Add `inherit` to
`<Icon>` tone property
    Fix appearance of `source="placeholder"` in `<Icon>`

### Patch Changes

- Updated dependencies
\[[`2b5ecf8df`](aa3ae32),
[`bd0cede27`](f1d3f38)]:
    -   @shopify/[email protected]

## [email protected]

### Patch Changes

- Updated dependencies
\[[`2b5ecf8df`](aa3ae32),
[`bd0cede27`](f1d3f38),
[`d514150b1`](0c37b37)]:
    -   @shopify/[email protected]
    -   @shopify/[email protected]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
…ge (#11303)

We're adding a new Magic tone to the Badge component which includes the
following changes:

- Remap `bg-color-magic-fill-secondary` from `purple-6` to `purple-5`
- Remap `bg-color-magic-fill-secondary-hover` from `purple-7` to
`purple-6`
- Remap `bg-color-magic-fill-secondary-active` from `purple-8` to
`purple-7`
- Adding a new `magic` tone to the Badge component

<img width="774" alt="Screenshot 2023-12-08 at 18 47 43"
src="https://github.com/Shopify/polaris/assets/8492201/ed78cad6-73bb-4679-a626-ba7d027f5b89">
<img width="650" alt="Screenshot 2023-12-08 at 18 48 05"
src="https://github.com/Shopify/polaris/assets/8492201/c3e1780a-b902-4888-b786-f95de6927698">

<!--
  ☝️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
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #0000 <!-- link to issue if one exists -->

<!--
  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.

  Include a video if your changes include interactive content.

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

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

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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

---------

Co-authored-by: Jon Rundle <[email protected]>
Co-authored-by: Chloe Rice <[email protected]>
<!--
  ☝️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
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

[Fixes #0000](#11322) <!-- link
to issue if one exists -->

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

### WHAT is this pull request doing?
The `nav.json` data was updated and the `Subnav` did not update to match
the new structure, so we were not getting the data properly. This is
updating to match by passing in `nav.children`



https://github.com/Shopify/polaris/assets/4642404/ab987492-3888-42c3-9d46-a7c2e7f9168f


<!--
  Summary of the changes committed.

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

  Include a video if your changes include interactive content.

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

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

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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
<!--
  ☝️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
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

The missing padding for `FooterHelp` leads to the text being completely
at the edge of a screen on small devices. This doesn't happen on md and
up. It's imho surprising to remove a padding for small screens and leads
to issues in Web Admin.

| Before | After |
| - | - |
|
![image](https://github.com/Shopify/polaris/assets/9371695/35d1f83d-a82f-40db-93e8-56e1c1d0db88)
|
![image](https://github.com/Shopify/polaris/assets/9371695/155671ad-9b3c-46b9-a996-3bc5c644b6d8)
|

<!--
  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.

  Include a video if your changes include interactive content.

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

It unifies the padding for `FooterHelp` across all breakpoints.

### How to 🎩

- Go to `FooterHelp` story
- Ensure the padding is applied regardless of the size of the screen.

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

- [ ] 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
<!--
  ☝️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
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Relevant to https://github.com/Shopify/polaris-internal/issues/1278

### WHAT is this pull request doing?

- Add pattern variants to site cache and normalise cache to be keyed by
URLs
- refactor gen-assets processes

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

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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
<!--
  ☝️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
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Fixes: https://github.com/Shopify/polaris-internal/issues/1311 <!-- link
to issue if one exists -->

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

### WHAT is this pull request doing?
Relies on the color CSS attribute so that the polaris Icon can inherit
and apply the color properly

```css
.Polaris-Icon svg {
  fill: currentColor;
}
```

<!--
  Summary of the changes committed.

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

  Include a video if your changes include interactive content.

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

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

---------

Co-authored-by: Charles <[email protected]>
trtri2 and others added 23 commits February 29, 2024 16:41
)

### WHY are these changes introduced?

Fixes #11647

The OptionList component doesn't support hover styles when it's used as
a multi-select. This PR aims to add that support. We follow the same
behaviour as the single select, with the exception we show the hover on
selected rows as well, since the checkbox is the main indicator for the
selected state.

### WHAT is this pull request doing?

Move some css around and add the hover styles to the multi select class.

Before:

![22-54-35phd-db2jh](https://github.com/Shopify/polaris/assets/39638939/10c7331a-b737-4240-a4f6-bacaba1ccef8)

After:

![22-58-6wzil-9rfsi](https://github.com/Shopify/polaris/assets/39638939/215b8e77-7f5b-45da-9d31-0e8f1b735975)


### 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
<!--
  ☝️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
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Fixes [#1432](https://github.com/Shopify/polaris-internal/issues/1432)

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

### WHAT is this pull request doing?
All these icons were getting clipped when our new mobile icon strategy
was being used. Each icon now stays inside the 16px safe area so they no
longer get clipped.

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

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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
…11684)

### WHY are these changes introduced?

Fixes a
[bug](https://app.bugsnag.com/shopify/shopify-web-client/timeline?filters[event.since]=7d&filters[error.status]=open&filters[error]=65e257c1fa853900080d195d&filters[release.seen_in]=172541221c00bcb5afbd4779e553710d0eaed216&pivot_tab=event)
that was detected last week where incorrect value types were passed down
to the `Actions` component within the `Page` component which was causing
pages to 500.

### WHAT is this pull request doing?

We create an array of hidden actions and hidden groups to render within
the ActionList, depending on how much space there is to render regular
actions & groups. We call a typeguard function on each item in that
array, using the `'X' in y` syntax to determine the type of the value.
Some of the values in the array when used in production are `undefined`,
so trying to run `'X' in undefined` throws an error. By filtering the
data that creates the array which we iterate on, we can be sure that the
values exist before we pass them to the typeguard function.

### 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)

Spin instance:
https://admin.web.more-actions-bug-2.marc-thomas.eu.spin.dev/store/shop1/products/10

Should not be able to get an error in the console relating to the bug if
you navigate between products with long and short titles

### 🎩 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
… search field or filters (#11665)

### WHY are these changes introduced?

Fixes #11664

Fixes a issue where pressing the F key to toggle the filtering mode of
the IndexFilters was still toggling even when the component had no
search field or filters. This resulted in the default mode vanishing
from the screen and unable to get it back unless one performs a manual
refresh of the page.

### WHAT is this pull request doing?

Returns early from the keydown event listener if both the
`hideQueryField` and `hideFilters` props are `true`.

### 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)

Spin URL:
https://admin.web.index-filter-keyboard-shortcut.marc-thomas.eu.spin.dev/store/shop1/orders
(I've updated the Orders index to remove search and filters to showcase
the change)

### 🎩 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

---------

Co-authored-by: Chloe Rice <[email protected]>
### WHAT is this pull request doing?

Fixes icons that are being clipped on mobile because they are outside
safe area.

1. `FolderUp`
2. `Food`
3. `LogoCritero`
4. `MetaobjectList`
5. `MetaobjectReference`
6. `Minus`
7. `Plus`
8. `ReferralCode`
9. `Reward`
10. `Wifi`

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

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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
<!--
  ☝️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
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Using REMs in Polaris icon SVGs was causing issue with usage on mobile.

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

### WHAT is this pull request doing?

This PR simplifies our icons by using implicit pixel values in Polaris
icon SVGs. Only the `SkeletonIcon` should be affected. There should be
not visual changes.

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

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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
### WHAT is this pull request doing?

Reduces size of icons to fit better in context of the admin

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

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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
<!--
  ☝️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
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Brings guidance up to date with new requirements for mobile. Icons now
need to stay inside the 16px safe area to avoid clipping.

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

### WHAT is this pull request doing?

Updates both content and images for design guidance around the icon safe
area


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

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] 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
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

- [#11682](#11682)
[`9eebf1a45`](d1e6ed3)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Fixes
clipping on mobile


- [#11686](#11686)
[`9b1b74447`](268738e)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Update icons
for mobile clipping


- [#11687](#11687)
[`eeea3b96c`](9024be3)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Minus and
Plus icons to big and unbalanced

### Patch Changes

- [#11685](#11685)
[`ac563025e`](9711478)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Removed REM units
from SkeletonIcon

## @shopify/[email protected]

### Minor Changes

- [#11663](#11663)
[`ab2877249`](51890f0)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated `BulkActions`
to support containing a flat array of actions into a single section
within the ActionList


- [#11674](#11674)
[`042b428be`](2e5d443)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated BulkActions to
show titles of sections if provided

### Patch Changes

- [#11670](#11670)
[`c2e443ec9`](848ed7c)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated IndexTable so
that no bulk actions are required to see the paginated select all text


- [#11684](#11684)
[`75dcb5443`](b1e2f17)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated Actions to
safeguard against incorrect prop shapes being passed to it


- [#11648](#11648)
[`8c7302e11`](a9002a6)
Thanks [@trtri2](https://github.com/trtri2)! - Fixed hover styles to
multiple selection variant of `OptionList`


- [#11665](#11665)
[`4263d9ada`](ea00bfc)
Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed `IndexFilters`
responding to keyboard shortcuts when there is no search field or
filters

- Updated dependencies
\[[`ac563025e`](9711478),
[`9eebf1a45`](d1e6ed3),
[`9b1b74447`](268738e),
[`eeea3b96c`](9024be3)]:
    -   @shopify/[email protected]

## [email protected]

### Minor Changes

- [#11674](#11674)
[`042b428be`](2e5d443)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated BulkActions to
show titles of sections if provided


- [#11683](#11683)
[`8a0e1b32f`](9080fd1)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Update design
guidance for icons


- [#11634](#11634)
[`27ca061a6`](9caf31a)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Adds guidance
on optimzing icons to contribution page

### Patch Changes

- Updated dependencies
\[[`c2e443ec9`](848ed7c),
[`ab2877249`](51890f0),
[`ac563025e`](9711478),
[`75dcb5443`](b1e2f17),
[`042b428be`](2e5d443),
[`9eebf1a45`](d1e6ed3),
[`8c7302e11`](a9002a6),
[`4263d9ada`](ea00bfc),
[`9b1b74447`](268738e),
[`eeea3b96c`](9024be3)]:
    -   @shopify/[email protected]
    -   @shopify/[email protected]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@kyledurand kyledurand force-pushed the picker_single-complex-exploration branch from d3814ff to 19c82b1 Compare March 6, 2024 20:19
@aaronccasanova aaronccasanova force-pushed the picker_single-complex-exploration branch from deda056 to 9c34526 Compare April 19, 2024 21:52
@github-actions github-actions bot added the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Apr 19, 2024
@kyledurand kyledurand closed this Apr 19, 2024
@kyledurand kyledurand deleted the picker_single-complex-exploration branch April 19, 2024 22:49
@aaronccasanova aaronccasanova restored the picker_single-complex-exploration branch April 20, 2024 02:33
This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cla-needed Added by a bot. Contributor needs to sign the CLA Agreement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.