Skip to content
This repository was archived by the owner on Sep 6, 2024. It is now read-only.

Portal-1135: Dropdown UI Component#99

Merged
ian-sawyer merged 9 commits into
mainfrom
isawyer/Portal-1135
Nov 1, 2023
Merged

Portal-1135: Dropdown UI Component#99
ian-sawyer merged 9 commits into
mainfrom
isawyer/Portal-1135

Conversation

@ian-sawyer

Copy link
Copy Markdown
Contributor
  • Introduces a new UI component called the Dropdown component
  • Tests added for component

Future Improvements:
Allow tabbing and enter key down to select dropdown items

@cfarmer-fearless cfarmer-fearless left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Minor tweaks but looks good overall

.dropdown-label-wrap {
display: flex;
flex-direction: row;
max-width: 18.125rem;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Use units function instead of rem.

cursor: pointer;
flex-direction: column;
margin-top: units("neg-05");
max-width: 18.125rem;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Use units function

border-radius: 0.2rem;
position: relative;
background: #fff;
max-height: 18.125rem;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Use units function


dropdownItemOne.click();

expect(screen.getByText("Item One")).toBeInTheDocument();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Instead of asserting that the item is in the document again after a click, you can create a function variable and assert that it was called.


export interface DropdownProps {
label: string;
labelIcon?: React.ReactNode;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Move optional prop down with rest of optional props.

</div>
<div className={`dropdown-items ${dropdownOpen && "show"}`}>
{items.map((item: string, index: number) => {
return (

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Can use shorthand here like items.map((...) => (<div>...</div>).

@cfarmer-fearless

Copy link
Copy Markdown
Contributor

Make sure the commits that are part of this PR get squashed into one commit with a "feat" prefix.

@ian-sawyer
ian-sawyer merged commit 47f7ce0 into main Nov 1, 2023
@ian-sawyer
ian-sawyer deleted the isawyer/Portal-1135 branch November 1, 2023 14:36
cfarmer-fearless pushed a commit that referenced this pull request Nov 3, 2023
* feat: added dropdown component styles/update tests
cfarmer-fearless pushed a commit that referenced this pull request Nov 3, 2023
* feat: added dropdown component styles/update tests
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants