Skip to content

Commit

Permalink
refa: <Select> (#2048)
Browse files Browse the repository at this point in the history 
* listbox

* working on the listbox states

* started actual select

* listbox styles

* Working Select!

Co-authored-by: sarahgm <sarahgm@users.noreply.github.com>

* pass ref

* saves

* use fieldbase

Co-authored-by: sarahgm <sarahgm@users.noreply.github.com>

* rename

* styling for listbox

* fix popover + onselect in story

* remove objectref import

* add overlayprops

* some style changes

* new icon for select

Co-authored-by: Sebastian Sebald <sebastian.sebald@gmail.com>

* added expanded and styles

Co-authored-by: Sebastian Sebald <sebastian.sebald@gmail.com>

* saves style for listbox

* saves

* list section styles

* styles unicorn

* styles core theme

* story

* some tests

* test

* fix disabled state

* more tests

* almost ...

* remove debugging

* test done

* remove old select

* remove stuff

* style select in docs

* Create kind-countries-shop.md

* update lock file

* hello old emotion typings ...

Co-authored-by: sarahgm <sarahgm@users.noreply.github.com>
Co-authored-by: sarahgm <sarah.gosmann@reservix.de>
  • Loading branch information
@sebald @sarahgm
3 people authored May 2, 2022
1 parent 6a369f5 commit 2ab80ae
Show file tree
Hide file tree
Showing 49 changed files with 3,017 additions and 2,325 deletions.
9 changes: 9 additions & 0 deletions .changeset/kind-countries-shop.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"@marigold/storybook-config": minor
"@marigold/docs": minor
"@marigold/components": minor
"@marigold/icons": minor
"@marigold/system": minor
---

refa: <Select>
1 change: 1 addition & 0 deletions .eslintignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
dist
3 changes: 2 additions & 1 deletion config/storybook/preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ addParameters({
},
controls: { expanded: true },
themes: {
default: 'b2b',
clearable: false,
Decorator: ({
themeName,
children,
Expand All @@ -39,7 +41,6 @@ addParameters({
list: (Object.keys(themes) as ThemeNames[]).map(name => ({
name,
color: themes[name].colors!.primary,
default: name === 'b2b',
})),
},
});
155 changes: 41 additions & 114 deletions docs/content/components/select.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: Select
figma: https://www.figma.com/file/DFKyTGHAoDxOsUBPszLLxP/%F0%9F%8F%B5%EF%B8%8FMarigold?node-id=2596%3A2348
---

import { FigmaLink } from '../../src/components/FigmaLink';
Expand All @@ -8,23 +9,21 @@ import { FigmaLink } from '../../src/components/FigmaLink';

## Description

Dropdown for selecting an item among different options.
Dropdown for selecting an Option among different options.

```tsx
<Select label="Favorite character" placeholder="Select your character">
<Item>Mario</Item>
<Item>Luigi</Item>
<Item>Toad</Item>
<Item>Yoshi</Item>
<Item>Bowser</Item>
<Item>Peach</Item>
<Select.Option>Mario</Select.Option>
<Select.Option>Luigi</Select.Option>
<Select.Option>Toad</Select.Option>
<Select.Option>Yoshi</Select.Option>
<Select.Option>Bowser</Select.Option>
<Select.Option>Peach</Select.Option>
</Select>
```

```tsx onlyCode
import { Select } from '@marigold/components';
import { Item } from '@marigold/components';
import { Section } from '@marigold/components';
```

<FigmaLink
Expand All @@ -35,137 +34,65 @@ import { Section } from '@marigold/components';

## Props

| Property | Type | Default |
| :------------------------------ | :------------------------------------------------------------------------------------------------------- | :------ |
| `label` (optional) | `string` | |
| `labelVariant` (optional) | `string` | `above` |
| `placeholder` (optional) | `string` | |
| `disabled` (optional) | `boolean` | `false` |
| `selectedKey` (optional) | [Key](https://reactjs.org/docs/lists-and-keys.html) | |
| `defaultSelectedKey` (optional) | [Key](https://reactjs.org/docs/lists-and-keys.html) | |
| `disabledKeys` (optional) | [Iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)`<Key>` | |
| `required` (optional) | `boolean` | `false` |
| `error` (optional) | `boolean` | `false` |
| `errorMessage` (optional) | `string` | |
| `width` (optional) | `ResponsiveStyleValue<number⎮string>` | |
| `onSelectionChange` (optional) | `(key: Key) => any` | |
| Property | Type | Default |
| :------------------------------ | :------------------------------------------------------------------------------------------------------- | :----------------------------------------- |
| `label` (optional) | `string` | |
| `placeholder` (optional) | `string` | Based on OS language (en and de supported) |
| `disabled` (optional) | `boolean` | `false` |
| `selectedKey` (optional) | [Key](https://reactjs.org/docs/lists-and-keys.html) | |
| `defaultSelectedKey` (optional) | [Key](https://reactjs.org/docs/lists-and-keys.html) | |
| `disabledKeys` (optional) | [Iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)`<Key>` | |
| `required` (optional) | `boolean` | `false` |
| `error` (optional) | `boolean` | `false` |
| `errorMessage` (optional) | `string` | |
| `width` (optional) | `ResponsiveStyleValue<number⎮string>` | |
| `onSelectionChange` (optional) | `(key: Key) => any` | |

## Examples

### Standard Select

```tsx
<Select label="Favorite Color" placeholder="Choose a color">
<Item>Red</Item>
<Item>Orange</Item>
<Item>Yellow</Item>
<Item>Green</Item>
<Item>Blue</Item>
<Item>Purple</Item>
<Select.Option>Red</Select.Option>
<Select.Option>Orange</Select.Option>
<Select.Option>Yellow</Select.Option>
<Select.Option>Green</Select.Option>
<Select.Option>Blue</Select.Option>
<Select.Option>Purple</Select.Option>
</Select>
```

### Default selected Key (uncontrolled)

```tsx
<Select
label="Choose Color (uncontrolled)"
htmlFor="id"
defaultSelectedKey="Red"
>
<Item key="Red">Red</Item>
<Item key="Orange">Orange</Item>
<Item key="Yellow">Yellow</Item>
<Item key="Green">Green</Item>
<Item key="Blue">Blue</Item>
<Item key="Purple">Purple</Item>
</Select>
```

### Selected Key (controlled)

```tsx
() => {
const [color, setColor] = React.useState('Red');
return (
<Select
label="Choose Color (controlled)"
htmlFor="id"
selectedKey={color}
onSelectionChange={selected => setColor(selected)}
>
<Item key="Red">Red</Item>
<Item key="Orange">Orange</Item>
<Item key="Yellow">Yellow</Item>
<Item key="Green">Green</Item>
<Item key="Blue">Blue</Item>
<Item key="Purple">Purple</Item>
</Select>
);
};
```

### Sections

```tsx
<Select label="Two different sections:" htmlFor="section">
<Section key="Animals" title="Animals">
<Item key="Monkey">Monkey</Item>
<Item key="Dog">Dog</Item>
<Item key="Lion">Lion</Item>
</Section>
<Section key="People" title="People">
<Item key="Max">Max</Item>
<Item key="Mary">Mary</Item>
<Item key="John">John</Item>
</Section>
<Select label="Choose Color (uncontrolled)" defaultSelectedKey="Yellow">
<Select.Option key="Red">Red</Select.Option>
<Select.Option key="Orange">Orange</Select.Option>
<Select.Option key="Yellow">Yellow</Select.Option>
<Select.Option key="Green">Green</Select.Option>
<Select.Option key="Blue">Blue</Select.Option>
<Select.Option key="Purple">Purple</Select.Option>
</Select>
```

### Disabled Select

```tsx
<Select label="Disabled Select:" disabled placeholder="disabled Select">
<Item>disabled Item</Item>
<Select.Option>disabled Select.Option</Select.Option>
</Select>
```

### Disabled Keys

```tsx
<Select label="Favorite Color" disabledKeys={['Orange', 'Yellow']}>
<Item key="Red">Red</Item>
<Item key="Orange">Orange</Item>
<Item key="Yellow">Yellow</Item>
<Item key="Green">Green</Item>
<Item key="Blue">Blue</Item>
<Item key="Purple">Purple</Item>
</Select>
```

### Required label Select

```tsx
<Select required label="required Select">
<Item>Option 1</Item>
<Item>Option 2</Item>
</Select>
```

### Error Select

```tsx
<Select error errorMessage="Please choose one option!" label="error Select">
<Item>Option 1</Item>
<Item>Option 2</Item>
</Select>
```

### Custom width Select

```tsx
<Select label="Width Select" width={300}>
<Item>Option 1</Item>
<Item>Option 2</Item>
<Select.Option key="Red">Red</Select.Option>
<Select.Option key="Orange">Orange</Select.Option>
<Select.Option key="Yellow">Yellow</Select.Option>
<Select.Option key="Green">Green</Select.Option>
<Select.Option key="Blue">Blue</Select.Option>
<Select.Option key="Purple">Purple</Select.Option>
</Select>
```
2 changes: 1 addition & 1 deletion docs/src/components/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Version } from './Version';
export const Layout: React.FC = ({ children }) => {
return (
<>
<Columns columns={[2, 10]} space="xsmall" collapseAt="60em">
<Columns columns={[2, 10]} space="medium" collapseAt="60em">
<Stack space="small">
<Box p="medium">
<Link to="/">
Expand Down
1 change: 0 additions & 1 deletion docs/src/components/ThemeSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ export const ThemeSelect = () => {
selectedKey={current}
value={current}
onSelectionChange={current => setTheme(current)}
width={160}
aria-label="theme-select"
>
{Object.keys(themes).map(name => (
Expand Down
Loading

0 comments on commit 2ab80ae

Please sign in to comment.