From b60c21f1311c54bc3b722669d777da9198dd3b9a Mon Sep 17 00:00:00 2001 From: Marionne Patel <95588923+marionnegp@users.noreply.github.com> Date: Tue, 5 Nov 2024 01:02:56 -0500 Subject: [PATCH] docs(accordion): update best practices (#2029) * docs(accordion): update best practices * docs(accordion): fix image and add color-palette to examples * docs(accordion): add back width and height of images * docs(accordion): fix width-adjustment value --- elements/rh-accordion/docs/20-guidelines.md | 85 ++++++++++++++----- ...ordion-best-practices-mixing-themes-do.svg | 43 ++++++++++ ...dion-best-practices-mixing-themes-dont.svg | 49 +++++++++++ .../accordion-best-practices-one-panel-do.svg | 26 ++++++ ...ccordion-best-practices-one-panel-dont.svg | 15 ++++ ...ion-best-practices-text-readability-do.svg | 49 +++++++++++ ...n-best-practices-text-readability-dont.svg | 49 +++++++++++ 7 files changed, 294 insertions(+), 22 deletions(-) create mode 100644 elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg create mode 100644 elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg create mode 100644 elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg create mode 100644 elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg create mode 100644 elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg create mode 100644 elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg diff --git a/elements/rh-accordion/docs/20-guidelines.md b/elements/rh-accordion/docs/20-guidelines.md index 0d72e8496d..4d9634a89e 100644 --- a/elements/rh-accordion/docs/20-guidelines.md +++ b/elements/rh-accordion/docs/20-guidelines.md @@ -166,35 +166,76 @@ smaller. ## Best practices -### One panel -Do not display one panel only, use an expandable section instead. +### One panel - - Accordion having only one panel is incorrect usage - +
+ + + Two accordion panels + +

Use accordion in groups of two or more.

+
+ + + + One accordion panel + +

Do not display one panel only.

+
+
### Text readability -Text within panels should not exceed `750px` to maintain optimal readability. + + + Text in an expanded accordion has a limited width and does not fill wide accordion + - - Accordion with body text exceeding 750px wide which is incorrect usage - +

The text in a panel should be limited to a maximum width of 750px, which maintains optimal readability.

+
+ + + + Text in an expanded accordion fills wide accordion + + +

Do not allow text within panels to fill the entire width of a panel, if the text would exceed a width of 750px.

+
### Mixing themes -Do not use a dark theme accordion in a light theme environment and vice versa. +
+ + + Dark theme accordion against a dark background + +

An accordion group should match the theme of the container it’s in. This ensures that all of the text is visible and has adequate color contrast.

+
+ + + + Light theme accordion against a light background + +

Do not use a light theme accordion in a dark theme environment and vice versa because it may cause accessibility and usability issues.

+
+
- - Do not use a dark theme accordion in a light theme environment and vice versa - diff --git a/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg b/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg new file mode 100644 index 0000000000..c80ec218db --- /dev/null +++ b/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-do.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg b/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg new file mode 100644 index 0000000000..3548cbee33 --- /dev/null +++ b/elements/rh-accordion/docs/accordion-best-practices-mixing-themes-dont.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg b/elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg new file mode 100644 index 0000000000..1665df4241 --- /dev/null +++ b/elements/rh-accordion/docs/accordion-best-practices-one-panel-do.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg b/elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg new file mode 100644 index 0000000000..1b8dc825e7 --- /dev/null +++ b/elements/rh-accordion/docs/accordion-best-practices-one-panel-dont.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg b/elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg new file mode 100644 index 0000000000..4d7d57d6ff --- /dev/null +++ b/elements/rh-accordion/docs/accordion-best-practices-text-readability-do.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg b/elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg new file mode 100644 index 0000000000..fa895e5f35 --- /dev/null +++ b/elements/rh-accordion/docs/accordion-best-practices-text-readability-dont.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +