Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Adds Accordion component and patterns #662

Merged
merged 33 commits into from
Oct 4, 2024
Merged
Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
962e77d
Adds details component
jwmunn Aug 19, 2024
a056a50
Adds Accordion page to patterns
jwmunn Aug 19, 2024
7493ddd
Adds details and accordion pages to test coverage
jwmunn Aug 19, 2024
75dd615
Adds changeset
jwmunn Aug 19, 2024
347e20b
Stylelint fixes
jwmunn Aug 19, 2024
23c5985
Adds margin to example accordion pattern card content
jwmunn Aug 19, 2024
31f548e
Updates to class scope, adds sizes
jwmunn Aug 20, 2024
0c8aa43
Adds .details-content container and styles, adds .details pattern
jwmunn Aug 20, 2024
cede0ec
Renames details to accordion, adds right chevron location option, abs…
jwmunn Aug 21, 2024
ca9746b
Remove learn references, refactor scss
jwmunn Aug 21, 2024
3760b36
Adds padding for right aligned chevron to prevent overlap
jwmunn Aug 22, 2024
fceae88
Put chevron rotation angles into mixin variables, rename accordion mixin
jwmunn Aug 22, 2024
bf80493
Updates changeset description
jwmunn Aug 22, 2024
a2f7b0f
Makes icon positioning and padding more aligned with content padding.
jwmunn Aug 22, 2024
ca3547f
Update scope to remove unneeded font-size rule
jwmunn Aug 22, 2024
3a2c94a
Fix icon position inconsistencies
jwmunn Aug 22, 2024
02d5162
Nest rules for better legibility
jwmunn Aug 22, 2024
2df4a39
Scopes line-height to summary element
jwmunn Aug 22, 2024
0f1a44c
Removes name attr from examples, updates copy
jwmunn Aug 23, 2024
cb62108
Renames mixin variable to be consistent w/ other params
jwmunn Aug 23, 2024
34756b1
t push origin jumunn/acc
jwmunn Aug 23, 2024
6ef8162
Remove button from first pattern
jwmunn Aug 24, 2024
13b3e9f
Remove default icon location example
jwmunn Aug 26, 2024
20fa8a1
Updates component copy and pattern heading elements
jwmunn Aug 26, 2024
2801fea
Moves patterns disclaimer to components intro section
jwmunn Aug 26, 2024
8da63ea
Adds rtl chevron angles and rotation transformation
jwmunn Aug 28, 2024
1316ce1
Updates copy, simplifies mixin
jwmunn Aug 30, 2024
0dd1fc2
Replaces inline margin with gap, removes duplicate font class
jwmunn Aug 30, 2024
9d3d573
Updates copy, adds xl, xxl sizes
jwmunn Sep 4, 2024
956aad3
Add descriptions to accordion patterns
jwmunn Sep 5, 2024
656eb7e
Updates accordion sizes documentation with larger sizes
jwmunn Sep 5, 2024
8949025
Update accordion pattern copy
jwmunn Sep 5, 2024
ba7a8db
Removing patterns page; small updates
ollips Oct 4, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/smart-lions-sniff.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@microsoft/atlas-integration': minor
'@microsoft/atlas-css': minor
'@microsoft/atlas-site': minor
---

Adds Accordion component, patterns and relevant documentation.
122 changes: 122 additions & 0 deletions css/src/components/accordion.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
/* stylelint-disable selector-max-specificity, selector-no-qualifying-type */
ollips marked this conversation as resolved.
Show resolved Hide resolved
$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

@mixin accordion-summary-sizes($font-size) {
$icon-before-offset-size: calc($font-size - 0.375rem);
$icon-after-offset-size: calc($font-size - 0.5rem);

summary {
font-size: $font-size;
}

&:not(.accordion-icon-end) summary {
&::before {
margin-block-start: $icon-before-offset-size;
}
}

&.accordion-icon-end summary {
&::after {
margin-block-start: $icon-after-offset-size;
}
}
}

.accordion {
@include accordion-summary-sizes($accordion-font-size-md);

summary {
display: flex;
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;
}

> &:hover {
color: $primary-hover;

&::before,
&::after {
border-color: $primary-hover;
}
}

.accordion-header {
flex-grow: 1;
}
}

&:not(.accordion-icon-end) {
summary::before {
@include chevron-right;

transition: $accordion-transition;
}

&:dir(rtl) summary::before {
@include chevron-right-rtl;
}
}

&.accordion-icon-end {
summary::after {
@include chevron-down;

transition: $accordion-transition;
}

&:dir(rtl) summary::after {
@include chevron-down-rtl;
}
}

&[open] {
&:not(.accordion-icon-end) {
ollips marked this conversation as resolved.
Show resolved Hide resolved
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;
}

&:dir(rtl) summary::after {
transform: $chevron-up-rotate-scale-xy-rtl;
}
}
}

.accordion-content {
font-size: $accordion-font-size-md;
}

// Sizes

&.accordion-lg {
@include accordion-summary-sizes($accordion-font-size-lg);
}

&.accordion-sm {
@include accordion-summary-sizes($accordion-font-size-sm);
}
}
21 changes: 4 additions & 17 deletions css/src/components/form/select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -72,24 +68,15 @@ $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 {
@include chevron-down;

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);
}

&.select-disabled::after {
Expand Down
1 change: 1 addition & 0 deletions css/src/components/index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import './accordion.scss';
@import './badge.scss';
@import './banner.scss';
@import './breadcrumbs.scss';
Expand Down
48 changes: 48 additions & 0 deletions css/src/mixins/chevron.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
$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-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: $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;
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 {
homing1 marked this conversation as resolved.
Show resolved Hide resolved
@extend %chevron;

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;
}
1 change: 1 addition & 0 deletions css/src/mixins/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 2 additions & 0 deletions integration/config/page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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/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 },
Expand All @@ -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 }
];

Expand Down
2 changes: 2 additions & 0 deletions integration/tests/accessibility.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const pathnames = [
'/atomics/spacing.html',
'/atomics/typography.html',
'/components/overview.html',
'/components/accordion.html',
'/components/badge.html',
'/components/banner.html',
'/components/breadcrumbs.html',
Expand Down Expand Up @@ -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',
Expand Down
Loading
Loading