Skip to content

Commit

Permalink
fix: #250
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabien-ml
fabien-ml committed Aug 25, 2023
1 parent d11fd36 commit 58feb1e
Show file tree
Hide file tree
Showing 8 changed files with 199 additions and 240 deletions.
96 changes: 71 additions & 25 deletions packages/core/dev/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,83 @@
import { createSignal } from "solid-js";
import { createSignal, For } from "solid-js";

import { Select } from "../src";
import { Combobox } from "../src";

interface Fruit {
value: string;
label: string;
disabled: boolean;
}

const ALL_OPTIONS: Fruit[] = [
{ value: "apple", label: "Apple", disabled: false },
{ value: "banana", label: "Banana", disabled: false },
{ value: "blueberry", label: "Blueberry", disabled: false },
{ value: "grapes", label: "Grapes", disabled: true },
{ value: "pineapple", label: "Pineapple", disabled: false },
];

export default function App() {
const [value, setValue] = createSignal("Blueberry");
const [value, setValue] = createSignal<Fruit | null>(ALL_OPTIONS[0]);

return (
<>
<Select.Root
<div style={{ padding: "20px" }}>
<p>{value()?.label}</p>
<Combobox.Root
value={value()}
onChange={setValue}
options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
placeholder="Select a fruit…"
options={ALL_OPTIONS}
optionValue="value"
optionTextValue="label"
optionLabel="label"
optionDisabled="disabled"
placeholder="Search a fruit…"
itemComponent={props => (
<Select.Item item={props.item} class="select__item">
<Select.ItemLabel>{props.item.rawValue}</Select.ItemLabel>
<Select.ItemIndicator class="select__item-indicator">X</Select.ItemIndicator>
</Select.Item>
<Combobox.Item item={props.item} class="combobox__item">
<Combobox.ItemLabel>{props.item.rawValue?.label}</Combobox.ItemLabel>
<Combobox.ItemIndicator class="combobox__item-indicator">X</Combobox.ItemIndicator>
</Combobox.Item>
)}
>
<Select.Trigger class="select__trigger" aria-label="Fruit">
<Select.Value<string> class="select__value">
{state => state.selectedOption()}
</Select.Value>
<Select.Icon class="select__icon">V</Select.Icon>
</Select.Trigger>
<Select.Portal>
<Select.Content class="select__content">
<Select.Listbox class="select__listbox" />
</Select.Content>
</Select.Portal>
</Select.Root>
<p>Your favorite fruit is: {value()}.</p>
</>
<Combobox.Control class="combobox__control" aria-label="Fruit">
<Combobox.Input class="combobox__input" />
<Combobox.Trigger class="combobox__trigger">
<Combobox.Icon class="combobox__icon">V</Combobox.Icon>
</Combobox.Trigger>
</Combobox.Control>
<Combobox.Portal>
<Combobox.Content class="combobox__content">
<Combobox.Listbox class="combobox__listbox" />
</Combobox.Content>
</Combobox.Portal>
</Combobox.Root>
<For each={ALL_OPTIONS}>
{option => {
return (
<button
style={{
padding: "8px",
color: value()?.value === option.value ? "green" : "blue",
}}
onClick={() => {
setValue(option);
}}
>
{option.label}
</button>
);
}}
</For>
<button
style={{
padding: "8px",
color: value()?.value === null ? "green" : "blue",
}}
onClick={() => {
setValue(null);
}}
>
Clear
</button>
</div>
);
}
125 changes: 0 additions & 125 deletions packages/core/dev/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,125 +0,0 @@
.select__trigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 200px;
border-radius: 6px;
padding: 0 10px 0 16px;
font-size: 16px;
line-height: 1;
height: 40px;
outline: none;
background-color: white;
border: 1px solid hsl(240 6% 90%);
color: hsl(240 4% 16%);
transition: border-color 250ms, color 250ms;
}
.select__trigger:hover {
border-color: hsl(240 5% 65%);
}
.select__trigger:focus-visible {
outline: 2px solid hsl(200 98% 39%);
outline-offset: 2px;
}
.select__trigger[data-invalid] {
border-color: hsl(0 72% 51%);
color: hsl(0 72% 51%);
}
.select__value {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.select__value[data-placeholder-shown] {
color: hsl(240 4% 46%);
}
.select__icon {
height: 20px;
width: 20px;
flex: 0 0 20px;
}
.select__description {
margin-top: 8px;
color: hsl(240 5% 26%);
font-size: 12px;
user-select: none;
}
.select__error-message {
margin-top: 8px;
color: hsl(0 72% 51%);
font-size: 12px;
user-select: none;
}
.select__content {
background-color: white;
border-radius: 6px;
border: 1px solid hsl(240 6% 90%);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
transform-origin: var(--kb-select-content-transform-origin);
animation: contentHide 250ms ease-in forwards;
}
.select__content[data-expanded] {
animation: contentShow 250ms ease-out;
}
.select__listbox {
overflow-y: auto;
max-height: 360px;
padding: 8px;
}
.select__item {
font-size: 16px;
line-height: 1;
color: hsl(240 4% 16%);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
padding: 0 8px;
position: relative;
user-select: none;
outline: none;
}
.select__item[data-disabled] {
color: hsl(240 5% 65%);
opacity: 0.5;
pointer-events: none;
}
.select__item[data-highlighted] {
outline: none;
background-color: hsl(200 98% 39%);
color: white;
}
.select__section {
padding: 8px 0 0 8px;
font-size: 14px;
line-height: 32px;
color: hsl(240 4% 46%);
}
.select__item-indicator {
height: 20px;
width: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
@keyframes contentShow {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes contentHide {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-8px);
}
}
Loading

0 comments on commit 58feb1e

Please sign in to comment.