Skip to content

Commit

Permalink
fixes select
Browse files Browse the repository at this point in the history
  • Loading branch information
@jake-figma
jake-figma committed May 25, 2024
1 parent 549dc69 commit 5cae2e1
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 112 deletions.
211 changes: 107 additions & 104 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
Legend,
RadioField,
RadioGroup,
Section,
SelectField,
SelectItem,
SwitchField,
Expand Down Expand Up @@ -39,113 +40,115 @@ function App() {
document.body.className = `sds-scheme-color-${theme}`;
}, [theme]);
return (
<Flex container direction="column" gap="xl">
<FlexItem>
<SelectField
defaultSelectedKey={theme}
placeholder="Select theme..."
onSelectionChange={(key) =>
setTheme(findThemeById(parseInt(key as string)))
}
items={items}
>
{(item) => <SelectItem>{item.name}</SelectItem>}
</SelectField>
</FlexItem>
<FlexItem>
<Flex gap="sm" alignPrimary="center" wrap>
<Button>
<IconArrowLeft />
Hello world
<IconActivity />
</Button>
<Button variant="secondary">
<IconArrowLeft />
Hello world
<IconActivity />
</Button>
<Button variant="stroke">
<IconArrowLeft />
Hello world
<IconActivity />
</Button>
<Button variant="subtle">
<IconArrowLeft />
Hello world
<IconActivity />
</Button>
</Flex>
</FlexItem>
<FlexItem>
<Fieldset>
<Legend>Shipping details</Legend>
<Text>Without this your odds of getting your order are low.</Text>
<FieldGroup>
<InputField
placeholder="Street"
name="street_address"
label="Street address"
/>
<SelectField label="Country" name="country">
<SelectItem>Canada</SelectItem>
<SelectItem>Mexico</SelectItem>
<SelectItem>United States</SelectItem>
</SelectField>
<TextAreaField
description="If you have a tiger, we'd like to know about it."
placeholder="Delivery notes"
name="notes"
label="Delivery notes"
/>
</FieldGroup>

<RadioGroup
label="Some stuff "
description="It's just ok"
defaultValue="Unique value"
<Section>
<Flex container direction="column" gap="xl">
<FlexItem>
<SelectField
defaultSelectedKey={theme}
placeholder="Select theme..."
onSelectionChange={(key) =>
setTheme(findThemeById(parseInt(key as string)))
}
items={items}
>
<RadioField
label="This is a radio"
value="Unique value"
description="Some text over here please and thank you will it wrap?"
/>
<RadioField
label="This is also a radio"
value="Other Unique value"
/>
</RadioGroup>
{(item) => <SelectItem>{item.name}</SelectItem>}
</SelectField>
</FlexItem>
<FlexItem>
<Flex gap="sm" alignPrimary="center" wrap>
<Button>
<IconArrowLeft />
Hello world
<IconActivity />
</Button>
<Button variant="secondary">
<IconArrowLeft />
Hello world
<IconActivity />
</Button>
<Button variant="stroke">
<IconArrowLeft />
Hello world
<IconActivity />
</Button>
<Button variant="subtle">
<IconArrowLeft />
Hello world
<IconActivity />
</Button>
</Flex>
</FlexItem>
<FlexItem>
<Fieldset>
<Legend>Shipping details</Legend>
<Text>Without this your odds of getting your order are low.</Text>
<FieldGroup>
<InputField
placeholder="Street"
name="street_address"
label="Street address"
/>
<SelectField label="Country" name="country">
<SelectItem>Canada</SelectItem>
<SelectItem>Mexico</SelectItem>
<SelectItem>United States</SelectItem>
</SelectField>
<TextAreaField
description="If you have a tiger, we'd like to know about it."
placeholder="Delivery notes"
name="notes"
label="Delivery notes"
/>
</FieldGroup>

<CheckboxGroup
label="Some other stuff"
description="It's kinda cool"
defaultValue={["one"]}
>
<CheckboxField
label="This is a checkbox"
value="one"
description="This is a checkbox description"
/>
<CheckboxField
label="This is also a checkbox"
value="two"
description="This is also a checkbox description"
/>
</CheckboxGroup>
<RadioGroup
label="Some stuff "
description="It's just ok"
defaultValue="Unique value"
>
<RadioField
label="This is a radio"
value="Unique value"
description="Some text over here please and thank you will it wrap?"
/>
<RadioField
label="This is also a radio"
value="Other Unique value"
/>
</RadioGroup>

<CheckboxGroup
label="Some other stuff"
description="It's kinda cool"
defaultValue={["one"]}
>
<CheckboxField
label="This is a checkbox"
value="one"
description="This is a checkbox description"
/>
<CheckboxField
label="This is also a checkbox"
value="two"
description="This is also a checkbox description"
/>
</CheckboxGroup>

<SwitchGroup>
<SwitchField
label="Enable"
defaultSelected={true}
description="Allow others to embed your event details on their own site"
/>
<SwitchField
label="Dont you love it"
description="Something magical"
/>
</SwitchGroup>
</Fieldset>
</FlexItem>
</Flex>
<SwitchGroup>
<SwitchField
label="Enable"
defaultSelected={true}
description="Allow others to embed your event details on their own site"
/>
<SwitchField
label="Dont you love it"
description="Something magical"
/>
</SwitchGroup>
</Fieldset>
</FlexItem>
</Flex>
</Section>
);
}
export default App;
6 changes: 3 additions & 3 deletions src/ui/ListBox/listBox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@

&[data-layout="grid"] {
display: grid;
grid-template-columns: auto;
grid-template-columns: auto auto;
scrollbar-gutter: stable;
}

&[data-orientation="horizontal"] {
width: 100%;
max-width: none;
grid-auto-flow: column;
grid-template-rows: auto;
grid-template-rows: auto auto;
grid-template-columns: none;
grid-auto-columns: auto;
}
Expand All @@ -69,7 +69,7 @@
cursor: pointer;
display: grid;
grid-template-areas: var(--list-box-item-template-areas);
grid-template-columns: 1fr;
grid-template-columns: auto 1fr;
padding: var(--sds-size-padding-sm) var(--sds-size-padding-sm);

> .icon {
Expand Down
6 changes: 4 additions & 2 deletions src/ui/Select/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,10 @@ export function SelectItem({ children, className, ...props }: SelectItemProps) {
const textValue = typeof children === "string" ? children : "";
return (
<ListBoxItem textValue={textValue} className={classNames} {...props}>
<IconCheck className="select-item-check" />
<>{children}</>
<>
<IconCheck className="select-item-check" />
{children}
</>
</ListBoxItem>
);
}
8 changes: 5 additions & 3 deletions src/ui/Select/select.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
--select-text-color: var(--sds-color-text-default-tertiary);
}

> .select-item-check {
.select-item-check {
display: none;
}
}
Expand All @@ -56,11 +56,13 @@

.select-item {
gap: var(--sds-size-gap-sm);
min-width: calc(var(--sds-size-gap-lg) * 10);
padding-left: var(--sds-size-padding-xs);
> .select-item-check {

.select-item-check {
opacity: 0;
}
&[data-selected] > .select-item-check {
&[data-selected] .select-item-check {
opacity: 1;
}
}

0 comments on commit 5cae2e1

Please sign in to comment.