@ibis-design/css 0.7.2 → 0.8.1
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.
- package/README.md +22 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -89,7 +89,7 @@ Import the stylesheet for each component you render. Class names are stable acro
|
|
|
89
89
|
| `@ibis-design/css/components/tipIndicator.css` | `.ibis-tip-indicator` |
|
|
90
90
|
| `@ibis-design/css/components/tooltip.css` | `.ibis-tooltip` |
|
|
91
91
|
|
|
92
|
-
For
|
|
92
|
+
For ready-made components, use [@ibis-design/svelte](https://www.npmjs.com/package/@ibis-design/svelte) or [@ibis-design/react](https://www.npmjs.com/package/@ibis-design/react) instead of copying markup by hand.
|
|
93
93
|
|
|
94
94
|
---
|
|
95
95
|
|
|
@@ -317,15 +317,32 @@ Textarea uses the same `.ibis-input` structure; import `textarea.css` and use a
|
|
|
317
317
|
@import "@ibis-design/css/components/dropdown.css";
|
|
318
318
|
```
|
|
319
319
|
|
|
320
|
-
Pair with your own JS for open/close.
|
|
320
|
+
Pair with your own JS for open/close. Example structure (add `ibis-dropdown--open` and toggle `hidden` on the menu):
|
|
321
321
|
|
|
322
322
|
```html
|
|
323
|
-
<div class="ibis-dropdown">
|
|
324
|
-
|
|
323
|
+
<div class="ibis-dropdown ibis-dropdown--open" role="combobox" aria-expanded="true">
|
|
324
|
+
<button type="button" class="ibis-dropdown__trigger">
|
|
325
|
+
<div class="ibis-input ibis-input--md">
|
|
326
|
+
<label class="ibis-input__label">Country</label>
|
|
327
|
+
<div class="ibis-input__wrapper">
|
|
328
|
+
<div class="ibis-input__field-wrapper">
|
|
329
|
+
<input type="text" class="ibis-input__field" value="United States" readonly />
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</button>
|
|
334
|
+
<ul role="listbox" class="ibis-dropdown__menu">
|
|
335
|
+
<li role="option" aria-selected="true">
|
|
336
|
+
<button type="button" class="ibis-dropdown__item">United States</button>
|
|
337
|
+
</li>
|
|
338
|
+
<li role="option">
|
|
339
|
+
<button type="button" class="ibis-dropdown__item">Canada</button>
|
|
340
|
+
</li>
|
|
341
|
+
</ul>
|
|
325
342
|
</div>
|
|
326
343
|
```
|
|
327
344
|
|
|
328
|
-
For a full accessible select experience, prefer **@ibis-design/svelte** `Dropdown` or build menu behavior on `.ibis-dropdown-button` below.
|
|
345
|
+
For a full accessible select experience, prefer **@ibis-design/svelte** `Dropdown`, **@ibis-design/react** `Dropdown`, or build menu behavior on `.ibis-dropdown-button` below.
|
|
329
346
|
|
|
330
347
|
---
|
|
331
348
|
|