Skip to content

Commit

Permalink
feat(Dropdown): add option for divider in dropdown (#2422)
Browse files Browse the repository at this point in the history
  • Loading branch information
rivka-ungar authored Sep 9, 2024
1 parent 7b7b6c7 commit f5d1e5a
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 10 deletions.
28 changes: 22 additions & 6 deletions packages/core/src/components/Dropdown/Dropdown.styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -358,15 +358,31 @@ const indicatorSeparator = () => () => ({
display: "none"
});

const group = () => () => ({
paddingBottom: 0,
marginTop: "4px"
});
const group =
({ withGroupDivider }) =>
() => ({
paddingBottom: 0,
marginTop: "4px",
...(withGroupDivider && {
":not(:last-child)": {
position: "relative",
paddingBottom: "8px",
"::after": {
content: '""',
position: "absolute",
bottom: "0",
left: "var(--spacing-small)",
width: "calc(100% - (var(--spacing-small) * 2))",
height: "1px",
backgroundColor: "var(--layout-border-color)"
}
}
})
});

const groupHeading = () => () => ({
height: "32px",
fontSize: "14px",
lineHeight: "22px",
lineHeight: "32px",
display: "flex",
alignItems: "center",
marginLeft: getCSSVar("spacing-medium"),
Expand Down
6 changes: 4 additions & 2 deletions packages/core/src/components/Dropdown/Dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,8 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
popupsContainerSelector,
filterOption,
menuPosition = Dropdown.menuPositions.ABSOLUTE,
"data-testid": dataTestId
"data-testid": dataTestId,
withGroupDivider = false
}: DropdownComponentProps,
ref: React.ForwardedRef<HTMLElement>
) => {
Expand Down Expand Up @@ -162,7 +163,8 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
rtl,
insideOverflowContainer,
controlRef,
insideOverflowWithTransformContainer
insideOverflowWithTransformContainer,
withGroupDivider
});

type BaseStyles = typeof baseStyles;
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/components/Dropdown/Dropdown.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -271,6 +271,7 @@ export interface DropdownComponentProps extends CustomMenuBaseProps, CustomOptio
onClear?: () => void;
popupsContainerSelector?: string;
selectProps?: Record<string, string>;
withGroupDivider?: boolean;
}

export type DropdownProps = DropdownComponentProps;
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,8 @@ A classic dropdown presents options a user needs to choose from.

### Dropdown with groups

Dropdown menu can be organized into groups. It can be either by group title or divider.

<Canvas of={DropdownStories.DropdownWithGroups} />

### Dropdown inside popover
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -714,7 +714,6 @@ export const DropdownWithGroups = {
() => [
{
label: "Group 1",

options: [
{
value: "1",
Expand Down Expand Up @@ -744,8 +743,54 @@ export const DropdownWithGroups = {
[]
);

const optionsWithoutGroupLabel = useMemo(
() => [
{
options: [
{
value: "1",
label: "Option 1"
},
{
value: "2",
label: "Option 2"
}
]
},
{
options: [
{
value: "3",
label: "Option 3"
},
{
value: "4",
label: "Option 4"
}
]
}
],
[]
);

return (
<Dropdown placeholder="Placeholder text here" options={options} className="dropdown-stories-styles_big-spacing" />
<Flex gap={Flex.gaps.LARGE}>
<div>
<Dropdown
placeholder="Groups with group title"
options={options}
className="dropdown-stories-styles_big-spacing"
/>
</div>
<div>
<Dropdown
placeholder="Groups with group divider"
options={optionsWithoutGroupLabel}
withGroupDivider
className="dropdown-stories-styles_big-spacing"
/>
</div>
</Flex>
);
},
name: "Dropdown with groups"
Expand Down

0 comments on commit f5d1e5a

Please sign in to comment.