Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(accordion): updated docs (#1020)
* docs(accordion): move responsive design content from Styles to Guidelines * docs(accordion): started cleaning up accordion docs * docs(accordion): updated accordion docs * docs(accordion): updated docs * docs(accordion): updated tables * docs(accordion): Fixed broken image and extra image text * docs(accordion): fixed paths on accessibility images * docs(accordion): added kbd markup to accesisbility page's keyboard table * docs(accordion): added palette one to teo example images on guidelines page * docs(accordion): updated table column widths * docs(accordion): updated spacers to shortcode --------- Co-authored-by: marionnegp <mapatel@redhat.com>
- Loading branch information
1 parent
52f901f
commit 1a569a2
Showing
53 changed files
with
333 additions
and
211 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@rhds/elements": patch | ||
| --- | ||
|
|
||
| `<rh-accordion>`: corrected and updated custom elements manifest |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,115 @@ | ||
| {% section %} | ||
| ## Style | ||
| ## Style | ||
| Accordion panels include title text, a chevron icon, body text, and other content. When a panel is collapsed, only the top and bottom borders are visible. When a panel is expanded, all borders are visible including a thicker left border for emphasis. | ||
|
|
||
| Accordions can be used in light and dark themes. They consist of | ||
| vertically-stacked panels that are separated by a thin line when collapsed. | ||
| Every panel contains a section text label and a caret icon that rotates to | ||
| indicate if a panel is collapsed or expanded. When a panel is expanded, it | ||
| includes different styling that consists of an active border on the left and a | ||
| slight drop shadow, also used for a [Disclosure]({{ '/patterns/disclosure' | url | ||
| }}). | ||
| ### Anatomy | ||
| {% example palette="light", | ||
| alt="Anatomy of an accordion with lots of annotations pointing to various parts", | ||
| src="../accordion-anatomy.png" %} | ||
|
|
||
| 1) Collapsed panel | ||
| 2) Expanded panel | ||
| 3) Title | ||
| 4) Panel header region | ||
| 5) Caret | ||
| 6) Emphasis | ||
| 7) Content | ||
| 8) Panel body region | ||
| {.example-notes} | ||
|
|
||
| ### Sizes | ||
| There are two available sizes and the only difference is the title text size. You can use the Small size on large breakpoints, but not the Large size on small breakpoints due to the potential of long title text wrapping to more than two lines. | ||
|
|
||
| {% example palette="light", | ||
| width=872, | ||
| style="margin-block:var(--rh-space-2xl)", | ||
| alt="Expanded accordion panel with labels", | ||
| src="../accordion-style-1.svg" %} | ||
| alt="A large size accordion with text underneath saying ‘Large size’ and a small size accordion with text underneath saying ‘Small size’", | ||
| src="../accordion-sizes.png" %} | ||
|
|
||
| ## Theme | ||
|
|
||
| ## Theme | ||
| An accordion is available in both light and dark themes. The light theme expanded panel includes a box shadow, but the dark theme does not. | ||
| ### Light theme | ||
| {% example palette="light", | ||
| width=872, | ||
| style="margin-block:var(--rh-space-2xl)", | ||
| alt="Expanded accordion panel with labels", | ||
| src="../accordion-theme-1.svg" %} | ||
| alt="Light theme accordion with an expanded panel", | ||
| src="../accordion-theme-light.png" %} | ||
|
|
||
| ### Dark theme | ||
| {% example palette="darkest", | ||
| width=872, | ||
| style="margin-block:var(--rh-space-2xl)", | ||
| alt="Expanded accordion panel with labels", | ||
| src="../accordion-theme-2.svg" %} | ||
|
|
||
| {% endsection %} | ||
| alt="Dark theme accordion with an expanded panel", | ||
| src="../accordion-theme-dark.png" %} | ||
|
|
||
| {% section %} | ||
| ## Responsive design | ||
| ## Configuration | ||
| An expanded panel does not have a maximum height, but it may scroll if constrained by vertical space. The width of an accordion varies based on content and page layout. Title text and icons are horizontally aligned. | ||
|
|
||
| Accordions work well when used on both large and small screens. | ||
| {% example palette="light", | ||
| alt="How an accordion is constructed showing alignment, space, scrolling, and width details", | ||
| src="../accordion-configuration.png" %} | ||
|
|
||
| ### Breakpoints | ||
| ### Nested panels | ||
| Panels can be nested to help organize complex or granular sections of content. | ||
|
|
||
| Accordions can be used on smaller screens, but the limited screen space makes | ||
| content taller which might make users scroll more, so be careful about how much | ||
| content is included. | ||
| {% example palette="light", | ||
| alt="An accordion with an expanded panel and a nested expanded panel", | ||
| src="../accordion-nested-panels.png" %} | ||
|
|
||
| ### Desktop | ||
| ### Stacked panels | ||
| Multiple panels can be expanded simultaneously even when nested. | ||
|
|
||
|  {style="margin-block:var(--rh-space-md);"} | ||
| {% example palette="light", | ||
| alt="An accordion with one collapsed panel on top and two stacked expanded panels below", | ||
| src="../accordion-stacked-panels.png" %} | ||
|
|
||
| ### Tablet | ||
| ## Space | ||
| {% example palette="light", | ||
| alt="Accordion spacing within panels and in between elements like titles, body text, rules, and icons", | ||
| src="../accordion-space.png" %} | ||
|
|
||
| {% spacerTokensTable | ||
| headline="", | ||
| caption='', | ||
| headingLevel="4", | ||
| tokens="--rh-space-lg, --rh-space-xl, --rh-space-3xl" %} | ||
| {% endspacerTokensTable %} | ||
|
|
||
| ## Interaction states | ||
| Interaction states are visual representations used to communicate the status of an element or pattern. | ||
|
|
||
| ### Hover | ||
| {% example palette="light", | ||
| alt="Light theme accordion hover state examples", | ||
| src="../accordion-hover-theme-light.png" %} | ||
|
|
||
|  {style="margin-block:var(--rh-space-md);--inline-img-max-width: 768px;"} | ||
| {% example palette="darkest", | ||
| alt="Dark theme accordion hover state example", | ||
| src="../accordion-hover-theme-dark.png" %} | ||
|
|
||
| ### Mobile | ||
| | Property {style="width: 33%" } | Light theme {style="width: 33%" } | Dark theme | | ||
| | ------------------------------ | --------------------------------- | ---------- | | ||
| | Color - panel header | `#F2F2F2` | `#292929` | | ||
|
|
||
|  {style="margin-block:var(--rh-space-md);--inline-img-max-width: 352px;"} | ||
| ### Focus | ||
| {% example palette="light", | ||
| alt="Light theme accordion focus state examples", | ||
| src="../accordion-focus-theme-light.png" %} | ||
|
|
||
| {% endsection %} | ||
| {% example palette="darkest", | ||
| alt="Dark theme accordion focus state example", | ||
| src="../accordion-focus-theme-dark.png" %} | ||
|
|
||
| {% section %} | ||
| ## Spacing | ||
| | Property {style="width: 33%" } | Light theme {style="width: 33%" } | Dark theme | | ||
| | ------------------------------ | --------------------------------- | ---------- | | ||
| | Color - panel header | `#F2F2F2` | `#292929` | | ||
| | Color - focus ring | `#0066CC` | `#73BCF7` | | ||
|
|
||
| Accordions use [PatternFly 4 spacers][spacers] to define spacing values between | ||
| elements. | ||
|
|
||
|  {style="margin-block-start:var(--rh-space-2xl);"} | ||
| ### Active | ||
| {% example palette="light", | ||
| alt="Light theme accordion active state examples", | ||
| src="../accordion-active-theme-light.png" %} | ||
|
|
||
|  {style="margin-block:var(--rh-space-3xl);"} | ||
| {% example palette="darkest", | ||
| alt="Dark theme accordion active state example", | ||
| src="../accordion-active-theme-dark.png" %} | ||
|
|
||
| [spacers]: https://www.patternfly.org/v4/guidelines/spacers | ||
| {% endsection %} | ||
| | Property {style="width: 33%" } | Light theme {style="width: 33%" } | Dark theme | | ||
| | ------------------------------ | --------------------------------- | ---------- | | ||
| | Color - panel header | `#F2F2F2` | `#292929` | | ||
| | Color - focus ring | `#0066CC` | `#73BCF7` | |
Oops, something went wrong.