[Dropdown] Updated stylings, states and stories #176

shindigira · 2023-09-19T20:06:45Z

Closes #173

Changes

[New] Uses the standard CFPB accessibility styling (dotted outline when focused) in the Options
[New] Utilizes the proper CFPB-style 'down' ▼ icon in the Dropdown
[New] error prop that causes a red border around the Dropdown
[New] Dropdown Storybook story ('With Error')
[Update] Utilize the current library's Checkbox instead of a generic checkbox
[Update] Removed internal useState usage in both Checkbox and Dropdown. State must come externally in a controlled manner.
[Update] Update the storybook stories of Checkbox and Dropdown to use external state.
[Update] Update TypeScript settings
[Update] Update the Multi-Select variation
[Update] Incorporate the Menu Options styling
[Update] Incorporate the styling from Figma

How to test this PR

yarn vitest
See that everything passes
yarn storybook
Test the Checkbox and Dropdown stories
Inspect the new styling and compare with the figma and CFPB design

Screenshots

Default

Error

Multiselect with Pills and Checkboxes

Multiselect -- Menu Options (Dotted Outline While Focused)

netlify · 2023-09-19T20:06:50Z

✅ Deploy Preview for cfpb-design-system-react ready!

Name	Link
🔨 Latest commit	`6d2bc97`
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-system-react/deploys/651369b46da44f0008e00251
😎 Deploy Preview	https://deploy-preview-176--cfpb-design-system-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.

fix: [Dropdown] Make story names sentance case

meissadia

Should we try to better align stories to what is in the DS?
- Sigmund has done a great job of demonstrating what is possible with the Dropdown component but a lot of the scenarios are not represented in the DS ("With error", "Disabled", "Multi-select with checkboxes", etc). I could use some clarification on the source for all of the features that are not outlined in the DS.

src/components/Dropdown/Dropdown.tsx

meissadia

I pushed a commit to update story names to sentence case
I pushed a commit to update Dropdown to Dropdowns, to align with the way we've been updating the naming of Story pages

meissadia · 2023-09-19T22:06:14Z

Edit (sept 26): Per discussions, the clear all button is fine.

I had also previously added a Clear All button to the selected pills section and I'm struggling to find a reference for the source (Not seeing it in the DS or in the Figma). Should this be removed?

shindigira · 2023-09-20T15:28:15Z

@meissadia @natalia-fitzgerald

The Clear All and the Clear button were implemented previously (before this PR) in the Dropdowns components.

The good thing is those non-CFPB Design items can be disabled via a prop.

We should discuss on how far we can deviate from the CFPB Design System.

…ckbox

… look like the cfpb design

…-shadow

… Dropdown

…learable===false

meissadia

Functionality looks great! Could use some code cleanup.

Border for Dropdown -> Error feels a bit heavy. I think I've seen it mentioned that it should be 2px?
Still in discussion but we should match the DS multiselect's :focus and :hover styles as closely as possible for now

src/components/Dropdown/Dropdown.less

src/components/Checkbox/Checkbox.stories.tsx

src/components/Dropdown/Dropdown.less

src/components/Dropdown/DropdownInputWithCheckbox.tsx

src/components/Dropdown/styles.tsx

src/components/Checkbox/Checkbox.stories.tsx

natalia-fitzgerald · 2023-09-22T21:01:32Z

@shindigira

For the Multiselect remove the "x" within the input field (and the gray box)
- We can handle the clear function at the form level
For the Multiselect use the standard CFPB styling for the focus state
- Changes to the focus state would be global and affect the rest of our CFPB custom components (this is out of scope for this effort)

There are known bugs in the CFPB Design System - Multiselect component that we should keep in mind as we build out this component. We can then contribute back to the system while we build the React component library.

Some known bugs are documented here:

https://github.com/cfpb/design-system/issues?q=is%3Aissue+is%3Aopen+multiselect
[GHE]/CFGOV/platform/issues/3291
[GHE]/CFGOV/platform/issues/3283

natalia-fitzgerald

@shindigira

For the Multiselect remove the "x" within the input field (and the gray box)
- We can handle the clear function at the form level
For the Multiselect use the standard CFPB styling for the focus state
- Changes to the focus state would be global and affect the rest of our CFPB custom components (this is out of scope for this effort)

There are known bugs in the CFPB Design System - Multiselect component that we should keep in mind as we build out this component. If we have ideas about how to solve these issues we can contribute back to the system while we build the React component library.

Some known bugs are documented here:

https://github.com/cfpb/design-system/issues?q=is%3Aissue+is%3Aopen+multiselect
[GHE]/CFGOV/platform/issues/3291
[GHE]/CFGOV/platform/issues/3283
Multiselect: On desktop drop-down options lose background fill design-system#1728

…er the accessible blue border

