@codecademy/gamut 72.0.1-alpha.a822e6.0 → 72.0.1-alpha.db0637.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -21,6 +21,24 @@ Use `Select` for standard single-select forms with minimal bundle cost. Use `Sel
|
|
|
21
21
|
|
|
22
22
|
---
|
|
23
23
|
|
|
24
|
+
## Options
|
|
25
|
+
|
|
26
|
+
`options` accepts plain strings or option objects. `value` is always a string and references an option's `value`.
|
|
27
|
+
|
|
28
|
+
| Field | Required | Notes |
|
|
29
|
+
| -------------- | -------- | -------------------------------------------------------------------- |
|
|
30
|
+
| `label` | yes | Display text |
|
|
31
|
+
| `value` | yes | Unique string; what `value` / `string[]` reference |
|
|
32
|
+
| `disabled` | no | Option cannot be selected |
|
|
33
|
+
| `subtitle` | no | Secondary text below the label |
|
|
34
|
+
| `rightLabel` | no | Text on the right side of the option |
|
|
35
|
+
| `icon` | no | A `@codecademy/gamut-icons` component |
|
|
36
|
+
| `abbreviation` | no | Short text shown in the input while the full label shows in the menu |
|
|
37
|
+
|
|
38
|
+
Grouped options: `{ label, options: [...], divider? }` (extends react-select `GroupBase`; `divider` draws a rule above the group).
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
24
42
|
## Controlled vs uncontrolled
|
|
25
43
|
|
|
26
44
|
SelectDropdown does **not** accept `defaultValue`.
|
|
@@ -70,6 +88,7 @@ Second argument is react-select `ActionMeta`. For creatable creates: `meta.actio
|
|
|
70
88
|
|
|
71
89
|
- `FormGroup` `htmlFor` must match control `id` / `name`.
|
|
72
90
|
- Pass `name` on SelectDropdown (required for forms).
|
|
91
|
+
- Pass `aria-label` (required for forms); it must match the FormGroupLabel `htmlFor` / `name`.
|
|
73
92
|
- Pass `error` boolean when FormGroup has an error.
|
|
74
93
|
- Generic FormGroup live-region behavior: see [`gamut-forms`](../gamut-forms/SKILL.md).
|
|
75
94
|
|
|
@@ -77,6 +96,7 @@ Second argument is react-select `ActionMeta`. For creatable creates: `meta.actio
|
|
|
77
96
|
<FormGroup htmlFor="country" isSoloField label="Country" error={errors.country}>
|
|
78
97
|
<SelectDropdown
|
|
79
98
|
name="country"
|
|
99
|
+
aria-label="country"
|
|
80
100
|
options={options}
|
|
81
101
|
value={value}
|
|
82
102
|
error={Boolean(errors.country)}
|
|
@@ -87,6 +107,20 @@ Second argument is react-select `ActionMeta`. For creatable creates: `meta.actio
|
|
|
87
107
|
|
|
88
108
|
---
|
|
89
109
|
|
|
110
|
+
## Styling & layout props
|
|
111
|
+
|
|
112
|
+
| Prop | Type | Default | Notes |
|
|
113
|
+
| ------------------- | ------------------------ | -------- | --------------------------------------------------------- |
|
|
114
|
+
| `size` | `'small' \| 'medium'` | `medium` | Control height/density |
|
|
115
|
+
| `shownOptionsLimit` | `1`–`6` | `6` | Visible options before the menu scrolls |
|
|
116
|
+
| `inputWidth` | `string \| number` | — | Width of the input independent of the menu |
|
|
117
|
+
| `dropdownWidth` | `string \| number` | — | Width of the menu independent of the input |
|
|
118
|
+
| `menuAlignment` | `'left' \| 'right'` | `left` | Menu edge alignment |
|
|
119
|
+
| `zIndex` | `number` | auto | Menu z-index |
|
|
120
|
+
| `inputProps` | `{ hidden?, combobox? }` | — | `data-*` / `aria-*` only, forwarded to the input elements |
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
90
124
|
## Examples
|
|
91
125
|
|
|
92
126
|
### Single (controlled)
|
|
@@ -147,9 +181,3 @@ const [value, setValue] = useState<string[]>([]);
|
|
|
147
181
|
}}
|
|
148
182
|
/>;
|
|
149
183
|
```
|
|
150
|
-
|
|
151
|
-
---
|
|
152
|
-
|
|
153
|
-
## Storybook note
|
|
154
|
-
|
|
155
|
-
Default story args include `value: ''`. Spreading `{...args}` in custom renders behaves as controlled empty single. Omit `value` when demonstrating uncontrolled multi or creatable multi.
|
|
@@ -8,7 +8,9 @@ export const getCreatedOptionValue = (optionEvent, actionMeta, multiple) => {
|
|
|
8
8
|
const metaValue = actionMeta.option?.value;
|
|
9
9
|
if (metaValue) return metaValue;
|
|
10
10
|
if (!multiple) {
|
|
11
|
-
const
|
|
11
|
+
const {
|
|
12
|
+
value
|
|
13
|
+
} = optionEvent;
|
|
12
14
|
return value || undefined;
|
|
13
15
|
}
|
|
14
16
|
const newOption = optionEvent.find(option => option.__isNew__);
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/gamut",
|
|
3
3
|
"description": "Styleguide & Component library for Codecademy",
|
|
4
|
-
"version": "72.0.1-alpha.
|
|
4
|
+
"version": "72.0.1-alpha.db0637.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"bin": "./bin/gamut.mjs",
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@codecademy/gamut-icons": "9.57.9-alpha.
|
|
9
|
-
"@codecademy/gamut-illustrations": "0.58.15-alpha.
|
|
10
|
-
"@codecademy/gamut-patterns": "0.10.34-alpha.
|
|
11
|
-
"@codecademy/gamut-styles": "20.0.2-alpha.
|
|
12
|
-
"@codecademy/variance": "0.26.2-alpha.
|
|
8
|
+
"@codecademy/gamut-icons": "9.57.9-alpha.db0637.0",
|
|
9
|
+
"@codecademy/gamut-illustrations": "0.58.15-alpha.db0637.0",
|
|
10
|
+
"@codecademy/gamut-patterns": "0.10.34-alpha.db0637.0",
|
|
11
|
+
"@codecademy/gamut-styles": "20.0.2-alpha.db0637.0",
|
|
12
|
+
"@codecademy/variance": "0.26.2-alpha.db0637.0",
|
|
13
13
|
"@formatjs/intl-locale": "5.3.1",
|
|
14
14
|
"@react-aria/interactions": "3.25.0",
|
|
15
15
|
"@types/marked": "^4.0.8",
|