[Icon] update sizes to use Polaris' tokens #11500
Closed
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
### WHY are these changes introduced? Application Developers trying to build applications with the current Polaris documentation are building poor experiences as they are using components that should not be used for application development. `Navigation` `Frame` `Toast`... will render incorrectly in apps and Application Developers need to use App Bridge API's to correctly build their user interface. This PR hopes to resolve this by: 1. Move the internal team documentation for components to a new category called `Internal only` 2. Deprecate the components for application developers and direct them to app bridge The goal of this PR is too: - Ensure all components can be used by application developers without issue - Friction is added to components like `<Modal>` `<Toast>` and `<Loading>` to ensure that Application Developers are not incorrectly using these components and going to use app bridge components - Ensure Shopify employees can still access these components despite them being in a new _more confusing_ location - Educate users without creating private documentation or shipping breaking changes - Alerts developers that these components can be removed in a future major version if we decide to move them to a private space ### WHAT is this pull request doing? - [x] Moves `<ContextualSaveBar>` `<Navigation>` `<TopBar>` `<Toast>` `<Modal>` `<Loading>` `<Frame>` into the Internal (auth required) component category - [x] New deprecated component pages for `<Navigation>` `<TopBar>` `<Toast>` `<Modal>` `<Loading>` `<Frame>` and directs users to App Bridge API's when they exist - [x] Adds banners and documentation for deprecated components - [x] Hides internal only components from search and components landing page - [x] Updates paths of component images - [x] Add authentication for `components/internal-only/**/*` - [x] Redirect component links in shopify.dev and polaris.shopify.com to `internal-only` path --------- Co-authored-by: Mark Appleby <themarkappleby@gmail.com>
> [!important] > This should be merged next week when the new production environment is stable and tested ### WHY are these changes introduced? Removes old production environment actions that are no longer used. ### WHAT is this pull request doing? - [x] Removes action for staging deploy - [x] Removes old production action - [x] Renames `prod-kit` action to the website deploy action ### Follow ups - [ ] Remove `polaris-site-container-builder` - [ ] Remove shipit stacks - [ ] Remove buildkite builder - [ ] Remove service entry
> [!Warning] > This includes multiple breaking changes to `@shopify/polaris-icons`. Do not merge until this is thoroughly tested and approved by internal consuming teams. ### What this PR does Removed Major and Minor icon sizing. All icons are the same size. Added `BillIcon`, `BillFilledIcon`, `LogoCriteo`, `LogoMeta`, `LogoGoogle`, `MetaobjectFilledIcon`, `PriceListIcon` and `PriceListFilledIcon` Updated icon design for `JobsIcon`, `JobsFilledIcon`, `AutomationIcon`, `AutomationFilledIcon`, `GiftCardIcon`, `InventoryFilledIcon`, `ReportsIcon`, `ShipmentFilledIcon`, `AppsFilledIcon`, `MarketsIcon`, `MarketsFilledIcon`, `BillingStatementDollarFilledIcon`, `BillingStatementEuroFilledIcon`, `BillingStatementPoundFilledIcon`, `BillingStatementRupeeFilledIcon`, `BillingStatementYenFilledIcon`, `LegalFilledIcon`, `IdentityCardIcon`, `IdentityCardFilledIcon`, `DomainsIcon`, `DomainNewIcon`, `DomainsFilledIcon`, `StoreIcon`, `OnlineStoreIcon`, `ManagedStoreIcon`, `ImportStoreIcon`, `TaxIcon`, `TaxFilledIcon`, `PackageFilledIcon`, `LocationIcon`, `LocationFilledIcon`, `InactiveLocationIcon`, `PinIcon`, `GlobeIcon`, `TransportIcon`, `NatureIcon`, `FoodIcon`, `ColorsIcon` Removed icons `ReportFilledMinor`, `ReportMinor`, `ListMajor`, `ListFilledMajor` Removed `version` and `set` from icon `.yml` files --- Closes #11259 Closes #11088 --------- Co-authored-by: Sam Rose <11774595+sam-b-rose@users.noreply.github.com> Co-authored-by: Aaron Casanova <aaron.casanova@shopify.com> Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Co-authored-by: Alex Bratsos <12677111+bratsos@users.noreply.github.com>
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 > The changelog information of each package has been omitted from this message, as the content exceeds the size limit. ## @shopify/polaris-icons@8.0.0 ## @shopify/polaris-migrator@0.27.0 ## @shopify/polaris@12.9.1 ## polaris.shopify.com@0.61.8 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
### WHY are these changes introduced? Fixes Shopify/web#114283 We currently have a bug in the FiltersBar component, where if all filters are pinned on mount, and a merchant either clicks the "Clear all" button, or clears a filter individually, then that filter vanishes until the merchant refreshes the page. The cause of this was some missing logic to determine whether to show the Add filter button. Previously, it only checked for pinned filters on mount, and not for changes to the pinned filter state. ### How to 🎩 Spin URL: https://admin.web.vanishing-filters.marc-thomas.eu.spin.dev/store/shop1/collections?selectedView=all Story instance: https://5d559397bae39100201eedc1-epgxutgfws.chromatic.com/?path=/story/all-components-filters--with-all-filters-pinned ### 🎩 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
### WHY are these changes introduced? Builds are breaking currently due to some incorrect icon names still hanging around in stories within `polaris-react`. This PR updates all of those. ### 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
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@12.10.0 ### Minor Changes - [#11417](#11417) [`cea2dd22b`](dd9cf5d) Thanks [@mrcthms](https://github.com/mrcthms)! - [FiltersBar] Fixed bug where filters would disappear from the FiltersBar when clicking the Clear all button ### Patch Changes - [#11446](#11446) [`6e40eca5e`](36de144) Thanks [@mrcthms](https://github.com/mrcthms)! - [Icons] Fixed references to incorrect icon imports that were causing Storybook to break ## polaris.shopify.com@0.61.9 ### Patch Changes - [#11446](#11446) [`6e40eca5e`](36de144) Thanks [@mrcthms](https://github.com/mrcthms)! - [Icons] Fixed references to incorrect icon imports that were causing Storybook to break - Updated dependencies \[[`6e40eca5e`](36de144), [`cea2dd22b`](dd9cf5d)]: - @shopify/polaris@12.10.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Right now the Icon details page has a link to a figma page that 404s ### WHY are these changes introduced? - resolves: #11435 ### WHAT is this pull request doing? Change the icon details link from: https://www.figma.com/community/file/1110993965108325096 to https://www.figma.com/community/file/1293614863849914283 ### Is this the right page to link to? I just found what looked like the right community page but I haven't confirmed with anyone from the polaris team! ### 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) Test that the link goes to the right page now. ### 🎩 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
…e in IndexFilters (#11412) ### WHY are these changes introduced? Fixes Shopify/shopify#407738 Updates the TextField component with new `loading` and `autoSize` props. The `loading` prop will show a spinner at the right of the input if `true`, whereas the `autoSize` prop will make the input grow with the value of the input itself. This is a required update to cater for the desired UX we want in the IndexFilters to persist the view name to the immediate right of the search query. This PR also updates the SearchField within the Filters component to utilise these new props on the TextField, as well as update stories and examples to show off the new functionality. ### 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) Spin URL: https://admin.web.persistent-view-name.marc-thomas.eu.spin.dev/store/shop1/products?selectedView=archived&status=ARCHIVED - Navigate to the URL - Confirm that a placeholder is visible in the search TextField - Start typing into the search TextField - Confirm that the TextField grows as you type - Confirm that a suffix saying "in: [View name]" is visible only when a value is present in the TextField - Confirm that the suffix always stays a consistent spacing apart from the TextField - Confirm that other UI, such as the loading indicator, remain placed where they should be, right-aligned to the edge of the search area ### 🎩 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: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
Fixes missing icons on Foundations, Design, Content, Tools, and Version guides pages. | Before | After | | --- | --- | | <img width="1300" alt="before" src="https://github.com/Shopify/polaris/assets/11774595/6fb007d3-7af3-4f5c-8de9-4232add0b4c5"> | <img width="1300" alt="after" src="https://github.com/Shopify/polaris/assets/11774595/fde5c93d-47dd-41d2-83ec-d5d485439a0e"> |
Removes the `preversion` scripts that allowed us to call the `preversion` npm script hook before creating a new release with `@changesets/cli`.
This PR: - Adds a status message to inform user to use the newly named icon in `@shopify/polaris-icons@8.0.0` - Displays the Icon `id` rather than the `name` to better distinguish from the old `Major|Minor` suffix <img width="1788" alt="Screenshot 2024-01-17 at 3 59 45 PM" src="https://github.com/Shopify/polaris/assets/11774595/4a3d7fa2-2bd8-4935-94dc-cc6765c650c0">
) ### WHY are these changes introduced? Part of Shopify/polaris-internal#1343 ### WHAT is this pull request doing? Lower `Filter` container z-index (currently `100`) to be below `Card`'s shadow bevel z-index which is `32`. This is a similar bug/fix as [this issue](#11411). |Before|After| |-|-| |<img width="503" alt="Screenshot 2024-01-17 at 3 53 30 PM" src="https://github.com/Shopify/polaris/assets/20652326/88edab7c-aed8-44b8-9f5c-b9bd319405dc">|<img width="382" alt="Screenshot 2024-01-17 at 4 48 45 PM" src="https://github.com/Shopify/polaris/assets/20652326/7dc33fc8-333b-4e1d-afa7-f3efed5ad7a1">| ### How to 🎩 https://admin.web.web-kkgf.sophie-schneider.us.spin.dev/store/shop1/orders 1. Press search button on index table or verify shadow bevel is on the filter search bar in this story https://5d559397bae39100201eedc1-vszwcambil.chromatic.com/?path=/story/all-components-indexfilters--with-filtering-by-default (vs.[ on prod](https://storybook.polaris.shopify.com/?path=/story/all-components-indexfilters--with-filtering-by-default)) ### 🎩 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) --------- Co-authored-by: Laura Griffee <laura@mailzone.com>
### WHY are these changes introduced? Related to Shopify/web#102861 We want to improve the UX of the bulk actions and select actions in IndexTables and ResourceLists. The BulkActions should display in the sticky table header, the Pagination should now be sticky, and the SelectAllActions should behave in the same way as the pagination, sticky to the bottom of the table. Spin URL for ResourceList: https://admin.web.bulk-ui-3.marc-thomas.eu.spin.dev/store/shop1/products/13 Spin URL for IndexTable: https://admin.web.bulk-ui-3.marc-thomas.eu.spin.dev/store/shop1/products?selectedView=all Spin URL for ResourceListWithHeader: https://admin.web.bulk-ui-3.marc-thomas.eu.spin.dev/store/shop1/draft_orders?selectedView=all Resume Spin link: https://spin-control.shopify.io/instances/bulk-ui-3.marc-thomas.eu.spin.dev/resume https://github.com/Shopify/polaris/assets/2562596/372d275d-1138-451b-8457-5b3664818994 https://github.com/Shopify/polaris/assets/2562596/a80aaf5e-8f44-4ca0-9227-8debdf7d8445 ### WHAT is this pull request doing? - Transferring a lot of the logic that was in BulkActions to SelectAllActions, due to BulkActions no longer being sticky and SelectAllActions now being sticky - Updating button styles within BulkActions to match the more condensed mode of the sticky bar - Match SelectAllActions styling to match pagination - Pagination is now sticky <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [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 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
### WHY are these changes introduced? This slightly increases the contrast on the underline. Maybe we need a new token for dotted borders cc @sarahill Fixes Shopify/polaris-internal#1364 ### WHAT is this pull request doing? Before | After ---|---  | 
…tton visible (#11466) ### WHY are these changes introduced? The loading spinner currently sits flat against the right-hand edge of the TextField when there is no clear button visible on screen, which we do not want. This PR adds some margin between the loading spinner and the edge of the TextField in this case, and makes sure to remove the margin when there is both the loading spinner and clear button present. Before: <img width="1624" alt="Screenshot 2024-01-18 at 12 06 40" src="https://github.com/Shopify/polaris/assets/2562596/bff82a29-8cc2-4491-a394-ba5eeae946f4"> After: <img width="1624" alt="Screenshot 2024-01-18 at 12 16 44" src="https://github.com/Shopify/polaris/assets/2562596/5438b423-2a2a-4307-9e6a-41d5d90006b2"> ### 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
Closes #11422 Reduces the focus ring closer to the original size for the `plain` and `plainMonochrome` button variants. This PR also applied the underline text decoration styles when focused for the `plain` varaint. ### `plain` https://github.com/Shopify/polaris/assets/11774595/a46629d5-d0e5-414d-8296-7caba60d0831 ### `plainMonochrome` https://github.com/Shopify/polaris/assets/11774595/785757b2-7b9b-4f15-b3b0-53b0b2ce8285
Closes #11377 This PR: - Updates the `--p-shadow-button-*` tokens to the new button style values from the Button refactor - Replaces the hardcoded values in Button component styles with shadow tokens There should be no visual changes. --------- Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
…to roll up (#11441) Fixes Shopify/shopify#466571 ### WHY are these changes introduced? The current implementation of the logic to determine which actions and groups get shown, and which get rolled up, is a little flaky. We are seeing actions get rolled up on mount, and then render as normal on re-render. We are also seeing inconsistent results when resizing the browser. This is not ideal, as we want our merchants to experience a predictable UI each time they visit a page. ### WHAT is this pull request doing? This PR switches out the existing logic for measuring all the actions and groups, and replaces it with logic used in the Tabs component, which should be more reliable. ### 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.page-actions-bug.marc-thomas.eu.spin.dev/store/shop1/email_templates/payment_reminder/preview Spin resume URL: https://spin-control.shopify.io/instances/page-actions-bug.marc-thomas.eu.spin.dev/resume ### 🎩 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 <chloerice@users.noreply.github.com>
This PR adds async translations requested in #11412, which was opened by @mrcthms. It will append multiple commits and may add, modify, or delete translations. Feel free to merge the PR any time; we'll open a new PR if any more translations come in. [Check the source PR's overall translation progress here.](https://translation-platform.shopify.io/repos/Shopify/polaris/pulls/11412/progress) ## Before you deploy - Check translations for malicious HTML. ## Merge conflicts? <details> If this PR has been open long enough that it has drifted out of sync from the base branch and it has developed merge conflicts as a result, follow these steps, in order: 1. Close this PR. 2. Run the following Spy command in Slack: > `@spy translation-platform force-pull Shopify/polaris pull_request_number=11412` Translation Platform will recreate the translation commits based on the latest commit on the base branch and open a new PR. </details> ## Missing completed translations? <details> If the translations were completed within the last several hours, Translation Platform may just be holding on to them for a bit to see if any others come in before creating a commit (multiple file changes are committed together to reduce noise). If it's been a while and completed translations are still missing, or if you're just in a hurry, you can run the following Spy command in Slack to download or re-download any completed translations to this PR: > `@spy translation-platform force-pull Shopify/polaris pull_request_number=11412` - The translations might have been added to the source PR, but the PR was rebased before it was shipped and the translations were accidentally dropped. - A later change to the translation files might have overwritten the previously downloaded translations. - Translation Platform might have failed to download the translations-- if you suspect this to be the case, please reach out at the link below. </details> ## Questions? Visit [#help-localization](https://shopify.slack.com/messages/C7TJQLVC7) for questions about this pull request. --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Marc Thomas <marc.thomas@shopify.com>
…Actions and SelectAllActions (#11474) ### WHY are these changes introduced? As part of a recent update to how we do Bulk UI in IndexTable and ResourceLists, we moved some props around between the SelectAllActions and BulkActions components. We need to ensure that these props remain on the components and get deprecated, rather than remove them entirely to ensure that the update doesn't fall into a breaking release, rather than a minor one. This PR re-introduces the props that were moved between BulkActions and SelectAllActions, and includes tests to ensure functionality remains as it was if these deprecated props were provided, and stories to show how the components look with the deprecated props. I have not added the BulkActions and SelectAllAction stories to the polaris.shopify.com site as these components should only really ever be consumed internally by other Polaris components. ### How to 🎩 Snapshot testing: https://admin.web.deprecated-props-playground.marc-thomas.eu.spin.dev/store/shop1/products?selectedView=all Storybook: https://5d559397bae39100201eedc1-pihlxmllju.chromatic.com/ ### 🎩 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?⚠️ **Important** **This PR needs to be released with changes to Shopify/web https://github.com/Shopify/web/pull/115536** Context: This PR is re-doing the changes of #11354. When #11354 there was a regression in Shopify POS that needed to be rolled back. I've since found a fix for the issue in https://github.com/Shopify/web/pull/115536. These two PRs need to be released to web at the same time in order to fix the issue in the Modal component AND prevent the regression in POS when polaris-react version gets bumped. Addresses #11185 <!-- link to issue if one exists --> Before https://github.com/Shopify/polaris/assets/4642404/8afa1dc4-7193-4616-8537-bbe86db9168f After https://github.com/Shopify/polaris/assets/4642404/c463c9e7-14e5-4edd-be65-430e69abb19d <!-- 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
 ### Adds support for dynamic source connect icon * This icon is used when a dynamic source is connected, and powering part of the experience: either data, or functionality. * This icon is used in context of Shopify Admin, and Shopify Mobile for merchandising flows. ### WHY are these changes introduced? * Provides additional specificity in how we communicate dynamic source connections in admin and online store ### WHAT is this pull request doing? * Adds support for dynamic source connect icon * Updates description for add dynamic source icon ### 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: Kyle Durand <kyledurand@users.noreply.github.com> Co-authored-by: kyledurand <kyle.durand@shopify.com>
### WHY are these changes introduced? This change adds back the documentation to deprecated components and keeps the recommendation to migrate to AppBridge. This is related to the feedback received in #11460. ### WHAT is this pull request doing? - [x] Adds component documentation back to deprecrated components - [x] Ensures documentation links to other deprecated components and not internal only routes
…ate (#11491) ### WHY are these changes introduced? Fixes Shopify/polaris-internal#1359 ### WHAT is this pull request doing? Removes underline style from `monochromePlain` Button default state. | Before | After | | -- | -- | ||| ### How to 🎩 - 📕 [Storybook Before](https://storybook.polaris.shopify.com/?path=/story/all-components-button--monochrome-plain) - 📕 [Storybook After](https://5d559397bae39100201eedc1-qbsnvtphsr.chromatic.com/?path=/story/all-components-button--monochrome-plain) - 🌀 [Spin](https://admin.web.mp-button-underline.laura-griffee.us.spin.dev/store/shop1/orders) - I couldn't find a monochromePlain button but I just pasted in the style for the CSS class on a button (ex: `Polaris-Button--variantMonochromePlain` versus `Polaris-Button--variantPrimary`) and the confirmed the underline is not there! 🖥 [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
### WHY are these changes introduced? The way that the Actions within the ActionMenu get populated currently mean that on the initial render, we render no buttons at all as we are waiting for a calculation to occur. This works fine in the real world, but causes issues for tests which expect the presence of buttons. This PR attempts to ensure our components are more predictable in test cases and also robust in real world examples. ### WHAT is this pull request doing? The ActionsMeasurer component used a `requestAnimationFrame` within the `useCallback` to calculate the values needed to determine which actions to show and which to roll up. This is an unnecessary code complexity that can be simplified to just run inside the `useCallback`. We were finding that using the `requestAnimationFrame` here was causing extra event loop ticks to be created in test suites and creating side effects and adding no benefit whatsoever, so removing it is a no-brainer. ### 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.bulk-ui-3.marc-thomas.eu.spin.dev/store/shop1/products/13 ### 🎩 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 --------- Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
willnguyen1312
force-pushed
the
update-icon-sizes
branch
from
fc65c47 to
405d04e
Compare
…11431) <!-- ☝️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? We would like to add more customisation to the current Toast component: - tone: this allows us to provide specific tones for styling. - actionOnComponent: this makes the whole component clickable instead of having a link inside - leadingIcon: we can use custom icons in the component. ### WHAT is this pull request doing? #### Magic tone We can change the tone of the toast to `magic` <img width="224" alt="Screenshot 2024-01-11 at 20 19 45" src="https://github.com/Shopify/polaris/assets/78884/43f7809d-5348-425a-a4cc-3aaa797fffb8"> #### Action on component The whole component is now clickable. https://github.com/Shopify/polaris/assets/78884/56e06a79-8e37-40d9-becf-828e8aa5c9f0 #### Leading icon In this example, we have both the magic tone, the leading icon, and the Action On Component https://github.com/Shopify/polaris/assets/78884/64ec9807-a340-472e-918d-d881c20d0172 ### 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 #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
<!--
☝️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: Alex Page <alex.page@shopify.com>
### WHY are these changes introduced? When tapping links with an iOS device, it highlights the element with a grey background. This is undesirable and we should rely on locally defined styles for tappable elements. [Slack thread](https://shopify.slack.com/archives/C052FLLS8V6/p1711024818880199) Example: https://share.descript.com/view/ognFPIjLAzV ### WHAT is this pull request doing? The proposed solution solution is to set [-webkit-tap-highlight-color](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color) to `transparent` globally. This will disable the appearance of tap highlighting. ### 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](https://admin.web.webkit-tap-highlight-color.matt-kubej.us.spin.dev/store/shop1) Open the spin instance above via a Simulated iOS device or a real device via BrowserStack, then navigate into the settings of Admin, such as Markets, and validate the grey tap highlighting as seen in the descript video is no longer present. ### 🎩 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
See: changesets/changesets#421 Didn't need this before because yarn v1 never stored the dependent's version in the lockfile. `pnpm` does, and so we need to ensure the lockfile is updated immediately after the versions are bumped. Detailed example: 1. A PR is opened to do a major bump of `@shopify/polaris-tokens` - `@shopify/polaris-tokens` is at `8.1.0` - `@shopify/polaris` is at `12.12.0` 2. The PR is merged, then Changeset's action runs - `pnpm install --frozen-lockfile` succeed (versions haven't been bumped yet) - `changesets version` bumps the versions - `@shopify/polaris-tokens` is now at `9.0.0` - `@shopify/polaris` is now at `12.12.1` - _`pnpm-lock.yml` still lists `@shopify/polaris-tokens@8.1.0` as a dep of `@shopify/polaris`_ **🚨 This is the mistake** - Changesets commits the version bumps and opens a "Version Packages" PR 3. "Version Packages" PR is opened by Changeset's action - CI attempts to run `pnpm install --frozen-lockfile', but it errors ([example](https://github.com/Shopify/polaris/actions/runs/8611499009/job/23598800640#step:7:13)) - Unable to cut a release The failure in Step 3 happens because `polaris-react/package.json` asks for `@shopify/polaris-tokens@9.0.0`, but `pnpm-lock.yml` still lists `@shopify/polaris-tokens@8.1.0` as a dep of `@shopify/polaris`. The fix in this PR alters Step 2 to immediately update the `pnpm-lock.yml` file after Changesets bumps the versions. This updated lockfile will get committed and pushed as part of Step 2. Step 3 will then have a correct lockfile matching the package.json.
<!--
☝️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
### WHY are these changes introduced? Part of Shopify/polaris-internal#1470 ### WHAT is this pull request doing? Round corners of the admin frame content (nav and main content) behind a beta flag. To achieve this: * Change background color to `var(--p-color-bg-inverse)` * Wrap content and nav in the frame in a border radius shadow bevel container * Move scroll bar from full frame (including top bar) to just content + nav container * Wrap all new changes in a feature flag |Before|After| |-|-| |<img width="1283" alt="Screenshot 2024-04-08 at 9 29 12 PM" src="https://github.com/Shopify/polaris/assets/20652326/e4679480-c593-4886-9718-cc3cd85b2310">|<img width="1282" alt="Screenshot 2024-04-08 at 9 29 01 PM" src="https://github.com/Shopify/polaris/assets/20652326/752e6da2-73a2-4a45-8c6c-5051e779259f">| ### How to 🎩 Toggle `dynamicTopBarAndReframe` feature flag on details story Make sure feature flag off doesn't affect admin ([spin](https://admin.web.web-bua6.sophie-schneider.us.spin.dev/store/shop1)) ### 🎩 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) - [ ] 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
### WHY are these changes introduced? Resolves #11856. EmptyState styles for loaded image were ### WHAT is this pull request doing? Refactors original logic from [#11804](#11804) to use an `HTMLImageElement` ref and the [complete attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete) to set loaded image styles. <details> <summary>EmptyState — before</summary> <img src="https://github.com/Shopify/polaris/assets/26749317/959a3bc9-d270-44fa-a916-6655532f82e5" alt="EmptyState — before"> </details> <details> <summary>EmptyState — after</summary> <img src="https://github.com/Shopify/polaris/assets/26749317/9304f32d-a95b-41ea-add9-0e37a01a2704" alt="EmptyState — after"> </details> ### How to 🎩 [Storybook](https://5d559397bae39100201eedc1-oumakptmqa.chromatic.com/?path=/story/all-components-emptystate--default) [Spin](https://admin.web.fix-empty-state-2.lo-kim.us.spin.dev/store/shop1/orders) - For testing Spin instance, it helps to throttle the network to ensure there's enough time to see the transition between placeholder and final loaded asset 🖥 [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 - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
This PR adds async translations requested in #11783, which was opened by @chloerice. It will append multiple commits and may add, modify, or delete translations. Feel free to merge the PR any time; we'll open a new PR if any more translations come in. [Check the source PR's overall translation progress here.](https://translation-platform.shopify.io/repos/Shopify/polaris/pulls/11783/progress) ## Before you deploy - Check translations for malicious HTML. ## Merge conflicts? <details> If this PR has been open long enough that it has drifted out of sync from the base branch and it has developed merge conflicts as a result, follow these steps, in order: 1. Close this PR. 2. Run the following Spy command in Slack: > `@spy translation-platform force-pull Shopify/polaris pull_request_number=11783` Translation Platform will recreate the translation commits based on the latest commit on the base branch and open a new PR. </details> ## Missing completed translations? <details> If the translations were completed within the last several hours, Translation Platform may just be holding on to them for a bit to see if any others come in before creating a commit (multiple file changes are committed together to reduce noise). If it's been a while and completed translations are still missing, or if you're just in a hurry, you can run the following Spy command in Slack to download or re-download any completed translations to this PR: > `@spy translation-platform force-pull Shopify/polaris pull_request_number=11783` - The translations might have been added to the source PR, but the PR was rebased before it was shipped and the translations were accidentally dropped. - A later change to the translation files might have overwritten the previously downloaded translations. - Translation Platform might have failed to download the translations-- if you suspect this to be the case, please reach out at the link below. </details> ## Questions? Visit [#help-localization](https://shopify.slack.com/messages/C7TJQLVC7) for questions about this pull request. Please tag the translation component owners, `@Shopify/polaris-eng`, if you need someone to review this PR. Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
### WHY are these changes introduced? |Before|After| |-|-| |<img width="367" alt="Screenshot 2024-04-10 at 10 39 29 PM" src="https://github.com/Shopify/polaris/assets/20652326/98aa1299-7c24-4fe9-9b6b-693c8339bf03">|<img width="352" alt="Screenshot 2024-04-10 at 10 39 59 PM" src="https://github.com/Shopify/polaris/assets/20652326/be7a6289-ae69-4c81-bc93-9af5d9f75fcd">| ### WHAT is this pull request doing? When merging the classes in [this PR](#11846) and [this commit](587d890) I missed the removal of the `max-width` class in the overrides. This was causing a space between the scrollbar and the frame container.
<!-- ☝️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? Part of https://github.com/Shopify/polaris-internal/issues/1471 ### WHAT is this pull request doing? * Adds `contextualSaveBarVisible` and `contextualSaveBarProps` to `Frame` context * Does not render `ContextualSaveBar` UI when `dynamicTopBarAndReframe` feature flag is on This is to enable us to create our own contextual save bar styles in web as a child of the new `TopBar` while still using the frame context architecture to manage hiding and showing the bar. ### How to 🎩 1. Make sure contextual save bar with the beta flag off is unaffected (spin) 2. Make sure contextual save bar with beta flag on doesn't show up (spin) ### 🎩 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)
### WHY are these changes introduced? Image without optional ref argument was causing type errors. <img width="1040" alt="11-09-t3waz-qe4ny" src="https://github.com/Shopify/polaris/assets/26749317/82c54744-641f-48d4-bed2-1388c7d3f13f"> ### WHAT is this pull request doing? Explictly adds `ref` as an optional prop type on `ImageProps` ### 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) - [ ] 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
…nment='end'` (#11885) ### WHY are these changes introduced? Fixes #11852 <!-- link to issue if one exists --> When adding an `alignment:"end"` to the last element of the heading array it was causing a visible gap to occur on the right of the table heading when scrolling right (as seen below)  ### WHAT is this pull request doing? This fixes the gap by applying `overflow-x:hidden` in the styles that control the heading that had the gap **before**  **after**  ### 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) You can view the fix for this in storybook by going to the newly added section "With Sortable Headings Last Element Alignment End"  ### 🎩 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
…ze (#11889) ### WHY are these changes introduced? `TextField` was [accidently migrated](#11833) to having font-size of 13px on all screen sizes, causing mobile browsers to zoom to enlarge the input on focus. ### WHAT is this PR doing? This PR reverts the regression of `TextField` and `Select` mobile font styles back to 16px below the medium breakpoint. I also fixed the zoom on the Picker SearchField, but refrained from increasing the size of the selected item's text in the Activator as I know it's WIP and I'm not sure if the small mobile font-size is intentional (@kyledurand @tjonx). | [Before](https://storybook.polaris.shopify.com/?path=/story/playground--details-page) | [After](https://5d559397bae39100201eedc1-axbsaknzmj.chromatic.com/) | |--------|--------| | <video controls src="https://github.com/Shopify/polaris/assets/18447883/18a12572-45e3-4f3e-a93e-9e45636617ae" alt="Video demonstrating browser zoom on input focus" />| <video controls src="https://github.com/Shopify/polaris/assets/18447883/7e03f5bc-5a7b-41af-97d8-42ee5303353b" /> | ### How to 🎩 🌀 [Spinstance](https://admin.web.mobile-input-font-size.chloe-rice.us.spin.dev/store/shop1/products/1) 🎭 Staging: `ayij` - Navigate to the Storybook links in the "After" column of the table above (on a real mobile device or on a mobile device in Browserstack) to verify TextField and Select are 16px and behave as expected - Browser should not zoom when TextField or Picker SearchField are focused - Select should be the correct font size as well - Spin and staging are provided to verify that inputs remain 13px on your desktop sized device 🖥 [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) - [ ] 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
…11883) ### WHY are these changes introduced? `Filters`, `IndexFilters`, and `Tabs` all render `Popovers` and `Tooltips`, which support a `zIndexOverride` when needed by consuming apps. For example, the SettingsModal has a `z-index` of 516, which is higher than `Popover` and `Tooltip`. When rendered in a /settings view, these need to have an increased `z-index` from `--p-z-index-2` (400) to `--p-z-index-9` (517). ### WHAT is this pull request doing? This PR simply adds support for passing through a `z-index` override to the `Popover` and `Tooltip` components composed by `Filters`, `IndexFilters`, and `Tabs` through a new `disclosureZIndexOverride` prop. ### 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) (pending) - [ ] 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
willnguyen1312
force-pushed
the
update-icon-sizes
branch
from
1226d3a to
ab7258e
Compare
aaronccasanova
force-pushed
the
update-icon-sizes
branch
from
ab7258e to
861b9c4
Compare
github-actions
bot
added
the
cla-needed
|
Localization quality issues found The following issues may affect the quality of localized translations if they are not addressed:
Please look out for other instances of this issue in your PR and fix them as well if possible. Questions about these messages? Hop in the #help-localization Slack channel. |
|
Closed due to massive conflict with the main branch 😅 |
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?
As of now, Icon component is using hard-coded value px. We should stick to Polaris' width token for consistency
WHAT is this pull request doing?
Update sizes to use Polaris' tokens
How to 🎩
🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines
Tested on Storybook
🎩 checklist
README.mdwith documentation changes