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.

Sign up for GitHub

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

Add steps component #696

Merged
merged 7 commits into from
Oct 10, 2024
Merged

Add steps component #696

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9c61ec8
add steps component
ellynliu Oct 9, 2024
25297a6
changeset
ellynliu Oct 9, 2024
c8417a4
add to tests
ellynliu Oct 9, 2024
5115809
comments
ellynliu Oct 10, 2024
ddc91c6
more comments
ellynliu Oct 10, 2024
430a6ef
more comments
ellynliu Oct 10, 2024
2cc4d51
remove unused variable
ellynliu Oct 10, 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
6 changes: 6 additions & 0 deletions .changeset/angry-sloths-cheer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@microsoft/atlas-site': minor
'@microsoft/atlas-css': minor
---

Add steps component and documentation
1 change: 1 addition & 0 deletions css/src/components/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
@import './toggle.scss';
@import './scroll.scss';
@import './site-header.scss';
@import './steps.scss';
@import './stretched-link.scss';
@import './segmented-control.scss';
@import './layout.scss';
23 changes: 23 additions & 0 deletions css/src/components/steps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
$step-font-size: $font-size-7 !default;
$steps-gap: 0.4375em !default;
$steps-size: 0.5em !default;
$steps-size-double: 2 * $steps-size;
BenDMyers marked this conversation as resolved.
Show resolved Hide resolved

.steps {
display: flex;
gap: $steps-gap;
flex-wrap: nowrap;
font-size: $step-font-size;

.step {
height: $steps-size;
aspect-ratio: 1 / 1;
border-radius: $border-radius-rounded;
background-color: $secondary;

&.step-selected {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about something like step-current instead to indicate current progress? Feel free to resolve if you don't see a difference.

aspect-ratio: 2 / 1;
background-color: $primary;
}
}
}
1 change: 1 addition & 0 deletions integration/tests/accessibility.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const pathnames = [
'/components/scroll.html',
'/components/select.html',
'/components/site-header.html',
'/components/steps.html',
'/components/stretched-link.html',
'/components/table.html',
'/components/tag.html',
Expand Down
63 changes: 63 additions & 0 deletions site/src/components/steps.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
---
title: Steps
description: The steps component in the Atlas Design System
template: standard
figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com/design/7raji0IWkuBRxs5kLiADgI/Copilot-Web-UI-kit?node-id=70108-9255&node-type=frame&t=G0FoPLEXPee1yysa-0
classType: Component
classPrefixes:
- steps
BenDMyers marked this conversation as resolved.
Show resolved Hide resolved
- step
---

# Steps

Used to indicate the user's location in a finite progression. These steps are not interactive.

For example, as a user progresses through 5 items, you would see something like this:

```html
<p class="visually-hidden">Step 1 of 5</p>
<div class="steps padding-xxs" aria-hidden="true">
<div class="step step-selected"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
</div>
<p class="visually-hidden">Step 2 of 5</p>
<div class="steps padding-xxs" aria-hidden="true">
<div class="step"></div>
<div class="step step-selected"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
</div>
<p class="visually-hidden">Step 3 of 5</p>
<div class="steps padding-xxs" aria-hidden="true">
<div class="step"></div>
<div class="step"></div>
<div class="step step-selected"></div>
<div class="step"></div>
<div class="step"></div>
</div>
<p class="visually-hidden">Step 4 of 5</p>
<div class="steps padding-xxs" aria-hidden="true">
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step step-selected"></div>
<div class="step"></div>
</div>
<p class="visually-hidden">Step 5 of 5</p>
<div class="steps padding-xxs" aria-hidden="true">
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step"></div>
<div class="step step-selected"></div>
</div>
```
Copy link
Contributor

@wibjorn wibjorn Oct 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm thinking that that our examples need to be paired with some element containing the description of the current state of the steps: such as <p class="visually-hidden">Step 1 of 5</p>.

Then I think we could add something like at the bottom. But we should also have the main example contain the accessible markup too.

## Accessibility concerns

Although the step component is not interactive, it is also not entirely presentational. Thus, it's recommended that you put `aria-hidden` on the component, while including a `aria-hidden` element that communicates the current state of the user's progress through the steps.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit to @wibjorn's suggestion, this should be

-while including a `aria-hidden` element that communicates the current state of the user's progress through the steps.
+while including a `visually-hidden` element that communicates the current state of the user's progress through the steps.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

like the nit

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since I was exactly wrong :D


## Accessibility concerns

Although the step component is not interactive, it is also not entirely presentational. Thus, it's recommended that you put `aria-hidden` on the component, while including a `visually-hidden` element that communicates the current state of the user's progress through the steps.
Loading