Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

[Card] Add storybook examples for Card compositions #11201

Merged
merged 7 commits into from
Nov 21, 2023
Merged

[Card] Add storybook examples for Card compositions #11201

merged 7 commits into from
Nov 21, 2023

Conversation

laurkim
Copy link
Contributor

@laurkim laurkim commented Nov 21, 2023 •
edited
Loading

WHY are these changes introduced?

Resolves #1222.

With Card marked stable with the v12 release, we should have storybook examples for the different ways it can be composed with the other layout components to recreate the UI that the LegacyCard component supported via props.

WHAT is this pull request doing?

Recreates all the LegacyCard compositions that were supported via props using Card and other layout primitives (e.g., InlineStack, Bleed).

Updates Card examples to match any LegacyCard spacing/font styling changes post uplift/v12.

Adds:

  • Storybook examples
  • Style guide examples
  • Updates documentation for Card post v12
    New examples on styleguide New examples on styleguide

How to 🎩

New Card storybook
LegacyCard storybook

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

@laurkim laurkim changed the title Lo/add card compositions 2 [Card] Add storybook examples for Card compositions Nov 21, 2023
@laurkim laurkim mentioned this pull request Nov 21, 2023
Closed
5 tasks
@laurkim laurkim force-pushed the lo/add-card-compositions-2 branch from d1444b5 to 2fdcdb8 Compare November 21, 2023 15:45
@laurkim laurkim self-assigned this Nov 21, 2023
@laurkim laurkim marked this pull request as ready for review November 21, 2023 16:06
kyledurand
kyledurand approved these changes Nov 21, 2023
View reviewed changes
Copy link
Member

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

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

This looks great 👍

One nit is that there's a lot of <Box> usage where no props are applied. This is a pattern I kind of want to discourage because it's just rendering a div but at a higher cost than just rendering a div directly

polaris.shopify.com/pages/examples/card-with-destructive-footer-actions.tsx Outdated
} from '@shopify/polaris';
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';

