-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TextField | IndexFilters] Add support for autoSize TextField, and use in IndexFilters #11412
Conversation
polaris-react/locales/en.json
Outdated
@@ -169,7 +169,8 @@ | |||
"clear": "Clear", | |||
"clearLabel": "Clear {filterName}", | |||
"addFilter": "Add filter", | |||
"clearFilters": "Clear all" | |||
"clearFilters": "Clear all", | |||
"searchInView": "in: {viewName}" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Localization quality issue found
The following issues may affect the quality of localized translations if they are not addressed:
- The value
in: {viewName}
for keyPolaris.Filters.searchInView
is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just wondering if we need to translate in:
here (on the Polaris side) or just make the whole suffix a prop. Not a strong opinion but it might help have the translations closer to the product
/snapit |
🫰✨ Thanks @mrcthms! Your snapshots have been published to npm. Test the snapshots by updating your yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20240109172650 yarn add @shopify/polaris@0.0.0-snapshot-release-20240109172650 yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20240109172650 yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20240109172650 |
We have received a translation request but there is a question blocking translation work. Your help is needed. Please answer the following questions. Warning Replies in GitHub are not visible to translators. Use the provided "Answer here" links. 🙅♀️
Note Not your issue? Forward it to someone with more context; please don't leave it pending. 🙏 |
/snapit |
🫰✨ Thanks @mrcthms! Your snapshots have been published to npm. Test the snapshots by updating your yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20240110081548 yarn add @shopify/polaris@0.0.0-snapshot-release-20240110081548 yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20240110081548 yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20240110081548 |
/snapit |
🫰✨ Thanks @mrcthms! Your snapshots have been published to npm. Test the snapshots by updating your yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20240110160750 yarn add @shopify/polaris@0.0.0-snapshot-release-20240110160750 yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20240110160750 yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20240110160750 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, 🎩 'd in Safari, FF, and Chrome
polaris-react/locales/en.json
Outdated
@@ -169,7 +169,8 @@ | |||
"clear": "Clear", | |||
"clearLabel": "Clear {filterName}", | |||
"addFilter": "Add filter", | |||
"clearFilters": "Clear all" | |||
"clearFilters": "Clear all", | |||
"searchInView": "in: {viewName}" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just wondering if we need to translate in:
here (on the Polaris side) or just make the whole suffix a prop. Not a strong opinion but it might help have the translations closer to the product
it('adds a borderless className when variant=`borderless` prop is passed', () => { | ||
const textField = mountWithApp( | ||
<TextField | ||
label="TextField" | ||
onChange={noop} | ||
autoComplete="off" | ||
variant="borderless" | ||
/>, | ||
); | ||
|
||
expect(textField).toContainReactComponent('div', { | ||
className: expect.stringContaining(styles.borderless), | ||
}); | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Duplicate?
@@ -169,7 +169,8 @@ | |||
"clear": "Clear", | |||
"clearLabel": "Clear {filterName}", | |||
"addFilter": "Add filter", | |||
"clearFilters": "Clear all" | |||
"clearFilters": "Clear all", | |||
"searchInView": "in:{viewName}" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Localization quality issue found
The following issues may affect the quality of localized translations if they are not addressed:
- The value
in:{viewName}
for keyPolaris.Filters.searchInView
is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.
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.
We have received a translation request but there is a question blocking translation work. Your help is needed. Please answer the following questions. Warning Replies in GitHub are not visible to translators. Use the provided "Answer here" links. 🙅♀️
Note Not your issue? Forward it to someone with more context; please don't leave it pending. 🙏 |
dbb82bc
to
d17eca3
Compare
d3d5008
to
32116e9
Compare
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>
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>
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@8.1.0 ### Minor Changes - [#11478](#11478) [`b786bb93c`](b786bb9) Thanks [@Rusty-UX](https://github.com/Rusty-UX)! - Added DatabaseConnectIcon ## @shopify/polaris@12.11.0 ### Minor Changes - [#11474](#11474) [`26b3afb3d`](26b3afb) Thanks [@mrcthms](https://github.com/mrcthms)! - [BulkActions and SelectAllActions] Ensure backwards compatibilility after prop reorganisation between components - [#11497](#11497) [`d50cc6d91`](d50cc6d) Thanks [@mrcthms](https://github.com/mrcthms)! - Improved test reliability for non-rolled up actions in `ActionMenu` - [#10981](#10981) [`2dcc73f1a`](2dcc73f) Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the sticky behaviour of BulkActions, SelectAllActions, and Pagination for our tables and lists - [#11441](#11441) [`74174b6c1`](74174b6) Thanks [@mrcthms](https://github.com/mrcthms)! - Improved the logic of action rollup and calculation of available space in `ActionMenu` and `Tabs` - [#11491](#11491) [`ac004fc97`](ac004fc) Thanks [@lgriffee](https://github.com/lgriffee)! - [`Button`] Remove underline from `monochromePlain` default state - [#11486](#11486) [`02a6d9b18`](02a6d9b) Thanks [@translation-platform](https://github.com/apps/translation-platform)! - Updated translations for SearchField suffix within IndexFilters - [#11344](#11344) [`c9abd3c0c`](c9abd3c) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added Polaris Tokens for Mobile typography - [#11412](#11412) [`f1b44ab57`](f1b44ab) Thanks [@mrcthms](https://github.com/mrcthms)! - [TextField] Updated the TextField with new `autoSize` and `loading` props - [#11431](#11431) [`f9b9fa4e8`](f9b9fa4) Thanks [@lone-star](https://github.com/lone-star)! - Added `tone`, `icon`, and `onClick` props to `Toast` ### Patch Changes - [#11464](#11464) [`2ee7dbd30`](2ee7dbd) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Updated `Button` shadow tokens and replaced hardcoded box-shadow values - [#11504](#11504) [`1910c6975`](1910c69) Thanks [@mrcthms](https://github.com/mrcthms)! - Updated Page Header to only ensure no wrapping of the title when the title is relatively short - [#11473](#11473) [`6579537e4`](6579537) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Fixed focus ring size for plain and plain monochrome Button variants - [#11487](#11487) [`4aabf7c1a`](4aabf7c) Thanks [@yurm04](https://github.com/yurm04)! - [Modal] Fixed Footer position to bottom of container - [#11466](#11466) [`1953b6935`](1953b69) Thanks [@mrcthms](https://github.com/mrcthms)! - [TextField] Fixed positional issue of loading indicator when no clear button is present - [#11462](#11462) [`2febd60f1`](2febd60) Thanks [@sophschneider](https://github.com/sophschneider)! - Lowered the z-index of `Filter`s container to be below `Card` shadow bevel - [#11467](#11467) [`75cbcd70b`](75cbcd7) Thanks [@kyledurand](https://github.com/kyledurand)! - Increased contrast on Tooltip underline - [#11482](#11482) [`59371946c`](5937194) Thanks [@translation-platform](https://github.com/apps/translation-platform)! - [SearchField] Updated translation - Updated dependencies \[[`2ee7dbd30`](2ee7dbd), [`c9abd3c0c`](c9abd3c), [`b786bb93c`](b786bb9)]: - @shopify/polaris-tokens@8.6.0 - @shopify/polaris-icons@8.1.0 ## @shopify/polaris-tokens@8.6.0 ### Minor Changes - [#11344](#11344) [`c9abd3c0c`](c9abd3c) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added Polaris Tokens for Mobile typography ### Patch Changes - [#11464](#11464) [`2ee7dbd30`](2ee7dbd) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Updated `Button` shadow tokens and replaced hardcoded box-shadow values ## @shopify/stylelint-polaris@15.1.0 ### Minor Changes - [#11344](#11344) [`c9abd3c0c`](c9abd3c) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated `typography` `declaration-property-value-disallowed-list` to support Polaris Tokens `text` variants ### Patch Changes - Updated dependencies \[[`2ee7dbd30`](2ee7dbd), [`c9abd3c0c`](c9abd3c)]: - @shopify/polaris-tokens@8.6.0 ## @shopify/polaris-migrator@0.27.1 ### Patch Changes - Updated dependencies \[[`c9abd3c0c`](c9abd3c), [`2ee7dbd30`](2ee7dbd), [`c9abd3c0c`](c9abd3c)]: - @shopify/stylelint-polaris@15.1.0 - @shopify/polaris-tokens@8.6.0 ## polaris.shopify.com@0.62.0 ### Minor Changes - [#11506](#11506) [`c19b0f638`](c19b0f6) Thanks [@lgriffee](https://github.com/lgriffee)! - Added ability to mark prop values as deprecated ### Patch Changes - [#11457](#11457) [`966d1901e`](966d190) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added fallback to no active icon on Icons page when not a valid icon name is used in the search param - [#11466](#11466) [`1953b6935`](1953b69) Thanks [@mrcthms](https://github.com/mrcthms)! - [TextField] Fixed positional issue of loading indicator when no clear button is present - [#11461](#11461) [`d26df7eb0`](d26df7e) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added deprecation warning to old icon names informing users to use the new icon name - [#11467](#11467) [`75cbcd70b`](75cbcd7) Thanks [@kyledurand](https://github.com/kyledurand)! - Increased contrast on Tooltip underline - Updated dependencies \[[`26b3afb3d`](26b3afb), [`2ee7dbd30`](2ee7dbd), [`1910c6975`](1910c69), [`d50cc6d91`](d50cc6d), [`6579537e4`](6579537), [`2dcc73f1a`](2dcc73f), [`74174b6c1`](74174b6), [`4aabf7c1a`](4aabf7c), [`ac004fc97`](ac004fc), [`1953b6935`](1953b69), [`02a6d9b18`](02a6d9b), [`c9abd3c0c`](c9abd3c), [`2febd60f1`](2febd60), [`b786bb93c`](b786bb9), [`75cbcd70b`](75cbcd7), [`f1b44ab57`](f1b44ab), [`f9b9fa4e8`](f9b9fa4), [`59371946c`](5937194)]: - @shopify/polaris@12.11.0 - @shopify/polaris-tokens@8.6.0 - @shopify/polaris-icons@8.1.0 ## polaris-for-vscode@0.9.4 ### Patch Changes - Updated dependencies \[[`2ee7dbd30`](2ee7dbd), [`c9abd3c0c`](c9abd3c)]: - @shopify/polaris-tokens@8.6.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
…e in IndexFilters (Shopify#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>
This PR adds async translations requested in Shopify#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>
This PR adds async translations requested in Shopify#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>
WHY are these changes introduced?
Fixes https://github.com/Shopify/shopify/issues/407738
Updates the TextField component with new
loading
andautoSize
props. Theloading
prop will show a spinner at the right of the input iftrue
, whereas theautoSize
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?
How to 🎩
🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines
Spin URL: https://admin.web.persistent-view-name.marc-thomas.eu.spin.dev/store/shop1/products?selectedView=archived&status=ARCHIVED
🎩 checklist
README.md
with documentation changes