[Layout Foundation][Box] Add support for passing in role attribute #7799
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
size-limit report 📦
|
|
Decided to add role manually as a Type rather then extending
|
aveline
previously requested changes
Nov 24, 2022
|
For context, just wanted to add that we are creating the list of allowable roles manually to intentionally discourage the use of role when there are suitable semantic html elements that should be used instead. Ex. |
kyledurand
reviewed
Nov 24, 2022
Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
Merged
5 tasks
laurkim
pushed a commit
that referenced
this pull request
Nov 30, 2022
…7799) <!-- ☝️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? Supports #7797 which needs access to role attribute <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Adds role attribute support to `Box` <!-- 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> --> <!-- ℹ️ Delete the following for small / trivial changes --> Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
laurkim
pushed a commit
that referenced
this pull request
Nov 30, 2022
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@6.6.0 ### Minor Changes - [#7456](#7456) [`3bc63f7f9`](3bc63f7) Thanks [@SereneChen-7](https://github.com/SereneChen-7)! - Add attribution model icons - [#7724](#7724) [`d748c20ef`](d748c20) Thanks [@jaychashop](https://github.com/jaychashop)! - Added passkey major and minor icons - [#7686](#7686) [`6b989379e`](6b98937) Thanks [@matyikriszta](https://github.com/matyikriszta)! - Update FormMajor icon ## @shopify/polaris@10.13.0 ### Minor Changes - [#7803](#7803) [`23665dfd2`](23665df) Thanks [@aveline](https://github.com/aveline)! - Added support for `ul` element on `Box` - [#7799](#7799) [`508e148f1`](508e148) Thanks [@chazdean](https://github.com/chazdean)! - Updated `Box` to accept role attribute - [#7746](#7746) [`757aeebe3`](757aeeb) Thanks [@laurkim](https://github.com/laurkim)! - Removed `ContentBlock` and its examples in the style guide - [#7775](#7775) [`300b6d4bc`](300b6d4) Thanks [@laurkim](https://github.com/laurkim)! - Removed `Tiles` and examples in style guide - [#7788](#7788) [`0eb43a9fd`](0eb43a9) Thanks [@laurkim](https://github.com/laurkim)! - Added storybook example for `AlphaCard` with subdued section - [#7794](#7794) [`d43e3bc88`](d43e3bc) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive spacing on `Bleed` - [#7790](#7790) [`dc4540ca7`](dc4540c) Thanks [@laurkim](https://github.com/laurkim)! - Added support for responsive padding to `AlphaCard` and updated default padding to be responsive - [#7767](#7767) [`cb24dbb9e`](cb24dbb) Thanks [@aveline](https://github.com/aveline)! - Updated `Box` and `AlphaStack` to accept aria attributes - [#7697](#7697) [`b7b729235`](b7b7292) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive padding to `Box` - [#7754](#7754) [`aee0c5c4c`](aee0c5c) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive `gap` on `Inline` - [#7619](#7619) [`15570cc15`](15570cc) Thanks [@Rmnlly](https://github.com/Rmnlly)! - Added `truncateText` prop to `Navigation.Item` to prevent text wrapping - [#7806](#7806) [`5f3b61d0a`](5f3b61d) Thanks [@aveline](https://github.com/aveline)! - Added support for `li` and `tabIndex` on `Box` ### Patch Changes - [#7768](#7768) [`4cb1c6a8b`](4cb1c6a) Thanks [@laurkim](https://github.com/laurkim)! - Renamed storybook example names for consistency - [#7808](#7808) [`ed3444d77`](ed3444d) Thanks [@laurkim](https://github.com/laurkim)! - Temporarily removed console warnings for deprecated typography components - [#7755](#7755) [`1e5a2b665`](1e5a2b6) Thanks [@kyledurand](https://github.com/kyledurand)! - Added position, opacity, top, left, right, bottom, z-index to `Box` - [#7761](#7761) [`81f379315`](81f3793) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `Columns` `gap` to use `getResponsiveProps` util - [#7777](#7777) [`cb882f460`](cb882f4) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `position` properties on `Box` to use logical property names - [#7757](#7757) [`f9e1985c9`](f9e1985) Thanks [@aveline](https://github.com/aveline)! - Fixed typo in `responsive-props` mixin. Added jsdoc examples for responsive spacing props in `Box`. - [#7764](#7764) [`9ab44a69f`](9ab44a6) Thanks [@laurkim](https://github.com/laurkim)! - Cleaned up prop descriptions and added missing default values for `Box`, `AlphaCard`, `AlphaStack`, `Columns`, `Tiles`, `Bleed`, and `Inline` - [#7769](#7769) [`a9e018ec4`](a9e018e) Thanks [@nabihaalikhan](https://github.com/nabihaalikhan)! - Updated badge spacing to right align with secondary action icons - [#7748](#7748) [`ed3da747e`](ed3da74) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `spacing` prop to `gap` on `Inline`, `AlphaStack`, `Columns`, and `Tiles` - [#7732](#7732) [`d08e1c30c`](d08e1c3) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed `spacing` prop from Bleed component - [#7779](#7779) [`7c0a4b6a9`](7c0a4b6) Thanks [@laurkim](https://github.com/laurkim)! - Updated `Bleed` props to use logical properties, fixed reversed logic for horizontal/vertical bleed, and updated style guide - [#7793](#7793) [`824aef031`](824aef0) Thanks [@Rmnlly](https://github.com/Rmnlly)! - Extends Navigation Item highlight to full width to cover secondary actions - Updated dependencies \[[`3bc63f7f9`](3bc63f7), [`d748c20ef`](d748c20), [`6b989379e`](6b98937)]: - @shopify/polaris-icons@6.6.0 ## @shopify/plugin-polaris@0.0.18 ### Patch Changes - Updated dependencies \[[`28220456f`](2822045)]: - @shopify/polaris-migrator@0.9.1 ## @shopify/polaris-migrator@0.9.1 ### Patch Changes - [#7744](#7744) [`28220456f`](2822045) Thanks [@laurkim](https://github.com/laurkim)! - Fixed mapping for `TextStyle` `variation="strong"` to use `Text` `fontWeight="semibold"` instead of `fontWeight="bold"` ## polaris.shopify.com@0.26.0 ### Minor Changes - [#7746](#7746) [`757aeebe3`](757aeeb) Thanks [@laurkim](https://github.com/laurkim)! - Removed `ContentBlock` and its examples in the style guide - [#7775](#7775) [`300b6d4bc`](300b6d4) Thanks [@laurkim](https://github.com/laurkim)! - Removed `Tiles` and examples in style guide - [#7790](#7790) [`dc4540ca7`](dc4540c) Thanks [@laurkim](https://github.com/laurkim)! - Added support for responsive padding to `AlphaCard` and updated default padding to be responsive - [#7754](#7754) [`aee0c5c4c`](aee0c5c) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive `gap` on `Inline` ### Patch Changes - [#7745](#7745) [`70ed3137b`](70ed313) Thanks [@laurkim](https://github.com/laurkim)! - Updated alpha status message that documentation is in development for `Bleed`, `Columns`, `Tiles`, `Inline`, `AlphaCard`, `AlphaStack`, and `Box` - [#7803](#7803) [`23665dfd2`](23665df) Thanks [@aveline](https://github.com/aveline)! - Added support for `ul` element on `Box` - [#7799](#7799) [`508e148f1`](508e148) Thanks [@chazdean](https://github.com/chazdean)! - Updated `Box` to accept role attribute - [#7761](#7761) [`81f379315`](81f3793) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `Columns` `gap` to use `getResponsiveProps` util - [#7777](#7777) [`cb882f460`](cb882f4) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `position` properties on `Box` to use logical property names - [#7747](#7747) [`0ec96f068`](0ec96f0) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed bleed examples - [#7794](#7794) [`d43e3bc88`](d43e3bc) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive spacing on `Bleed` - [#7757](#7757) [`f9e1985c9`](f9e1985) Thanks [@aveline](https://github.com/aveline)! - Fixed typo in `responsive-props` mixin. Added jsdoc examples for responsive spacing props in `Box`. - [#7764](#7764) [`9ab44a69f`](9ab44a6) Thanks [@laurkim](https://github.com/laurkim)! - Cleaned up prop descriptions and added missing default values for `Box`, `AlphaCard`, `AlphaStack`, `Columns`, `Tiles`, `Bleed`, and `Inline` - [#7767](#7767) [`cb24dbb9e`](cb24dbb) Thanks [@aveline](https://github.com/aveline)! - Updated `Box` and `AlphaStack` to accept aria attributes - [#7778](#7778) [`e0c64cd5b`](e0c64cd) Thanks [@laurkim](https://github.com/laurkim)! - Removed link to deleted `Tiles` component and cleaned up links - [#7748](#7748) [`ed3da747e`](ed3da74) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `spacing` prop to `gap` on `Inline`, `AlphaStack`, `Columns`, and `Tiles` - [#7744](#7744) [`28220456f`](2822045) Thanks [@laurkim](https://github.com/laurkim)! - Fixed mapping for `TextStyle` `variation="strong"` to use `Text` `fontWeight="semibold"` instead of `fontWeight="bold"` - [#7732](#7732) [`d08e1c30c`](d08e1c3) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed `spacing` prop from Bleed component - [#7779](#7779) [`7c0a4b6a9`](7c0a4b6) Thanks [@laurkim](https://github.com/laurkim)! - Updated `Bleed` props to use logical properties, fixed reversed logic for horizontal/vertical bleed, and updated style guide - [#7806](#7806) [`5f3b61d0a`](5f3b61d) Thanks [@aveline](https://github.com/aveline)! - Added support for `li` and `tabIndex` on `Box` - Updated dependencies \[[`3bc63f7f9`](3bc63f7), [`4cb1c6a8b`](4cb1c6a), [`d748c20ef`](d748c20), [`6b989379e`](6b98937), [`ed3444d77`](ed3444d), [`1e5a2b665`](1e5a2b6), [`23665dfd2`](23665df), [`508e148f1`](508e148), [`757aeebe3`](757aeeb), [`300b6d4bc`](300b6d4), [`0eb43a9fd`](0eb43a9), [`81f379315`](81f3793), [`cb882f460`](cb882f4), [`d43e3bc88`](d43e3bc), [`f9e1985c9`](f9e1985), [`dc4540ca7`](dc4540c), [`9ab44a69f`](9ab44a6), [`cb24dbb9e`](cb24dbb), [`b7b729235`](b7b7292), [`aee0c5c4c`](aee0c5c), [`a9e018ec4`](a9e018e), [`ed3da747e`](ed3da74), [`15570cc15`](15570cc), [`d08e1c30c`](d08e1c3), [`7c0a4b6a9`](7c0a4b6), [`5f3b61d0a`](5f3b61d), [`824aef031`](824aef0)]: - @shopify/polaris-icons@6.6.0 - @shopify/polaris@10.13.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
chazdean
added a commit
that referenced
this pull request
Dec 2, 2022
<!-- ☝️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 [#7714](#7714) <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? - Refactors `SkeletonPage` and its child components to use our layout primitives. - Removes `max-width: 100%` property from AlphaStack - Adds storybook examples for `SkeletonPage` with `narrowWidth` and with `fullWidth` props #### Issues with current PR: <details> <summary>Unable to center `SkeletonPage` when `narrowWidth` prop is used - SOLVED ✅</summary> <table> <tr> <td> Before </td> <td> After </td> </tr> <tr> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 13 21 AM" src="https://user-images.githubusercontent.com/59836805/203805854-4748a46a-8208-476e-9c16-d0071e4ff66b.png"> </td> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 10 25 AM" src="https://user-images.githubusercontent.com/59836805/203806188-bd5cde58-0787-46f1-a2b3-cbaf2a228d52.png"> </td> </tr> <tr> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 13 42 AM" src="https://user-images.githubusercontent.com/59836805/203806392-466df6a0-29ee-4d06-bc40-523b60b97853.png"> </td> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 11 17 AM" src="https://user-images.githubusercontent.com/59836805/203806492-6793f6a3-591a-4cb4-9f13-46da44f64dfe.png"> </td> </tr> </table> </details> <details> <summary>Our current `Text` component has the opposite breakpoint behaviour compared to how `.Title` is used in `SkeletonPage` - SOLVED ✅</summary> <table> <tr> <td> Before </td> <td> After </td> </tr> <tr> <td> <img width="400" alt="before text" src="https://user-images.githubusercontent.com/59836805/203808391-3f3bd9d2-421e-4e09-a843-e579b936d39f.gif"> </td> <td> <img width="400" alt="before text" src="https://user-images.githubusercontent.com/59836805/203808879-55e311ef-708b-44c9-a28e-4582c77d0992.gif"> </td> </tr> <tr> <td> ```java .Title { font-weight: var(--p-font-weight-semibold); font-size: 24px; line-height: 28px; @media #{$p-breakpoints-md-up} { font-size: 20px; } } ``` </td> <td> ```java .headingXl { font-size: var(--p-font-size-300); line-height: var(--p-font-line-height-3); @media #{$p-breakpoints-md-up} { font-size: var(--p-font-size-400); line-height: var(--p-font-line-height-4); } } ``` </td> </tr> </table> </details> ~~`role` prop is missing from `Box`, creating a separate issue to solve this [here](#7799 SOLVED ✅ <!-- 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> --> <!-- ℹ️ Delete the following for small / trivial changes --> ### 🎩 checklist - [ ] 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: Lo Kim <lo.kim@shopify.com>
laurkim
added a commit
that referenced
this pull request
Dec 7, 2022
<!-- ☝️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 --> Fixes [#7714](#7714) <!-- Context about the problem that’s being addressed. --> - Refactors `SkeletonPage` and its child components to use our layout primitives. - Removes `max-width: 100%` property from AlphaStack - Adds storybook examples for `SkeletonPage` with `narrowWidth` and with `fullWidth` props <details> <summary>Unable to center `SkeletonPage` when `narrowWidth` prop is used - SOLVED ✅</summary> <table> <tr> <td> Before </td> <td> After </td> </tr> <tr> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 13 21 AM" src="https://user-images.githubusercontent.com/59836805/203805854-4748a46a-8208-476e-9c16-d0071e4ff66b.png"> </td> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 10 25 AM" src="https://user-images.githubusercontent.com/59836805/203806188-bd5cde58-0787-46f1-a2b3-cbaf2a228d52.png"> </td> </tr> <tr> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 13 42 AM" src="https://user-images.githubusercontent.com/59836805/203806392-466df6a0-29ee-4d06-bc40-523b60b97853.png"> </td> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 11 17 AM" src="https://user-images.githubusercontent.com/59836805/203806492-6793f6a3-591a-4cb4-9f13-46da44f64dfe.png"> </td> </tr> </table> </details> <details> <summary>Our current `Text` component has the opposite breakpoint behaviour compared to how `.Title` is used in `SkeletonPage` - SOLVED ✅</summary> <table> <tr> <td> Before </td> <td> After </td> </tr> <tr> <td> <img width="400" alt="before text" src="https://user-images.githubusercontent.com/59836805/203808391-3f3bd9d2-421e-4e09-a843-e579b936d39f.gif"> </td> <td> <img width="400" alt="before text" src="https://user-images.githubusercontent.com/59836805/203808879-55e311ef-708b-44c9-a28e-4582c77d0992.gif"> </td> </tr> <tr> <td> ```java .Title { font-weight: var(--p-font-weight-semibold); font-size: 24px; line-height: 28px; @media #{$p-breakpoints-md-up} { font-size: 20px; } } ``` </td> <td> ```java .headingXl { font-size: var(--p-font-size-300); line-height: var(--p-font-line-height-3); @media #{$p-breakpoints-md-up} { font-size: var(--p-font-size-400); line-height: var(--p-font-line-height-4); } } ``` </td> </tr> </table> </details> ~~`role` prop is missing from `Box`, creating a separate issue to solve this [here](#7799 SOLVED ✅ <!-- 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> --> <!-- ℹ️ Delete the following for small / trivial changes --> - [ ] 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: Lo Kim <lo.kim@shopify.com>
laurkim
added a commit
that referenced
this pull request
Dec 15, 2022
<!-- ☝️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 --> Fixes [#7714](#7714) <!-- Context about the problem that’s being addressed. --> - Refactors `SkeletonPage` and its child components to use our layout primitives. - Removes `max-width: 100%` property from AlphaStack - Adds storybook examples for `SkeletonPage` with `narrowWidth` and with `fullWidth` props <details> <summary>Unable to center `SkeletonPage` when `narrowWidth` prop is used - SOLVED ✅</summary> <table> <tr> <td> Before </td> <td> After </td> </tr> <tr> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 13 21 AM" src="https://user-images.githubusercontent.com/59836805/203805854-4748a46a-8208-476e-9c16-d0071e4ff66b.png"> </td> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 10 25 AM" src="https://user-images.githubusercontent.com/59836805/203806188-bd5cde58-0787-46f1-a2b3-cbaf2a228d52.png"> </td> </tr> <tr> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 13 42 AM" src="https://user-images.githubusercontent.com/59836805/203806392-466df6a0-29ee-4d06-bc40-523b60b97853.png"> </td> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 11 17 AM" src="https://user-images.githubusercontent.com/59836805/203806492-6793f6a3-591a-4cb4-9f13-46da44f64dfe.png"> </td> </tr> </table> </details> <details> <summary>Our current `Text` component has the opposite breakpoint behaviour compared to how `.Title` is used in `SkeletonPage` - SOLVED ✅</summary> <table> <tr> <td> Before </td> <td> After </td> </tr> <tr> <td> <img width="400" alt="before text" src="https://user-images.githubusercontent.com/59836805/203808391-3f3bd9d2-421e-4e09-a843-e579b936d39f.gif"> </td> <td> <img width="400" alt="before text" src="https://user-images.githubusercontent.com/59836805/203808879-55e311ef-708b-44c9-a28e-4582c77d0992.gif"> </td> </tr> <tr> <td> ```java .Title { font-weight: var(--p-font-weight-semibold); font-size: 24px; line-height: 28px; @media #{$p-breakpoints-md-up} { font-size: 20px; } } ``` </td> <td> ```java .headingXl { font-size: var(--p-font-size-300); line-height: var(--p-font-line-height-3); @media #{$p-breakpoints-md-up} { font-size: var(--p-font-size-400); line-height: var(--p-font-line-height-4); } } ``` </td> </tr> </table> </details> ~~`role` prop is missing from `Box`, creating a separate issue to solve this [here](#7799 SOLVED ✅ <!-- 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> --> <!-- ℹ️ Delete the following for small / trivial changes --> - [ ] 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: Lo Kim <lo.kim@shopify.com>
chazdean
added a commit
that referenced
this pull request
Jan 12, 2023
<!-- ☝️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 --> Fixes [#7714](#7714) <!-- Context about the problem that’s being addressed. --> - Refactors `SkeletonPage` and its child components to use our layout primitives. - Removes `max-width: 100%` property from AlphaStack - Adds storybook examples for `SkeletonPage` with `narrowWidth` and with `fullWidth` props <details> <summary>Unable to center `SkeletonPage` when `narrowWidth` prop is used - SOLVED ✅</summary> <table> <tr> <td> Before </td> <td> After </td> </tr> <tr> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 13 21 AM" src="https://user-images.githubusercontent.com/59836805/203805854-4748a46a-8208-476e-9c16-d0071e4ff66b.png"> </td> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 10 25 AM" src="https://user-images.githubusercontent.com/59836805/203806188-bd5cde58-0787-46f1-a2b3-cbaf2a228d52.png"> </td> </tr> <tr> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 13 42 AM" src="https://user-images.githubusercontent.com/59836805/203806392-466df6a0-29ee-4d06-bc40-523b60b97853.png"> </td> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 11 17 AM" src="https://user-images.githubusercontent.com/59836805/203806492-6793f6a3-591a-4cb4-9f13-46da44f64dfe.png"> </td> </tr> </table> </details> <details> <summary>Our current `Text` component has the opposite breakpoint behaviour compared to how `.Title` is used in `SkeletonPage` - SOLVED ✅</summary> <table> <tr> <td> Before </td> <td> After </td> </tr> <tr> <td> <img width="400" alt="before text" src="https://user-images.githubusercontent.com/59836805/203808391-3f3bd9d2-421e-4e09-a843-e579b936d39f.gif"> </td> <td> <img width="400" alt="before text" src="https://user-images.githubusercontent.com/59836805/203808879-55e311ef-708b-44c9-a28e-4582c77d0992.gif"> </td> </tr> <tr> <td> ```java .Title { font-weight: var(--p-font-weight-semibold); font-size: 24px; line-height: 28px; @media #{$p-breakpoints-md-up} { font-size: 20px; } } ``` </td> <td> ```java .headingXl { font-size: var(--p-font-size-300); line-height: var(--p-font-line-height-3); @media #{$p-breakpoints-md-up} { font-size: var(--p-font-size-400); line-height: var(--p-font-line-height-4); } } ``` </td> </tr> </table> </details> ~~`role` prop is missing from `Box`, creating a separate issue to solve this [here](#7799 SOLVED ✅ <!-- 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> --> <!-- ℹ️ Delete the following for small / trivial changes --> - [ ] 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: Lo Kim <lo.kim@shopify.com>
chazdean
added a commit
that referenced
this pull request
Jan 13, 2023
<!-- ☝️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 --> Fixes [#7714](#7714) <!-- Context about the problem that’s being addressed. --> - Refactors `SkeletonPage` and its child components to use our layout primitives. - Removes `max-width: 100%` property from AlphaStack - Adds storybook examples for `SkeletonPage` with `narrowWidth` and with `fullWidth` props <details> <summary>Unable to center `SkeletonPage` when `narrowWidth` prop is used - SOLVED ✅</summary> <table> <tr> <td> Before </td> <td> After </td> </tr> <tr> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 13 21 AM" src="https://user-images.githubusercontent.com/59836805/203805854-4748a46a-8208-476e-9c16-d0071e4ff66b.png"> </td> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 10 25 AM" src="https://user-images.githubusercontent.com/59836805/203806188-bd5cde58-0787-46f1-a2b3-cbaf2a228d52.png"> </td> </tr> <tr> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 13 42 AM" src="https://user-images.githubusercontent.com/59836805/203806392-466df6a0-29ee-4d06-bc40-523b60b97853.png"> </td> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 11 17 AM" src="https://user-images.githubusercontent.com/59836805/203806492-6793f6a3-591a-4cb4-9f13-46da44f64dfe.png"> </td> </tr> </table> </details> <details> <summary>Our current `Text` component has the opposite breakpoint behaviour compared to how `.Title` is used in `SkeletonPage` - SOLVED ✅</summary> <table> <tr> <td> Before </td> <td> After </td> </tr> <tr> <td> <img width="400" alt="before text" src="https://user-images.githubusercontent.com/59836805/203808391-3f3bd9d2-421e-4e09-a843-e579b936d39f.gif"> </td> <td> <img width="400" alt="before text" src="https://user-images.githubusercontent.com/59836805/203808879-55e311ef-708b-44c9-a28e-4582c77d0992.gif"> </td> </tr> <tr> <td> ```java .Title { font-weight: var(--p-font-weight-semibold); font-size: 24px; line-height: 28px; @media #{$p-breakpoints-md-up} { font-size: 20px; } } ``` </td> <td> ```java .headingXl { font-size: var(--p-font-size-300); line-height: var(--p-font-line-height-3); @media #{$p-breakpoints-md-up} { font-size: var(--p-font-size-400); line-height: var(--p-font-line-height-4); } } ``` </td> </tr> </table> </details> ~~`role` prop is missing from `Box`, creating a separate issue to solve this [here](#7799 SOLVED ✅ <!-- 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> --> <!-- ℹ️ Delete the following for small / trivial changes --> - [ ] 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: Lo Kim <lo.kim@shopify.com>
laurkim
added a commit
that referenced
this pull request
Jan 26, 2023
<!-- ☝️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 --> Fixes [#7714](#7714) <!-- Context about the problem that’s being addressed. --> - Refactors `SkeletonPage` and its child components to use our layout primitives. - Removes `max-width: 100%` property from AlphaStack - Adds storybook examples for `SkeletonPage` with `narrowWidth` and with `fullWidth` props <details> <summary>Unable to center `SkeletonPage` when `narrowWidth` prop is used - SOLVED ✅</summary> <table> <tr> <td> Before </td> <td> After </td> </tr> <tr> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 13 21 AM" src="https://user-images.githubusercontent.com/59836805/203805854-4748a46a-8208-476e-9c16-d0071e4ff66b.png"> </td> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 10 25 AM" src="https://user-images.githubusercontent.com/59836805/203806188-bd5cde58-0787-46f1-a2b3-cbaf2a228d52.png"> </td> </tr> <tr> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 13 42 AM" src="https://user-images.githubusercontent.com/59836805/203806392-466df6a0-29ee-4d06-bc40-523b60b97853.png"> </td> <td> <img width="400" alt="Screenshot 2022-11-24 at 9 11 17 AM" src="https://user-images.githubusercontent.com/59836805/203806492-6793f6a3-591a-4cb4-9f13-46da44f64dfe.png"> </td> </tr> </table> </details> <details> <summary>Our current `Text` component has the opposite breakpoint behaviour compared to how `.Title` is used in `SkeletonPage` - SOLVED ✅</summary> <table> <tr> <td> Before </td> <td> After </td> </tr> <tr> <td> <img width="400" alt="before text" src="https://user-images.githubusercontent.com/59836805/203808391-3f3bd9d2-421e-4e09-a843-e579b936d39f.gif"> </td> <td> <img width="400" alt="before text" src="https://user-images.githubusercontent.com/59836805/203808879-55e311ef-708b-44c9-a28e-4582c77d0992.gif"> </td> </tr> <tr> <td> ```java .Title { font-weight: var(--p-font-weight-semibold); font-size: 24px; line-height: 28px; @media #{$p-breakpoints-md-up} { font-size: 20px; } } ``` </td> <td> ```java .headingXl { font-size: var(--p-font-size-300); line-height: var(--p-font-line-height-3); @media #{$p-breakpoints-md-up} { font-size: var(--p-font-size-400); line-height: var(--p-font-line-height-4); } } ``` </td> </tr> </table> </details> ~~`role` prop is missing from `Box`, creating a separate issue to solve this [here](#7799 SOLVED ✅ <!-- 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> --> <!-- ℹ️ Delete the following for small / trivial changes --> - [ ] 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: Lo Kim <lo.kim@shopify.com>
juzser
pushed a commit
to juzser/polaris
that referenced
this pull request
Jul 27, 2023
…hopify#7799) <!-- ☝️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? Supports Shopify#7797 which needs access to role attribute <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Adds role attribute support to `Box` <!-- 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> --> <!-- ℹ️ Delete the following for small / trivial changes --> Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
juzser
pushed a commit
to juzser/polaris
that referenced
this pull request
Jul 27, 2023
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@6.6.0 ### Minor Changes - [Shopify#7456](Shopify#7456) [`3bc63f7f9`](Shopify@3bc63f7) Thanks [@SereneChen-7](https://github.com/SereneChen-7)! - Add attribution model icons - [Shopify#7724](Shopify#7724) [`d748c20ef`](Shopify@d748c20) Thanks [@jaychashop](https://github.com/jaychashop)! - Added passkey major and minor icons - [Shopify#7686](Shopify#7686) [`6b989379e`](Shopify@6b98937) Thanks [@matyikriszta](https://github.com/matyikriszta)! - Update FormMajor icon ## @shopify/polaris@10.13.0 ### Minor Changes - [Shopify#7803](Shopify#7803) [`23665dfd2`](Shopify@23665df) Thanks [@aveline](https://github.com/aveline)! - Added support for `ul` element on `Box` - [Shopify#7799](Shopify#7799) [`508e148f1`](Shopify@508e148) Thanks [@chazdean](https://github.com/chazdean)! - Updated `Box` to accept role attribute - [Shopify#7746](Shopify#7746) [`757aeebe3`](Shopify@757aeeb) Thanks [@laurkim](https://github.com/laurkim)! - Removed `ContentBlock` and its examples in the style guide - [Shopify#7775](Shopify#7775) [`300b6d4bc`](Shopify@300b6d4) Thanks [@laurkim](https://github.com/laurkim)! - Removed `Tiles` and examples in style guide - [Shopify#7788](Shopify#7788) [`0eb43a9fd`](Shopify@0eb43a9) Thanks [@laurkim](https://github.com/laurkim)! - Added storybook example for `AlphaCard` with subdued section - [Shopify#7794](Shopify#7794) [`d43e3bc88`](Shopify@d43e3bc) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive spacing on `Bleed` - [Shopify#7790](Shopify#7790) [`dc4540ca7`](Shopify@dc4540c) Thanks [@laurkim](https://github.com/laurkim)! - Added support for responsive padding to `AlphaCard` and updated default padding to be responsive - [Shopify#7767](Shopify#7767) [`cb24dbb9e`](Shopify@cb24dbb) Thanks [@aveline](https://github.com/aveline)! - Updated `Box` and `AlphaStack` to accept aria attributes - [Shopify#7697](Shopify#7697) [`b7b729235`](Shopify@b7b7292) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive padding to `Box` - [Shopify#7754](Shopify#7754) [`aee0c5c4c`](Shopify@aee0c5c) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive `gap` on `Inline` - [Shopify#7619](Shopify#7619) [`15570cc15`](Shopify@15570cc) Thanks [@Rmnlly](https://github.com/Rmnlly)! - Added `truncateText` prop to `Navigation.Item` to prevent text wrapping - [Shopify#7806](Shopify#7806) [`5f3b61d0a`](Shopify@5f3b61d) Thanks [@aveline](https://github.com/aveline)! - Added support for `li` and `tabIndex` on `Box` ### Patch Changes - [Shopify#7768](Shopify#7768) [`4cb1c6a8b`](Shopify@4cb1c6a) Thanks [@laurkim](https://github.com/laurkim)! - Renamed storybook example names for consistency - [Shopify#7808](Shopify#7808) [`ed3444d77`](Shopify@ed3444d) Thanks [@laurkim](https://github.com/laurkim)! - Temporarily removed console warnings for deprecated typography components - [Shopify#7755](Shopify#7755) [`1e5a2b665`](Shopify@1e5a2b6) Thanks [@kyledurand](https://github.com/kyledurand)! - Added position, opacity, top, left, right, bottom, z-index to `Box` - [Shopify#7761](Shopify#7761) [`81f379315`](Shopify@81f3793) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `Columns` `gap` to use `getResponsiveProps` util - [Shopify#7777](Shopify#7777) [`cb882f460`](Shopify@cb882f4) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `position` properties on `Box` to use logical property names - [Shopify#7757](Shopify#7757) [`f9e1985c9`](Shopify@f9e1985) Thanks [@aveline](https://github.com/aveline)! - Fixed typo in `responsive-props` mixin. Added jsdoc examples for responsive spacing props in `Box`. - [Shopify#7764](Shopify#7764) [`9ab44a69f`](Shopify@9ab44a6) Thanks [@laurkim](https://github.com/laurkim)! - Cleaned up prop descriptions and added missing default values for `Box`, `AlphaCard`, `AlphaStack`, `Columns`, `Tiles`, `Bleed`, and `Inline` - [Shopify#7769](Shopify#7769) [`a9e018ec4`](Shopify@a9e018e) Thanks [@nabihaalikhan](https://github.com/nabihaalikhan)! - Updated badge spacing to right align with secondary action icons - [Shopify#7748](Shopify#7748) [`ed3da747e`](Shopify@ed3da74) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `spacing` prop to `gap` on `Inline`, `AlphaStack`, `Columns`, and `Tiles` - [Shopify#7732](Shopify#7732) [`d08e1c30c`](Shopify@d08e1c3) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed `spacing` prop from Bleed component - [Shopify#7779](Shopify#7779) [`7c0a4b6a9`](Shopify@7c0a4b6) Thanks [@laurkim](https://github.com/laurkim)! - Updated `Bleed` props to use logical properties, fixed reversed logic for horizontal/vertical bleed, and updated style guide - [Shopify#7793](Shopify#7793) [`824aef031`](Shopify@824aef0) Thanks [@Rmnlly](https://github.com/Rmnlly)! - Extends Navigation Item highlight to full width to cover secondary actions - Updated dependencies \[[`3bc63f7f9`](Shopify@3bc63f7), [`d748c20ef`](Shopify@d748c20), [`6b989379e`](Shopify@6b98937)]: - @shopify/polaris-icons@6.6.0 ## @shopify/plugin-polaris@0.0.18 ### Patch Changes - Updated dependencies \[[`28220456f`](Shopify@2822045)]: - @shopify/polaris-migrator@0.9.1 ## @shopify/polaris-migrator@0.9.1 ### Patch Changes - [Shopify#7744](Shopify#7744) [`28220456f`](Shopify@2822045) Thanks [@laurkim](https://github.com/laurkim)! - Fixed mapping for `TextStyle` `variation="strong"` to use `Text` `fontWeight="semibold"` instead of `fontWeight="bold"` ## polaris.shopify.com@0.26.0 ### Minor Changes - [Shopify#7746](Shopify#7746) [`757aeebe3`](Shopify@757aeeb) Thanks [@laurkim](https://github.com/laurkim)! - Removed `ContentBlock` and its examples in the style guide - [Shopify#7775](Shopify#7775) [`300b6d4bc`](Shopify@300b6d4) Thanks [@laurkim](https://github.com/laurkim)! - Removed `Tiles` and examples in style guide - [Shopify#7790](Shopify#7790) [`dc4540ca7`](Shopify@dc4540c) Thanks [@laurkim](https://github.com/laurkim)! - Added support for responsive padding to `AlphaCard` and updated default padding to be responsive - [Shopify#7754](Shopify#7754) [`aee0c5c4c`](Shopify@aee0c5c) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive `gap` on `Inline` ### Patch Changes - [Shopify#7745](Shopify#7745) [`70ed3137b`](Shopify@70ed313) Thanks [@laurkim](https://github.com/laurkim)! - Updated alpha status message that documentation is in development for `Bleed`, `Columns`, `Tiles`, `Inline`, `AlphaCard`, `AlphaStack`, and `Box` - [Shopify#7803](Shopify#7803) [`23665dfd2`](Shopify@23665df) Thanks [@aveline](https://github.com/aveline)! - Added support for `ul` element on `Box` - [Shopify#7799](Shopify#7799) [`508e148f1`](Shopify@508e148) Thanks [@chazdean](https://github.com/chazdean)! - Updated `Box` to accept role attribute - [Shopify#7761](Shopify#7761) [`81f379315`](Shopify@81f3793) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `Columns` `gap` to use `getResponsiveProps` util - [Shopify#7777](Shopify#7777) [`cb882f460`](Shopify@cb882f4) Thanks [@laurkim](https://github.com/laurkim)! - Refactored `position` properties on `Box` to use logical property names - [Shopify#7747](Shopify#7747) [`0ec96f068`](Shopify@0ec96f0) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed bleed examples - [Shopify#7794](Shopify#7794) [`d43e3bc88`](Shopify@d43e3bc) Thanks [@aveline](https://github.com/aveline)! - Added support for responsive spacing on `Bleed` - [Shopify#7757](Shopify#7757) [`f9e1985c9`](Shopify@f9e1985) Thanks [@aveline](https://github.com/aveline)! - Fixed typo in `responsive-props` mixin. Added jsdoc examples for responsive spacing props in `Box`. - [Shopify#7764](Shopify#7764) [`9ab44a69f`](Shopify@9ab44a6) Thanks [@laurkim](https://github.com/laurkim)! - Cleaned up prop descriptions and added missing default values for `Box`, `AlphaCard`, `AlphaStack`, `Columns`, `Tiles`, `Bleed`, and `Inline` - [Shopify#7767](Shopify#7767) [`cb24dbb9e`](Shopify@cb24dbb) Thanks [@aveline](https://github.com/aveline)! - Updated `Box` and `AlphaStack` to accept aria attributes - [Shopify#7778](Shopify#7778) [`e0c64cd5b`](Shopify@e0c64cd) Thanks [@laurkim](https://github.com/laurkim)! - Removed link to deleted `Tiles` component and cleaned up links - [Shopify#7748](Shopify#7748) [`ed3da747e`](Shopify@ed3da74) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `spacing` prop to `gap` on `Inline`, `AlphaStack`, `Columns`, and `Tiles` - [Shopify#7744](Shopify#7744) [`28220456f`](Shopify@2822045) Thanks [@laurkim](https://github.com/laurkim)! - Fixed mapping for `TextStyle` `variation="strong"` to use `Text` `fontWeight="semibold"` instead of `fontWeight="bold"` - [Shopify#7732](Shopify#7732) [`d08e1c30c`](Shopify@d08e1c3) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed `spacing` prop from Bleed component - [Shopify#7779](Shopify#7779) [`7c0a4b6a9`](Shopify@7c0a4b6) Thanks [@laurkim](https://github.com/laurkim)! - Updated `Bleed` props to use logical properties, fixed reversed logic for horizontal/vertical bleed, and updated style guide - [Shopify#7806](Shopify#7806) [`5f3b61d0a`](Shopify@5f3b61d) Thanks [@aveline](https://github.com/aveline)! - Added support for `li` and `tabIndex` on `Box` - Updated dependencies \[[`3bc63f7f9`](Shopify@3bc63f7), [`4cb1c6a8b`](Shopify@4cb1c6a), [`d748c20ef`](Shopify@d748c20), [`6b989379e`](Shopify@6b98937), [`ed3444d77`](Shopify@ed3444d), [`1e5a2b665`](Shopify@1e5a2b6), [`23665dfd2`](Shopify@23665df), [`508e148f1`](Shopify@508e148), [`757aeebe3`](Shopify@757aeeb), [`300b6d4bc`](Shopify@300b6d4), [`0eb43a9fd`](Shopify@0eb43a9), [`81f379315`](Shopify@81f3793), [`cb882f460`](Shopify@cb882f4), [`d43e3bc88`](Shopify@d43e3bc), [`f9e1985c9`](Shopify@f9e1985), [`dc4540ca7`](Shopify@dc4540c), [`9ab44a69f`](Shopify@9ab44a6), [`cb24dbb9e`](Shopify@cb24dbb), [`b7b729235`](Shopify@b7b7292), [`aee0c5c4c`](Shopify@aee0c5c), [`a9e018ec4`](Shopify@a9e018e), [`ed3da747e`](Shopify@ed3da74), [`15570cc15`](Shopify@15570cc), [`d08e1c30c`](Shopify@d08e1c3), [`7c0a4b6a9`](Shopify@7c0a4b6), [`5f3b61d0a`](Shopify@5f3b61d), [`824aef031`](Shopify@824aef0)]: - @shopify/polaris-icons@6.6.0 - @shopify/polaris@10.13.0 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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
Supports #7797 which needs access to role attribute
WHAT is this pull request doing?
Adds role attribute support to
Box