src/components/Dropdown/Dropdown.tsx

shindigira · 2023-09-25T22:07:46Z

Functionality looks great! Could use some code cleanup.

Border for Dropdown -> Error feels a bit heavy. I think I've seen it mentioned that it should be 2px?

Still in discussion but we should match the DS multiselect's :focus and :hover styles as closely as possible for now

Reduced the border to 2px.
There is a bit of a problem react-select -- they tie the isFocused state to both using the arrow keys and onHover.

shindigira · 2023-09-25T22:09:45Z

For the Multiselect remove the "x" within the input field (and the gray box)

We can handle the clear function at the form level

For the Multiselect use the standard CFPB styling for the focus state

Changes to the focus state would be global and affect the rest of our CFPB custom components (this is out of scope for this effort)

There are known bugs in the CFPB Design System - Multiselect component that we should keep in mind as we build out this component. If we have ideas about how to solve these issues we can contribute back to the system while we build the React component library.

Some known bugs are documented here:

https://github.com/cfpb/design-system/issues?q=is%3Aissue+is%3Aopen+multiselect

[GHE]/CFGOV/platform/issues/3291

[GHE]/CFGOV/platform/issues/3283

Multiselect: On desktop drop-down options lose background fill design-system#1728

@natalia-fitzgerald Thanks for pointing out the problems in the source CFPB design system.

I followed the system as best as I can, I updated the screenshots at the top for you to review.

Also, would like to discuss about the 'Clear Form' button.

shindigira · 2023-09-25T22:11:14Z

@meissadia I removed comments, console.logs and dead code. Thanks for pointing them out.

src/components/Dropdown/Dropdown.less

Co-authored-by: Meis <meissadia@gmail.com>

…eact into 173-Dropdown-Update

fix: Open reference link in external tab fix: Expand abbreviated variable names

meissadia · 2023-09-26T23:38:18Z

I pushed some changes to:

Fix the Dropdown interactions on the Overview page
Remove custom styles on the in-field Clear all "X"
Address some grey border overhang on the Dropdown error state
- Before / After

meissadia

@shindigira Please take a look at the adjustments I made to confirm you're okay with them

shindigira · 2023-09-27T16:21:04Z

I pushed some changes to:

Fix the Dropdown interactions on the Overview page

Remove custom styles on the in-field Clear all "X"

Address some grey border overhang on the Dropdown error state

Before / After

Thanks for this!

feat: Dropdown Updated - styling, error prop, story

9dd13d4

shindigira added the enhancement New feature or request label Sep 19, 2023

shindigira requested review from meissadia and natalia-fitzgerald September 19, 2023 20:06

shindigira requested a review from contolini as a code owner September 19, 2023 20:06

fix: [Dropdown] Add intro paragraph

0c9a7fb

fix: [Dropdown] Make story names sentance case

meissadia requested changes Sep 19, 2023

View reviewed changes

src/components/Dropdown/Dropdown.tsx Outdated Show resolved Hide resolved

meissadia reviewed Sep 19, 2023

View reviewed changes

shindigira added 8 commits September 21, 2023 16:28

chore: utlized external state in Checkbox

e1ceb2e

chore: removed the use of defaultChecked and internal usestate -- Che…

05dd65d

…ckbox

style: styled the dropdown option menu, Checkboxes and option text to…

a013927

… look like the cfpb design

style: hovering entire option line causes checkbox to have a blue box…

85d2a68

…-shadow

refactor: removed defaultValue as a prop, removed internal state from…

e755e25

… Dropdown

chore: added @storybook/client-api -- for useArgs

0d4f01e

feat: Modified all of Dropdown.stories to use useArg (state)

0017314

chore: updated the stories of Checkbox and Dropdown

6b5ef8a

shindigira requested a review from meissadia September 22, 2023 12:55

rebased from main

caaf724

shindigira changed the title ~~feat: Dropdown Updated - styling, error prop, story~~ [Dropdown] Updated styling, error prop, story Sep 22, 2023

shindigira changed the title ~~[Dropdown] Updated styling, error prop, story~~ [Dropdown] Updated stylings, states and stories Sep 22, 2023

shindigira added 4 commits September 22, 2023 13:31

style: adjusted error border-width style

03fab6f

style: adjust error style -- part 2

2bda2a4

chore: updated react-select styling to not have extra border when isC…

148623f

…learable===false

chore: adjusted story labels

53cc011

meissadia requested changes Sep 22, 2023

View reviewed changes

natalia-fitzgerald reviewed Sep 22, 2023

View reviewed changes

shindigira added 4 commits September 23, 2023 14:27

chore: Updated Dropdown stories

50141e3

chore: Renamed Dropdown stories

d325a07

chore: Utilized the dotted accessbility styling in the Options

3c5ac3b

style: updated the styling to not have the underneath grey border und…

