Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add key prop to Select component option #11172

Merged
merged 1 commit into from
Nov 14, 2023
Merged

Conversation

yurm04
Copy link
Contributor

@yurm04 yurm04 commented Nov 14, 2023

WHY are these changes introduced?

Fixes #11111 issue where you have two identical option values that trigger a React key warning.

Screenshot 2023-11-14 at 2 37 08 PM

WHAT is this pull request doing?

Adds an optional key prop to Select component options. If the key prop is undefined the key will default to the option value (which is the current behavior)

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

@yurm04 yurm04 requested a review from a team November 14, 2023 20:44
Copy link
Contributor

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

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

👍

@yurm04 yurm04 merged commit 64ee750 into main Nov 14, 2023
12 checks passed
@yurm04 yurm04 deleted the ye/add-select-option-key branch November 14, 2023 21:25
sam-b-rose added a commit that referenced this pull request Nov 15, 2023
* main:
  [Button] Clean up stories (#11129)
  [Box] Add support for `paddingInline` and `paddingBlock` (#11170)
  Add zero tokens for consistency as per team decision
  Add `key` prop to `Select` component option (#11172)
sophschneider added a commit that referenced this pull request Dec 6, 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@7.10.0

### Minor Changes

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


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

## @shopify/polaris@12.2.0

### Minor Changes

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


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


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


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


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


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


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


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


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


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


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


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


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

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


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


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


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


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

### Patch Changes

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

## @shopify/polaris-tokens@8.2.0

### Minor Changes

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


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


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


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

## @shopify/polaris-migrator@0.26.4

### Patch Changes

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

## @shopify/stylelint-polaris@15.0.4

### Patch Changes

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

## polaris-for-vscode@0.9.0

### Minor Changes

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

### Patch Changes

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

## polaris.shopify.com@0.61.0

### Minor Changes

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


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


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


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

### Patch Changes

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


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


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


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


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


- [#11094](#11094)
[`2c5ca9900`](2c5ca99)
Thanks [@laurkim](https://github.com/laurkim)! - Added support for
`bodyXs` variant and fixed font weight for `headingLg` variant in `Text`
component.
Updated references to font tokens from Polaris v11 to v12 in `Text`
component documentation
- Updated dependencies
\[[`00374f85a`](00374f8),
[`07aa5e979`](07aa5e9),
[`07aa5e979`](07aa5e9),
[`456f3da42`](456f3da),
[`6297e524a`](6297e52),
[`c58632afa`](c58632a),
[`8b9ded242`](8b9ded2),
[`07aa5e979`](07aa5e9),
[`bf0593e20`](bf0593e),
[`eca971dca`](eca971d),
[`09df04ca5`](09df04c),
[`165c860c2`](165c860),
[`c3cad73cb`](c3cad73),
[`6b6e27ce0`](6b6e27c),
[`0b1961c16`](0b1961c),
[`786ee94b4`](786ee94),
[`32cfbecb1`](32cfbec),
[`07aa5e979`](07aa5e9),
[`90de38843`](90de388),
[`97683ac05`](97683ac),
[`773daaa0f`](773daaa),
[`0e8ab42b4`](0e8ab42),
[`fe8491507`](fe84915),
[`ad504d5be`](ad504d5),
[`b0edfbb92`](b0edfbb),
[`64ee75039`](64ee750),
[`79cadcf4f`](79cadcf),
[`45deb1941`](45deb19),
[`53fe61479`](53fe614),
[`35d92bcd8`](35d92bc),
[`2df27ed0b`](2df27ed),
[`9c3dd913c`](9c3dd91),
[`07aa5e979`](07aa5e9),
[`9159e5083`](9159e50),
[`799276156`](7992761),
[`ac45afda8`](ac45afd),
[`b7219863d`](b721986),
[`ecbd6c137`](ecbd6c1),
[`c25478fba`](c25478f),
[`04b8fb370`](04b8fb3),
[`c849ff468`](c849ff4),
[`2c5ca9900`](2c5ca99),
[`1459f773d`](1459f77)]:
    -   @shopify/polaris@12.2.0
    -   @shopify/polaris-tokens@8.2.0
    -   @shopify/polaris-icons@7.10.0

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
<!--
  ☝️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 Shopify#11111 issue where
you have two identical option values that trigger a React `key` warning.

<img width="2032" alt="Screenshot 2023-11-14 at 2 37 08 PM"
src="https://github.com/Shopify/polaris/assets/4642404/41bf28be-f929-44c1-a468-79c74967b40f">

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

### WHAT is this pull request doing?

Adds an optional `key` prop to `Select` component options. If the `key`
prop is undefined the key will default to the option `value` (which is
the current behavior)
<!--
  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 -->

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

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants