feat(structuredList): update to use radio button icon, radios are left aligned under featureflag #15910

2nikhiltom · 2024-03-07T10:55:43Z

Closes #15479 & #15931

New

Icons will always be visible at the start of every row by default
Adds new Saas flag : "enable-v12-structured-list-visible-icons"
Adds focus ring around the row : on click

Changed

Unselected/Unchecked icons are always visible at the start of every row
Checked/selected icon is visible only when a row is selected
Icons are changed : checkmarks to radio icons

Testing / Reviewing

Verify Unselected/Unchecked icons are visible on every row
Verify Selected/Checked icons is visible only when a row is selected

netlify · 2024-03-07T11:02:31Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`1026137`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/65e99d32a5ed8300089b708d
😎 Deploy Preview	https://deploy-preview-15910--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-03-07T11:08:32Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`e981ded`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/65e99dba1531a1000826ff26
😎 Deploy Preview	https://deploy-preview-15910--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-03-07T11:16:28Z

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	`4fa3572`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6602fc674b31c50008ccc17f
😎 Deploy Preview	https://deploy-preview-15910--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

2nikhiltom · 2024-03-07T12:46:47Z

Hey @Kritvi-bhatia17 : Can I get your design review on this .

Kritvi-bhatia17 · 2024-03-07T12:52:16Z

Hey @Kritvi-bhatia17 : Can I get your design review on this .

Yes! sure @2nikhiltom will do that

…iltom/carbon into structuredList_selectables

tay1orjones

Feature flags should be used to modify component source code. The feature flag stories for that component would then show the result of the flag being turned on and the modified behavior of the component source code.

Is the current checkmark functionality built into any of the components' source, or does it require the consumer to compose the checkmark into the proper location within StructredListCell?

If it's already on the consumer to compose this properly, we wouldn't need a feature flag. We could just update the existing stories to show the new icon being used on the right.

Kritvi-bhatia17

Looks good to me from design perspective!!
Nice work @2nikhiltom 🔥

Kritvi-bhatia17

Hii @2nikhiltom! after speaking with @laurenmrice , I realized that we need to add a prop for both with and without background options under the 'Structured Lists' section for both 'Default' and 'Selection'.

tay1orjones · 2024-03-12T17:22:14Z

I just pushed an update here that adds the feature flag to modify the styling, and also added a new selection prop to StructuredListRow that will handle adding the radio button icon on the left.

One piece remaining is to ensure the blue focus ring is applied to the row on click in addition to on keyboard navigation. Keyboard nav already gets the focus ring, so I think it might be just a change in how we apply focus styling

tay1orjones · 2024-03-12T17:28:13Z

@2nikhiltom I think I got the focus ring working actually, take a look and let me know what you think

tay1orjones · 2024-03-20T16:28:34Z

The PublicAPI snapshot is failing, just needs a yarn test -u and push up the changes

tay1orjones

This is looking great, just a couple things to change and I think this will be good to go.

packages/react/src/components/StructuredList/StructuredList.tsx

packages/styles/scss/components/structured-list/_structured-list.scss

…iltom/carbon into structuredList_selectables

2nikhiltom · 2024-03-21T04:52:33Z

Hey @tay1orjones , thanks for the review.
I have made suggested changes and few other changes to ensure rows receive focus only when selection is enabled, eliminating focus rings on default stories.

2nikhiltom · 2024-03-25T08:11:55Z

The PublicAPI snapshot is failing, just needs a yarn test -u and push up the changes

Hey @tay1orjones , @andreancardona : it seems like the problem is still there even after running "yarn test -u" and pushing changes. Any ideas on what might be missing?

tay1orjones · 2024-03-26T16:53:26Z

@2nikhiltom based on the logs, it was failing on a snapshot change unrelated to the changes you made here. Generally that signals that the PR needs to be updated with the latest from main and then the snapshots updated again.

