From 962e77dfefdcd529355480699344ef07f2408f7f Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Mon, 19 Aug 2024 15:40:33 -0700 Subject: [PATCH 01/33] Adds details component --- css/src/components/details.scss | 29 +++++++++++ css/src/components/form/select.scss | 20 ++------ css/src/components/index.scss | 1 + css/src/mixins/chevron.scss | 27 +++++++++++ css/src/mixins/index.scss | 1 + site/src/components/details.md | 75 +++++++++++++++++++++++++++++ 6 files changed, 136 insertions(+), 17 deletions(-) create mode 100644 css/src/components/details.scss create mode 100644 css/src/mixins/chevron.scss create mode 100644 site/src/components/details.md diff --git a/css/src/components/details.scss b/css/src/components/details.scss new file mode 100644 index 000000000..7447d06a1 --- /dev/null +++ b/css/src/components/details.scss @@ -0,0 +1,29 @@ +$details-color: $text !default; +$details-spacing-default: $spacer-5 !default; + +details { + padding: $spacer-3; +} + +summary { + display: flex; + cursor: pointer; + color: $details-color; +} + +summary::before { + display: flex; + align-self: center; + margin-inline-end: calc(($control-padding-horizontal + $chevron-arrow-actual-width)); + @include chevron-right; +} + +details[open] { + summary { + margin-block-end: $details-spacing-default; + } + + summary::before { + transform: rotate(-45deg) translate(calc($chevron-arrow-size / 2), 0); + } +} diff --git a/css/src/components/form/select.scss b/css/src/components/form/select.scss index 65be6dd95..f58332a63 100644 --- a/css/src/components/form/select.scss +++ b/css/src/components/form/select.scss @@ -19,10 +19,6 @@ $select-success-border-color: $success !default; $select-focus-box-shadow-size: 0 0.0625rem 0 0 !default; -$select-arrow-size: 0.525em !default; -$select-arrow-border-width: 1px !default; -$select-arrow-actual-width: 0.75em !default; - .select { position: relative; font-size: $control-font-size; @@ -72,24 +68,14 @@ $select-arrow-actual-width: 0.75em !default; &:not(.select-multiple) { select { - padding-inline-end: calc($control-padding-horizontal + $select-arrow-actual-width); + padding-inline-end: calc($control-padding-horizontal + $chevron-arrow-actual-width); } &::after { display: block; position: absolute; - inset-block-start: calc(50% - $select-arrow-actual-width / 2); - width: $select-arrow-size; - height: $select-arrow-size; - transform: rotate(-45deg); - transform-origin: center; - border: $select-arrow-border-width solid $select-color; - border-block-start: 0; - border-inline-end: 0; - pointer-events: none; - content: ' '; - z-index: $zindex-active; - inset-inline-end: $control-padding-horizontal; + inset-block-start: calc(50% - $chevron-arrow-actual-width / 2); + @include chevron-down; } &.select-disabled::after { diff --git a/css/src/components/index.scss b/css/src/components/index.scss index 7b97e4d5b..958e24f93 100644 --- a/css/src/components/index.scss +++ b/css/src/components/index.scss @@ -4,6 +4,7 @@ @import './button.scss'; @import './buttons.scss'; @import './card.scss'; +@import './details.scss'; @import './button-reset.scss'; @import './form/index.scss'; @import './hero.scss'; diff --git a/css/src/mixins/chevron.scss b/css/src/mixins/chevron.scss new file mode 100644 index 000000000..f5294116e --- /dev/null +++ b/css/src/mixins/chevron.scss @@ -0,0 +1,27 @@ +$chevron-color: $text !default; +$chevron-arrow-size: 0.525em !default; +$chevron-arrow-border-width: 1px !default; +$chevron-arrow-actual-width: 0.75em !default; + +%chevron { + width: $chevron-arrow-size; + height: $chevron-arrow-size; + transform-origin: center; + border: $chevron-arrow-border-width solid $chevron-color; + border-block-start: 0; + border-inline-end: 0; + pointer-events: none; + content: ' '; + z-index: $zindex-active; + inset-inline-end: $control-padding-horizontal; +} + +@mixin chevron-right { + @extend %chevron; + transform: rotate(-135deg); +} + +@mixin chevron-down { + @extend %chevron; + transform: rotate(-45deg); +} diff --git a/css/src/mixins/index.scss b/css/src/mixins/index.scss index 97cde7ac5..f29a8ff45 100644 --- a/css/src/mixins/index.scss +++ b/css/src/mixins/index.scss @@ -3,6 +3,7 @@ @import './colors.scss'; @import './control.scss'; @import './center.scss'; +@import './chevron.scss'; @import './focus.scss'; @import './gradient.scss'; @import './loader.scss'; diff --git a/site/src/components/details.md b/site/src/components/details.md new file mode 100644 index 000000000..868602322 --- /dev/null +++ b/site/src/components/details.md @@ -0,0 +1,75 @@ +--- +title: Details +description: The details component in the Atlas Design System +template: standard +# need design to create +# figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Fnode-id%3D1488%253A35182 +classType: Component +classPrefixes: + - details +--- + +# Details + +The Details element represents a disclosure widget, where information is only visible when the element is toggled to an "open" state. A Summary or label must be provided using the `` element. + +## Usage + +Here is an example of a standard details usage paired with a summary. By default details elements are closed on page load and toggle open and closed when the user clicks the widget. + +```html +
+ Details header 1 +

Details panel 1

+
+
+ Details header 2 +

Details panel 2

+
+
+ Details header 3 +

Details panel 3

+
+``` + +## Attributes + +### Open + +There is an option to have the `
` element load in the expanded state by adding the `open` attribute. + +```html +
+ Details header 1 +

Details panel 1

+
+
+ Details header 2 +

Details panel 2

+
+
+ Details header 3 +

Details panel 3

+
+``` + +### Name + +There is an option to group multiple `
` elements, with only one open at a time, using the `name` attribute. This behavior is also known as an accordion. + +```html +
+ Details header 1 +

Details panel 1

+
+
+ Details header 2 +

Details panel 2

+
+
+ Details header 3 +

Details panel 3

+
+``` + +For stylized accordion patterns used on Learn, visit the [Accordion pattern page](../patterns/accordion.md). From a056a50fd2efcc259848d5f5ca22dbd14e74ef29 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Mon, 19 Aug 2024 15:41:38 -0700 Subject: [PATCH 02/33] Adds Accordion page to patterns --- site/src/patterns/accordion.md | 73 ++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 site/src/patterns/accordion.md diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md new file mode 100644 index 000000000..0a00d936e --- /dev/null +++ b/site/src/patterns/accordion.md @@ -0,0 +1,73 @@ +--- +title: Accordion +description: Accordion patterns in the Atlas Design System +template: standard +figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwKIbxNQ2kXnglOPc2cDE1y%2FFINAL-REBRAND-DESIGNS%3Fnode-id%3D70%253A2398 +--- + +# Accordion patterns + +Because the `details` component has so many possible permutations, it can be helpful to provide examples of certain styles. + +## Accordion + +This accordion uses the `open` attribute to expand a designated panel on page load. Grouping `
` elements together using the `name` attribute, prevents more than 1 panel from being open at a time. Atomics classes are used to style the accordion `
` and `summary` elements. + +```html +
+ Advanced Design Techniques with Microsoft Tools +

+ Advanced features in Microsoft Azure, optimizing engineering workflows, and leveraging cloud + services for engineering solutions. +

+

Hours to milestone completion 14

+ + + +
+
+ Prepare data for analysis with Power BI +

+ You'll learn how to use Power Query to extract data from different data sources, choose a + storage mode, and connectivity type. You'll also learn to profile, clean, and load data into + Power BI before you model your data. +

+

Hours to milestone completion 7

+ + +
+``` From 7493dddbc60dea30d95918a18faed2342e87e4b3 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Mon, 19 Aug 2024 15:42:02 -0700 Subject: [PATCH 03/33] Adds details and accordion pages to test coverage --- integration/config/page.ts | 2 ++ integration/tests/accessibility.spec.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/integration/config/page.ts b/integration/config/page.ts index cf5fd099c..5b6a53b62 100644 --- a/integration/config/page.ts +++ b/integration/config/page.ts @@ -32,6 +32,7 @@ export const pages: LocalPageConfig[] = [ { pathname: '/components/breadcrumbs.html', name: 'Components/breadcrumbs', routes }, { pathname: '/components/button.html', name: 'Components/button', routes }, { pathname: '/components/checkbox.html', name: 'Components/checkbox', routes }, + { pathname: '/components/details.html', name: 'Components/details', routes }, { pathname: '/components/dismiss.html', name: 'Components/dismiss', routes }, { pathname: '/components/help.html', name: 'Components/help', routes }, { pathname: '/components/icon.html', name: 'Components/icon', routes }, @@ -48,6 +49,7 @@ export const pages: LocalPageConfig[] = [ { pathname: '/components/textarea.html', name: 'Components/textarea', routes }, { pathname: '/components/toggle.html', name: 'Components/toggle', routes }, { pathname: '/patterns/article-header.html', name: 'Patterns/article-header', routes }, + { pathname: '/patterns/accordion.html', name: 'Patterns/accordion', routes }, { pathname: '/patterns/form-validation.html', name: 'Patterns/form-validation', routes } ]; diff --git a/integration/tests/accessibility.spec.ts b/integration/tests/accessibility.spec.ts index de01b66fc..67ae57d4c 100644 --- a/integration/tests/accessibility.spec.ts +++ b/integration/tests/accessibility.spec.ts @@ -21,6 +21,7 @@ const pathnames = [ '/components/banner.html', '/components/breadcrumbs.html', '/components/button.html', + '/components/details.html', '/components/card.html', '/components/chat.html', '/components/checkbox.html', @@ -52,6 +53,7 @@ const pathnames = [ '/components/textarea.html', '/components/toggle.html', '/patterns/article-header.html', + '/patterns/accordion.html', '/patterns/chat.html', '/tokens/overview.html', '/tokens/animation.html', From 75dd6154275fcb59c367cd9caa05ad67b9a4e66a Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Mon, 19 Aug 2024 15:45:56 -0700 Subject: [PATCH 04/33] Adds changeset --- .changeset/smart-lions-sniff.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/smart-lions-sniff.md diff --git a/.changeset/smart-lions-sniff.md b/.changeset/smart-lions-sniff.md new file mode 100644 index 000000000..636acb6a1 --- /dev/null +++ b/.changeset/smart-lions-sniff.md @@ -0,0 +1,7 @@ +--- +'@microsoft/atlas-integration': minor +'@microsoft/atlas-css': minor +'@microsoft/atlas-site': minor +--- + +Adds details component, accordion pattern and refactors select to use new chevron mixin From 347e20b69985603b170516c60495eefb4e90902e Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Mon, 19 Aug 2024 15:57:37 -0700 Subject: [PATCH 05/33] Stylelint fixes --- css/src/components/details.scss | 22 ++++++++++++---------- css/src/components/form/select.scss | 3 ++- css/src/mixins/chevron.scss | 2 ++ 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/css/src/components/details.scss b/css/src/components/details.scss index 7447d06a1..90ecfdc53 100644 --- a/css/src/components/details.scss +++ b/css/src/components/details.scss @@ -1,3 +1,4 @@ +/* stylelint-disable selector-no-qualifying-type */ $details-color: $text !default; $details-spacing-default: $spacer-5 !default; @@ -7,23 +8,24 @@ details { summary { display: flex; - cursor: pointer; color: $details-color; -} + cursor: pointer; -summary::before { - display: flex; - align-self: center; - margin-inline-end: calc(($control-padding-horizontal + $chevron-arrow-actual-width)); - @include chevron-right; + &::before { + @include chevron-right; + + display: flex; + align-self: center; + margin-inline-end: calc(($control-padding-horizontal + $chevron-arrow-actual-width)); + } } details[open] { summary { margin-block-end: $details-spacing-default; - } - summary::before { - transform: rotate(-45deg) translate(calc($chevron-arrow-size / 2), 0); + &::before { + transform: rotate(-45deg) translate(calc($chevron-arrow-size / 2), 0); + } } } diff --git a/css/src/components/form/select.scss b/css/src/components/form/select.scss index f58332a63..a759b5a02 100644 --- a/css/src/components/form/select.scss +++ b/css/src/components/form/select.scss @@ -72,10 +72,11 @@ $select-focus-box-shadow-size: 0 0.0625rem 0 0 !default; } &::after { + @include chevron-down; + display: block; position: absolute; inset-block-start: calc(50% - $chevron-arrow-actual-width / 2); - @include chevron-down; } &.select-disabled::after { diff --git a/css/src/mixins/chevron.scss b/css/src/mixins/chevron.scss index f5294116e..eded123f1 100644 --- a/css/src/mixins/chevron.scss +++ b/css/src/mixins/chevron.scss @@ -18,10 +18,12 @@ $chevron-arrow-actual-width: 0.75em !default; @mixin chevron-right { @extend %chevron; + transform: rotate(-135deg); } @mixin chevron-down { @extend %chevron; + transform: rotate(-45deg); } From 23c5985e6a73200a840c1a9ab4b4064ef8698e54 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Mon, 19 Aug 2024 16:39:29 -0700 Subject: [PATCH 06/33] Adds margin to example accordion pattern card content --- site/src/patterns/accordion.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index 0a00d936e..d2da854fd 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -2,7 +2,7 @@ title: Accordion description: Accordion patterns in the Atlas Design System template: standard -figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwKIbxNQ2kXnglOPc2cDE1y%2FFINAL-REBRAND-DESIGNS%3Fnode-id%3D70%253A2398 +# figmaEmbed: https://www.figma.com/design/a5gqz0qtUMAKF36lNS6b61/Adaptive-Learning---Phase-I-(2024)?node-id=2581-106784&t=lkaa1re80XFTF9O3-0 --- # Accordion patterns @@ -31,7 +31,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo Extend Microsoft 365 — Fundamental -
+

Learning Path

Introduction to Azure Open AI From 31f548e8ae584c35f84718bc276a0c2d1212002e Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Tue, 20 Aug 2024 11:32:20 -0700 Subject: [PATCH 07/33] Updates to class scope, adds sizes --- css/src/components/details.scss | 106 ++++++++++++++++++++++++++------ site/src/components/details.md | 45 ++++++++++---- site/src/patterns/accordion.md | 6 +- 3 files changed, 123 insertions(+), 34 deletions(-) diff --git a/css/src/components/details.scss b/css/src/components/details.scss index 90ecfdc53..2c89d5919 100644 --- a/css/src/components/details.scss +++ b/css/src/components/details.scss @@ -1,31 +1,101 @@ /* stylelint-disable selector-no-qualifying-type */ $details-color: $text !default; -$details-spacing-default: $spacer-5 !default; -details { - padding: $spacer-3; -} +$details-font-size: $font-size-7 !default; +$details-font-size-sm: $font-size-8 !default; +$details-font-size-lg: $font-size-6 !default; -summary { - display: flex; - color: $details-color; - cursor: pointer; +$details-spacing-default: $spacer-4 !default; +$details-spacing-sm: $spacer-3 !default; +$details-spacing-lg: $spacer-5 !default; - &::before { - @include chevron-right; +.details { + font-size: $details-font-size; + line-height: 1.5; + summary { display: flex; - align-self: center; - margin-inline-end: calc(($control-padding-horizontal + $chevron-arrow-actual-width)); + color: $details-color; + cursor: pointer; + padding-block: $details-spacing-default; + + &::before { + @include chevron-right; + + display: flex; + align-self: center; + margin-inline-end: calc(($control-padding-horizontal + $chevron-arrow-actual-width)); + } } -} -details[open] { - summary { - margin-block-end: $details-spacing-default; + &[class*='background-color-'] summary { + padding-inline: $details-spacing-default; + } - &::before { - transform: rotate(-45deg) translate(calc($chevron-arrow-size / 2), 0); + &[open] { + padding-block-end: $details-spacing-default; + + > :not(summary) { + margin-inline-start: $details-spacing-default; + margin-inline-end: $details-spacing-default; + } + + summary { + margin-block-end: $details-spacing-default; + + &::before { + transform: rotate(-45deg) translate(calc($chevron-arrow-size / 2), 0); + } + } + } + + &#{'-lg'} { + font-size: $details-font-size-lg; + + summary { + padding-block: $details-spacing-lg; + } + + &[class*='background-color-'] summary { + padding-inline: $details-spacing-lg; + } + + &[open] { + padding-block-end: $details-spacing-lg; + + > :not(summary) { + margin-inline-start: $details-spacing-lg; + margin-inline-end: $details-spacing-lg; + } + + summary { + margin-block-end: $details-spacing-lg; + } + } + } + + &#{'-sm'} { + font-size: $details-font-size-sm; + + summary { + padding-block: $details-spacing-sm; + } + + &[class*='background-color-'] summary { + padding-inline: $details-spacing-sm; + } + + &[open] { + padding-block-end: $details-spacing-sm; + + > :not(summary) { + margin-inline-start: $details-spacing-sm; + margin-inline-end: $details-spacing-sm; + } + + summary { + margin-block-end: $details-spacing-sm; + } } } } diff --git a/site/src/components/details.md b/site/src/components/details.md index 868602322..e8c2576e6 100644 --- a/site/src/components/details.md +++ b/site/src/components/details.md @@ -11,22 +11,22 @@ classPrefixes: # Details -The Details element represents a disclosure widget, where information is only visible when the element is toggled to an "open" state. A Summary or label must be provided using the `` element. +The Details component contains a disclosure widget, where information is only visible when the element is toggled to an "open" state. A Summary or label must be provided using the `` element. ## Usage -Here is an example of a standard details usage paired with a summary. By default details elements are closed on page load and toggle open and closed when the user clicks the widget. +Here is an example of a standard `.details` usage paired with a ``. By default details elements are closed on page load and toggle open or closed when the user clicks the summary. ```html -
+
Details header 1

Details panel 1

-
+
Details header 2

Details panel 2

-
+
Details header 3

Details panel 3

@@ -36,18 +36,18 @@ Here is an example of a standard details usage paired with a summary. By default ### Open -There is an option to have the `
` element load in the expanded state by adding the `open` attribute. +There is an option to have the details component load in the expanded state by adding the `open` attribute. ```html -
+
Details header 1

Details panel 1

-
+
Details header 2

Details panel 2

-
+
Details header 3

Details panel 3

@@ -55,21 +55,40 @@ There is an option to have the `
` element load in the expanded state by ### Name -There is an option to group multiple `
` elements, with only one open at a time, using the `name` attribute. This behavior is also known as an accordion. +Using the `name` attribute, there is an option to group multiple details components as an accordion, which allows only one open panel at a time. ```html -
+
Details header 1

Details panel 1

-
+
Details header 2

Details panel 2

-
+
Details header 3

Details panel 3

``` For stylized accordion patterns used on Learn, visit the [Accordion pattern page](../patterns/accordion.md). + +### Sizes + +`select-sm`/`select-lg` makes input a little bigger or smaller than the default. + +```html +
+ Details header 1 +

Details panel 1

+
+
+ Details header 2 +

Details panel 2

+
+
+ Details header 3 +

Details panel 3

+
+``` diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index d2da854fd..49822a467 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -11,13 +11,13 @@ Because the `details` component has so many possible permutations, it can be hel ## Accordion -This accordion uses the `open` attribute to expand a designated panel on page load. Grouping `
` elements together using the `name` attribute, prevents more than 1 panel from being open at a time. Atomics classes are used to style the accordion `
` and `summary` elements. +This accordion uses the `open` attribute to expand a designated panel on page load. Grouping `.details` components together using the `name` attribute, prevents more than 1 panel from being open at a time. Atomics classes are used to style the accordion `
` and `summary` elements. ```html
Advanced Design Techniques with Microsoft Tools

@@ -46,7 +46,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo

Prepare data for analysis with Power BI

From 0c8aa43f90a68ddb0633f16b2bb80386572ce8cd Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Tue, 20 Aug 2024 16:25:01 -0700 Subject: [PATCH 08/33] Adds .details-content container and styles, adds .details pattern --- css/src/components/details.scss | 105 +++++++----------- site/src/components/details.md | 48 ++++++--- site/src/patterns/accordion.md | 182 +++++++++++++++++++++++++------- 3 files changed, 218 insertions(+), 117 deletions(-) diff --git a/css/src/components/details.scss b/css/src/components/details.scss index 2c89d5919..03acfdd7b 100644 --- a/css/src/components/details.scss +++ b/css/src/components/details.scss @@ -9,10 +9,39 @@ $details-spacing-default: $spacer-4 !default; $details-spacing-sm: $spacer-3 !default; $details-spacing-lg: $spacer-5 !default; +@mixin details-size-adjuster($font-size, $padding-size) { + font-size: $font-size; + + summary { + padding-block: $padding-size; + } + + &[class*='background-color-'] { + summary, + .details-content { + padding-inline: $padding-size; + } + } + + &[open] { + .details-content { + padding: $padding-size; + } + + summary { + margin-block-end: $padding-size; + } + } +} + .details { font-size: $details-font-size; line-height: 1.5; + .details-content { + padding-block: $details-spacing-default; + } + summary { display: flex; color: $details-color; @@ -28,74 +57,22 @@ $details-spacing-lg: $spacer-5 !default; } } - &[class*='background-color-'] summary { - padding-inline: $details-spacing-default; - } - - &[open] { - padding-block-end: $details-spacing-default; - - > :not(summary) { - margin-inline-start: $details-spacing-default; - margin-inline-end: $details-spacing-default; - } - - summary { - margin-block-end: $details-spacing-default; - - &::before { - transform: rotate(-45deg) translate(calc($chevron-arrow-size / 2), 0); - } + &[class*='background-color-'] { + summary, + .details-content { + padding-inline: $details-spacing-default; } } - &#{'-lg'} { - font-size: $details-font-size-lg; - - summary { - padding-block: $details-spacing-lg; - } - - &[class*='background-color-'] summary { - padding-inline: $details-spacing-lg; - } - - &[open] { - padding-block-end: $details-spacing-lg; - - > :not(summary) { - margin-inline-start: $details-spacing-lg; - margin-inline-end: $details-spacing-lg; - } - - summary { - margin-block-end: $details-spacing-lg; - } - } + &[open] summary::before { + transform: rotate(-45deg) translate(calc($chevron-arrow-size / 2), 0); } +} - &#{'-sm'} { - font-size: $details-font-size-sm; - - summary { - padding-block: $details-spacing-sm; - } - - &[class*='background-color-'] summary { - padding-inline: $details-spacing-sm; - } - - &[open] { - padding-block-end: $details-spacing-sm; - - > :not(summary) { - margin-inline-start: $details-spacing-sm; - margin-inline-end: $details-spacing-sm; - } +.details-lg { + @include details-size-adjuster($details-font-size-lg, $details-spacing-lg); +} - summary { - margin-block-end: $details-spacing-sm; - } - } - } +.details-sm { + @include details-size-adjuster($details-font-size-sm, $details-spacing-sm); } diff --git a/site/src/components/details.md b/site/src/components/details.md index e8c2576e6..94dae1891 100644 --- a/site/src/components/details.md +++ b/site/src/components/details.md @@ -20,15 +20,21 @@ Here is an example of a standard `.details` usage paired with a `

`. By ```html
Details header 1 -

Details panel 1

+
+

Details panel 1

+
Details header 2 -

Details panel 2

+
+

Details panel 2

+
Details header 3 -

Details panel 3

+
+

Details panel 3

+
``` @@ -41,15 +47,21 @@ There is an option to have the details component load in the expanded state by a ```html
Details header 1 -

Details panel 1

+
+

Details panel 1

+
Details header 2 -

Details panel 2

+
+

Details panel 2

+
Details header 3 -

Details panel 3

+
+

Details panel 3

+
``` @@ -60,15 +72,21 @@ Using the `name` attribute, there is an option to group multiple details compone ```html
Details header 1 -

Details panel 1

+
+

Details panel 1

+
Details header 2 -

Details panel 2

+
+

Details panel 2

+
Details header 3 -

Details panel 3

+
+

Details panel 3

+
``` @@ -81,14 +99,20 @@ For stylized accordion patterns used on Learn, visit the [Accordion pattern page ```html
Details header 1 -

Details panel 1

+
+

Details panel 1

+
Details header 2 -

Details panel 2

+
+

Details panel 2

+
Details header 3 -

Details panel 3

+
+

Details panel 3

+
``` diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index 49822a467..aa5f9f3a6 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -20,54 +20,154 @@ This accordion uses the `open` attribute to expand a designated panel on page lo class="details background-color-body-accent border-radius margin-block-xxs" > Advanced Design Techniques with Microsoft Tools -

- Advanced features in Microsoft Azure, optimizing engineering workflows, and leveraging cloud - services for engineering solutions. -

-

Hours to milestone completion 14

- - - +
+

+ Advanced features in Microsoft Azure, optimizing engineering workflows, and leveraging cloud + services for engineering solutions. +

+

Hours to milestone completion 14

+ + + +
Prepare data for analysis with Power BI -

- You'll learn how to use Power Query to extract data from different data sources, choose a - storage mode, and connectivity type. You'll also learn to profile, clean, and load data into - Power BI before you model your data. -

-

Hours to milestone completion 7

-
+``` + +```html +
+ +
+

Advanced Design Techniques with Microsoft Tools

+

lorem ipsum

-
-
+
+

+ Advanced features in Microsoft Azure, optimizing engineering workflows, and leveraging cloud + services for engineering solutions. +

+

Hours to milestone completion 14

+ + + +
+ +
+ +
+

Advanced Design Techniques with Microsoft Tools

+

lorem ipsum

+
+ +
+

+ You'll learn how to use Power Query to extract data from different data sources, choose a + storage mode, and connectivity type. You'll also learn to profile, clean, and load data into + Power BI before you model your data. +

+

Hours to milestone completion 7

+ + +
+
+
+ +
+

Advanced Design Techniques with Microsoft Tools

+

lorem ipsum

- + +
+

+ You'll learn how to use Power Query to extract data from different data sources, choose a + storage mode, and connectivity type. You'll also learn to profile, clean, and load data into + Power BI before you model your data. +

+

Hours to milestone completion 7

+ + +
``` From cede0ecaed5d61390dc798638a7c9ca8344ad024 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Wed, 21 Aug 2024 11:33:22 -0700 Subject: [PATCH 09/33] Renames details to accordion, adds right chevron location option, absolutely positions chevron --- css/src/components/accordion.scss | 126 ++++++++++++++++++++++++++ css/src/components/details.scss | 78 ----------------- css/src/components/index.scss | 2 +- site/src/components/accordion.md | 135 ++++++++++++++++++++++++++++ site/src/components/details.md | 118 ------------------------- site/src/patterns/accordion.md | 141 ++++++++++++++++++++++++------ 6 files changed, 378 insertions(+), 222 deletions(-) create mode 100644 css/src/components/accordion.scss delete mode 100644 css/src/components/details.scss create mode 100644 site/src/components/accordion.md delete mode 100644 site/src/components/details.md diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss new file mode 100644 index 000000000..5a1cc281a --- /dev/null +++ b/css/src/components/accordion.scss @@ -0,0 +1,126 @@ +/* stylelint-disable selector-no-qualifying-type */ +$accordion-font-size: $font-size-7 !default; +$accordion-font-size-sm: $font-size-8 !default; +$accordion-font-size-lg: $font-size-6 !default; + +$accordion-spacing-sm: $spacer-3 !default; +$accordion-spacing-md: $spacer-4 !default; +$accordion-spacing-lg: $spacer-5 !default; +$accordion-spacing-bg-offset-sm: $spacer-7 !default; +$accordion-spacing-bg-offset-md: $spacer-8 !default; +$accordion-spacing-bg-offset-lg: $spacer-9 !default; + +@mixin accordion-size-adjuster($font-size, $padding-size) { + font-size: $font-size; + + .accordion-content, + summary { + padding-block: $padding-size; + + &:not(.accordion-icon-end)::before, + &.accordion-icon-end::after { + top: calc($control-padding-horizontal + $padding-size); + } + + &.accordion-icon-end::before { + left: -calc($padding-size); + } + } + + &[class*='background-color-'] { + summary, + .accordion-content { + padding-inline: $padding-size; + } + + summary:not(.accordion-icon-end) { + padding-inline-start: calc($padding-size + $chevron-arrow-actual-width); + &::before { + left: $padding-size; + } + } + + &.accordion-icon-end::after { + right: $padding-size; + } + } + + .accordion-content[class*='background-color-'] { + padding-inline: $padding-size; + } +} + +.accordion { + font-size: $accordion-font-size; + line-height: 1.5; + + .accordion-content, + summary { + padding-block: $accordion-spacing-md; + } + + summary { + display: block; + position: relative; + cursor: pointer; + + &:not(.accordion-icon-end) { + padding-inline-start: $accordion-spacing-bg-offset-sm; + + &::before { + @include chevron-right; + + position: absolute; + top: calc($control-padding-horizontal + $accordion-spacing-md); + left: 0; + transition: transform 0.1s; + } + } + + &.accordion-icon-end::after { + @include chevron-down; + + position: absolute; + top: calc($control-padding-horizontal + $accordion-spacing-md); + transition: transform 0.1s; + } + } + + &[class*='background-color-'] { + summary, + .accordion-content { + padding-inline: $accordion-spacing-md; + } + + summary:not(.accordion-icon-end) { + padding-inline-start: $accordion-spacing-bg-offset-md; + &::before { + left: $accordion-spacing-md; + } + } + + &.accordion-icon-end { + padding-inline-end: calc(($control-padding-horizontal + $chevron-arrow-actual-width)); + } + } + + &[open] { + summary:not(.accordion-icon-end)::before { + // chevron-down + transform: rotate(-45deg) translate(calc($chevron-arrow-size / 2), 0); + } + + summary.accordion-icon-end::after { + //chevron-up + transform: rotate(-225deg); + } + } +} + +.accordion-lg { + @include accordion-size-adjuster($accordion-font-size-lg, $accordion-spacing-lg); +} + +.accordion-sm { + @include accordion-size-adjuster($accordion-font-size-sm, $accordion-spacing-sm); +} diff --git a/css/src/components/details.scss b/css/src/components/details.scss deleted file mode 100644 index 03acfdd7b..000000000 --- a/css/src/components/details.scss +++ /dev/null @@ -1,78 +0,0 @@ -/* stylelint-disable selector-no-qualifying-type */ -$details-color: $text !default; - -$details-font-size: $font-size-7 !default; -$details-font-size-sm: $font-size-8 !default; -$details-font-size-lg: $font-size-6 !default; - -$details-spacing-default: $spacer-4 !default; -$details-spacing-sm: $spacer-3 !default; -$details-spacing-lg: $spacer-5 !default; - -@mixin details-size-adjuster($font-size, $padding-size) { - font-size: $font-size; - - summary { - padding-block: $padding-size; - } - - &[class*='background-color-'] { - summary, - .details-content { - padding-inline: $padding-size; - } - } - - &[open] { - .details-content { - padding: $padding-size; - } - - summary { - margin-block-end: $padding-size; - } - } -} - -.details { - font-size: $details-font-size; - line-height: 1.5; - - .details-content { - padding-block: $details-spacing-default; - } - - summary { - display: flex; - color: $details-color; - cursor: pointer; - padding-block: $details-spacing-default; - - &::before { - @include chevron-right; - - display: flex; - align-self: center; - margin-inline-end: calc(($control-padding-horizontal + $chevron-arrow-actual-width)); - } - } - - &[class*='background-color-'] { - summary, - .details-content { - padding-inline: $details-spacing-default; - } - } - - &[open] summary::before { - transform: rotate(-45deg) translate(calc($chevron-arrow-size / 2), 0); - } -} - -.details-lg { - @include details-size-adjuster($details-font-size-lg, $details-spacing-lg); -} - -.details-sm { - @include details-size-adjuster($details-font-size-sm, $details-spacing-sm); -} diff --git a/css/src/components/index.scss b/css/src/components/index.scss index 958e24f93..6d12593e1 100644 --- a/css/src/components/index.scss +++ b/css/src/components/index.scss @@ -1,10 +1,10 @@ +@import './accordion.scss'; @import './badge.scss'; @import './banner.scss'; @import './breadcrumbs.scss'; @import './button.scss'; @import './buttons.scss'; @import './card.scss'; -@import './details.scss'; @import './button-reset.scss'; @import './form/index.scss'; @import './hero.scss'; diff --git a/site/src/components/accordion.md b/site/src/components/accordion.md new file mode 100644 index 000000000..1589bb6e4 --- /dev/null +++ b/site/src/components/accordion.md @@ -0,0 +1,135 @@ +--- +title: Accordion +description: The accordion component in the Atlas Design System +template: standard +# need design to create +# figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Fnode-id%3D1488%253A35182 +classType: Component +classPrefixes: + - accordion +--- + +# Accordion + +The Accordion component contains a disclosure widget, where information is only visible when the element is toggled to an "open" state. A Summary or label must be provided using the `` element. + +## Usage + +Here is an example of a standard `.accordion` usage. By default `
` elements are closed on page load and toggle open or closed when the user clicks the ``. + +```html +
+ Accordion header 1 +
+

Accordion panel 1

+
+
+
+ Accordion header 2 +
+

Accordion panel 2

+
+
+
+ Accordion header 3 +
+

Accordion panel 3

+
+
+``` + +## Attributes + +### Open + +There is an option to have the accordion component load in the expanded state by adding the `open` attribute. + +```html +
+ Accordion header 1 +
+

Accordion panel 1

+
+
+
+ Accordion header 2 +
+

Accordion panel 2

+
+
+
+ Accordion header 3 +
+

Accordion panel 3

+
+
+``` + +### Name + +Using the `name` attribute, there is an option to group multiple accordion components, which allows only one open panel at a time. + +```html +
+ Accordion header 1 +
+

Accordion panel 1

+
+
+
+ Accordion header 2 +
+

Accordion panel 2

+
+
+
+ Accordion header 3 +
+

Accordion panel 3

+
+
+``` + +For accordion patterns styled with Atomics, visit the [Accordion pattern page](../patterns/accordion.md). + +## Icon location + +By default the expansion indicator icon is before the summary content. Using the `.accordion-icon-end` class, the icon can be positioned at the end of the summary. The icon is absolutely positioned to remain at the top if Summary content wraps or contains multiple lines. + +
+ Accordion header 1 +
+

Accordion panel 1

+
+
+
+ Accordion header 2 +
+

Accordion panel 2

+
+
+ +## Sizes + +`accordion-sm`/`accordion-lg` modifier classes make the text size and padding a little bigger or smaller than the default. + +```html +
+ Accordion header 1 +
+

Accordion panel 1

+
+
+
+ Accordion header 2 +
+

Accordion panel 2

+
+
+
+ Accordion header 3 +
+

Accordion panel 3

+
+
+``` diff --git a/site/src/components/details.md b/site/src/components/details.md deleted file mode 100644 index 94dae1891..000000000 --- a/site/src/components/details.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Details -description: The details component in the Atlas Design System -template: standard -# need design to create -# figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Fnode-id%3D1488%253A35182 -classType: Component -classPrefixes: - - details ---- - -# Details - -The Details component contains a disclosure widget, where information is only visible when the element is toggled to an "open" state. A Summary or label must be provided using the `` element. - -## Usage - -Here is an example of a standard `.details` usage paired with a ``. By default details elements are closed on page load and toggle open or closed when the user clicks the summary. - -```html -
- Details header 1 -
-

Details panel 1

-
-
-
- Details header 2 -
-

Details panel 2

-
-
-
- Details header 3 -
-

Details panel 3

-
-
-``` - -## Attributes - -### Open - -There is an option to have the details component load in the expanded state by adding the `open` attribute. - -```html -
- Details header 1 -
-

Details panel 1

-
-
-
- Details header 2 -
-

Details panel 2

-
-
-
- Details header 3 -
-

Details panel 3

-
-
-``` - -### Name - -Using the `name` attribute, there is an option to group multiple details components as an accordion, which allows only one open panel at a time. - -```html -
- Details header 1 -
-

Details panel 1

-
-
-
- Details header 2 -
-

Details panel 2

-
-
-
- Details header 3 -
-

Details panel 3

-
-
-``` - -For stylized accordion patterns used on Learn, visit the [Accordion pattern page](../patterns/accordion.md). - -### Sizes - -`select-sm`/`select-lg` makes input a little bigger or smaller than the default. - -```html -
- Details header 1 -
-

Details panel 1

-
-
-
- Details header 2 -
-

Details panel 2

-
-
-
- Details header 3 -
-

Details panel 3

-
-
-``` diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index aa5f9f3a6..619fa7d69 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -11,16 +11,15 @@ Because the `details` component has so many possible permutations, it can be hel ## Accordion -This accordion uses the `open` attribute to expand a designated panel on page load. Grouping `.details` components together using the `name` attribute, prevents more than 1 panel from being open at a time. Atomics classes are used to style the accordion `
` and `summary` elements. +This accordion uses the `open` attribute to expand a designated panel on page load. Grouping `.accordion` components together using the `name` attribute, prevents more than 1 panel from being open at a time. Atomics classes are used to style the accordion `
` and `` elements. ```html
Advanced Design Techniques with Microsoft Tools -
+

Advanced features in Microsoft Azure, optimizing engineering workflows, and leveraging cloud services for engineering solutions. @@ -48,10 +47,10 @@ This accordion uses the `open` attribute to expand a designated panel on page lo

Prepare data for analysis with Power BI -
+

You'll learn how to use Power Query to extract data from different data sources, choose a storage mode, and connectivity type. You'll also learn to profile, clean, and load data into @@ -77,47 +76,44 @@ This accordion uses the `open` attribute to expand a designated panel on page lo ``` ```html -

+

Advanced Design Techniques with Microsoft Tools

lorem ipsum

 -
+

- Advanced features in Microsoft Azure, optimizing engineering workflows, and leveraging cloud - services for engineering solutions. + You'll learn how to use Power Query to extract data from different data sources, choose a + storage mode, and connectivity type. You'll also learn to profile, clean, and load data into + Power BI before you model your data.

-

Hours to milestone completion 14

- +

Hours to milestone completion 7

-
+

Advanced Design Techniques with Microsoft Tools

lorem ipsum

 -
+

You'll learn how to use Power Query to extract data from different data sources, choose a storage mode, and connectivity type. You'll also learn to profile, clean, and load data into @@ -140,14 +136,14 @@ This accordion uses the `open` attribute to expand a designated panel on page lo

-
+

Advanced Design Techniques with Microsoft Tools

lorem ipsum

 -
+

You'll learn how to use Power Query to extract data from different data sources, choose a storage mode, and connectivity type. You'll also learn to profile, clean, and load data into @@ -171,3 +167,98 @@ This accordion uses the `open` attribute to expand a designated panel on page lo

``` + +```html +
+
+ +
+

Advanced Design Techniques with Microsoft Tools

+

lorem ipsum

+
+ +
+

+ You'll learn how to use Power Query to extract data from different data sources, choose a + storage mode, and connectivity type. You'll also learn to profile, clean, and load data into + Power BI before you model your data. +

+

Hours to milestone completion 7

+ + +
+
+
+ +
+

Advanced Design Techniques with Microsoft Tools

+

lorem ipsum

+
+ +
+

+ You'll learn how to use Power Query to extract data from different data sources, choose a + storage mode, and connectivity type. You'll also learn to profile, clean, and load data into + Power BI before you model your data. +

+

Hours to milestone completion 7

+ + +
+
+
+ +
+

Advanced Design Techniques with Microsoft Tools

+

lorem ipsum

+
+ +
+

+ You'll learn how to use Power Query to extract data from different data sources, choose a + storage mode, and connectivity type. You'll also learn to profile, clean, and load data into + Power BI before you model your data. +

+

Hours to milestone completion 7

+ + +
+
+
+``` From ca9746b7133231b9e87ac6d8db56b94f42f0cb34 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Wed, 21 Aug 2024 14:12:09 -0700 Subject: [PATCH 10/33] Remove learn references, refactor scss --- css/src/components/accordion.scss | 87 ++++++---- integration/config/page.ts | 2 +- integration/tests/accessibility.spec.ts | 2 +- site/src/components/accordion.md | 6 +- site/src/patterns/accordion.md | 213 +++++++----------------- 5 files changed, 113 insertions(+), 197 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index 5a1cc281a..2ca17335a 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -1,6 +1,6 @@ /* stylelint-disable selector-no-qualifying-type */ -$accordion-font-size: $font-size-7 !default; $accordion-font-size-sm: $font-size-8 !default; +$accordion-font-size-md: $font-size-7 !default; $accordion-font-size-lg: $font-size-6 !default; $accordion-spacing-sm: $spacer-3 !default; @@ -10,7 +10,9 @@ $accordion-spacing-bg-offset-sm: $spacer-7 !default; $accordion-spacing-bg-offset-md: $spacer-8 !default; $accordion-spacing-bg-offset-lg: $spacer-9 !default; -@mixin accordion-size-adjuster($font-size, $padding-size) { +$accordion-transition: transform 0.15s !default; + +@mixin accordion-size-adjuster($font-size, $padding-size, $bg-offset) { font-size: $font-size; .accordion-content, @@ -19,14 +21,22 @@ $accordion-spacing-bg-offset-lg: $spacer-9 !default; &:not(.accordion-icon-end)::before, &.accordion-icon-end::after { - top: calc($control-padding-horizontal + $padding-size); + inset-block-start: calc($control-padding-horizontal + $padding-size); } &.accordion-icon-end::before { - left: -calc($padding-size); + inset-inline-start: -calc($padding-size); } } + .accordion-content { + padding-block: $padding-size; + } + + .accordion-content[class*='background-color-'] { + padding-inline: $padding-size; + } + &[class*='background-color-'] { summary, .accordion-content { @@ -34,36 +44,42 @@ $accordion-spacing-bg-offset-lg: $spacer-9 !default; } summary:not(.accordion-icon-end) { - padding-inline-start: calc($padding-size + $chevron-arrow-actual-width); + padding-inline-start: $bg-offset; + &::before { - left: $padding-size; + inset-inline-start: $padding-size; } } &.accordion-icon-end::after { - right: $padding-size; + inset-inline-end: $padding-size; } } - - .accordion-content[class*='background-color-'] { - padding-inline: $padding-size; - } } .accordion { - font-size: $accordion-font-size; - line-height: 1.5; + @include accordion-size-adjuster( + $accordion-font-size-md, + $accordion-spacing-md, + $accordion-spacing-bg-offset-md + ); - .accordion-content, - summary { - padding-block: $accordion-spacing-md; - } + line-height: 1.5; summary { display: block; position: relative; cursor: pointer; + &:hover { + color: $primary-hover; + + &::before, + &::after { + border-color: $primary-hover; + } + } + &:not(.accordion-icon-end) { padding-inline-start: $accordion-spacing-bg-offset-sm; @@ -71,9 +87,8 @@ $accordion-spacing-bg-offset-lg: $spacer-9 !default; @include chevron-right; position: absolute; - top: calc($control-padding-horizontal + $accordion-spacing-md); - left: 0; - transition: transform 0.1s; + inset-inline-start: 0; + transition: $accordion-transition; } } @@ -81,24 +96,11 @@ $accordion-spacing-bg-offset-lg: $spacer-9 !default; @include chevron-down; position: absolute; - top: calc($control-padding-horizontal + $accordion-spacing-md); - transition: transform 0.1s; + transition: $accordion-transition; } } &[class*='background-color-'] { - summary, - .accordion-content { - padding-inline: $accordion-spacing-md; - } - - summary:not(.accordion-icon-end) { - padding-inline-start: $accordion-spacing-bg-offset-md; - &::before { - left: $accordion-spacing-md; - } - } - &.accordion-icon-end { padding-inline-end: calc(($control-padding-horizontal + $chevron-arrow-actual-width)); } @@ -115,12 +117,25 @@ $accordion-spacing-bg-offset-lg: $spacer-9 !default; transform: rotate(-225deg); } } + + .accordion-content { + // Constant content body text size regardless of heading text-sizing + font-size: $accordion-font-size-md; + } } .accordion-lg { - @include accordion-size-adjuster($accordion-font-size-lg, $accordion-spacing-lg); + @include accordion-size-adjuster( + $accordion-font-size-lg, + $accordion-spacing-lg, + $accordion-spacing-bg-offset-lg + ); } .accordion-sm { - @include accordion-size-adjuster($accordion-font-size-sm, $accordion-spacing-sm); + @include accordion-size-adjuster( + $accordion-font-size-sm, + $accordion-spacing-sm, + $accordion-spacing-bg-offset-sm + ); } diff --git a/integration/config/page.ts b/integration/config/page.ts index 5b6a53b62..6ed336a35 100644 --- a/integration/config/page.ts +++ b/integration/config/page.ts @@ -32,7 +32,7 @@ export const pages: LocalPageConfig[] = [ { pathname: '/components/breadcrumbs.html', name: 'Components/breadcrumbs', routes }, { pathname: '/components/button.html', name: 'Components/button', routes }, { pathname: '/components/checkbox.html', name: 'Components/checkbox', routes }, - { pathname: '/components/details.html', name: 'Components/details', routes }, + { pathname: '/components/accordion.html', name: 'Components/accordion', routes }, { pathname: '/components/dismiss.html', name: 'Components/dismiss', routes }, { pathname: '/components/help.html', name: 'Components/help', routes }, { pathname: '/components/icon.html', name: 'Components/icon', routes }, diff --git a/integration/tests/accessibility.spec.ts b/integration/tests/accessibility.spec.ts index 67ae57d4c..8361f8b33 100644 --- a/integration/tests/accessibility.spec.ts +++ b/integration/tests/accessibility.spec.ts @@ -17,11 +17,11 @@ const pathnames = [ '/atomics/spacing.html', '/atomics/typography.html', '/components/overview.html', + '/components/accordion.html', '/components/badge.html', '/components/banner.html', '/components/breadcrumbs.html', '/components/button.html', - '/components/details.html', '/components/card.html', '/components/chat.html', '/components/checkbox.html', diff --git a/site/src/components/accordion.md b/site/src/components/accordion.md index 1589bb6e4..2d6c321ee 100644 --- a/site/src/components/accordion.md +++ b/site/src/components/accordion.md @@ -90,8 +90,6 @@ Using the `name` attribute, there is an option to group multiple accordion compo
``` -For accordion patterns styled with Atomics, visit the [Accordion pattern page](../patterns/accordion.md). - ## Icon location By default the expansion indicator icon is before the summary content. Using the `.accordion-icon-end` class, the icon can be positioned at the end of the summary. The icon is absolutely positioned to remain at the top if Summary content wraps or contains multiple lines. @@ -133,3 +131,7 @@ By default the expansion indicator icon is before the summary content. Using the
``` + +## Patterns + +For accordion patterns styled with Atomics, visit the [Accordion patterns page](../patterns/accordion.md). diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index 619fa7d69..11f1ff7f9 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -18,29 +18,17 @@ This accordion uses the `open` attribute to expand a designated panel on page lo name="accordion-group-1" class="accordion background-color-body-accent border-radius margin-block-xxs" > - Advanced Design Techniques with Microsoft Tools + Accordion headline 1 text

- Advanced features in Microsoft Azure, optimizing engineering workflows, and leveraging cloud - services for engineering solutions. + Viverra aliquet eget sit amet tellus cras. Nisl nisi scelerisque eu ultrices vitae. + Condimentum id venenatis a condimentum. Ut eu sem integer vitae.

-

Hours to milestone completion 14

- -
@@ -49,26 +37,24 @@ This accordion uses the `open` attribute to expand a designated panel on page lo name="accordion-group-1" class="accordion background-color-body-accent border-radius margin-block-xxs" > - Prepare data for analysis with Power BI + Accordion headline 2 text

- You'll learn how to use Power Query to extract data from different data sources, choose a - storage mode, and connectivity type. You'll also learn to profile, clean, and load data into - Power BI before you model your data. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa + eget egestas.

-

Hours to milestone completion 7

+

Accordion content subheading

@@ -76,92 +62,77 @@ This accordion uses the `open` attribute to expand a designated panel on page lo ``` ```html -
+
-
-

Advanced Design Techniques with Microsoft Tools

-

lorem ipsum

-
+

Accordion header 1 text

+

Accordion subheader text

- You'll learn how to use Power Query to extract data from different data sources, choose a - storage mode, and connectivity type. You'll also learn to profile, clean, and load data into - Power BI before you model your data. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua.

-

Hours to milestone completion 7

+

Accordion content subheading

-
+
-
-

Advanced Design Techniques with Microsoft Tools

-

lorem ipsum

-
+

Accordion header 2 text

+

Accordion subheader text

- You'll learn how to use Power Query to extract data from different data sources, choose a - storage mode, and connectivity type. You'll also learn to profile, clean, and load data into - Power BI before you model your data. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua.

-

Hours to milestone completion 7

+

Accordion content subheading

-
+
-
-

Advanced Design Techniques with Microsoft Tools

-

lorem ipsum

-
+

Accordion header 3 text

+

Accordion subheader text

- You'll learn how to use Power Query to extract data from different data sources, choose a - storage mode, and connectivity type. You'll also learn to profile, clean, and load data into - Power BI before you model your data. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua.

-

Hours to milestone completion 7

+

Accordion content subheading

@@ -170,94 +141,22 @@ This accordion uses the `open` attribute to expand a designated panel on page lo ```html
-
- -
-

Advanced Design Techniques with Microsoft Tools

-

lorem ipsum

-
- +
+ Accordion header text
-

- You'll learn how to use Power Query to extract data from different data sources, choose a - storage mode, and connectivity type. You'll also learn to profile, clean, and load data into - Power BI before you model your data. +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua.

-

Hours to milestone completion 7

- -
-
- -
-

Advanced Design Techniques with Microsoft Tools

-

lorem ipsum

-
- -
-

- You'll learn how to use Power Query to extract data from different data sources, choose a - storage mode, and connectivity type. You'll also learn to profile, clean, and load data into - Power BI before you model your data. -

-

Hours to milestone completion 7

- - -
-
-
- -
-

Advanced Design Techniques with Microsoft Tools

-

lorem ipsum

-
- +
+ Accordion header text
-

- You'll learn how to use Power Query to extract data from different data sources, choose a - storage mode, and connectivity type. You'll also learn to profile, clean, and load data into - Power BI before you model your data. +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua.

-

Hours to milestone completion 7

- -
From 3760b3645aa066354526fff0eb8ec8b1b68c10c6 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Thu, 22 Aug 2024 10:41:05 -0700 Subject: [PATCH 11/33] Adds padding for right aligned chevron to prevent overlap --- css/src/components/accordion.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index 2ca17335a..c53c076df 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -92,11 +92,15 @@ $accordion-transition: transform 0.15s !default; } } - &.accordion-icon-end::after { - @include chevron-down; + &.accordion-icon-end { + padding-inline-end: $accordion-spacing-bg-offset-sm; + + &::after { + @include chevron-down; - position: absolute; - transition: $accordion-transition; + position: absolute; + transition: $accordion-transition; + } } } From fceae88f6b304ebcadf440358d87580c6e870f99 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Thu, 22 Aug 2024 10:51:59 -0700 Subject: [PATCH 12/33] Put chevron rotation angles into mixin variables, rename accordion mixin --- css/src/components/accordion.scss | 22 ++++++++++++---------- css/src/mixins/chevron.scss | 7 +++++-- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index c53c076df..918645b2f 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -12,7 +12,9 @@ $accordion-spacing-bg-offset-lg: $spacer-9 !default; $accordion-transition: transform 0.15s !default; -@mixin accordion-size-adjuster($font-size, $padding-size, $bg-offset) { +// Spacing and font-size + +@mixin accordion-summary-sizes($font-size, $padding-size, $bg-offset) { font-size: $font-size; .accordion-content, @@ -58,7 +60,7 @@ $accordion-transition: transform 0.15s !default; } .accordion { - @include accordion-size-adjuster( + @include accordion-summary-sizes( $accordion-font-size-md, $accordion-spacing-md, $accordion-spacing-bg-offset-md @@ -106,30 +108,30 @@ $accordion-transition: transform 0.15s !default; &[class*='background-color-'] { &.accordion-icon-end { - padding-inline-end: calc(($control-padding-horizontal + $chevron-arrow-actual-width)); + padding-inline-end: calc($control-padding-horizontal + $chevron-arrow-actual-width); } } &[open] { summary:not(.accordion-icon-end)::before { - // chevron-down - transform: rotate(-45deg) translate(calc($chevron-arrow-size / 2), 0); + transform: $chevron-down-rotate translate(calc($chevron-arrow-size / 2), 0); } summary.accordion-icon-end::after { - //chevron-up - transform: rotate(-225deg); + transform: $chevron-up-rotate; } } .accordion-content { - // Constant content body text size regardless of heading text-sizing + // Constant content text size regardless of heading and text sizes font-size: $accordion-font-size-md; } } +// Sizes + .accordion-lg { - @include accordion-size-adjuster( + @include accordion-summary-sizes( $accordion-font-size-lg, $accordion-spacing-lg, $accordion-spacing-bg-offset-lg @@ -137,7 +139,7 @@ $accordion-transition: transform 0.15s !default; } .accordion-sm { - @include accordion-size-adjuster( + @include accordion-summary-sizes( $accordion-font-size-sm, $accordion-spacing-sm, $accordion-spacing-bg-offset-sm diff --git a/css/src/mixins/chevron.scss b/css/src/mixins/chevron.scss index eded123f1..ac81c4b79 100644 --- a/css/src/mixins/chevron.scss +++ b/css/src/mixins/chevron.scss @@ -2,6 +2,9 @@ $chevron-color: $text !default; $chevron-arrow-size: 0.525em !default; $chevron-arrow-border-width: 1px !default; $chevron-arrow-actual-width: 0.75em !default; +$chevron-down-rotate: rotate(-45deg) !default; +$chevron-right-rotate: rotate(-135deg) !default; +$chevron-up-rotate: rotate(-225deg) !default; %chevron { width: $chevron-arrow-size; @@ -19,11 +22,11 @@ $chevron-arrow-actual-width: 0.75em !default; @mixin chevron-right { @extend %chevron; - transform: rotate(-135deg); + transform: $chevron-right-rotate; } @mixin chevron-down { @extend %chevron; - transform: rotate(-45deg); + transform: $chevron-down-rotate; } From bf804938c5ab61e401d9600b7043ab9f18c76724 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Thu, 22 Aug 2024 11:02:01 -0700 Subject: [PATCH 13/33] Updates changeset description --- .changeset/smart-lions-sniff.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/smart-lions-sniff.md b/.changeset/smart-lions-sniff.md index 636acb6a1..888930168 100644 --- a/.changeset/smart-lions-sniff.md +++ b/.changeset/smart-lions-sniff.md @@ -4,4 +4,4 @@ '@microsoft/atlas-site': minor --- -Adds details component, accordion pattern and refactors select to use new chevron mixin +Adds Accordion component, patterns and relevant documentation. From a2f7b0f025d8f93d2c4e7e3606e3b313b4c55dda Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Thu, 22 Aug 2024 11:47:40 -0700 Subject: [PATCH 14/33] Makes icon positioning and padding more aligned with content padding. --- css/src/components/accordion.scss | 53 ++++++++++++++++++++----------- 1 file changed, 35 insertions(+), 18 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index 918645b2f..76e6786cb 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -3,18 +3,21 @@ $accordion-font-size-sm: $font-size-8 !default; $accordion-font-size-md: $font-size-7 !default; $accordion-font-size-lg: $font-size-6 !default; +$accordion-spacing-xs: $spacer-2 !default; $accordion-spacing-sm: $spacer-3 !default; $accordion-spacing-md: $spacer-4 !default; $accordion-spacing-lg: $spacer-5 !default; -$accordion-spacing-bg-offset-sm: $spacer-7 !default; -$accordion-spacing-bg-offset-md: $spacer-8 !default; -$accordion-spacing-bg-offset-lg: $spacer-9 !default; +$accordion-spacing-offset-sm: $spacer-6 !default; +$accordion-spacing-offset-md: $spacer-7 !default; +$accordion-spacing-offset-lg: $spacer-8 !default; $accordion-transition: transform 0.15s !default; // Spacing and font-size -@mixin accordion-summary-sizes($font-size, $padding-size, $bg-offset) { +@mixin accordion-summary-sizes($font-size, $padding-size, $icon-offset) { + $bg-icon-offset: calc($icon-offset + 0.25rem); + font-size: $font-size; .accordion-content, @@ -31,6 +34,16 @@ $accordion-transition: transform 0.15s !default; } } + summary { + &:not(.accordion-icon-end) { + padding-inline-start: $icon-offset; + } + + &.accordion-icon-end { + padding-inline-end: $icon-offset; + } + } + .accordion-content { padding-block: $padding-size; } @@ -45,16 +58,23 @@ $accordion-transition: transform 0.15s !default; padding-inline: $padding-size; } - summary:not(.accordion-icon-end) { - padding-inline-start: $bg-offset; + summary { + &:not(.accordion-icon-end) { + padding-inline-start: $bg-icon-offset; - &::before { - inset-inline-start: $padding-size; + &::before { + inset-inline-start: $padding-size; + } } - } - &.accordion-icon-end::after { - inset-inline-end: $padding-size; + &.accordion-icon-end { + padding-inline-end: $bg-icon-offset; + + &::after { + inset-inline-end: calc($accordion-spacing-xs + $padding-size); + inset-block-start: calc($padding-size * 1.5); + } + } } } } @@ -63,7 +83,7 @@ $accordion-transition: transform 0.15s !default; @include accordion-summary-sizes( $accordion-font-size-md, $accordion-spacing-md, - $accordion-spacing-bg-offset-md + $accordion-spacing-offset-md ); line-height: 1.5; @@ -83,8 +103,6 @@ $accordion-transition: transform 0.15s !default; } &:not(.accordion-icon-end) { - padding-inline-start: $accordion-spacing-bg-offset-sm; - &::before { @include chevron-right; @@ -95,12 +113,11 @@ $accordion-transition: transform 0.15s !default; } &.accordion-icon-end { - padding-inline-end: $accordion-spacing-bg-offset-sm; - &::after { @include chevron-down; position: absolute; + inset-inline-end: $accordion-spacing-xs; transition: $accordion-transition; } } @@ -134,7 +151,7 @@ $accordion-transition: transform 0.15s !default; @include accordion-summary-sizes( $accordion-font-size-lg, $accordion-spacing-lg, - $accordion-spacing-bg-offset-lg + $accordion-spacing-offset-lg ); } @@ -142,6 +159,6 @@ $accordion-transition: transform 0.15s !default; @include accordion-summary-sizes( $accordion-font-size-sm, $accordion-spacing-sm, - $accordion-spacing-bg-offset-sm + $accordion-spacing-offset-sm ); } From ca3547f90188ec5ed4c8146365318a0da490b6eb Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Thu, 22 Aug 2024 11:54:27 -0700 Subject: [PATCH 15/33] Update scope to remove unneeded font-size rule --- css/src/components/accordion.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index 76e6786cb..48c6577ab 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -18,8 +18,6 @@ $accordion-transition: transform 0.15s !default; @mixin accordion-summary-sizes($font-size, $padding-size, $icon-offset) { $bg-icon-offset: calc($icon-offset + 0.25rem); - font-size: $font-size; - .accordion-content, summary { padding-block: $padding-size; @@ -35,6 +33,8 @@ $accordion-transition: transform 0.15s !default; } summary { + font-size: $font-size; + &:not(.accordion-icon-end) { padding-inline-start: $icon-offset; } @@ -138,11 +138,6 @@ $accordion-transition: transform 0.15s !default; transform: $chevron-up-rotate; } } - - .accordion-content { - // Constant content text size regardless of heading and text sizes - font-size: $accordion-font-size-md; - } } // Sizes From 3a2c94a18331c3a4531a9b7fd881a37702fd3a94 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Thu, 22 Aug 2024 12:15:32 -0700 Subject: [PATCH 16/33] Fix icon position inconsistencies --- css/src/components/accordion.scss | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index 48c6577ab..ecb1669cb 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -21,15 +21,6 @@ $accordion-transition: transform 0.15s !default; .accordion-content, summary { padding-block: $padding-size; - - &:not(.accordion-icon-end)::before, - &.accordion-icon-end::after { - inset-block-start: calc($control-padding-horizontal + $padding-size); - } - - &.accordion-icon-end::before { - inset-inline-start: -calc($padding-size); - } } summary { @@ -42,6 +33,14 @@ $accordion-transition: transform 0.15s !default; &.accordion-icon-end { padding-inline-end: $icon-offset; } + + &.accordion-icon-end::after { + inset-block-start: calc($padding-size * 1.5); + } + + &:not(.accordion-icon-end)::before { + inset-block-start: calc($control-padding-horizontal + $padding-size); + } } .accordion-content { @@ -72,7 +71,6 @@ $accordion-transition: transform 0.15s !default; &::after { inset-inline-end: calc($accordion-spacing-xs + $padding-size); - inset-block-start: calc($padding-size * 1.5); } } } From 02d5162a8ca061d27cdc66fe2f580afe876ffef7 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Thu, 22 Aug 2024 12:18:12 -0700 Subject: [PATCH 17/33] Nest rules for better legibility --- css/src/components/accordion.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index ecb1669cb..f6472c1e8 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -28,27 +28,27 @@ $accordion-transition: transform 0.15s !default; &:not(.accordion-icon-end) { padding-inline-start: $icon-offset; + + &::before { + inset-block-start: calc($control-padding-horizontal + $padding-size); + } } &.accordion-icon-end { padding-inline-end: $icon-offset; - } - - &.accordion-icon-end::after { - inset-block-start: calc($padding-size * 1.5); - } - &:not(.accordion-icon-end)::before { - inset-block-start: calc($control-padding-horizontal + $padding-size); + &::after { + inset-block-start: calc($padding-size * 1.5); + } } } .accordion-content { padding-block: $padding-size; - } - .accordion-content[class*='background-color-'] { - padding-inline: $padding-size; + &[class*='background-color-'] { + padding-inline: $padding-size; + } } &[class*='background-color-'] { From 2df4a3903e9c91c765f1f2e9256a39e275414fd2 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Thu, 22 Aug 2024 15:13:36 -0700 Subject: [PATCH 18/33] Scopes line-height to summary element --- css/src/components/accordion.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index f6472c1e8..4c95298ea 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -84,11 +84,10 @@ $accordion-transition: transform 0.15s !default; $accordion-spacing-offset-md ); - line-height: 1.5; - summary { display: block; position: relative; + line-height: 1.5; cursor: pointer; &:hover { From 0f1a44c636d9f27bcb095a154be9f953e5967b08 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Fri, 23 Aug 2024 06:59:01 -0700 Subject: [PATCH 19/33] Removes name attr from examples, updates copy --- site/src/components/accordion.md | 36 +++++++++++++++----------------- site/src/patterns/accordion.md | 21 +++++++------------ 2 files changed, 24 insertions(+), 33 deletions(-) diff --git a/site/src/components/accordion.md b/site/src/components/accordion.md index 2d6c321ee..bfe72fb87 100644 --- a/site/src/components/accordion.md +++ b/site/src/components/accordion.md @@ -2,8 +2,6 @@ title: Accordion description: The accordion component in the Atlas Design System template: standard -# need design to create -# figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Fnode-id%3D1488%253A35182 classType: Component classPrefixes: - accordion @@ -11,11 +9,11 @@ classPrefixes: # Accordion -The Accordion component contains a disclosure widget, where information is only visible when the element is toggled to an "open" state. A Summary or label must be provided using the `` element. +Accordion is a component for grouping sections of related content that can be opened or closed. Accordion is built on top of the `
` HTML element. ## Usage -Here is an example of a standard `.accordion` usage. By default `
` elements are closed on page load and toggle open or closed when the user clicks the ``. +Here is an example of a standard `.accordion` usage. By default, accordion items are closed and allow multiple items to be open at once. ```html
@@ -42,7 +40,7 @@ Here is an example of a standard `.accordion` usage. By default `
` elem ### Open -There is an option to have the accordion component load in the expanded state by adding the `open` attribute. +There is an option to have the accordion component load in the expanded state by adding the `open` attribute to one of the items. ```html
@@ -67,7 +65,7 @@ There is an option to have the accordion component load in the expanded state by ### Name -Using the `name` attribute, there is an option to group multiple accordion components, which allows only one open panel at a time. +Applying the `name` attribute to all accordion items with the same value will allow opening only one of the items at a time. ```html
@@ -92,16 +90,16 @@ Using the `name` attribute, there is an option to group multiple accordion compo ## Icon location -By default the expansion indicator icon is before the summary content. Using the `.accordion-icon-end` class, the icon can be positioned at the end of the summary. The icon is absolutely positioned to remain at the top if Summary content wraps or contains multiple lines. +By default, the expansion indicator icon is located before the accordion item's header. Applying the `.accordion-icon-end` class to the `` element will change the icon's position to the end of the header.
- Accordion header 1 + Accordion icon's default position

Accordion panel 1

- Accordion header 2 + Accordion icon's end position

Accordion panel 2

@@ -112,26 +110,26 @@ By default the expansion indicator icon is before the summary content. Using the `accordion-sm`/`accordion-lg` modifier classes make the text size and padding a little bigger or smaller than the default. ```html -
- Accordion header 1 +
+ Small accordion header
-

Accordion panel 1

+

Accordion panel content

-
- Accordion header 2 +
+ Default accordion header
-

Accordion panel 2

+

Accordion panel content

-
- Accordion header 3 +
+ Large accordion header
-

Accordion panel 3

+

Accordion panel content

``` ## Patterns -For accordion patterns styled with Atomics, visit the [Accordion patterns page](../patterns/accordion.md). +This page discusses the component and subcomponents that make up `.accordion`, but it does not prescribe particular patterns. For examples of specific accordion builds, look to the [accordion patterns page](../patterns/accordion.md) for guidance. diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index 11f1ff7f9..3c6f2e923 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -2,7 +2,6 @@ title: Accordion description: Accordion patterns in the Atlas Design System template: standard -# figmaEmbed: https://www.figma.com/design/a5gqz0qtUMAKF36lNS6b61/Adaptive-Learning---Phase-I-(2024)?node-id=2581-106784&t=lkaa1re80XFTF9O3-0 --- # Accordion patterns @@ -14,10 +13,7 @@ Because the `details` component has so many possible permutations, it can be hel This accordion uses the `open` attribute to expand a designated panel on page load. Grouping `.accordion` components together using the `name` attribute, prevents more than 1 panel from being open at a time. Atomics classes are used to style the accordion `
` and `` elements. ```html -
+
Accordion headline 1 text

@@ -33,10 +29,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo

-
+
Accordion headline 2 text

@@ -62,7 +55,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo ``` ```html -

+

Accordion header 1 text

Accordion subheader text

@@ -87,7 +80,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo
-
+

Accordion header 2 text

Accordion subheader text

@@ -112,7 +105,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo
-
+

Accordion header 3 text

Accordion subheader text

@@ -141,7 +134,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo ```html
-
+
Accordion header text

@@ -150,7 +143,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo

-
+
Accordion header text

From cb621081983fd0346ea11e9bf5a8be43896fe17c Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Fri, 23 Aug 2024 07:13:28 -0700 Subject: [PATCH 20/33] Renames mixin variable to be consistent w/ other params --- css/src/components/accordion.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index 4c95298ea..66af378ed 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -15,8 +15,8 @@ $accordion-transition: transform 0.15s !default; // Spacing and font-size -@mixin accordion-summary-sizes($font-size, $padding-size, $icon-offset) { - $bg-icon-offset: calc($icon-offset + 0.25rem); +@mixin accordion-summary-sizes($font-size, $padding-size, $icon-offset-size) { + $bg-icon-offset-size: calc($icon-offset-size + 0.25rem); .accordion-content, summary { @@ -27,7 +27,7 @@ $accordion-transition: transform 0.15s !default; font-size: $font-size; &:not(.accordion-icon-end) { - padding-inline-start: $icon-offset; + padding-inline-start: $icon-offset-size; &::before { inset-block-start: calc($control-padding-horizontal + $padding-size); @@ -35,7 +35,7 @@ $accordion-transition: transform 0.15s !default; } &.accordion-icon-end { - padding-inline-end: $icon-offset; + padding-inline-end: $icon-offset-size; &::after { inset-block-start: calc($padding-size * 1.5); @@ -59,7 +59,7 @@ $accordion-transition: transform 0.15s !default; summary { &:not(.accordion-icon-end) { - padding-inline-start: $bg-icon-offset; + padding-inline-start: $bg-icon-offset-size; &::before { inset-inline-start: $padding-size; @@ -67,7 +67,7 @@ $accordion-transition: transform 0.15s !default; } &.accordion-icon-end { - padding-inline-end: $bg-icon-offset; + padding-inline-end: $bg-icon-offset-size; &::after { inset-inline-end: calc($accordion-spacing-xs + $padding-size); From 34756b128dfbdeceb4b8601b0c4d01235ae9602d Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Fri, 23 Aug 2024 16:10:18 -0700 Subject: [PATCH 21/33] t push origin jumunn/acc Remove bg styles, refactor icon positioning --- css/src/components/accordion.scss | 138 +++++++++--------------------- css/src/mixins/chevron.scss | 1 + site/src/components/accordion.md | 74 +++++++++++----- site/src/patterns/accordion.md | 85 ++++++++++-------- 4 files changed, 142 insertions(+), 156 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index 66af378ed..001da5ee5 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -1,22 +1,20 @@ /* stylelint-disable selector-no-qualifying-type */ -$accordion-font-size-sm: $font-size-8 !default; -$accordion-font-size-md: $font-size-7 !default; -$accordion-font-size-lg: $font-size-6 !default; +$accordion-font-size-sm: $font-size-9 !default; +$accordion-font-size-md: $font-size-8 !default; +$accordion-font-size-lg: $font-size-7 !default; $accordion-spacing-xs: $spacer-2 !default; $accordion-spacing-sm: $spacer-3 !default; $accordion-spacing-md: $spacer-4 !default; $accordion-spacing-lg: $spacer-5 !default; -$accordion-spacing-offset-sm: $spacer-6 !default; -$accordion-spacing-offset-md: $spacer-7 !default; -$accordion-spacing-offset-lg: $spacer-8 !default; $accordion-transition: transform 0.15s !default; // Spacing and font-size -@mixin accordion-summary-sizes($font-size, $padding-size, $icon-offset-size) { - $bg-icon-offset-size: calc($icon-offset-size + 0.25rem); +@mixin accordion-summary-sizes($font-size, $padding-size) { + $icon-before-offset-size: calc($font-size - 0.375rem); + $icon-after-offset-size: calc($font-size - 0.5rem); .accordion-content, summary { @@ -25,72 +23,30 @@ $accordion-transition: transform 0.15s !default; summary { font-size: $font-size; - - &:not(.accordion-icon-end) { - padding-inline-start: $icon-offset-size; - - &::before { - inset-block-start: calc($control-padding-horizontal + $padding-size); - } - } - - &.accordion-icon-end { - padding-inline-end: $icon-offset-size; - - &::after { - inset-block-start: calc($padding-size * 1.5); - } - } } - .accordion-content { - padding-block: $padding-size; - - &[class*='background-color-'] { - padding-inline: $padding-size; + &:not(.accordion-icon-end) summary { + &::before { + margin-block-start: $icon-before-offset-size; } } - &[class*='background-color-'] { - summary, - .accordion-content { - padding-inline: $padding-size; - } - - summary { - &:not(.accordion-icon-end) { - padding-inline-start: $bg-icon-offset-size; - - &::before { - inset-inline-start: $padding-size; - } - } - - &.accordion-icon-end { - padding-inline-end: $bg-icon-offset-size; - - &::after { - inset-inline-end: calc($accordion-spacing-xs + $padding-size); - } - } + &.accordion-icon-end summary { + &::after { + margin-block-start: $icon-after-offset-size; } } } .accordion { - @include accordion-summary-sizes( - $accordion-font-size-md, - $accordion-spacing-md, - $accordion-spacing-offset-md - ); + @include accordion-summary-sizes($accordion-font-size-md, $accordion-spacing-md); summary { - display: block; - position: relative; + display: flex; line-height: 1.5; cursor: pointer; - &:hover { + > &:hover { color: $primary-hover; &::before, @@ -99,58 +55,46 @@ $accordion-transition: transform 0.15s !default; } } - &:not(.accordion-icon-end) { - &::before { - @include chevron-right; - - position: absolute; - inset-inline-start: 0; - transition: $accordion-transition; - } + .accordion-header { + flex-grow: 1; } + } - &.accordion-icon-end { - &::after { - @include chevron-down; + &:not(.accordion-icon-end) summary::before { + @include chevron-right; - position: absolute; - inset-inline-end: $accordion-spacing-xs; - transition: $accordion-transition; - } - } + margin-inline-end: $accordion-spacing-sm; + transition: $accordion-transition; } - &[class*='background-color-'] { - &.accordion-icon-end { - padding-inline-end: calc($control-padding-horizontal + $chevron-arrow-actual-width); - } + &.accordion-icon-end summary::after { + @include chevron-down; + + margin-inline-start: $accordion-spacing-sm; + transition: $accordion-transition; } &[open] { - summary:not(.accordion-icon-end)::before { + &:not(.accordion-icon-end) summary::before { transform: $chevron-down-rotate translate(calc($chevron-arrow-size / 2), 0); } - summary.accordion-icon-end::after { - transform: $chevron-up-rotate; + &.accordion-icon-end summary::after { + transform: $chevron-up-rotate-scale-xy; } } -} -// Sizes + .accordion-content { + font-size: $accordion-font-size-md; + } + + // Sizes -.accordion-lg { - @include accordion-summary-sizes( - $accordion-font-size-lg, - $accordion-spacing-lg, - $accordion-spacing-offset-lg - ); -} + &.accordion-lg { + @include accordion-summary-sizes($accordion-font-size-lg, $accordion-spacing-lg); + } -.accordion-sm { - @include accordion-summary-sizes( - $accordion-font-size-sm, - $accordion-spacing-sm, - $accordion-spacing-offset-sm - ); + &.accordion-sm { + @include accordion-summary-sizes($accordion-font-size-sm, $accordion-spacing-sm); + } } diff --git a/css/src/mixins/chevron.scss b/css/src/mixins/chevron.scss index ac81c4b79..6921e1622 100644 --- a/css/src/mixins/chevron.scss +++ b/css/src/mixins/chevron.scss @@ -5,6 +5,7 @@ $chevron-arrow-actual-width: 0.75em !default; $chevron-down-rotate: rotate(-45deg) !default; $chevron-right-rotate: rotate(-135deg) !default; $chevron-up-rotate: rotate(-225deg) !default; +$chevron-up-rotate-scale-xy: rotate(-45deg) scaleY(-1) scaleX(-1); %chevron { width: $chevron-arrow-size; diff --git a/site/src/components/accordion.md b/site/src/components/accordion.md index bfe72fb87..43dff3d24 100644 --- a/site/src/components/accordion.md +++ b/site/src/components/accordion.md @@ -17,19 +17,25 @@ Here is an example of a standard `.accordion` usage. By default, accordion items ```html

- Accordion header 1 + +
Accordion header 1
+

Accordion panel 1

- Accordion header 2 + +
Accordion header 2
+

Accordion panel 2

- Accordion header 3 + +
Accordion header 3
+

Accordion panel 3

@@ -44,19 +50,25 @@ There is an option to have the accordion component load in the expanded state by ```html
- Accordion header 1 + +
Accordion header 1
+

Accordion panel 1

- Accordion header 2 + +
Accordion header 2
+

Accordion panel 2

- Accordion header 3 + +
Accordion header 3
+

Accordion panel 3

@@ -69,19 +81,25 @@ Applying the `name` attribute to all accordion items with the same value will al ```html
- Accordion header 1 + +
Accordion header 1
+

Accordion panel 1

- Accordion header 2 + +
Accordion header 2
+

Accordion panel 2

- Accordion header 3 + +
Accordion header 3
+

Accordion panel 3

@@ -90,20 +108,26 @@ Applying the `name` attribute to all accordion items with the same value will al ## Icon location -By default, the expansion indicator icon is located before the accordion item's header. Applying the `.accordion-icon-end` class to the `` element will change the icon's position to the end of the header. +By default, the expansion indicator icon is located before the accordion item's header. Applying the `.accordion-icon-end` class to the item will change the icon's position to the end of the header. +```html
- Accordion icon's default position -
-

Accordion panel 1

-
+ +
Accordion icon's default position
+ +
+

Accordion panel 1

+
-
- Accordion icon's end position -
-

Accordion panel 2

-
+
+ +
Accordion icon's end position
+ +
+

Accordion panel 2

+
+``` ## Sizes @@ -111,19 +135,25 @@ By default, the expansion indicator icon is located before the accordion item's ```html
- Small accordion header + +
Small accordion header
+

Accordion panel content

- Default accordion header + +
Default accordion header
+

Accordion panel content

- Large accordion header + +
Large accordion header
+

Accordion panel content

diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index 3c6f2e923..ae5d2623c 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -14,8 +14,10 @@ This accordion uses the `open` attribute to expand a designated panel on page lo ```html
- Accordion headline 1 text -
+ +
Accordion headline 1 text
+ +

Viverra aliquet eget sit amet tellus cras. Nisl nisi scelerisque eu ultrices vitae. Condimentum id venenatis a condimentum. Ut eu sem integer vitae. @@ -30,8 +32,10 @@ This accordion uses the `open` attribute to expand a designated panel on page lo

- Accordion headline 2 text -
+ +
Accordion headline 2 text
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa @@ -50,6 +54,9 @@ This accordion uses the `open` attribute to expand a designated panel on page lo The headline of the content item

+
+ Button text +
``` @@ -57,16 +64,13 @@ This accordion uses the `open` attribute to expand a designated panel on page lo ```html
-

Accordion header 1 text

-

Accordion subheader text

+
+

Accordion header 1 text

+

Accordion subheader text

+
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. -

-

Accordion content subheading

-
-

Accordion header 2 text

-

Accordion subheader text

+
+

Accordion header 2 text

+

Accordion subheader text

+
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. -

-

Accordion content subheading

-
-

Accordion header 3 text

-

Accordion subheader text

+
+

Accordion header 3 text

+

Accordion subheader text

+
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. -

-

Accordion content subheading

-
``` ```html
-
- Accordion header text -
+
+ +
Accordion header text
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
- Accordion header text -
+
+ +
Accordion header text
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. From 6ef81622eb17926e5e945742d3acffd7bd7de77f Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Sat, 24 Aug 2024 07:14:07 -0700 Subject: [PATCH 22/33] Remove button from first pattern --- site/src/patterns/accordion.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index ae5d2623c..c19ccbe7d 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -54,9 +54,6 @@ This accordion uses the `open` attribute to expand a designated panel on page lo The headline of the content item

-
- Button text -
``` From 13b3e9f65f228a2aa24c2ede40cfc9a3818e149b Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Mon, 26 Aug 2024 11:31:19 -0700 Subject: [PATCH 23/33] Remove default icon location example --- site/src/components/accordion.md | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/site/src/components/accordion.md b/site/src/components/accordion.md index 43dff3d24..c12c6cebe 100644 --- a/site/src/components/accordion.md +++ b/site/src/components/accordion.md @@ -111,15 +111,7 @@ Applying the `name` attribute to all accordion items with the same value will al By default, the expansion indicator icon is located before the accordion item's header. Applying the `.accordion-icon-end` class to the item will change the icon's position to the end of the header. ```html -
- -
Accordion icon's default position
- -
-

Accordion panel 1

-
-
-
+
Accordion icon's end position
 From 20fa8a17e26a5ca6080a896a842f82a062a4fbe0 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Mon, 26 Aug 2024 11:55:09 -0700 Subject: [PATCH 24/33] Updates component copy and pattern heading elements --- site/src/components/accordion.md | 4 ++-- site/src/patterns/accordion.md | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/site/src/components/accordion.md b/site/src/components/accordion.md index c12c6cebe..d13fbaca2 100644 --- a/site/src/components/accordion.md +++ b/site/src/components/accordion.md @@ -46,7 +46,7 @@ Here is an example of a standard `.accordion` usage. By default, accordion items ### Open -There is an option to have the accordion component load in the expanded state by adding the `open` attribute to one of the items. +To load the accordion component in the expanded state by default, add the `open` attribute to the appropriate `
` element. ```html
@@ -123,7 +123,7 @@ By default, the expansion indicator icon is located before the accordion item's ## Sizes -`accordion-sm`/`accordion-lg` modifier classes make the text size and padding a little bigger or smaller than the default. +The `accordion-sm`/`accordion-lg` modifier classes make the summary's font size and padding a little smaller or bigger than the default. ```html
diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index c19ccbe7d..fabd8f00e 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -62,7 +62,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo
-

Accordion header 1 text

+

Accordion header 1 text

Accordion subheader text

 @@ -87,7 +87,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo
-

Accordion header 2 text

+

Accordion header 2 text

Accordion subheader text

 @@ -112,7 +112,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo
-

Accordion header 3 text

+

Accordion header 3 text

Accordion subheader text

 From 2801feafae33c8496cb1f3b93e8c5b1dd3bc01bd Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Mon, 26 Aug 2024 12:04:44 -0700 Subject: [PATCH 25/33] Moves patterns disclaimer to components intro section --- site/src/components/accordion.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/site/src/components/accordion.md b/site/src/components/accordion.md index d13fbaca2..c4365e757 100644 --- a/site/src/components/accordion.md +++ b/site/src/components/accordion.md @@ -11,6 +11,8 @@ classPrefixes: Accordion is a component for grouping sections of related content that can be opened or closed. Accordion is built on top of the `
` HTML element. +This page discusses the component and subcomponents that make up `.accordion`, but it does not prescribe particular patterns. For examples of specific accordion builds, look to the [accordion patterns page](../patterns/accordion.md) for guidance. + ## Usage Here is an example of a standard `.accordion` usage. By default, accordion items are closed and allow multiple items to be open at once. @@ -151,7 +153,3 @@ The `accordion-sm`/`accordion-lg` modifier classes make the summary's font size
``` - -## Patterns - -This page discusses the component and subcomponents that make up `.accordion`, but it does not prescribe particular patterns. For examples of specific accordion builds, look to the [accordion patterns page](../patterns/accordion.md) for guidance. From 8da63ea6e7adac04bdbfc400e7f345ef160f5d79 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Wed, 28 Aug 2024 16:17:04 -0700 Subject: [PATCH 26/33] Adds rtl chevron angles and rotation transformation --- css/src/components/accordion.scss | 50 +++++++++++++++++++++++-------- css/src/mixins/chevron.scss | 17 ++++++++++- 2 files changed, 53 insertions(+), 14 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index 001da5ee5..5fdceb3bc 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -1,4 +1,4 @@ -/* stylelint-disable selector-no-qualifying-type */ +/* stylelint-disable selector-max-specificity, selector-no-qualifying-type */ $accordion-font-size-sm: $font-size-9 !default; $accordion-font-size-md: $font-size-8 !default; $accordion-font-size-lg: $font-size-7 !default; @@ -60,27 +60,51 @@ $accordion-transition: transform 0.15s !default; } } - &:not(.accordion-icon-end) summary::before { - @include chevron-right; + &:not(.accordion-icon-end) { + summary::before { + @include chevron-right; - margin-inline-end: $accordion-spacing-sm; - transition: $accordion-transition; + margin-inline-end: $accordion-spacing-sm; + transition: $accordion-transition; + } + + &:dir(rtl) summary::before { + @include chevron-right-rtl; + } } - &.accordion-icon-end summary::after { - @include chevron-down; + &.accordion-icon-end { + summary::after { + @include chevron-down; - margin-inline-start: $accordion-spacing-sm; - transition: $accordion-transition; + margin-inline-start: $accordion-spacing-sm; + transition: $accordion-transition; + } + + &:dir(rtl) summary::after { + @include chevron-down-rtl; + } } &[open] { - &:not(.accordion-icon-end) summary::before { - transform: $chevron-down-rotate translate(calc($chevron-arrow-size / 2), 0); + &:not(.accordion-icon-end) { + summary::before { + transform: $chevron-down-rotate translate(calc($chevron-arrow-size / 2), 0); + } + + &:dir(rtl) summary::before { + transform: $chevron-down-rotate-rtl translate(calc($chevron-arrow-size / 2 * -1), 0); + } } - &.accordion-icon-end summary::after { - transform: $chevron-up-rotate-scale-xy; + &.accordion-icon-end { + summary::after { + transform: $chevron-up-rotate-scale-xy; + } + + &:dir(rtl) summary::after { + transform: $chevron-up-rotate-scale-xy-rtl; + } } } diff --git a/css/src/mixins/chevron.scss b/css/src/mixins/chevron.scss index 6921e1622..7eb677292 100644 --- a/css/src/mixins/chevron.scss +++ b/css/src/mixins/chevron.scss @@ -3,9 +3,12 @@ $chevron-arrow-size: 0.525em !default; $chevron-arrow-border-width: 1px !default; $chevron-arrow-actual-width: 0.75em !default; $chevron-down-rotate: rotate(-45deg) !default; +$chevron-down-rotate-rtl: rotate(-315deg) !default; +$chevron-right-rotate-rtl: rotate(-225deg) !default; $chevron-right-rotate: rotate(-135deg) !default; $chevron-up-rotate: rotate(-225deg) !default; -$chevron-up-rotate-scale-xy: rotate(-45deg) scaleY(-1) scaleX(-1); +$chevron-up-rotate-scale-xy: $chevron-down-rotate scaleY(-1) scaleX(-1); +$chevron-up-rotate-scale-xy-rtl: $chevron-down-rotate-rtl scaleY(-1) scaleX(-1); %chevron { width: $chevron-arrow-size; @@ -26,8 +29,20 @@ $chevron-up-rotate-scale-xy: rotate(-45deg) scaleY(-1) scaleX(-1); transform: $chevron-right-rotate; } +@mixin chevron-right-rtl { + @extend %chevron; + + transform: $chevron-right-rotate-rtl; +} + @mixin chevron-down { @extend %chevron; transform: $chevron-down-rotate; } + +@mixin chevron-down-rtl { + @extend %chevron; + + transform: $chevron-down-rotate-rtl; +} From 1316ce11a1e6cf3672a395bb8cec2d78838a9a84 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Fri, 30 Aug 2024 16:25:17 -0700 Subject: [PATCH 27/33] Updates copy, simplifies mixin --- css/src/components/accordion.scss | 28 +++++++++++++--------------- site/src/components/accordion.md | 2 +- site/src/patterns/accordion.md | 2 +- 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index 5fdceb3bc..f4dde1e33 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -3,24 +3,16 @@ $accordion-font-size-sm: $font-size-9 !default; $accordion-font-size-md: $font-size-8 !default; $accordion-font-size-lg: $font-size-7 !default; -$accordion-spacing-xs: $spacer-2 !default; -$accordion-spacing-sm: $spacer-3 !default; -$accordion-spacing-md: $spacer-4 !default; -$accordion-spacing-lg: $spacer-5 !default; +$accordion-spacing: $spacer-4 !default; $accordion-transition: transform 0.15s !default; // Spacing and font-size -@mixin accordion-summary-sizes($font-size, $padding-size) { +@mixin accordion-summary-sizes($font-size) { $icon-before-offset-size: calc($font-size - 0.375rem); $icon-after-offset-size: calc($font-size - 0.5rem); - .accordion-content, - summary { - padding-block: $padding-size; - } - summary { font-size: $font-size; } @@ -39,12 +31,18 @@ $accordion-transition: transform 0.15s !default; } .accordion { - @include accordion-summary-sizes($accordion-font-size-md, $accordion-spacing-md); + @include accordion-summary-sizes($accordion-font-size-md); summary { display: flex; line-height: 1.5; cursor: pointer; + padding-block: $accordion-spacing; + + &::before, + &::after { + flex-shrink: 0; + } > &:hover { color: $primary-hover; @@ -64,7 +62,7 @@ $accordion-transition: transform 0.15s !default; summary::before { @include chevron-right; - margin-inline-end: $accordion-spacing-sm; + margin-inline-end: $accordion-spacing; transition: $accordion-transition; } @@ -77,7 +75,7 @@ $accordion-transition: transform 0.15s !default; summary::after { @include chevron-down; - margin-inline-start: $accordion-spacing-sm; + margin-inline-start: $accordion-spacing; transition: $accordion-transition; } @@ -115,10 +113,10 @@ $accordion-transition: transform 0.15s !default; // Sizes &.accordion-lg { - @include accordion-summary-sizes($accordion-font-size-lg, $accordion-spacing-lg); + @include accordion-summary-sizes($accordion-font-size-lg); } &.accordion-sm { - @include accordion-summary-sizes($accordion-font-size-sm, $accordion-spacing-sm); + @include accordion-summary-sizes($accordion-font-size-sm); } } diff --git a/site/src/components/accordion.md b/site/src/components/accordion.md index c4365e757..f436f455c 100644 --- a/site/src/components/accordion.md +++ b/site/src/components/accordion.md @@ -9,7 +9,7 @@ classPrefixes: # Accordion -Accordion is a component for grouping sections of related content that can be opened or closed. Accordion is built on top of the `
` HTML element. +Accordion is a component for grouping sections of related content that can be opened or closed. Accordion is built on top of the `
` [HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#customizing_the_disclosure_widget). This page discusses the component and subcomponents that make up `.accordion`, but it does not prescribe particular patterns. For examples of specific accordion builds, look to the [accordion patterns page](../patterns/accordion.md) for guidance. diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index fabd8f00e..8de872a05 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -6,7 +6,7 @@ template: standard # Accordion patterns -Because the `details` component has so many possible permutations, it can be helpful to provide examples of certain styles. +Because the `.accordion` component has so many possible permutations, it can be helpful to provide examples of certain styles. ## Accordion From 0dd1fc24acec5ce681a4e593e3bbc493773712cf Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Fri, 30 Aug 2024 16:48:43 -0700 Subject: [PATCH 28/33] Replaces inline margin with gap, removes duplicate font class --- css/src/components/accordion.scss | 6 +++--- site/src/patterns/accordion.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index f4dde1e33..58e5afaca 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -3,8 +3,8 @@ $accordion-font-size-sm: $font-size-9 !default; $accordion-font-size-md: $font-size-8 !default; $accordion-font-size-lg: $font-size-7 !default; +$accordion-gap: $layout-2 !default; $accordion-spacing: $spacer-4 !default; - $accordion-transition: transform 0.15s !default; // Spacing and font-size @@ -38,9 +38,11 @@ $accordion-transition: transform 0.15s !default; line-height: 1.5; cursor: pointer; padding-block: $accordion-spacing; + gap: $accordion-gap; &::before, &::after { + // Prevent caret from being clipped when accordion title is long flex-shrink: 0; } @@ -62,7 +64,6 @@ $accordion-transition: transform 0.15s !default; summary::before { @include chevron-right; - margin-inline-end: $accordion-spacing; transition: $accordion-transition; } @@ -75,7 +76,6 @@ $accordion-transition: transform 0.15s !default; summary::after { @include chevron-down; - margin-inline-start: $accordion-spacing; transition: $accordion-transition; } diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index 8de872a05..e08433c9f 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -14,7 +14,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo ```html
- +
Accordion headline 1 text
From 9d3d573e0bccb3b9f11a3011acfed1f6e507bcab Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Wed, 4 Sep 2024 16:24:59 -0700 Subject: [PATCH 29/33] Updates copy, adds xl, xxl sizes --- css/src/components/accordion.scss | 12 +++++++- site/src/components/accordion.md | 18 +++++++++++- site/src/patterns/accordion.md | 48 +++++++++++++++---------------- 3 files changed, 52 insertions(+), 26 deletions(-) diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index 58e5afaca..f39b76ba6 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -2,6 +2,8 @@ $accordion-font-size-sm: $font-size-9 !default; $accordion-font-size-md: $font-size-8 !default; $accordion-font-size-lg: $font-size-7 !default; +$accordion-font-size-xl: $font-size-6 !default; +$accordion-font-size-xxl: $font-size-5 !default; $accordion-gap: $layout-2 !default; $accordion-spacing: $spacer-4 !default; @@ -42,7 +44,7 @@ $accordion-transition: transform 0.15s !default; &::before, &::after { - // Prevent caret from being clipped when accordion title is long + // Prevents chevron from being clipped when accordion title is long flex-shrink: 0; } @@ -112,6 +114,14 @@ $accordion-transition: transform 0.15s !default; // Sizes + &.accordion-xxl { + @include accordion-summary-sizes($accordion-font-size-xxl); + } + + &.accordion-xl { + @include accordion-summary-sizes($accordion-font-size-xl); + } + &.accordion-lg { @include accordion-summary-sizes($accordion-font-size-lg); } diff --git a/site/src/components/accordion.md b/site/src/components/accordion.md index f436f455c..0de8b0bd5 100644 --- a/site/src/components/accordion.md +++ b/site/src/components/accordion.md @@ -9,7 +9,7 @@ classPrefixes: # Accordion -Accordion is a component for grouping sections of related content that can be opened or closed. Accordion is built on top of the `
` [HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#customizing_the_disclosure_widget). +Accordion is a component for grouping sections of related content that can be opened or closed. Accordion is built on top of the [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#customizing_the_disclosure_widget) HTML element. This page discusses the component and subcomponents that make up `.accordion`, but it does not prescribe particular patterns. For examples of specific accordion builds, look to the [accordion patterns page](../patterns/accordion.md) for guidance. @@ -152,4 +152,20 @@ The `accordion-sm`/`accordion-lg` modifier classes make the summary's font size

Accordion panel content

+
+ +
Extra large accordion header
+ +
+

Accordion panel content

+
+
+
+ +
Extra extra larger accordion header
+ +
+

Accordion panel content

+
+
``` diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index e08433c9f..913791f60 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -24,9 +24,9 @@ This accordion uses the `open` attribute to expand a designated panel on page lo

Accordion content subheading

@@ -43,15 +43,15 @@ This accordion uses the `open` attribute to expand a designated panel on page lo

Accordion content subheading

@@ -59,24 +59,24 @@ This accordion uses the `open` attribute to expand a designated panel on page lo ``` ```html -
+
-

Accordion header 1 text

+

Accordion header 1 text

Accordion subheader text
@@ -84,24 +84,24 @@ This accordion uses the `open` attribute to expand a designated panel on page lo
-
+
-

Accordion header 2 text

+

Accordion header 2 text

Accordion subheader text
@@ -109,24 +109,24 @@ This accordion uses the `open` attribute to expand a designated panel on page lo
-
+
-

Accordion header 3 text

+

Accordion header 3 text

Accordion subheader text
From 956aad384909166f52e7728083d5eb90f769e5a1 Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Thu, 5 Sep 2024 10:56:55 -0700 Subject: [PATCH 30/33] Add descriptions to accordion patterns --- site/src/patterns/accordion.md | 145 +++++++++++++++------------------ 1 file changed, 67 insertions(+), 78 deletions(-) diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index 913791f60..87e009771 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -8,9 +8,9 @@ template: standard Because the `.accordion` component has so many possible permutations, it can be helpful to provide examples of certain styles. -## Accordion +## Accent accordion -This accordion uses the `open` attribute to expand a designated panel on page load. Grouping `.accordion` components together using the `name` attribute, prevents more than 1 panel from being open at a time. Atomics classes are used to style the accordion `
` and `` elements. +This accordion uses standard `.accordion` subcomponents. This accordion pattern makes use of background color tokens and border atomics. Spacing atomics are used to separate the [`.accordion`](../components/accordion.md) components, as well as align the content in the `summary` and `accordion-content` subcomponents. Typography atomics are used for the `.accordion-header` subcomponent text. ```html
@@ -18,12 +18,12 @@ This accordion uses the `open` attribute to expand a designated panel on page lo
Accordion headline 1 text
-

+

Viverra aliquet eget sit amet tellus cras. Nisl nisi scelerisque eu ultrices vitae. Condimentum id venenatis a condimentum. Ut eu sem integer vitae.

Accordion content subheading

-
+

Content Type

The headline of the content item @@ -36,19 +36,19 @@ This accordion uses the `open` attribute to expand a designated panel on page lo
Accordion headline 2 text
-

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas.

Accordion content subheading

-
``` +## Subheading accordion + +These accordions uses standard `.accordion` subcomponents, border atomics are used to create decorative separators. Subheadings should only be added to `-xl` and `-xxl` [`.accordion` sizes](../components/accordion.md#sizes). Since the `` element [implictly has a default role of `button`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#sect5), typography in the `` element should be contained in `

` tags and styled with typography atomics. + ```html -

- -
-

Accordion header 1 text

-

Accordion subheader text

-
- -
- - -
- Button text -
-
-
-
- -
-

Accordion header 2 text

-

Accordion subheader text

-
- -
- -
+
+ + +
+ Button text
- -
- Button text -
-
-
-
- -
-

Accordion header 3 text

-

Accordion subheader text

- -
-
+
+ +
+

Accordion header 2 text

+

Accordion subheader text

- - +
+ + +
+ Button text
- -
- Button text
-
-
+
+ ``` +## Coda accordion + +These accordions us standard `.accordion` subcomponents, border-atomics to create a . They use `.accordion-icon-end` to right align the icon. Background color atomics are used for the `.accordion-content` subcomponent. Due to the border and backgound color atomics used, a consistent spacing padding atomic is used to align the header and panel content. Note that is recommended right aligned icon accordions not be full-width elements at desktop sizes. + ```html
- +
Accordion header text
@@ -150,7 +139,7 @@ This accordion uses the `open` attribute to expand a designated panel on page lo
- +
Accordion header text
From 656eb7e6fe4960be97d4d2512da84bd07a42e6cb Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Thu, 5 Sep 2024 11:16:30 -0700 Subject: [PATCH 31/33] Updates accordion sizes documentation with larger sizes --- site/src/components/accordion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/accordion.md b/site/src/components/accordion.md index 0de8b0bd5..a91eb9226 100644 --- a/site/src/components/accordion.md +++ b/site/src/components/accordion.md @@ -125,7 +125,7 @@ By default, the expansion indicator icon is located before the accordion item's ## Sizes -The `accordion-sm`/`accordion-lg` modifier classes make the summary's font size and padding a little smaller or bigger than the default. +Modifier classes to make the`.accordion-header's font size and icon size a little smaller or bigger than the default. ```html
From 8949025bbc566a83b9a5d68b20df14f47ecaad2c Mon Sep 17 00:00:00 2001 From: Justin Munn Date: Thu, 5 Sep 2024 14:56:34 -0700 Subject: [PATCH 32/33] Update accordion pattern copy Co-authored-by: Ming Ho <94572161+homing1@users.noreply.github.com> --- site/src/patterns/accordion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md index 87e009771..6907d35f4 100644 --- a/site/src/patterns/accordion.md +++ b/site/src/patterns/accordion.md @@ -123,7 +123,7 @@ These accordions uses standard `.accordion` subcomponents, border atomics are us ## Coda accordion -These accordions us standard `.accordion` subcomponents, border-atomics to create a . They use `.accordion-icon-end` to right align the icon. Background color atomics are used for the `.accordion-content` subcomponent. Due to the border and backgound color atomics used, a consistent spacing padding atomic is used to align the header and panel content. Note that is recommended right aligned icon accordions not be full-width elements at desktop sizes. +These accordions use standard `.accordion` subcomponents and border-atomics to create an accordion . They use `.accordion-icon-end` to right align the icon. Background color atomics are used for the `.accordion-content` subcomponent. Due to the border and background color atomics used, a consistent spacing padding atomic is used to align the header and panel content. It is recommended that accordions with right aligned icons not be full-width elements at desktop sizes. ```html
From ba7a8db08b30b71ead14502db0d2f076bf66d31b Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Fri, 4 Oct 2024 13:12:27 -0700 Subject: [PATCH 33/33] Removing patterns page; small updates --- .changeset/smart-lions-sniff.md | 2 +- css/src/components/accordion.scss | 19 +-- integration/config/page.ts | 1 - integration/tests/accessibility.spec.ts | 1 - site/src/components/accordion.md | 64 +++++----- site/src/patterns/accordion.md | 153 ------------------------ 6 files changed, 47 insertions(+), 193 deletions(-) delete mode 100644 site/src/patterns/accordion.md diff --git a/.changeset/smart-lions-sniff.md b/.changeset/smart-lions-sniff.md index 888930168..df95de2b7 100644 --- a/.changeset/smart-lions-sniff.md +++ b/.changeset/smart-lions-sniff.md @@ -4,4 +4,4 @@ '@microsoft/atlas-site': minor --- -Adds Accordion component, patterns and relevant documentation. +Adding Accordion component and relevant documentation. diff --git a/css/src/components/accordion.scss b/css/src/components/accordion.scss index f39b76ba6..6e1420236 100644 --- a/css/src/components/accordion.scss +++ b/css/src/components/accordion.scss @@ -1,4 +1,3 @@ -/* stylelint-disable selector-max-specificity, selector-no-qualifying-type */ $accordion-font-size-sm: $font-size-9 !default; $accordion-font-size-md: $font-size-8 !default; $accordion-font-size-lg: $font-size-7 !default; @@ -92,6 +91,7 @@ $accordion-transition: transform 0.15s !default; transform: $chevron-down-rotate translate(calc($chevron-arrow-size / 2), 0); } + /* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */ &:dir(rtl) summary::before { transform: $chevron-down-rotate-rtl translate(calc($chevron-arrow-size / 2 * -1), 0); } @@ -102,6 +102,7 @@ $accordion-transition: transform 0.15s !default; transform: $chevron-up-rotate-scale-xy; } + /* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */ &:dir(rtl) summary::after { transform: $chevron-up-rotate-scale-xy-rtl; } @@ -114,19 +115,19 @@ $accordion-transition: transform 0.15s !default; // Sizes - &.accordion-xxl { - @include accordion-summary-sizes($accordion-font-size-xxl); - } - - &.accordion-xl { - @include accordion-summary-sizes($accordion-font-size-xl); + &.accordion-sm { + @include accordion-summary-sizes($accordion-font-size-sm); } &.accordion-lg { @include accordion-summary-sizes($accordion-font-size-lg); } - &.accordion-sm { - @include accordion-summary-sizes($accordion-font-size-sm); + &.accordion-xl { + @include accordion-summary-sizes($accordion-font-size-xl); + } + + &.accordion-xxl { + @include accordion-summary-sizes($accordion-font-size-xxl); } } diff --git a/integration/config/page.ts b/integration/config/page.ts index 6ed336a35..d17f38e61 100644 --- a/integration/config/page.ts +++ b/integration/config/page.ts @@ -49,7 +49,6 @@ export const pages: LocalPageConfig[] = [ { pathname: '/components/textarea.html', name: 'Components/textarea', routes }, { pathname: '/components/toggle.html', name: 'Components/toggle', routes }, { pathname: '/patterns/article-header.html', name: 'Patterns/article-header', routes }, - { pathname: '/patterns/accordion.html', name: 'Patterns/accordion', routes }, { pathname: '/patterns/form-validation.html', name: 'Patterns/form-validation', routes } ]; diff --git a/integration/tests/accessibility.spec.ts b/integration/tests/accessibility.spec.ts index 8361f8b33..8d415c593 100644 --- a/integration/tests/accessibility.spec.ts +++ b/integration/tests/accessibility.spec.ts @@ -53,7 +53,6 @@ const pathnames = [ '/components/textarea.html', '/components/toggle.html', '/patterns/article-header.html', - '/patterns/accordion.html', '/patterns/chat.html', '/tokens/overview.html', '/tokens/animation.html', diff --git a/site/src/components/accordion.md b/site/src/components/accordion.md index a91eb9226..7d24079ae 100644 --- a/site/src/components/accordion.md +++ b/site/src/components/accordion.md @@ -11,8 +11,6 @@ classPrefixes: Accordion is a component for grouping sections of related content that can be opened or closed. Accordion is built on top of the [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#customizing_the_disclosure_widget) HTML element. -This page discusses the component and subcomponents that make up `.accordion`, but it does not prescribe particular patterns. For examples of specific accordion builds, look to the [accordion patterns page](../patterns/accordion.md) for guidance. - ## Usage Here is an example of a standard `.accordion` usage. By default, accordion items are closed and allow multiple items to be open at once. @@ -23,23 +21,25 @@ Here is an example of a standard `.accordion` usage. By default, accordion items
Accordion header 1
-

Accordion panel 1

+

Accordion panel

-
+ +
Accordion header 2
-

Accordion panel 2

+

Accordion panel

-
+ +
Accordion header 3
-

Accordion panel 3

+

Accordion panel

``` @@ -48,7 +48,7 @@ Here is an example of a standard `.accordion` usage. By default, accordion items ### Open -To load the accordion component in the expanded state by default, add the `open` attribute to the appropriate `
` element. +To load the accordion component in the expanded state by default, add the `open` attribute to the `
` element. ```html
@@ -56,23 +56,25 @@ To load the accordion component in the expanded state by default, add the `open`
Accordion header 1
-

Accordion panel 1

+

Accordion panel

-
+ +
Accordion header 2
-

Accordion panel 2

+

Accordion panel

-
+ +
Accordion header 3
-

Accordion panel 3

+

Accordion panel

``` @@ -87,23 +89,25 @@ Applying the `name` attribute to all accordion items with the same value will al
Accordion header 1
-

Accordion panel 1

+

Accordion panel

-
+ +
Accordion header 2
-

Accordion panel 2

+

Accordion panel

-
+ +
Accordion header 3
-

Accordion panel 3

+

Accordion panel

``` @@ -118,7 +122,7 @@ By default, the expansion indicator icon is located before the accordion item's
Accordion icon's end position
-

Accordion panel 2

+

Accordion panel

``` @@ -133,39 +137,43 @@ Modifier classes to make the`.accordion-header's font size and icon size a littl
Small accordion header
-

Accordion panel content

+

Accordion panel

-
+ +
Default accordion header
-

Accordion panel content

+

Accordion panel

-
+ +
Large accordion header
-

Accordion panel content

+

Accordion panel

-
+ +
Extra large accordion header
-

Accordion panel content

+

Accordion panel

-
+ +
Extra extra larger accordion header
-

Accordion panel content

+

Accordion panel

``` diff --git a/site/src/patterns/accordion.md b/site/src/patterns/accordion.md deleted file mode 100644 index 6907d35f4..000000000 --- a/site/src/patterns/accordion.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Accordion -description: Accordion patterns in the Atlas Design System -template: standard ---- - -# Accordion patterns - -Because the `.accordion` component has so many possible permutations, it can be helpful to provide examples of certain styles. - -## Accent accordion - -This accordion uses standard `.accordion` subcomponents. This accordion pattern makes use of background color tokens and border atomics. Spacing atomics are used to separate the [`.accordion`](../components/accordion.md) components, as well as align the content in the `summary` and `accordion-content` subcomponents. Typography atomics are used for the `.accordion-header` subcomponent text. - -```html -
- -
Accordion headline 1 text
- -
-

- Viverra aliquet eget sit amet tellus cras. Nisl nisi scelerisque eu ultrices vitae. - Condimentum id venenatis a condimentum. Ut eu sem integer vitae. -

-

Accordion content subheading

- -
-
-
- -
Accordion headline 2 text
- -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa - eget egestas. -

-

Accordion content subheading

- - -
-
-``` - -## Subheading accordion - -These accordions uses standard `.accordion` subcomponents, border atomics are used to create decorative separators. Subheadings should only be added to `-xl` and `-xxl` [`.accordion` sizes](../components/accordion.md#sizes). Since the `` element [implictly has a default role of `button`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#sect5), typography in the `` element should be contained in `

` tags and styled with typography atomics. - -```html -

-
- -
-

Accordion header 1 text

-

Accordion subheader text

-
- -
- - -
- Button text -
-
-
-
- -
-

Accordion header 2 text

-

Accordion subheader text

-
- -
- - -
- Button text -
-
-
-
-``` - -## Coda accordion - -These accordions use standard `.accordion` subcomponents and border-atomics to create an accordion . They use `.accordion-icon-end` to right align the icon. Background color atomics are used for the `.accordion-content` subcomponent. Due to the border and background color atomics used, a consistent spacing padding atomic is used to align the header and panel content. It is recommended that accordions with right aligned icons not be full-width elements at desktop sizes. - -```html -
-
- -
Accordion header text
- -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. -

-
-
-
- -
Accordion header text
- -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. -

-
-
-
-```