docs(chip): add chip group docs #2805

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

adamjohnson wants to merge 7 commits into main from docs/chip/add-chip-group-docs

elements/rh-chip/README.md

-Original file line number
+Diff line change
@@ Expand Up @@
     ## Usage
-    Individual `<rh-chip>`'s are wrapped by an `<rh-chip-group>` element.
+    Page authors can use `<rh-chip>` individually or alongside several standalone chips.
+    ```html
+    <rh-chip>Edge</rh-chip>
+    ```
+    ## Chip group
+    The `<rh-chip-group>` element adds an accessible label for the group and a "clear all" button.
     ```html
     <rh-chip-group>
@@ Expand All @@
     </rh-chip-group>
     ```
-    See the [official documentation](https://ux.redhat.com/elements/chip/code/) for more customization options.
+    If using chip group, users must modify the import to reference `rh-chip-group.js`.
+    See the [official documentation](https://ux.redhat.com/elements/chip/code/) for importing and customization options.

elements/rh-chip/docs/00-overview.md

-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,12 @@ @@
     - Indicate to users what selections they made
     - Represent a checkbox group with more emphasis
-    <div id="overview-image-description" class="visually-hidden">
-      Four chips in a chip group with the words "Filter by" as the legend at the start. The middle two chips are selected with a blue background and corresponding "X". The button to clear all selected chips is on the right.
-    </div>
+    ## Chip groups
+    When working with multiple related chips, use a [chip group](/elements/chip/demos/#demo-chip-group).
+    Chip groups are used to present multiple selectable options that users can toggle on or off, such as filters or preference settings. The chip group element:
+    - Groups chips together
+    - Provides an accessible label for the set
+    - Includes a “clear all” button to reset all selections at once

elements/rh-chip/docs/30-code.md

-Original file line number
+Diff line change
@@ -0,0 +1,11 @@
+    ## Importing chip vs. chip group
+    If using `<rh-chip-group>`, change the import from `rh-chip.js` to `rh-chip-group.js`:
+    ```diff rhcodeblock
+    - import '@rhds/elements/rh-chip/rh-chip.js';
+    + import '@rhds/elements/rh-chip/rh-chip-group.js';
+    ```
+    Users can import `rh-chip-group.js` to gain access to both elements. If you're only using chip, save some bytes by only importing `rh-chip.js`.

Provide feedback