react-lightning-design-system icon indicating copy to clipboard operation
react-lightning-design-system copied to clipboard

Update `Lookup` for SLDS2

Open msmx-mnakagawa opened this issue 6 months ago • 5 comments

What I did

  • Lookup
    • update markups significantly
    • improve a11y
  • Spinner
    • add a layout prop
    • add an x-small size
  • Icon
    • add an xx-small size

Reference

https://v1.lightningdesignsystem.com/components/lookups/

msmx-mnakagawa avatar Jun 05 '25 06:06 msmx-mnakagawa

reg-suit detected visual differences.

Check this report, and review them.

:red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle:

:large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle:

What do the circles mean? The number of circles represent the number of changed images.
:red_circle: : Changed items, :white_circle: : New items, :black_circle: : Deleted items, and :large_blue_circle: Passed items

How can I change the check status? If reviewers approve this PR, the reg context status will be green automatically.

reg-suit[bot] avatar Jun 05 '25 06:06 reg-suit[bot]

@stomita

Too small icon and maybe bigger down icon of scope dropdown button, comparing to the standard multi-scope lookup

I've tried to tweak the layout as below. Could you confirm again...? スクリーンショット 2025-06-19 10 25 31

msmx-mnakagawa avatar Jun 19 '25 01:06 msmx-mnakagawa

@stomita

Scope dropdown of lookup should be keyboard navigatable (by up/down arrow, return key, esc key, and so on), like current dropdown button implementation.

I've tried to add keyboard handlers, so could you take a look again...?

msmx-mnakagawa avatar Jun 19 '25 01:06 msmx-mnakagawa

FYI, I've removed aria-labelledby in 5edc2d88, reflecting https://github.com/mashmatrix/react-lightning-design-system/pull/472#discussion_r2156145801.

msmx-mnakagawa avatar Jun 19 '25 06:06 msmx-mnakagawa

@stomita Thank you for your confirmation. I've tried to fix listHeader and listFooter in 74368a5.

msmx-mnakagawa avatar Jun 26 '25 05:06 msmx-mnakagawa

@stomita Thank you for your confirmation, and I'm sorry for my lack of confirmation...

As shown below, I tried to apply the disabled style in d15c4ec. スクリーンショット 2025-07-01 16 44 25

msmx-mnakagawa avatar Jul 01 '25 07:07 msmx-mnakagawa