Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🪟 🧹 Update ListBox styling according to the DropDown component #20069

Merged
merged 14 commits into from
Dec 13, 2022
Merged

🪟 🧹 Update ListBox styling according to the DropDown component #20069

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a2308a1
Adds basic story file.
Dec 1, 2022
60fd45c
Styles the ListBox component according to DropDown and Figma styles.
Dec 1, 2022
f6180a9
Passes in fontawesome icon as prop.
Dec 5, 2022
3dff8a1
Adds padding to icon right.
Dec 5, 2022
78f14be
Removes height.
Dec 6, 2022
ba1467f
Adds option select state to story file.
Dec 6, 2022
e3cec78
Passes ReactNode as icon and cleans up CSS.
Dec 6, 2022
c75aedc
Merges ListBox icon branch in.
Dec 6, 2022
302561e
Converts caret icon to svg file.
Dec 6, 2022
5486fef
Merge branch 'master' into nataly/finalize-listbox-component
natalyjazzviolin Dec 6, 2022
e91642e
Corrects stylelint error.
Dec 7, 2022
146852a
Requested changes.
Dec 8, 2022
d4610c4
make control button fully customizable
lmossman Dec 9, 2022
95b6f15
Merge branch 'master' into nataly/finalize-listbox-component
natalyjazzviolin Dec 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions airbyte-webapp/src/components/ui/DropDown/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { DropDown } from "./DropDown";

const listOptions = [
{
label: "one",
value: "value",
},
{
label: "two",
value: "value",
},
{
label: "three",
value: "value",
},
];

export default {
title: "Ui/DropDown",
component: DropDown,
argTypes: {
options: listOptions,
},
} as ComponentMeta<typeof DropDown>;

const Template: ComponentStory<typeof DropDown> = (args) => <DropDown {...args} />;

export const Primary = Template.bind({});
Primary.args = {
options: listOptions,
};
11 changes: 11 additions & 0 deletions airbyte-webapp/src/components/ui/ListBox/CaretDownIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const CaretDownIcon = ({ color = "currentColor" }: { color?: string }): JSX.Element => (
<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1.42159 0.689453C0.929401 0.689453 0.683307 1.29102 1.03878 1.64648L4.53878 5.14648C4.75753 5.36523 5.11299 5.36523 5.33174 5.14648L8.83174 1.64648C9.18721 1.29102 8.94112 0.689453 8.44893 0.689453H1.42159Z"
fill="#AFAFC1"
/>
fill={color}
</svg>
);

export default CaretDownIcon;
14 changes: 14 additions & 0 deletions airbyte-webapp/src/components/ui/ListBox/ListBox.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,20 @@
width: 100%;
height: 100%;
cursor: pointer;
border: 1px solid colors.$grey-50;
background-color: colors.$grey-50;
border-radius: 4px;
natalyjazzviolin marked this conversation as resolved.
Show resolved Hide resolved
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
line-height: 20px;
min-height: 36px;

&:hover {
border: 1px solid colors.$grey-100;
natalyjazzviolin marked this conversation as resolved.
Show resolved Hide resolved
}
}

.optionsContainer {
Expand Down
2 changes: 2 additions & 0 deletions airbyte-webapp/src/components/ui/ListBox/ListBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Listbox } from "@headlessui/react";
import classNames from "classnames";
import React from "react";

import CaretDownIcon from "./CaretDownIcon";
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This SVG is exported form the dropdown mockup in Figma.

import styles from "./ListBox.module.scss";

export interface ListBoxControlButtonProps<T> {
Expand Down Expand Up @@ -44,6 +45,7 @@ export const ListBox = <T,>({
<Listbox value={selectedValue} onChange={onSelect}>
<Listbox.Button className={classNames(buttonClassName, styles.button)}>
<ControlButton selectedOption={selectedOption} />
<CaretDownIcon />
</Listbox.Button>
{/* wrap in div to make `position: absolute` on Listbox.Options result in correct vertical positioning */}
<div className={styles.optionsContainer}>
Expand Down
33 changes: 33 additions & 0 deletions airbyte-webapp/src/components/ui/ListBox/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { ListBox } from "./ListBox";

const listOptions = [
{
label: "one",
value: "value",
},
{
label: "two",
value: "value",
},
{
label: "three",
value: "value",
},
];

export default {
title: "Ui/ListBox",
component: ListBox,
argTypes: {
options: listOptions,
},
} as ComponentMeta<typeof ListBox>;

const Template: ComponentStory<typeof ListBox> = (args) => <ListBox {...args} />;

export const Primary = Template.bind({});
Primary.args = {
options: listOptions,
};