695e29c

…er the accessible blue border

This was referenced Sep 25, 2023

[User Profile] - Layout View - Select Dropdowns for Financial Institutions cfpb/sbl-frontend#41

Closed

[User Profile] - Layout View - Select Dropdowns for Financial Institutions cfpb/sbl-frontend#63

Merged

shindigira commented Sep 25, 2023

View reviewed changes

src/components/Dropdown/Dropdown.tsx Show resolved Hide resolved

chore: removed comments and dead code

744fc22

meissadia reviewed Sep 26, 2023

View reviewed changes

src/components/Dropdown/Dropdown.less Outdated Show resolved Hide resolved

shindigira and others added 6 commits September 26, 2023 14:04

Removed 'dropdown-control:hover' style from Dropdown.less

3c14481

Co-authored-by: Meis <meissadia@gmail.com>

chore: disabled the X in Dropdown by default

467c737

Merge branch '173-Dropdown-Update' of github.com:cfpb/design-system-r…

f9a9f74

…eact into 173-Dropdown-Update

chore: disable the X by default at the component level

18b667c

chore: removed inline clearAll Dropdown story

1623b9b

fix: removed default id that would brake Dropdown stories

cf1692b

meissadia self-requested a review September 26, 2023 22:45

meissadia added 4 commits September 26, 2023 16:50

fix: Interactions on Overview page visibly update the component

a878823

fix: Open reference link in external tab fix: Expand abbreviated variable names

fix: Delete custom clear indicator

871dd62

fix: [Dropdown] Remove extra grey border when in Error state

01a921a

fix: Remove custom styling for Dropdown clear "X"

6d2bc97

meissadia approved these changes Sep 26, 2023

View reviewed changes

shindigira merged commit f9155fe into main Sep 27, 2023

shindigira deleted the 173-Dropdown-Update branch September 27, 2023 15:32

meissadia mentioned this pull request Oct 5, 2023

[Dropdown/Select] CFPB Styling -- Parity #190

Open

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dropdown] Updated stylings, states and stories #176

[Dropdown] Updated stylings, states and stories #176

shindigira commented Sep 19, 2023 •

edited by billhimmelsbach

Loading

netlify bot commented Sep 19, 2023 •

edited

Loading

meissadia left a comment

meissadia left a comment

meissadia commented Sep 19, 2023 •

edited

Loading

shindigira commented Sep 20, 2023 •

edited

Loading

meissadia left a comment

natalia-fitzgerald commented Sep 22, 2023 •

edited by billhimmelsbach

Loading

natalia-fitzgerald left a comment •

edited by billhimmelsbach

Loading

shindigira commented Sep 25, 2023

shindigira commented Sep 25, 2023 •

edited by billhimmelsbach

Loading

shindigira commented Sep 25, 2023 •

edited

Loading

meissadia commented Sep 26, 2023

meissadia left a comment

shindigira commented Sep 27, 2023

[Dropdown] Updated stylings, states and stories #176

[Dropdown] Updated stylings, states and stories #176

Conversation

shindigira commented Sep 19, 2023 • edited by billhimmelsbach Loading

Changes

How to test this PR

Screenshots

Default

Error

Multiselect with Pills and Checkboxes

Multiselect -- Menu Options (Dotted Outline While Focused)

netlify bot commented Sep 19, 2023 • edited Loading

✅ Deploy Preview for cfpb-design-system-react ready!

meissadia left a comment

Choose a reason for hiding this comment

meissadia left a comment

Choose a reason for hiding this comment

meissadia commented Sep 19, 2023 • edited Loading

shindigira commented Sep 20, 2023 • edited Loading

meissadia left a comment

Choose a reason for hiding this comment

natalia-fitzgerald commented Sep 22, 2023 • edited by billhimmelsbach Loading

natalia-fitzgerald left a comment • edited by billhimmelsbach Loading

Choose a reason for hiding this comment

shindigira commented Sep 25, 2023

shindigira commented Sep 25, 2023 • edited by billhimmelsbach Loading

shindigira commented Sep 25, 2023 • edited Loading

meissadia commented Sep 26, 2023

meissadia left a comment

Choose a reason for hiding this comment

shindigira commented Sep 27, 2023

shindigira commented Sep 19, 2023 •

edited by billhimmelsbach

Loading

netlify bot commented Sep 19, 2023 •

edited

Loading

meissadia commented Sep 19, 2023 •

edited

Loading

shindigira commented Sep 20, 2023 •

edited

Loading

natalia-fitzgerald commented Sep 22, 2023 •

edited by billhimmelsbach

Loading

natalia-fitzgerald left a comment •

edited by billhimmelsbach

Loading

shindigira commented Sep 25, 2023 •

edited by billhimmelsbach

Loading

shindigira commented Sep 25, 2023 •

edited

Loading