| Class | -Applied to | -Description | -
|---|---|---|
{{ item.class }} |
- {{ item.applies }} |
- {{ item.description }} | -
- 16px
- default
- |
-
-
- |
- |
- 24px
- .s-avatar__24
- |
-
-
- |
- |
- 32px
- .s-avatar__32
- |
-
-
- |
- |
- 48px
- .s-avatar__48
- |
-
-
- |
- |
- 64px
- .s-avatar__64
- |
-
-
- |
- |
- 96px
- .s-avatar__96
- |
-
-
- |
- |
- 128px
- .s-avatar__128
- |
-
-
- |
- |
| + | + | + |
|---|---|---|
+ {{ example }}px
+ |
+
+ {% if example == "16" %}default{% else %}.s-avatar__{{ example }}{% endif %}
+ |
+
+
+ |
+
- 16px
- default
- |
-
-
-
-
- Online
- |
- |
- 24px
- .s-avatar__24
- |
-
-
-
-
- Online
- |
- |
| + | + | + |
|---|---|---|
+ {{ example }}px
+ |
+
+ {% if example == 16 %}default{% else %}.s-avatar__{{ example }}{% endif %}
+ |
+
+
+
+
+ Online
+ |
+
- 16px
- default
- |
-
-
-
-
- {% icon "ShieldXSm", "native s-avatar--badge" %}
-
- Hum
-
- |
-
-
-
-
- {% icon "ShieldXSm", "native s-avatar--badge" %}
-
- Hum
-
- |
-
-
-
-
- Hum
-
- 
- {% icon "ShieldXSm", "native s-avatar--badge" %}
- |
- ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
- 24px
- .s-avatar__24
- |
- - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - | -- - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - | -
-
-
- Hum
- {% icon "ShieldXSm", "native s-avatar--badge" %}
-
- |
- ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
- 32px
- .s-avatar__32
- |
- - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - | -- - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - | -
-
-
- Hum
- {% icon "ShieldXSm", "native s-avatar--badge" %}
-
- |
- ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
- 48px
- .s-avatar__48
- |
- - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - | -- - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - | -
-
-
- Hum
- {% icon "ShieldXSm", "native s-avatar--badge" %}
-
- |
- ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
- 64px
- .s-avatar__64
- |
- - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - | -- - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - | -
-
-
- Hum
- {% icon "ShieldXSm", "native s-avatar--badge" %}
-
- |
- ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
- 96px
- .s-avatar__96
- |
- - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - | -- - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - | -
-
-
- Hum
- {% icon "ShieldXSm", "native s-avatar--badge" %}
-
- |
- ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
- 128px
- .s-avatar__128
- |
- - - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - | -- - - Hum - {% icon "ShieldXSm", "native s-avatar--badge" %} - - | -
-
-
- Hum
- {% icon "ShieldXSm", "native s-avatar--badge" %}
-
- |
-
| + | + | + | + | + |
|---|---|---|---|---|
+ {{ example }}px
+ |
+
+ {% if example == "16" %}default{% else %}.s-avatar__{{ example }}{% endif %}
+ |
+ {% for bgColor in avatars.teamBgs %}
+
+ {% if example == 16 %}
+
+
+ {% if bgColor == "png" %}
+
+ Hum
+
+ {% else %}
+
+ {% if bgColor == "png" %}
+
+ {% else %}
+
+ {% endif %}
+ {% icon "ShieldXSm", "native s-avatar--badge" %}
+
+ {% else %}
+
+ Hum
+ {% endif %}
+ {% icon "ShieldXSm", "native s-avatar--badge" %}
+
+ {% endif %}
+ |
+ {% endfor %}
+
.s-badge >
- {% if type.class != nil %}
- .{{ type.class }}
- {% endif %}
- .s-badge
- {% if type.class != nil %}
- .{{ type.class }}
+ {% if type.code != nil %}
+ .{{ type.code }}
+ {% else %}
+ N/A
{% endif %}
.s-badge
- {% if type.class != nil %}
- .{{ type.class }}
- {% endif %}
- {% if badge.class != nil %}
- .{{ badge.class }}
+ {% if type.code != nil %}
+ .{{ type.code }}
+ {% else %}
+ N/A
{% endif %}
.s-badge
- {% if type.class != nil %}
- .{{ type.class }}
+ {% if badge.code != nil %}
+ .{{ badge.code }}
+ {% else %}
+ N/A
{% endif %}
- {% if badge.class != nil %}
- .{{ badge.class }}
+ {% if type.code != nil %}
+ .{{ type.code }}
+ {% else %}
+ N/A
{% endif %}
.{{ class }}
{% endfor %}
@@ -444,13 +446,12 @@
{% for type in types %}
.s-badge
- {% if type.class != nil %}
- .{{ type.class }}
+ {% if type.modifier != nil %}
+ .s-badge__{{ type.modifier }}
{% endif %}
.s-badge
- {% if type.class != nil %}
- .{{ type.class }}
+ {% if type.modifier != nil %}
+ .s-badge__{{ type.modifier }}
{% endif %}
System banners are used for system messaging. They are full-width notices placed in one of two locations:
-
-
- Above everything else: If the system banner is related to the entire website (e.g. the website is in read-only), place the banner first. These cannot be dismissed until the issue is resolved. To pin a system banner to the top of the browser window, add
.is-pinned.
+ - Pinned: If the system banner is related to the entire website (e.g. the website is in read-only), above all other content including the topbar. To pin a system banner to the top of the browser window, add
.is-pinned. - Below the top navigation bar: This is the default location for all system banners. Use these banners when it affects only a particular area of the product (e.g. when a product subscription is about to expire).
Since system banners are a type of notice, you can use the following notice visual styles in conjunction with .s-banner:
Refer to the Classes section for more information on how to apply the correct styles to the banner.
| Class | -Applies to | -Description | -
|---|---|---|
{{ item.class }} |
- {% if item.applies == "N/A" %}{{ item.applies }}{% else %}{{ item.applies }}{% endif %} |
- {{ item.description }} | -
The .s-banner component includes a controller to show and hide the banner programitically. While it is optional, at least including the functionality to close the banner is recommended.
| Attribute | -Applied to | -Description | -
|---|---|---|
data-controller="s-banner" |
- Controller element | -Wires up the element to the banner controller. This may be a .s-banner element or a wrapper element. |
-
data-s-banner-target="banner" |
- .s-banner element | -Wires up the element that is to be shown/hidden | -
data-s-banner-remove-when-hidden="true" |
- Controller element | -Optional Removes the banner from the DOM entirely when it is hidden | -
| Event | -Element | -Description | -
|---|---|---|
s-banner:show |
- Banner target | -Default preventable Fires immediately before showing the banner. Calling .preventDefault() cancels the display of the banner. |
-
s-banner:shown |
- Banner target | -Fires after the banner has been visually shown | -
s-banner:hide |
- Banner target | -Default preventable Fires immediately before hiding the banner. Calling .preventDefault() cancels the removal of the banner. |
-
s-banner:hidden |
- Banner target | -Fires after the banner has been visually hidden | -
| event.detail | -Applicable events | -Description | -
|---|---|---|
dispatcher |
- s-banner:* |
- Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the banner that caused it to hide, etc. |
-
| Function | -Parameters | -Description | -
|---|---|---|
Stacks.showBanner |
-
- element: the element the data-controller="s-banner" attribute is on - |
- Helper to manually show an s-banner element via external JS | -
Stacks.hideBanner |
-
- element: the element the data-controller="s-banner" attribute is on - |
- Helper to manually hide an s-banner element via external JS | -
The .s-banner component includes a controller to show and hide the banner programitically. While it is optional, at least including the functionality to close the banner is recommended.
Use the clear bling variant only when its associated color is already present in the component, such as within a colored tag badge or alongside a filled element.
diff --git a/packages/stacks-docs/product/components/breadcrumbs.html b/packages/stacks-docs/product/components/breadcrumbs.html index 16576359c3..d8e975a573 100644 --- a/packages/stacks-docs/product/components/breadcrumbs.html +++ b/packages/stacks-docs/product/components/breadcrumbs.html @@ -5,29 +5,16 @@ description: Breadcrumbs are used to provide context for the currently-viewed page. tags: components --- +| Class | -Parent | -Description | -
|---|---|---|
{{ item.class }} |
- {{ item.applies }} |
- {{ item.description }} | -
Breadcrumbs show users where they are within a site’s hierarchy. Breadcrumbs help orient the user and allow for navigation to previous page levels. It can be appropriate to use a breadcrumb when:
diff --git a/packages/stacks-docs/product/components/button-groups.html b/packages/stacks-docs/product/components/button-groups.html index 6821683192..e7a4e704a5 100644 --- a/packages/stacks-docs/product/components/button-groups.html +++ b/packages/stacks-docs/product/components/button-groups.html @@ -5,29 +5,16 @@ description: Button groups are a collection of buttons. This component is used in our questions view, and is frequently used in conjunction with other form elements such as search fields and sorting dropdowns. If the content you’re interacting with is a simple paring down or filter of the current view, it’s appropriate to use the.s-btn-group component. Add the class .is-selected and the aria-current attribute with the appropriate value to show the currently selected button.
tags: components
---
+
| Class | -Applied to | -Description | -
|---|---|---|
{{ item.class }} |
- {{ item.applies }} |
- {{ item.description }} | -
Stacks provides 3 different button styles:
@@ -462,7 +470,7 @@The base card styling applies a border and padding to the card.
diff --git a/packages/stacks-docs/product/components/checkbox.html b/packages/stacks-docs/product/components/checkbox.html index 6e07623089..68d36fe476 100644 --- a/packages/stacks-docs/product/components/checkbox.html +++ b/packages/stacks-docs/product/components/checkbox.html @@ -6,6 +6,15 @@ description: Checkable inputs that visually allow for multiple options or true/false values. tags: components --- + +Checkboxes use the same validation states as inputs.
{% header "h3", "Validation classes" %} -| Class | -Description | -
|---|---|
{{ state.class }} |
- {{ state.description }} | -
| Class | -Applies to | -Output | -
|---|---|---|
{{ item.class }} |
- {{ item.applies }} |
- {{ item.description }} | -
diff --git a/packages/stacks-docs/product/components/expandable.html b/packages/stacks-docs/product/components/expandable.html
index 4a2e7759ad..e9eb23e314 100644
--- a/packages/stacks-docs/product/components/expandable.html
+++ b/packages/stacks-docs/product/components/expandable.html
@@ -5,6 +5,16 @@
description: An expandable, sometimes called an accordion, is an element that can be hidden / revealed with a sliding transition.
tags: components
---
+
+ Inputs are normally paired with a label, but there are times when they can be used without a label. Placeholder text should primarily be used as a content prompt and only provided when needed. Labels or instructions must be provided when content requires user input. For any input field within a form that is required for successful data submission, provide the asterisk Stacks includes a special Validation states provides the user feedback based on their interaction (or lack of interaction) with an input. These styles are applied by applying the appropriate class to the wrapping parent container.
@@ -311,31 +295,13 @@ Labels inform users what information is being asked of them. They should be written in sentence case. Link previews automatically appear when you pasting a link into a post, providing a glimpse of what’s been linked to. This approach has been popularized by Slack, Twitter, Facebook, etc. Link previews should be tailored to fit the content received from each third party. It might be appropriate to use atomic utility classes for further customization, but Stacks provides a few reusable patterns:* as a symbol and a legend advising the meaning of the symbol before the first use..s-required-symbol class to ensure the symbol (asterisk) is clearly visible.
-
-
+ {% assign docsItems = inputs.required %}
+ {% assign col2Heading = "" %}
+ {% assign col3Heading = "Applies" %}
+ {% assign col3Classes = "s-table--cell4" %}
+ {% include "docs-table.html" %}
+
{% highlight html %}
*
{% endhighlight %}
@@ -152,26 +152,10 @@
-
-
-
- Class
- Applies
- Definition
-
-
-
- .s-required-symbolabbr element enclosing the asteriskUsed to style the asterisk indicating that a specific field is required.
-
-
-
-
-
-
-
- {% for state in inputs.validation %}
- Class
- Applies
- Definition
-
-
- {% endfor %}
-
- {{ state.class }}Parent wrapper for input
- {{ state.description }}
-
-
-
-
-
-
-
- {% for item in inputs.input %}
- {% assign size = item.sizes %}
- {% for item in size %}
- Name
- Size
- Class
- Example
-
-
- {% endfor %}
- {% endfor %}
-
- {{ item.name }}
- {{ item.size }}
- {% if item.class == "N/A" %}{{ item.class }}{% else %}
- .{{ item.class }}{% endif %}
-
-
-
-
-
-
-
- {% for item in inputs.label %}
- {% assign size = item.sizes %}
- {% for item in size %}
- Name
- Size
- Class
- Example
-
-
- {% endfor %}
- {% endfor %}
-
- {{ item.name }}
- {{ item.size }}
- {% if item.class == "N/A" %}{{ item.class }}{% else %}
- .{{ item.class }}{% endif %}
-
-
-
-
-
-
-
- {% for item in link-previews.classes %}
- Class
- Parent
- Description
-
-
- {% endfor %}
-
- {{ item.class }}{{ item.parent }}{{ item.description }}
-
I'm trying to create a simple fetch with hooks from an AWS database. At the moment it errors out and the only reason I can see is because it breaks the rules of hooks but I'm not sure how. It's at the top level of this functional component and it's not called inside an event handler.
-The result of this call (an array of user data), needs to be exported as a function and called in another file.
-If anyone can spot something I have missed and can highlighted how I'm breaking the rules of hooks I'd be grateful!
-Thanks!
+ {% for item in baseExample.body %} +{{ item }}
+ {% endfor %}a element by default. In addition, we provide .s-link and its variations. In rare situations, .s-link can be applied to n button while maintaining the look of an anchor.
tags: components
---
+
+{% header "h2", "Links" %}
| Class | -Applied to | -Description | -
|---|---|---|
{{ item.class }} |
- {{ item.applies }} |
- {{ item.description }} | -
Any link with adjacent static text cannot use color alone to differentiate it as a link. If a link is next to static text and the only visual indication that it’s a link is the color of the text, it will require an underline in addition to the color. Reference WCAG SC 1.4.1 for more details.
+{% header "h2", "Anchors" %}| Class | -Applied to | -Description | -
|---|---|---|
{{ item.class }} |
- {{ item.applies }} |
- {{ item.description }} | -
Sometimes you need to give all <a> elements inside a container or component the same color, even
when it‘s impractical or even impossible to give each anchor element an s-link class (e.g. because the markup is generated from Markdown).
In this case, you can add the s-anchors class together with one of the modifiers
@@ -101,7 +74,7 @@
| Class | -Applied to | -Description | -
|---|---|---|
- {{ item.class }}
- |
-
- {% if item.applies == "N/A" %}
- {{ item.applies }}
- {% else %}
- {{ item.applies }}
- {% endif %}
- |
- {{ item.description }} | -
| Class | -Applied to | -Example | -
|---|---|---|
- {% if size == "" %}
- .s-loader
- {% else %}
- .{{ size }}
- {%endif %}
- |
-
- {% if size == "" %}
- N/A
- {% else %}
- .s-loader
- {% endif %}
- |
-
-
-
- Loading…
- |
-
| Class | -Parent | -Description | -
|---|---|---|
{{ item.class }} |
- {{ item.applies }} |
- {{ item.description }} | -
- A menu displays a list of choices temporarily, and usually represent tasks or actions. Don’t confuse menus for navigation. -
+A menu displays a list of choices temporarily, and usually represent tasks or actions. Don’t confuse menus for navigation.
{% header "h3", "Basic" %} -- At its most basic, a menu is a simple styled list of contextual actions. Because they’re contextual, it’s strongly recommended that a menu is contained within a popover or a card. When placed in various containers, you’ll need to either account for the padding on the container, or use negative margins on the menu component itself. -
+At its most basic, a menu is a simple styled list of contextual actions. Because they’re contextual, it’s strongly recommended that a menu is contained within a popover or a card. When placed in various containers, you’ll need to either account for the padding on the container, or use negative margins on the menu component itself.
+| Class | -Applies to | -Description | -
|---|---|---|
{{ item.class }} |
- {{ item.applies }} | -{{ item.description }} | -
| Attribute | -Applied to | -Description | -
|---|---|---|
data-controller="s-modal" |
- Controller element | -Wires up the element to the modal controller. This may be a .s-modal element or a wrapper element. |
-
data-s-modal-target="modal" |
- .s-modal element | -Wires up the element that is to be shown/hidden | -
data-s-modal-target="initialFocus" |
- Any child focusable element | -Optional Designates which element to focus on modal show. If absent, defaults to the first focusable element within the modal. | -
data-action="s-modal#toggle" |
- Toggling element | -Wires up the element to toggle the visibility of a modal | -
data-s-modal-return-element="[css selector]" |
- Controller element | -Optional Designates the element to return focus to when the modal is closed. If left unset, focus is not altered on close. | -
data-s-modal-remove-when-hidden="true" |
- Controller element | -Optional Removes the modal from the DOM entirely when it is hidden | -
| Event | -Element | -Description | -
|---|---|---|
s-modal:show |
- Modal target | -Default preventable Fires immediately before showing the modal. Calling .preventDefault() cancels the display of the modal. |
-
s-modal:shown |
- Modal target | -Fires after the modal has been visually shown | -
s-modal:hide |
- Modal target | -Default preventable Fires immediately before hiding the modal. Calling .preventDefault() cancels the removal of the modal. |
-
s-modal:hidden |
- Modal target | -Fires after the modal has been visually hidden | -
| event.detail | -Applicable events | -Description | -
|---|---|---|
dispatcher |
- s-modal:* |
- Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the modal that caused it to hide, etc. |
-
returnElement |
- s-modal:show, s-modal:hide |
- Contains the Element to return focus to on hide. If a value is set to this property inside an event listener, it will be updated on the controller as well. |
-
| Function | -Parameters | -Description | -
|---|---|---|
Stacks.showModal |
-
- element: the element the data-controller="s-modal" attribute is on - |
- Helper to manually show an s-modal element via external JS | -
Stacks.hideModal |
-
- element: the element the data-controller="s-modal" attribute is on - |
- Helper to manually hide an s-modal element via external JS | -
Modals are designed with accessibility in mind by default. When a modal is open, navigation with the keyboard will be constrained to only those elements within the modal.
To ensure maximum compatibility, all a tags must have href attributes and any default focusable items you don’t want focusable must have their tabindex set to -1.
| Item | -Applied to | -Description | -
|---|---|---|
aria-describedby="[id]" |
- .s-modal |
- Supply the modal’s summary copy id. Assistive technologies (such as screen readers) use this to attribute to associate static text with a widget, element groups, headings, definitions, etc. (Source) | -
aria-hidden="[state]" |
- .s-modal |
- Informs assistive technologies (such as screen readers) if they should ignore the element. This should not be confused with the HTML5 hidden attribute which tells the browser to not display an element. (Source) | -
aria-label="[text]" |
- .s-modal--close |
- Labels the element for assistive technologies (such as screen readers). (Source) | -
aria-labelledby="[id]" |
- .s-modal |
- Supply the modal’s title id here. Assistive technologies (such as screen readers) use this to attribute to catalog the document objects correctly. (Source) | -
role="dialog" |
- .s-modal |
- Identifies dialog elements for assistive technologies (Source) | -
role="document" |
- .s-modal--dialog |
- Helps assistive technologies to switch their reading mode from the larger document to a focused dialog window. (Source) | -
Congratulations
{% header "h2", "Sizes" %}
Most modal dialogs look good by default, but may need some combination of .ws[x] or .wmx[x] classes applied to .s-modal--dialog. Additionally, the following class is available for modals:
-
-
-
-
- Class
- Value
- Pixels (13px base)
- Pixels (15px base)
-
-
-
-
- .s-modal__full100% - 48px
- N/A
- N/A
-
-
-
-
+
+ {% assign docsItems = modals.sizes %}
+ {% assign col2Heading = "" %}
+ {% assign col3Heading = "Value" %}
+ {% assign col4Heading = "" %}
+ {% assign tableId = "modals-sizes-table" %}
+ {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/navigation.html b/packages/stacks-docs/product/components/navigation.html
index e46eb813cf..cb2a8cd2b3 100644
--- a/packages/stacks-docs/product/components/navigation.html
+++ b/packages/stacks-docs/product/components/navigation.html
@@ -9,26 +9,9 @@
---
{% header "h2", "Classes" %}
-
-
-
-
- Class
- Applies to
- Description
-
-
-
- {% for item in navigation.classes %}
-
- {{ item.class }}{{ item.applies }}
- {{ item.description }}
-
- {% endfor %}
-
-
-
+ {% assign docsItems = navigation.classes %}
+ {% assign col1Classes = "s-table--cell4" %}
+ {% include "docs-table.html" %}
{% for item in navigation.navigation-attributes %}
{% header "h3", item.title %}
diff --git a/packages/stacks-docs/product/components/notices.html b/packages/stacks-docs/product/components/notices.html
index 08a616f89a..f7a05e6ef8 100644
--- a/packages/stacks-docs/product/components/notices.html
+++ b/packages/stacks-docs/product/components/notices.html
@@ -7,234 +7,30 @@
tags: components
---
-
-
-
-
- {% header "h2", "Accessibility" %}
-
-
-
-
- Item
- Applied to
- Description
-
-
-
- {% for item in notices.access %}
-
- {{ item.item }}
- {% if item.applies == "N/A" %}
- {{ item.applies }}
- {% else %}
- {% assign class = item.applies | split: " " %}
-
- {% for name in class %}
- {{ name }}
- {% endfor %}
- {% endif %}
-
- {{ item.description }} (Source)
-
- {% endfor %}
-
-
-
+ {% header "h2", "Classes" %}
+ {% assign docsItems = notices.classes %}
+ {% assign expandableClassesTable = true %}
+ {% include "docs-table.html" %}
- {% header "h2", "JavaScript" %}
- {% header "h3", "Attributes" %}
-
-
-
-
- Attribute
- Applied to
- Description
-
-
-
-
- data-controller="s-toast"Controller element
- Wires up the element to the toast controller. This may be a .s-toast element or a wrapper element.
-
-
- data-s-toast-target="toast".s-toast element
- Wires up the element that is to be shown/hidden
-
-
- data-s-toast-target="initialFocus"Any child focusable element
- Optional Designates which element to focus on toast show. If absent, defaults to the first focusable element within the toast.
-
-
- data-action="s-toast#toggle"Toggling element
- Wires up the element to toggle the visibility of a toast
-
-
- data-s-toast-return-element="[css selector]"Controller element
- Optional Designates the element to return focus to when the toast is closed. If left unset, focus is not altered on close.
-
-
- data-s-toast-remove-when-hidden="true"Controller element
- Optional Removes the toast from the DOM entirely when it is hidden
-
-
-
-
- {% header "h3", "Events" %}
-
-
-
-
- Event
- Element
- Description
-
-
-
-
- s-toast:showToast target
- Default preventable Fires immediately before showing the toast. Calling .preventDefault() cancels the display of the toast.
-
-
- s-toast:shownToast target
- Fires after the toast has been visually shown
-
-
- s-toast:hideToast target
- Default preventable Fires immediately before hiding the toast. Calling .preventDefault() cancels the removal of the toast.
-
-
- s-toast:hiddenToast target
- Fires after the toast has been visually hidden
-
-
-
-
-
-
-
-
- event.detail
- Applicable events
- Description
-
-
-
-
- dispatchers-toast:*Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the toast that caused it to hide, etc.
-
-
-
-
- returnElements-toast:show, s-toast:hideContains the Element to return focus to on hide. If a value is set to this property inside an event listener, it will be updated on the controller as well.
-
-
-
-
- {% header "h3", "Helpers" %}
-
-
-
-
- Function
- Parameters
- Description
-
-
-
-
- Stacks.showToast
- element: the element the data-controller="s-toast" attribute is on
-
- Helper to manually show an s-toast element via external JS
-
-
- Stacks.hideToast
- element: the element the data-controller="s-toast" attribute is on
-
- Helper to manually hide an s-toast element via external JS
-
-
-
-
+ {% header "h2", "Accessibility" %}
+ {% assign tableId = "docs-accessibility-table" %}
+ {% assign docsItems = notices.accessibility %}
+ {% assign expandableClassesTable = true %}
+ {% assign col1Heading = "Item" %}
+ {% assign col1Classes = "s-table--cell4" %}
+ {% assign col2Heading = "" %}
+ {% assign expandableBtnText = "Show all accessibility items" %}
+ {% include "docs-table.html" %}
- {% header "h2", "Visual styles" %}
- {% header "h3", "Classes" %}
-
-
-
-
- Class
- Applied to
- Description
-
-
-
- {% for item in notices.visual %}
-
- {{ item.class }}
- {% if item.applies == "N/A" %}
- {{ item.applies }}
- {% else %}
- {% assign class = item.applies | split: " " %}
-
- {% for name in class %}
- {{ name }}
- {% endfor %}
- {% endif %}
-
- {{ item.description }}
-
- {% endfor %}
-
-
-
-
+ {% header "h2", "Examples" %}
{% header "h3", "Base" %}
- Default notice variations
- {% header "h3", "Styling child links" %}
+ {% header "h3", "Styling child links" %}
We recommend using descendent anchor classes, typically .s-anchors.s-anchors__inherit.s-anchors__underlined for notices containing links generated from markdown when you cannot manually generate the inner html.
{% highlight html %}
@@ -352,12 +148,10 @@
{% endhighlight %}
-
Notice with default link style
-
@@ -371,57 +165,16 @@
- {% header "h2", "Behaviors" %}
-
-
-
-
- Behavior
- Class
- Applied to
- Description
-
-
-
- {% for item in notices.behavior %}
-
- {{ item.type }}
- {{ item.class }}
- {% if item.applies == "N/A" %}
- {{ item.applies }}
- {% else %}
- {% assign class = item.applies | split: " " %}
+ {% header "h2", "Toast" %}
+ {% tip "warning" %}
+ We are phasing out Toasts due to significant accessibility barriers. Avoid this component for new features. Instead, prioritize integrated alternatives—such as component state changes or inline messages—to provide accessible feedback directly where the user is focused.
+ {% endtip %}
- {% for name in class %}
- {{ name }}
- {% endfor %}
- {% endif %}
-
- {{ item.description }}
-
- {% endfor %}
-
-
-
-
- {% header "h3", "Toast" %}
- Floating notices, but aligned to the top and center of the page and they disappear after a set time.
+ Toasts are floating notices that are aligned to the center top of the page. They disappear after a set time.
Visibility is changed with animation by toggling between aria-hidden="true" and aria-hidden="false".
When including a dismiss button the .s-notice--dismiss class should be applied to the button for toast-specific styling.
-
-
-
-
-
-
-
-
- Usage Warning: We are phasing out Toasts due to significant accessibility barriers. Avoid this component for new features. Instead, prioritize integrated alternatives—such as component state changes or inline messages—to provide accessible feedback directly where the user is focused.
-
+
{% highlight html %}
@@ -465,5 +218,73 @@
{% endfor %}
+
+
+
+
+
+
+ {% header "h3", "JavaScript" %}
+
+ {% header "h4", "Attributes" %}
+ {% assign docsItems = notices.javascript.attributes %}
+ {% assign col1Heading = "Attribute" %}
+ {% assign col1Classes = "s-table--cell5" %}
+ {% assign col2Heading = "" %}
+ {% assign tableId = "docs-javascript-attributes-table" %}
+
+ {% include "docs-table.html" %}
+
+
+ {% header "h4", "Events" %}
+ {% assign docsItems = notices.javascript.events %}
+ {% assign col1Heading = "Event" %}
+ {% assign col2Heading = "" %}
+ {% assign tableId = "docs-javascript-events-table" %}
+
+ {% include "docs-table.html" %}
+
+
+ {% header "h4", "Event details" %}
+ {% assign docsItems = notices.javascript.eventDetails %}
+ {% assign col1Heading = "event.detail" %}
+ {% assign col2Heading = "" %}
+ {% assign col3Heading = "Applicable events" %}
+ {% assign tableId = "docs-javascript-event-details-table" %}
+
+ {% include "docs-table.html" %}
+
+ {% header "h4", "Helpers" "mt48" %}
+
+ The following helpers are available to manually show and hide a toast notice.
+
+ {% assign docsItems = notices.javascript.helpers %}
+ {% assign col1Heading = "Function" %}
+ {% assign col2Heading = "" %}
+ {% assign col3Heading = "Parameters" %}
+ {% assign tableId = "docs-javascript-helpers-table" %}
+ {% include "docs-table.html" %}
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/stacks-docs/product/components/page-titles.html b/packages/stacks-docs/product/components/page-titles.html
index c1ff2c9307..8123de2148 100644
--- a/packages/stacks-docs/product/components/page-titles.html
+++ b/packages/stacks-docs/product/components/page-titles.html
@@ -6,43 +6,20 @@
---
- {% header "h2", "Components" %}
-
-
-
-
- Component
- Description
-
-
-
-
- Page title
- Title of the page. Refer to the content section of Stacks for things like word choice, naming, and capitalization.
-
-
- Description Optional
- Additional context for content and actions on the page.
-
-
- Actions Optional
- Free-form area to include buttons, filters, or other HTML content.
-
-
- Breadcrumbs Optional
- Breadcrumbs can be included to provide context for the currently-viewed page.
-
-
-
-
- {% header "h2", "Admin sections" %}
-
- These components should be used in the admin sections of our private Q&A products.
-
- {% header "h3", "Base Styles" %}
-
- The base style for pages that don’t need further description beyond the page title and don’t have any actions for filters.
-
+ {% header "h2", "Classes" %}
+ {% assign docsItems = page-titles.classes %}
+ {% assign col1Classes = "s-table--cell4" %}
+ {% assign col2Classes = "s-table--cell3" %}
+ {% assign col3Heading = "" %}
+ {% include "docs-table.html" %}
+
+
+
+ {% header "h2", "Examples" %}
+ {% header "h3", "Base example" %}
+ The base style for pages that don’t need further description beyond the page title and don’t have any actions for filters.
+ {% assign example = page-titles.example %}
+
{% highlight html %}
@@ -51,14 +28,13 @@ Page title
{% endhighlight %}
- Page title
+ {{ example.title }}
+
{% header "h3", "Title with description" %}
-
- A summary of a page’s content. Helpful for large pages with multiple actions.
-
+ A summary of a page’s content. Helpful for large pages with multiple actions.
{% highlight html %}
@@ -71,16 +47,15 @@ Page title
- Page title
- Optional description de Finibus Bonorum et Malorum with an optional link.
+ {{ example.title }}
+ {{ example.description }}
+
{% header "h3", "Title with actions" %}
-
- When a page title includes actions, they are located at the far end of the component. This area is free-form, so we can include any markups we'd like, from single button to a d-flex of custom filters and text.
-
+ When a page title includes actions, they are located at the far end of the component. This area is free-form, so we can include any markups we'd like, from single button to a d-flex of custom filters and text.
{% highlight html %}
@@ -94,8 +69,8 @@ Page title
- Page title
- Optional description de Finibus Bonorum et Malorum with an optional link.
+ {{ example.title }}
+ {{ example.description }}
@@ -106,10 +81,9 @@ Page title
+
{% header "h3", "Title with breadcrumbs" %}
-
- Breadcrumbs are used to provide context for the currently-viewed page and reduce the number of actions a website visitor needs to take in order to get to a higher-level page. Breadcrumbs should not be used for single-level sections that have no logical grouping.
-
+ Breadcrumbs are used to provide context for the currently-viewed page and reduce the number of actions a website visitor needs to take in order to get to a higher-level page. Breadcrumbs should not be used for single-level sections that have no logical grouping.
{% highlight html %}
@@ -136,7 +110,7 @@ Page title
…
- Page title
+ {{ example.title }}
Optional description de Finibus Bonorum et Malorum with an optional link.
diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html
index 2b964278b0..5eee2feeac 100644
--- a/packages/stacks-docs/product/components/pagination.html
+++ b/packages/stacks-docs/product/components/pagination.html
@@ -6,35 +6,26 @@
description: Pagination splits content into pages, as seen on questions, tags, users, and jobs listings.
tags: components
---
+
{% header "h2", "Classes" %}
-
-
-
-
- Class
- Applied to
- Description
-
-
-
- {% for item in pagination-component.classes %}
-
- {{ item.class }}{{ item.applies }}{{ item.description }}
-
- {% endfor %}
-
-
-
+ {% assign docsItems = pagination-component.classes %}
+ {% assign col3Classes = "s-table--cell3" %}
+ {% include "docs-table.html" %}
+
{% header "h2", "Example" %}
{% highlight html %}
Most modal dialogs look good by default, but may need some combination of .ws[x] or .wmx[x] classes applied to .s-modal--dialog. Additionally, the following class is available for modals:
| Class | -Value | -Pixels (13px base) | -Pixels (15px base) | -
|---|---|---|---|
.s-modal__full |
- 100% - 48px | -N/A | -N/A | -
| Class | -Applies to | -Description | -
|---|---|---|
{{ item.class }} |
- {{ item.applies }} | -{{ item.description }} | -
| Item | -Applied to | -Description | -
|---|---|---|
{{ item.item }} |
-
- {% if item.applies == "N/A" %}
- {{ item.applies }}
- {% else %}
- {% assign class = item.applies | split: " " %}
-
- {% for name in class %}
- {{ name }}
- {% endfor %}
- {% endif %}
- |
- {{ item.description }} (Source) | -
| Attribute | -Applied to | -Description | -
|---|---|---|
data-controller="s-toast" |
- Controller element | -Wires up the element to the toast controller. This may be a .s-toast element or a wrapper element. |
-
data-s-toast-target="toast" |
- .s-toast element | -Wires up the element that is to be shown/hidden | -
data-s-toast-target="initialFocus" |
- Any child focusable element | -Optional Designates which element to focus on toast show. If absent, defaults to the first focusable element within the toast. | -
data-action="s-toast#toggle" |
- Toggling element | -Wires up the element to toggle the visibility of a toast | -
data-s-toast-return-element="[css selector]" |
- Controller element | -Optional Designates the element to return focus to when the toast is closed. If left unset, focus is not altered on close. | -
data-s-toast-remove-when-hidden="true" |
- Controller element | -Optional Removes the toast from the DOM entirely when it is hidden | -
| Event | -Element | -Description | -
|---|---|---|
s-toast:show |
- Toast target | -Default preventable Fires immediately before showing the toast. Calling .preventDefault() cancels the display of the toast. |
-
s-toast:shown |
- Toast target | -Fires after the toast has been visually shown | -
s-toast:hide |
- Toast target | -Default preventable Fires immediately before hiding the toast. Calling .preventDefault() cancels the removal of the toast. |
-
s-toast:hidden |
- Toast target | -Fires after the toast has been visually hidden | -
| event.detail | -Applicable events | -Description | -
|---|---|---|
dispatcher |
- s-toast:* |
- Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the toast that caused it to hide, etc. |
-
returnElement |
- s-toast:show, s-toast:hide |
- Contains the Element to return focus to on hide. If a value is set to this property inside an event listener, it will be updated on the controller as well. |
-
| Function | -Parameters | -Description | -
|---|---|---|
Stacks.showToast |
-
- element: the element the data-controller="s-toast" attribute is on - |
- Helper to manually show an s-toast element via external JS | -
Stacks.hideToast |
-
- element: the element the data-controller="s-toast" attribute is on - |
- Helper to manually hide an s-toast element via external JS | -
| Class | -Applied to | -Description | -
|---|---|---|
{{ item.class }} |
-
- {% if item.applies == "N/A" %}
- {{ item.applies }}
- {% else %}
- {% assign class = item.applies | split: " " %}
-
- {% for name in class %}
- {{ name }}
- {% endfor %}
- {% endif %}
- |
- {{ item.description }} | -
Default notice variations
- {% header "h3", "Styling child links" %} + {% header "h3", "Styling child links" %}We recommend using descendent anchor classes, typically .s-anchors.s-anchors__inherit.s-anchors__underlined for notices containing links generated from markdown when you cannot manually generate the inner html.
| Behavior | -Class | -Applied to | -Description | -
|---|---|---|---|
| {{ item.type }} - | {{ item.class }} |
-
- {% if item.applies == "N/A" %}
- {{ item.applies }}
- {% else %}
- {% assign class = item.applies | split: " " %}
+ {% header "h2", "Toast" %}
+ {% tip "warning" %}
+ We are phasing out Toasts due to significant accessibility barriers. Avoid this component for new features. Instead, prioritize integrated alternatives—such as component state changes or inline messages—to provide accessible feedback directly where the user is focused.
+ {% endtip %}
- {% for name in class %}
- {{ name }}
- {% endfor %}
- {% endif %}
- |
- {{ item.description }} | -
- Floating notices, but aligned to the top and center of the page and they disappear after a set time.
+ Toasts are floating notices that are aligned to the center top of the page. They disappear after a set time.
Visibility is changed with animation by toggling between aria-hidden="true" and aria-hidden="false".
When including a dismiss button the .s-notice--dismiss class should be applied to the button for toast-specific styling.
-
+ The following helpers are available to manually show and hide a toast notice. +
+ {% assign docsItems = notices.javascript.helpers %} + {% assign col1Heading = "Function" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Parameters" %} + {% assign tableId = "docs-javascript-helpers-table" %} + {% include "docs-table.html" %} + + + + + \ No newline at end of file diff --git a/packages/stacks-docs/product/components/page-titles.html b/packages/stacks-docs/product/components/page-titles.html index c1ff2c9307..8123de2148 100644 --- a/packages/stacks-docs/product/components/page-titles.html +++ b/packages/stacks-docs/product/components/page-titles.html @@ -6,43 +6,20 @@ ---| Component | -Description | -
|---|---|
| Page title | -Title of the page. Refer to the content section of Stacks for things like word choice, naming, and capitalization. | -
| Description Optional | -Additional context for content and actions on the page. | -
| Actions Optional | -Free-form area to include buttons, filters, or other HTML content. | -
| Breadcrumbs Optional | -Breadcrumbs can be included to provide context for the currently-viewed page. | -
- These components should be used in the admin sections of our private Q&A products. -
- {% header "h3", "Base Styles" %} -- The base style for pages that don’t need further description beyond the page title and don’t have any actions for filters. -
+ {% header "h2", "Classes" %} + {% assign docsItems = page-titles.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign col3Heading = "" %} + {% include "docs-table.html" %} +The base style for pages that don’t need further description beyond the page title and don’t have any actions for filters.
+ {% assign example = page-titles.example %} +Page title
{% endhighlight %}Page title
+{{ example.title }}
- A summary of a page’s content. Helpful for large pages with multiple actions. -
+A summary of a page’s content. Helpful for large pages with multiple actions.
Page title
Page title
-Optional description de Finibus Bonorum et Malorum with an optional link.
+{{ example.title }}
+{{ example.description }}
- When a page title includes actions, they are located at the far end of the component. This area is free-form, so we can include any markups we'd like, from single button to a d-flex of custom filters and text. -
+When a page title includes actions, they are located at the far end of the component. This area is free-form, so we can include any markups we'd like, from single button to a d-flex of custom filters and text.
Page title
Page title
-Optional description de Finibus Bonorum et Malorum with an optional link.
+{{ example.title }}
+{{ example.description }}
Page title
- Breadcrumbs are used to provide context for the currently-viewed page and reduce the number of actions a website visitor needs to take in order to get to a higher-level page. Breadcrumbs should not be used for single-level sections that have no logical grouping. -
+Breadcrumbs are used to provide context for the currently-viewed page and reduce the number of actions a website visitor needs to take in order to get to a higher-level page. Breadcrumbs should not be used for single-level sections that have no logical grouping.
Page title
…Page title
+{{ example.title }}
Optional description de Finibus Bonorum et Malorum with an optional link.
| Class | -Applied to | -Description | -
|---|---|---|
{{ item.class }} |
- {{ item.applies }} |
- {{ item.description }} | -