function CardWithDestructiveFooterActions() {
Copy link
Member

Choose a reason for hiding this comment

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

Not a big deal but I'm wondering if we should start doing away with destructive phrasing and start using critical primary to match the props

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated references of destructive in names to critical 👍

@laurkim laurkim force-pushed the lo/add-card-compositions-2 branch from 284b8fc to 3085205 Compare November 21, 2023 17:52
@laurkim laurkim merged commit eca971d into main Nov 21, 2023
@laurkim laurkim deleted the lo/add-card-compositions-2 branch November 21, 2023 19:23
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Nov 21, 2023
Merged
sophschneider added a commit that referenced this pull request Dec 6, 2023
@shopify-github-actions-access @github-actions @sophschneider
Version Packages (#11092)
6ae0cbc 
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/polaris-icons@7.10.0

### Minor Changes

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


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

## @shopify/polaris@12.2.0

### Minor Changes

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


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


- [#11266](#11266)
[`bf0593e20`](bf0593e)
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`](eca971d)
Thanks [@laurkim](https://github.com/laurkim)! - Added documentation for
`Card` examples to support `LegacyCard` compositions


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


- [#11219](#11219)
[`97683ac05`](97683ac)
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`](773daaa)
Thanks [@ryanschingeck](https://github.com/ryanschingeck)! - Added
`maxWidth` prop to SkeletonDisplayText component


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


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


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


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


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


- [#10800](#10800)
[`9159e5083`](9159e50)
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`](7992761)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated Pagination to
be correct height of 40px when in the table variant


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


- [#11094](#11094)
[`2c5ca9900`](2c5ca99)
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`](1459f77)
Thanks [@hughnguy](https://github.com/hughnguy)! - Fixed `TextField`
events not bubbling up when `multiline`

### Patch Changes

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


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


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


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


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


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


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


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


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


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


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


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


- [#10804](#10804)
[`fe8491507`](fe84915)
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`](ad504d5)
Thanks [@sarahill](https://github.com/sarahill)! - Removed bevel from
`pressed` `Button` when focused


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


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


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


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


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


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


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


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


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


- Updated dependencies
\[[`c58632afa`](c58632a),
[`c3cad73cb`](c3cad73),
[`0b1961c16`](0b1961c),
[`32cfbecb1`](32cfbec),
[`97683ac05`](97683ac),
[`fe8491507`](fe84915)]:
    -   @shopify/polaris-tokens@8.2.0
    -   @shopify/polaris-icons@7.10.0

## @shopify/polaris-tokens@8.2.0

### Minor Changes

- [#11173](#11173)
[`c58632afa`](c58632a)
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`](32cfbec)
Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `Avatar`
background and text colors


- [#11219](#11219)
[`97683ac05`](97683ac)
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`](fe84915)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Add support for
using breakpoint tokens in CSS by using `@custom-media`

## @shopify/polaris-migrator@0.26.4

### Patch Changes

- Updated dependencies
\[[`c58632afa`](c58632a),
[`32cfbecb1`](32cfbec),
[`97683ac05`](97683ac),
[`fe8491507`](fe84915)]:
    -   @shopify/polaris-tokens@8.2.0
    -   @shopify/stylelint-polaris@15.0.4

## @shopify/stylelint-polaris@15.0.4

### Patch Changes

- Updated dependencies
\[[`c58632afa`](c58632a),
[`32cfbecb1`](32cfbec),
[`97683ac05`](97683ac),
[`fe8491507`](fe84915)]:
    -   @shopify/polaris-tokens@8.2.0

## polaris-for-vscode@0.9.0

### Minor Changes

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

### Patch Changes

- Updated dependencies
\[[`c58632afa`](c58632a),
[`32cfbecb1`](32cfbec),
[`97683ac05`](97683ac),
[`fe8491507`](fe84915)]:
    -   @shopify/polaris-tokens@8.2.0

## polaris.shopify.com@0.61.0

### Minor Changes

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


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


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


- [#11104](#11104)
[`0e3f591ad`](0e3f591)
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`](8b9ded2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated
IndexTable documentation for when to hide bulk actions


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


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


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


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


- [#11094](#11094)
[`2c5ca9900`](2c5ca99)
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`](00374f8),
[`07aa5e979`](07aa5e9),
[`07aa5e979`](07aa5e9),
[`456f3da42`](456f3da),
[`6297e524a`](6297e52),
[`c58632afa`](c58632a),
[`8b9ded242`](8b9ded2),
[`07aa5e979`](07aa5e9),
[`bf0593e20`](bf0593e),
[`eca971dca`](eca971d),
[`09df04ca5`](09df04c),
[`165c860c2`](165c860),
[`c3cad73cb`](c3cad73),
[`6b6e27ce0`](6b6e27c),
[`0b1961c16`](0b1961c),
[`786ee94b4`](786ee94),
[`32cfbecb1`](32cfbec),
[`07aa5e979`](07aa5e9),
[`90de38843`](90de388),
[`97683ac05`](97683ac),
[`773daaa0f`](773daaa),
[`0e8ab42b4`](0e8ab42),
[`fe8491507`](fe84915),
[`ad504d5be`](ad504d5),
[`b0edfbb92`](b0edfbb),
[`64ee75039`](64ee750),
[`79cadcf4f`](79cadcf),
[`45deb1941`](45deb19),
[`53fe61479`](53fe614),
[`35d92bcd8`](35d92bc),
[`2df27ed0b`](2df27ed),
[`9c3dd913c`](9c3dd91),
[`07aa5e979`](07aa5e9),
[`9159e5083`](9159e50),
[`799276156`](7992761),
[`ac45afda8`](ac45afd),
[`b7219863d`](b721986),
[`ecbd6c137`](ecbd6c1),
[`c25478fba`](c25478f),
[`04b8fb370`](04b8fb3),
[`c849ff468`](c849ff4),
[`2c5ca9900`](2c5ca99),
[`1459f773d`](1459f77)]:
    -   @shopify/polaris@12.2.0
    -   @shopify/polaris-tokens@8.2.0
    -   @shopify/polaris-icons@7.10.0

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
@laurkim
[Card] Add storybook examples for Card compositions (Shopify#11201)
e453bb7 
### WHY are these changes introduced?

Resolves
[Shopify#1222](Shopify/polaris-internal#1222).

With `Card` marked stable with the v12 release, we should have storybook
examples for the different ways it can be composed with the other layout
components to recreate the UI that the `LegacyCard` component supported
via props.

### WHAT is this pull request doing?

Recreates all the `LegacyCard` compositions that were supported via
props using Card and other layout primitives (e.g., `InlineStack`,
`Bleed`).

Updates `Card` examples to match any `LegacyCard` spacing/font styling
changes post uplift/v12.

Adds:
- Storybook examples 
- Style guide examples
- Updates documentation for Card post v12
  <details>
    <summary>New examples on styleguide</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/984fa0e6-e009-4af5-b0fa-8a5c5b8a38d1"
alt="New examples on styleguide">
  </details>

### How to 🎩

[New Card
storybook](https://5d559397bae39100201eedc1-fbxsmfwane.chromatic.com/?path=/story/all-components-card--default)
[LegacyCard
storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-legacycard--default)

🖥 [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)
- [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
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
@shopify-github-actions-access @github-actions @sophschneider
Version Packages (Shopify#11092)
6f9de33 
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/polaris-icons@7.10.0

### Minor Changes

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


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

## @shopify/polaris@12.2.0

### Minor Changes

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


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


- [Shopify#11266](Shopify#11266)
[`bf0593e20`](Shopify@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`


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


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


- [Shopify#11219](Shopify#11219)
[`97683ac05`](Shopify@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`


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


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


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


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


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


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


- [Shopify#10800](Shopify#10800)
[`9159e5083`](Shopify@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.


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


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


- [Shopify#11094](Shopify#11094)
[`2c5ca9900`](Shopify@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


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

### Patch Changes

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


- Updated dependencies
\[[`c58632afa`](Shopify@ef18aa1),
[`c3cad73cb`](Shopify@d84596f),
[`0b1961c16`](Shopify@6df65f9),
[`32cfbecb1`](Shopify@2dbd4d9),
[`97683ac05`](Shopify@ec008ed),
[`fe8491507`](Shopify@f0dadb7)]:
    -   @shopify/polaris-tokens@8.2.0
    -   @shopify/polaris-icons@7.10.0

## @shopify/polaris-tokens@8.2.0

### Minor Changes

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


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


- [Shopify#11219](Shopify#11219)
[`97683ac05`](Shopify@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`


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

## @shopify/polaris-migrator@0.26.4

### Patch Changes

- Updated dependencies
\[[`c58632afa`](Shopify@ef18aa1),
[`32cfbecb1`](Shopify@2dbd4d9),
[`97683ac05`](Shopify@ec008ed),
[`fe8491507`](Shopify@f0dadb7)]:
    -   @shopify/polaris-tokens@8.2.0
    -   @shopify/stylelint-polaris@15.0.4

## @shopify/stylelint-polaris@15.0.4

### Patch Changes

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

## polaris-for-vscode@0.9.0

### Minor Changes

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

### Patch Changes

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

## polaris.shopify.com@0.61.0

### Minor Changes

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


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


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


- [Shopify#11104](Shopify#11104)
[`0e3f591ad`](Shopify@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

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


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


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


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


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


- [Shopify#11094](Shopify#11094)
[`2c5ca9900`](Shopify@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`](Shopify@b38ccaa),
[`07aa5e979`](Shopify@7f6fc3f),
[`07aa5e979`](Shopify@7f6fc3f),
[`456f3da42`](Shopify@deab0f9),
[`6297e524a`](Shopify@b3de46b),
[`c58632afa`](Shopify@ef18aa1),
[`8b9ded242`](Shopify@0b0ec70),
[`07aa5e979`](Shopify@7f6fc3f),
[`bf0593e20`](Shopify@3180f86),
[`eca971dca`](Shopify@e453bb7),
[`09df04ca5`](Shopify@ded5ccd),
[`165c860c2`](Shopify@f8f37e1),
[`c3cad73cb`](Shopify@d84596f),
[`6b6e27ce0`](Shopify@015c5ab),
[`0b1961c16`](Shopify@6df65f9),
[`786ee94b4`](Shopify@1388dab),
[`32cfbecb1`](Shopify@2dbd4d9),
[`07aa5e979`](Shopify@7f6fc3f),
[`90de38843`](Shopify@e375792),
[`97683ac05`](Shopify@ec008ed),
[`773daaa0f`](Shopify@a2e0624),
[`0e8ab42b4`](Shopify@0c9e29f),
[`fe8491507`](Shopify@f0dadb7),
[`ad504d5be`](Shopify@9e9a4c2),
[`b0edfbb92`](Shopify@755fd9e),
[`64ee75039`](Shopify@a14ed4d),
[`79cadcf4f`](Shopify@a707318),
[`45deb1941`](Shopify@520ccd2),
[`53fe61479`](Shopify@57f9cb8),
[`35d92bcd8`](Shopify@9dd85a1),
[`2df27ed0b`](Shopify@20f3d30),
[`9c3dd913c`](Shopify@9d0df2c),
[`07aa5e979`](Shopify@7f6fc3f),
[`9159e5083`](Shopify@b27d419),
[`799276156`](Shopify@3ddeb94),
[`ac45afda8`](Shopify@e0c6ced),
[`b7219863d`](Shopify@7abcc49),
[`ecbd6c137`](Shopify@065c4d8),
[`c25478fba`](Shopify@ac42d6c),
[`04b8fb370`](Shopify@6d1db5c),
[`c849ff468`](Shopify@d5e1537),
[`2c5ca9900`](Shopify@cdc38ca),
[`1459f773d`](Shopify@cae2948)]:
    -   @shopify/polaris@12.2.0
    -   @shopify/polaris-tokens@8.2.0
    -   @shopify/polaris-icons@7.10.0

---------

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

@chloerice chloerice Awaiting requested review from chloerice

1 more reviewer

@kyledurand kyledurand kyledurand approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees

@laurkim laurkim

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@laurkim @kyledurand