I pressed the "update with latest" button on the PR interface here, pulled down the PR locally, ran yarn, yarn build, and yarn test -u which resulted in two snapshot changes. I pushed them up - I think this should resolve the CI failures.

tay1orjones · 2024-03-26T16:55:11Z

@Kritvi-bhatia17 @andreancardona this is ready for your review

andreancardona

looks good to me - nice job @2nikhiltom !

Kritvi-bhatia17

Great work Nikhil!! 🔥

carbon-automation · 2024-03-28T13:52:36Z

Hey there! v11.54.0 was just released that references this issue/PR.

…t aligned under featureflag (carbon-design-system#15910) * feat(structuredList): use of radio button icon,radios are left aligned * chore: revert few typos * feat(structuredList): adds feature flag story for structuredList * feat(structuredlist): add radio button selection, styling behind a flag * fix(structuredlist): add focus ring on click * chore(StructuredList): remote JS feature flag, delete unnecessary styles * chore(StructuredList): revert story to use checkmark icons * fix(StructuredList): adds onclick focus ring with selection prop * fix(StructuredList): adds 'selection' props * fix(structuredlist): focus on click & Tab,handles clickaway events * chore(StructuredList): add typescript types on refs * chore(StructuredList): updates PublicAPI snapshot * chore: update snapshots * fix(StructuredList): focus rings only on selection prop * chore: update snaps --------- Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: Taylor Jones <[email protected]>

2nikhiltom added 2 commits March 7, 2024 16:09

feat(structuredList): use of radio button icon,radios are left aligned

1026137

chore: revert few typos

e981ded

Merge branch 'main' into structuredList_selectables

8d422ac

2nikhiltom marked this pull request as ready for review March 7, 2024 12:34

2nikhiltom requested a review from a team as a code owner March 7, 2024 12:34

2nikhiltom requested review from andreancardona and guidari March 7, 2024 12:34

2nikhiltom requested a review from Kritvi-bhatia17 March 7, 2024 12:47

2nikhiltom marked this pull request as draft March 7, 2024 12:56

This was referenced Mar 7, 2024

[Selectable Components: Tile & Structured List] Figma Kit carbon-design-system/carbon-design-kit#744

Closed

[Selectable Components: Structured List] Dev Implementation #15479

Closed

2nikhiltom added 2 commits March 7, 2024 19:27

feat(structuredList): adds feature flag story for structuredList

d7ad153

Merge branch 'structuredList_selectables' of https://github.com/2nikh…

c8e3ccf

…iltom/carbon into structuredList_selectables

2nikhiltom marked this pull request as ready for review March 7, 2024 14:41

tay1orjones requested changes Mar 8, 2024

View reviewed changes

Kritvi-bhatia17 approved these changes Mar 11, 2024

View reviewed changes

Kritvi-bhatia17 requested changes Mar 11, 2024

View reviewed changes

2nikhiltom marked this pull request as draft March 11, 2024 19:29

feat(structuredlist): add radio button selection, styling behind a flag

9233494

fix(structuredlist): add focus ring on click

cf941c4

2nikhiltom added 3 commits March 13, 2024 00:02

chore(StructuredList): remote JS feature flag, delete unnecessary styles

eaa98e5

chore(StructuredList): revert story to use checkmark icons

cb90acc

fix(StructuredList): adds onclick focus ring with selection prop

0b37c8d

Merge branch 'main' into structuredList_selectables

298378f

chore(StructuredList): updates PublicAPI snapshot

3834e1a

2nikhiltom requested a review from a team as a code owner March 20, 2024 16:49

Merge branch 'main' into structuredList_selectables

ddb3a7e

tay1orjones requested changes Mar 20, 2024

View reviewed changes

andreancardona and others added 3 commits March 20, 2024 16:17

chore: update snapshots

7d51dc8

fix(StructuredList): focus rings only on selection prop

3712884

Merge branch 'structuredList_selectables' of https://github.com/2nikh…

30e2ab9

…iltom/carbon into structuredList_selectables

2nikhiltom requested a review from tay1orjones March 21, 2024 08:45

tay1orjones and others added 2 commits March 26, 2024 11:43

Merge branch 'main' into structuredList_selectables

3ab5348

chore: update snaps

4fa3572

tay1orjones added the status: ready for review 👀 label Mar 26, 2024

tay1orjones removed the request for review from guidari March 26, 2024 16:54

tay1orjones approved these changes Mar 26, 2024

View reviewed changes

andreancardona approved these changes Mar 26, 2024

View reviewed changes

andreancardona added status: visual review 🔍 and removed status: ready for review 👀 labels Mar 26, 2024

Kritvi-bhatia17 approved these changes Mar 27, 2024

View reviewed changes

Kritvi-bhatia17 added status: ready to merge 🎉 and removed status: visual review 🔍 labels Mar 27, 2024

tay1orjones added this pull request to the merge queue Mar 27, 2024

Merged via the queue into carbon-design-system:main with commit b9abee7 Mar 27, 2024
20 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(structuredList): update to use radio button icon, radios are left aligned under featureflag #15910

feat(structuredList): update to use radio button icon, radios are left aligned under featureflag #15910

2nikhiltom commented Mar 7, 2024 •

edited

Loading

netlify bot commented Mar 7, 2024

netlify bot commented Mar 7, 2024

netlify bot commented Mar 7, 2024 •

edited

Loading

2nikhiltom commented Mar 7, 2024

Kritvi-bhatia17 commented Mar 7, 2024 •

edited

Loading

tay1orjones left a comment

Kritvi-bhatia17 left a comment

Kritvi-bhatia17 left a comment

tay1orjones commented Mar 12, 2024 •

edited

Loading

tay1orjones commented Mar 12, 2024

tay1orjones commented Mar 20, 2024

tay1orjones left a comment

2nikhiltom commented Mar 21, 2024

2nikhiltom commented Mar 25, 2024

tay1orjones commented Mar 26, 2024

tay1orjones commented Mar 26, 2024

andreancardona left a comment

Kritvi-bhatia17 left a comment

carbon-automation bot commented Mar 28, 2024

feat(structuredList): update to use radio button icon, radios are left aligned under featureflag #15910

feat(structuredList): update to use radio button icon, radios are left aligned under featureflag #15910

Conversation

2nikhiltom commented Mar 7, 2024 • edited Loading

Testing / Reviewing

netlify bot commented Mar 7, 2024

✅ Deploy Preview for v11-carbon-react ready!

netlify bot commented Mar 7, 2024

✅ Deploy Preview for v11-carbon-react ready!

netlify bot commented Mar 7, 2024 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

2nikhiltom commented Mar 7, 2024

Kritvi-bhatia17 commented Mar 7, 2024 • edited Loading

tay1orjones left a comment

Choose a reason for hiding this comment

Kritvi-bhatia17 left a comment

Choose a reason for hiding this comment

Kritvi-bhatia17 left a comment

Choose a reason for hiding this comment

tay1orjones commented Mar 12, 2024 • edited Loading

tay1orjones commented Mar 12, 2024

tay1orjones commented Mar 20, 2024

tay1orjones left a comment

Choose a reason for hiding this comment

2nikhiltom commented Mar 21, 2024

2nikhiltom commented Mar 25, 2024

tay1orjones commented Mar 26, 2024

tay1orjones commented Mar 26, 2024

andreancardona left a comment

Choose a reason for hiding this comment

Kritvi-bhatia17 left a comment

Choose a reason for hiding this comment

carbon-automation bot commented Mar 28, 2024

2nikhiltom commented Mar 7, 2024 •

edited

Loading

netlify bot commented Mar 7, 2024 •

edited

Loading

Kritvi-bhatia17 commented Mar 7, 2024 •

edited

Loading

tay1orjones commented Mar 12, 2024 •

edited

Loading