From ceb73fe28072028b516ceff6e6570f0b0b8cd397 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 9 Feb 2026 12:50:03 -0500 Subject: [PATCH 1/5] docs: standardize docs class table --- .../_data/components/activity-indicator.json | 7 +- .../{avatars-component.json => avatars.json} | 9 +- .../stacks-docs/_data/components/badges.json | 116 ++++- .../stacks-docs/_data/components/banners.json | 28 +- .../_data/{atomic => components}/bling.json | 46 ++ .../_data/components/breadcrumbs.json | 1 - .../_data/components/button-groups.json | 1 - .../stacks-docs/_data/components/buttons.json | 67 +++ .../stacks-docs/_data/components/cards.json | 13 + .../_data/components/checkbox_radio.json | 22 + .../_data/components/code-blocks.json | 18 + .../_data/components/empty-states.json | 8 + .../_data/components/expandable.json | 17 + .../_data/components/link-previews.json | 46 +- .../stacks-docs/_data/components/links.json | 4 +- .../stacks-docs/_data/components/loader.json | 16 + .../stacks-docs/_data/components/modals.json | 32 +- .../_data/components/navigation.json | 41 +- .../stacks-docs/_data/components/notices.json | 189 +++++--- .../_data/components/page-titles.json | 28 ++ .../stacks-docs/_includes/docs-table.html | 95 ++++ .../assets/less/stacks-documentation.less | 7 +- .../components/activity-indicator.html | 33 +- .../product/components/avatars.html | 429 +++++------------- .../product/components/badges.html | 59 ++- .../product/components/banners.html | 288 ++++++------ .../stacks-docs/product/components/bling.html | 8 + .../product/components/breadcrumbs.html | 25 +- .../product/components/button-groups.html | 26 +- .../product/components/buttons.html | 8 + .../stacks-docs/product/components/cards.html | 8 + .../product/components/checkbox.html | 8 + .../product/components/code-blocks.html | 32 +- .../product/components/empty-states.html | 8 + .../product/components/expandable.html | 9 + .../product/components/link-previews.html | 67 ++- .../stacks-docs/product/components/links.html | 63 +-- .../product/components/loader.html | 68 +-- .../stacks-docs/product/components/menus.html | 34 +- .../product/components/modals.html | 25 +- .../product/components/navigation.html | 24 +- .../product/components/notices.html | 356 ++++----------- .../product/components/page-titles.html | 76 +--- 43 files changed, 1160 insertions(+), 1305 deletions(-) rename packages/stacks-docs/_data/components/{avatars-component.json => avatars.json} (92%) rename packages/stacks-docs/_data/{atomic => components}/bling.json (54%) create mode 100644 packages/stacks-docs/_data/components/cards.json create mode 100644 packages/stacks-docs/_data/components/code-blocks.json create mode 100644 packages/stacks-docs/_data/components/empty-states.json create mode 100644 packages/stacks-docs/_data/components/expandable.json create mode 100644 packages/stacks-docs/_data/components/page-titles.json create mode 100644 packages/stacks-docs/_includes/docs-table.html diff --git a/packages/stacks-docs/_data/components/activity-indicator.json b/packages/stacks-docs/_data/components/activity-indicator.json index e476674582..01360eb956 100644 --- a/packages/stacks-docs/_data/components/activity-indicator.json +++ b/packages/stacks-docs/_data/components/activity-indicator.json @@ -1,8 +1,7 @@ { - "indicator": [ + "classes": [ { "class": ".s-activity-indicator", - "applies": "N/A", "description": "Base activity indicator element with theme-aware coloring" }, { @@ -25,5 +24,7 @@ "applies": ".s-activity-indicator", "description": "Styles the activity indicator in a small size" } - ] + ], + "examples": ["", "3", "12", "370", "new"], + "variants": ["success", "warning", "danger"] } \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/avatars-component.json b/packages/stacks-docs/_data/components/avatars.json similarity index 92% rename from packages/stacks-docs/_data/components/avatars-component.json rename to packages/stacks-docs/_data/components/avatars.json index 48c749b715..43e12c4c9e 100644 --- a/packages/stacks-docs/_data/components/avatars-component.json +++ b/packages/stacks-docs/_data/components/avatars.json @@ -2,27 +2,22 @@ "classes": [ { "class": ".s-avatar", - "applies": "N/A", "description": "The base avatar at 16px." }, { "class": ".s-avatar--image", - "applies": "N/A", "description": "A child element for displaying a user’s profile image." }, { "class": ".s-avatar--letter", - "applies": "N/A", "description": "A child element for displaying an abbreviated Team name." }, { "class": ".s-avatar--badge", - "applies": "N/A", "description": "A child element that provides positioning to the shield on Team avatars." }, { "class": ".s-avatar--indicator", - "applies": "N/A", "description": "A child element that provides positioning to the activity indicator on user's avatars." }, { @@ -55,5 +50,7 @@ "applies": ".s-avatar", "description": "Adds the proper border radius and scaling at 128px." } - ] + ], + "examples": [16, 24, 32, 48, 64, 96, 128], + "teamBgs": ["blue-400", "theme-primary", "png"] } \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/badges.json b/packages/stacks-docs/_data/components/badges.json index 509087a062..a58d11d86c 100644 --- a/packages/stacks-docs/_data/components/badges.json +++ b/packages/stacks-docs/_data/components/badges.json @@ -1,11 +1,87 @@ { + "classes": [ + { + "class": ".s-badge", + "description": "Base badge element." + }, + { + "class": ".s-badge__gold", + "applies": ".s-badge", + "description": "Badge indicating a gold award." + }, + { + "class": ".s-badge__silver", + "applies": ".s-badge", + "description": "Badge indicating a silver award." + }, + { + "class": ".s-badge__bronze", + "applies": ".s-badge", + "description": "Badge indicating a bronze award." + }, + { + "class": ".s-badge__important", + "applies": ".s-badge", + "description": "Applies important styling to the badge." + }, + { + "class": ".s-badge__squared", + "applies": ".s-badge", + "description": "Applies a background color to the badge's icon." + }, + { + "class": ".s-badge__info", + "applies": ".s-badge", + "description": "Badge indicating an info status." + }, + { + "class": ".s-badge__warning", + "applies": ".s-badge", + "description": "Badge indicating a warning status." + }, + { + "class": ".s-badge__danger", + "applies": ".s-badge", + "description": "Badge indicating a danger status." + }, + { + "class": ".s-badge__critical", + "applies": ".s-badge", + "description": "Badge indicating a critical status." + }, + { + "class": ".s-badge__tonal", + "applies": ".s-badge", + "description": "Badge indicating a tonal status." + }, + { + "class": ".s-badge__success", + "applies": ".s-badge", + "description": "Badge indicating a success status." + }, + { + "class": ".s-badge__featured", + "applies": ".s-badge", + "description": "Badge indicating a featured status." + }, + { + "class": ".s-badge__sm", + "applies": ".s-badge", + "description": "Applies a small size to the badge." + }, + { + "class": ".s-badge__lg", + "applies": ".s-badge", + "description": "Applies a large size to the badge." + } + ], "achievement": [ { "title": "Achievement", "classes": [ { "title": "Gold", - "class": "s-bling__gold", + "bling": "gold", "label": "Great Question", "html": "s-badge", "repType": "gold", @@ -13,7 +89,7 @@ }, { "title": "Silver", - "class": "s-bling__silver", + "bling": "silver", "label": "Favorite Question", "html": "s-badge", "repType": "silver", @@ -21,7 +97,7 @@ }, { "title": "Bronze", - "class": "s-bling__bronze", + "bling": "bronze", "label": "Altruist", "html": "s-badge", "repType": "bronze", @@ -162,26 +238,26 @@ { "title": "Warning", "icon": "Notification", - "html": "s-badge s-badge__squared s-badge__warning s-badge__important", + "classes": "s-badge__squared s-badge__warning s-badge__important", "label": "Needs attention", "description": "Warning badge styling in squared variant with important styling." }, { "title": "Danger", "icon": "VoteUp", - "html": "s-badge s-badge__danger s-badge__important", + "classes": "s-badge__danger s-badge__important", "label": "Ending soon", "description": "Danger badge styling with important styling." }, { "title": "Critical", - "html": "s-badge s-badge__critical s-badge__important", + "classes": "s-badge__critical s-badge__important", "label": "Spam", "description": "Critical badge styling with important styling." }, { "title": "Info", - "html": "s-badge s-badge__info s-badge__important", + "classes": "s-badge__info s-badge__important", "label": "+100", "description": "Info badge styling in small size with important styling." } @@ -194,43 +270,37 @@ "classes": [ { "title": "Admin", - "class": "s-badge__admin", - "html": "s-badge s-badge__admin", + "modifier": "admin", "label": "Admin", "description": "Badge indicating user is an admin." }, { "title": "Moderator", - "class": "s-badge__moderator", - "html": "s-badge s-badge__moderator", + "modifier": "moderator", "label": "Moderator", "description": "Badge indicating user is an moderator." }, { "title": "Staff", - "class": "s-badge__staff", - "html": "s-badge s-badge__staff", + "modifier": "staff", "label": "Staff", "description": "Badge indicating user is staff." }, { "title": "AI", - "class": "s-badge__ai", - "html": "s-badge s-badge__ai", + "modifier": "ai", "label": "AI", "description": "Badge indicating content is AI generated." }, { "title": "Bot", - "class": "s-badge__bot", - "html": "s-badge s-badge__bot", + "modifier": "bot", "label": "Bot", "description": "Badge indicating user is a bot." }, { "title": "New", - "class": "s-badge__new", - "html": "s-badge s-badge__new", + "modifier": "new", "label": "New", "description": "Badge indicating new user" } @@ -243,21 +313,19 @@ "classes": [ { "title": "Small", - "class": "s-badge__sm", - "html": "s-badge s-badge__sm s-badge__success", + "modifier": "sm", "label": "Small", "description": "The badge in small size." }, { "title": "Default", - "html": "s-badge s-badge__warning", + "modifier": "", "label": "Default", "description": "The badge in default size." }, { "title": "Large", - "class": "s-badge__lg", - "html": "s-badge s-badge__lg s-badge__danger", + "modifier": "lg", "label": "Large", "description": "The badge in large size." } diff --git a/packages/stacks-docs/_data/components/banners.json b/packages/stacks-docs/_data/components/banners.json index b40e208cca..bf12bd07df 100644 --- a/packages/stacks-docs/_data/components/banners.json +++ b/packages/stacks-docs/_data/components/banners.json @@ -1,20 +1,9 @@ { - "system": [ + "classes": [ { "class": ".s-banner", - "applies": "N/A", "description": "Base banner parent class. This defaults to a system banner style." }, - { - "class": ".s-banner--dismiss", - "applies": ".s-banner", - "description": "Applies to child button element within the banner to position it appropriately." - }, - { - "class": ".s-banner--actions", - "applies": ".s-banner", - "description": "Container styling for banner actions including the dismiss button." - }, { "class": ".s-banner__info", "applies": ".s-banner", @@ -48,7 +37,20 @@ { "class": ".s-banner__important", "applies": ".s-banner", - "description": "Emboldens the above visual styles by strengthening the background saturation. This should be used for time-sensitive, pressing information that needs to be noticed by the user." + "description": "Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user." + }, + { + "class": ".is-pinned", + "applies": ".s-banner", + "description": "Pins the banner to the top of the browser window." + }, + { + "class": ".s-banner--dismiss", + "description": "Child of .s-banner. Applies to child button element within the banner to position it appropriately." + }, + { + "class": ".s-banner--actions", + "description": "Child of .s-banner. Container styling for banner actions including the dismiss button." } ] } \ No newline at end of file diff --git a/packages/stacks-docs/_data/atomic/bling.json b/packages/stacks-docs/_data/components/bling.json similarity index 54% rename from packages/stacks-docs/_data/atomic/bling.json rename to packages/stacks-docs/_data/components/bling.json index 932e910ebe..14d1f7318f 100644 --- a/packages/stacks-docs/_data/atomic/bling.json +++ b/packages/stacks-docs/_data/components/bling.json @@ -1,4 +1,50 @@ { + "classes": [ + { + "class": ".s-bling", + "description": "Base bling element." + }, + { + "class": ".s-bling__gold", + "applies": ".s-bling", + "description": "Gold bling element." + }, + { + "class": ".s-bling__silver", + "applies": ".s-bling", + "description": "Silver bling element." + }, + { + "class": ".s-bling__bronze", + "applies": ".s-bling", + "description": "Bronze bling element." + }, + { + "class": ".s-bling__activity", + "applies": ".s-bling", + "description": "Activity bling element." + }, + { + "class": ".s-bling__filled", + "applies": ".s-bling", + "description": "Filled bling element." + }, + { + "class": ".s-bling__rep", + "applies": ".s-bling", + "description": "Reputation bling element." + }, + { + "class": ".s-bling__sm", + "applies": ".s-bling", + "description": "Small bling element." + }, + { + "class": ".s-bling__lg", + "applies": ".s-bling", + "description": "Large bling element." + } + ], "title": "Bling", "variants": ["default", "rep", "activity", "gold", "silver", "bronze"], "sizes": ["sm", "default", "lg"], diff --git a/packages/stacks-docs/_data/components/breadcrumbs.json b/packages/stacks-docs/_data/components/breadcrumbs.json index 891c7f6780..b96e61ea54 100644 --- a/packages/stacks-docs/_data/components/breadcrumbs.json +++ b/packages/stacks-docs/_data/components/breadcrumbs.json @@ -2,7 +2,6 @@ "classes": [ { "class": ".s-breadcrumbs", - "applies": "N/A", "description": "Base parent container for breadcrumbs" }, { diff --git a/packages/stacks-docs/_data/components/button-groups.json b/packages/stacks-docs/_data/components/button-groups.json index 11ee7a5c00..674877d5cd 100644 --- a/packages/stacks-docs/_data/components/button-groups.json +++ b/packages/stacks-docs/_data/components/button-groups.json @@ -2,7 +2,6 @@ "classes": [ { "class": ".s-btn-group", - "applies": "N/A", "description": "Base button group style." } ], diff --git a/packages/stacks-docs/_data/components/buttons.json b/packages/stacks-docs/_data/components/buttons.json index a26062cb88..8a53aef62d 100644 --- a/packages/stacks-docs/_data/components/buttons.json +++ b/packages/stacks-docs/_data/components/buttons.json @@ -1,4 +1,71 @@ { + "classes": [ + { + "class": ".s-btn", + "description": "Base button element" + }, + { + "class": ".s-btn--badge", + "applies": ".s-btn", + "description": "Badge container for the button" + }, + { + "class": ".s-btn__clear", + "description": "Clear button variant" + }, + { + "class": ".s-btn__danger", + "description": "Danger button variant" + }, + { + "class": ".s-btn__featured", + "description": "Featured button variant" + }, + { + "class": ".s-btn__tonal", + "description": "Tonal button variant" + }, + { + "class": ".s-btn__dropdown", + "description": "Dropdown button variant" + }, + { + "class": ".s-btn__icon", + "description": "Icon button variant" + }, + { + "class": ".s-btn__xs", + "description": "Extra small button variant" + }, + { + "class": ".s-btn__link", + "description": "Link button variant" + }, + { + "class": ".s-btn__unset", + "description": "Unset button variant" + }, + { + "class": ".s-btn__facebook", + "description": "Facebook button variant" + }, + { + "class": ".s-btn__github", + "description": "GitHub button variant" + }, + { + "class": ".s-btn__google", + "description": "Google button variant" + }, + { + "class": ".s-btn__sm", + "description": "Small button variant" + }, + { + "class": ".s-btn__lg", + "description": "Large button variant" + } + ], "base": [ { "title": "Base", diff --git a/packages/stacks-docs/_data/components/cards.json b/packages/stacks-docs/_data/components/cards.json new file mode 100644 index 0000000000..680cc4e800 --- /dev/null +++ b/packages/stacks-docs/_data/components/cards.json @@ -0,0 +1,13 @@ +{ + "classes": [ + { + "class": ".s-card", + "description": "Base card style." + }, + { + "class": ".s-card__muted", + "applies": ".s-card", + "description": "Muted card style." + } + ] +} \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/checkbox_radio.json b/packages/stacks-docs/_data/components/checkbox_radio.json index 1ec9b19c02..31c2f878fc 100644 --- a/packages/stacks-docs/_data/components/checkbox_radio.json +++ b/packages/stacks-docs/_data/components/checkbox_radio.json @@ -1,4 +1,26 @@ { + "checkbox-classes": [ + { + "class": ".s-checkbox", + "description": "Base checkbox style." + }, + { + "class": ".s-checkbox__checkmark", + "applies": ".s-checkbox", + "description": "Checkmark style." + } + ], + "radio-classes": [ + { + "class": ".s-radio", + "description": "Base radio style." + }, + { + "class": ".s-radio__checkmark", + "applies": ".s-radio", + "description": "Checkmark style." + } + ], "checkbox": [ { "description": "Unchecked checkbox.", diff --git a/packages/stacks-docs/_data/components/code-blocks.json b/packages/stacks-docs/_data/components/code-blocks.json new file mode 100644 index 0000000000..53dd03304c --- /dev/null +++ b/packages/stacks-docs/_data/components/code-blocks.json @@ -0,0 +1,18 @@ +{ + "classes": [ + { + "class": ".s-code-block", + "description": "Base code block style." + }, + { + "class": ".linenums", + "applies": ".s-code-block", + "description": "Adds a line numbers column to the code block." + }, + { + "class": ".linenums:<n>", + "applies": ".s-code-block", + "description": "Adds a line numbers column to the code block starting at a number <n>." + } + ] +} \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/empty-states.json b/packages/stacks-docs/_data/components/empty-states.json new file mode 100644 index 0000000000..c9a9f26bb8 --- /dev/null +++ b/packages/stacks-docs/_data/components/empty-states.json @@ -0,0 +1,8 @@ +{ + "classes": [ + { + "class": ".s-empty-state", + "description": "Base empty state style." + } + ] +} \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/expandable.json b/packages/stacks-docs/_data/components/expandable.json new file mode 100644 index 0000000000..9f8166e1ff --- /dev/null +++ b/packages/stacks-docs/_data/components/expandable.json @@ -0,0 +1,17 @@ +{ + "classes": [ + { + "class": ".s-expandable", + "description": "Container for the expandable content. Include an id attribute to be referenced by the expandable control." + }, + { + "class": ".s-expandable--content", + "description": "Class for the expandable content. This is the content that will be shown and hidden when the expandable is toggled." + }, + { + "class": ".is-expanded", + "applies": ".s-expandable", + "description": "Expanded state class." + } + ] +} \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/link-previews.json b/packages/stacks-docs/_data/components/link-previews.json index 510b985493..76d854241a 100644 --- a/packages/stacks-docs/_data/components/link-previews.json +++ b/packages/stacks-docs/_data/components/link-previews.json @@ -2,58 +2,80 @@ "classes": [ { "class": ".s-link-preview", - "parent": "N/A", "description": "Base parent container for link previews" }, { "class": ".s-link-preview--header", - "parent": ".s-link-preview", + "applies": ".s-link-preview", "description": "Top section containing the title and details" }, { "class": ".s-link-preview--icon", - "parent": ".s-link-preview--header", + "applies": ".s-link-preview--header", "description": "Logo of the third party link. Use the @Svg.Helper." }, { "class": ".s-link-preview--title", - "parent": ".s-link-preview--header", + "applies": ".s-link-preview--header", "description": "Title of the linked file" }, { "class": ".s-link-preview--details", - "parent": ".s-link-preview--header", + "applies": ".s-link-preview--header", "description": "Details and meta data of the linked file" }, { "class": ".s-link-preview--body", - "parent": ".s-link-preview", + "applies": ".s-link-preview", "description": "Middle section containing the body of the linked file whose expected content is rich text or markdown" }, { "class": ".s-link-preview--code", - "parent": ".s-link-preview", + "applies": ".s-link-preview", "description": "Middle section containing the body of the linked file whose expected content is code" }, { "class": ".s-link-preview--footer", - "parent": ".s-link-preview", + "applies": ".s-link-preview", "description": "Bottom section containing URL details" }, { "class": ".s-link-preview--url", - "parent": ".s-link-preview--footer", + "applies": ".s-link-preview--footer", "description": "URL of the linked file" }, { "class": ".s-link-preview--misc", - "parent": ".s-link-preview--footer", + "applies": ".s-link-preview--footer", "description": "(optional) A small catch-all for anything you might need. This page contains a few use cases." }, { "class": ".linenums", - "parent": ".s-link-preview--code", + "applies": ".s-link-preview--code", "description": "Added to the pre of the preview block to properly display line numbers" } - ] + ], + "examples": { + "base": { + "title": "Using hooks for a simple fetch request and breaking the rules of hooks, unsure how?", + "description": "Use for links whose expected body is rich text or markdown like Jira issues or Slack messages. Wherever possible, it’s best practice to support basic markdown formatting (bold, italics, line breaks, lists, etc.)", + "details": "Issue submitted by Ricky Otero on Aug 12, 2019 • RESOLVED", + "body": [ + "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!" + ], + "url": "https://stackoverflow.atlassian.net/projects/SREREQ/queues/custom/1", + "misc": "Privacy notice" + }, + "code": { + "title": "Gruntfile.js", + "description": "Use for links whose expected body is code like code files or GitHub Gists. In these scenarios, replace s-link-preview--body class with s-link-preview--code.", + "details": "Located in StackExchange / Stacks", + "code": "use strict;\n\nmodule.exports = function(grunt) {\n grunt.initConfig({\n pkg: grunt.file.readJSON('package.json'),\n version: '<%= pkg.version %>',\n\n // Shell commands for use in Grunt tasks\n shell: {\n eleventyBuild: {\n command: 'npx @11ty/eleventy',\n options: {\n stderr: false,\n execOptions: {\n cwd: 'docs'\n }\n }\n }\n }\n });\n\n grunt.loadNpmTasks('grunt-contrib-uglify');\n\n grunt.registerTask('default', ['uglify']);\n};", + "url": "https://github.com/StackExchange/Stacks/blob/develop/Gruntfile.js", + "misc": "(truncated)" + } + } } \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/links.json b/packages/stacks-docs/_data/components/links.json index ec624fcdcd..3fc276b4bb 100644 --- a/packages/stacks-docs/_data/components/links.json +++ b/packages/stacks-docs/_data/components/links.json @@ -1,5 +1,5 @@ { - "single-links": [ + "link-classes": [ { "class": ".s-link", "applies": "N/A", @@ -36,7 +36,7 @@ "description": "Applies a caret for dropdowns and additional interactivity." } ], - "descendent-anchors": [ + "anchors-classes": [ { "class": ".s-anchors", "name": "base", diff --git a/packages/stacks-docs/_data/components/loader.json b/packages/stacks-docs/_data/components/loader.json index 05abfa09a8..93c1715eb7 100644 --- a/packages/stacks-docs/_data/components/loader.json +++ b/packages/stacks-docs/_data/components/loader.json @@ -21,5 +21,21 @@ "description": "A large variant of the loader component" } ], + "sizes-classes": [ + { + "class": ".s-loader__sm", + "applies": ".s-loader", + "description": "
Loading…
" + }, + { + "class": ".s-loader", + "description": "
Loading…
" + }, + { + "class": ".s-loader__lg", + "applies": ".s-loader", + "description": "
Loading…
" + } + ], "sizes": ["s-loader__sm", "", "s-loader__lg"] } diff --git a/packages/stacks-docs/_data/components/modals.json b/packages/stacks-docs/_data/components/modals.json index 83e461d876..3dda31b172 100644 --- a/packages/stacks-docs/_data/components/modals.json +++ b/packages/stacks-docs/_data/components/modals.json @@ -2,43 +2,37 @@ "classes": [ { "class": ".s-modal", - "applies": "N/A", - "description": "Base parent container for modals" + "description": "Base parent container for modals." }, { "class": ".s-modal__danger", - "applies": ".s-modal", - "description": "Adds styling for potentially dangerous actions" + "applies": ".s-modal", + "description": "Adds styling for potentially dangerous actions." }, { "class": ".s-modal--dialog", - "applies": "Child of .s-modal", - "description": "Creates a container that holds the modal dialog with proper padding and shadows" + "description": "Child of .s-modal. Creates a container that holds the modal dialog with proper padding and shadows." + }, + { + "class": ".s-modal__full", + "applies": ".s-modal--dialog", + "description": "Child of .s-modal--dialog.Makes the container take up as much of the screen as possible." }, { "class": ".s-modal--header", - "applies": "Child of .s-modal--dialog", - "description": "Adds proper styling to the modal dialog’s header" + "description": "Child of .s-modal--dialog. Adds proper styling to the modal dialog’s header." }, { "class": ".s-modal--body", - "applies": "Child of .s-modal--dialog", - "description": "Adds proper styling to the modal dialog’s body text" + "description": "Child of .s-modal--dialog. Adds proper styling to the modal dialog’s body text." }, { "class": ".s-modal--footer", - "applies": "Child of .s-modal--dialog", - "description": "Adds the desired spacing to the row of button actions." + "description": "Child of .s-modal--dialog. Adds the desired spacing to the row of button actions." }, { "class": ".s-modal--close", - "applies": "Child of .s-modal--dialog", - "description": "Used to dismiss a modal" - }, - { - "class": ".s-modal__full", - "applies": ".s-modal--dialog", - "description": "Makes the .s-modal--dialog container take up as much of the screen as possible." + "description": "Child of .s-modal--dialog. Used to dismiss a modal." } ] } diff --git a/packages/stacks-docs/_data/components/navigation.json b/packages/stacks-docs/_data/components/navigation.json index e60d4e5e79..1e64e68c91 100644 --- a/packages/stacks-docs/_data/components/navigation.json +++ b/packages/stacks-docs/_data/components/navigation.json @@ -2,53 +2,48 @@ "classes": [ { "class": ".s-navigation", - "applies": "N/A", - "description": "Base parent container for navigation" + "description": "Base parent container for navigation." }, { "class": ".s-navigation__vertical", - "applies": ".s-navigation", - "description": "Renders the navigation vertically" + "applies": ".s-navigation", + "description": "Renders the navigation vertically." }, { "class": ".s-navigation__scroll", - "applies": ".s-navigation", + "applies": ".s-navigation", "description": "When the navigation items overflow the width of the component, enable horizontal scrolling. By default, navigation items will wrap. This should not be applied to vertical navigations." }, { "class": ".s-navigation__sm", - "applies": ".s-navigation", + "applies": ".s-navigation", "description": "Tightens up the overall spacing and reduces the text size" }, { "class": ".s-navigation--item", - "applies": "Child of .s-navigation", - "description": "The individual item in a navigation" + "description": "Child of .s-navigation. The individual item in a navigation" }, { - "class": ".s-navigation--item-text", - "applies": "Child of .s-navigation--item", - "description": "The element meant to contain the text of the navigation item" + "class": ".s-navigation--item__dropdown", + "applies": ".s-navigation--item", + "description": "Adds a small caret that indicates a dropdown" }, { - "class": ".s-navigation--icon", - "applies": "Child of .s-navigation--item", - "description": "Applies styling to the icon of the navigation item" + "class": ".is-selected", + "applies": ".s-navigation--item", + "description": "Applies to a navigation item that’s currently selected / active" }, { - "class": ".s-navigation--avatar", - "applies": "Child of .s-navigation--item", - "description": "Applies styling to the avatar of the navigation item" + "class": ".s-navigation--item-text", + "description": "Child of .s-navigation--item.The element meant to contain the text of the navigation item" }, { - "class": ".is-selected", - "applies": ".s-navigation--item", - "description": "Applies to a navigation item that’s currently selected / active" + "class": ".s-navigation--icon", + "description": "Child of .s-navigation--item. Applies styling to the icon of the navigation item" }, { - "class": ".s-navigation--item__dropdown", - "applies": ".s-navigation--item", - "description": "Adds a small caret that indicates a dropdown" + "class": ".s-navigation--avatar", + "description": "Child of .s-navigation--item. Applies styling to the avatar of the navigation item" } ], "navigation-attributes": [ diff --git a/packages/stacks-docs/_data/components/notices.json b/packages/stacks-docs/_data/components/notices.json index 59a24206d8..e6ec0fc7c6 100644 --- a/packages/stacks-docs/_data/components/notices.json +++ b/packages/stacks-docs/_data/components/notices.json @@ -1,101 +1,88 @@ { - "base": [ - { - "type": "default", - "icon": "Help" - }, - { - "type": "info", - "icon": "Info" - }, - { - "type": "success", - "icon": "Check" - }, - { - "type": "warning", - "icon": "Alert" - }, - { - "type": "danger", - "icon": "AlertFill" - }, - { - "type": "featured", - "icon": "Star" - }, - { - "type": "activity", - "icon": "Notification" - } - ], - "visual": [ + "classes": [ { "class": ".s-notice", - "applies": "N/A", - "description": "Default style used to separate notices from the main content." - }, - { - "class": ".s-notice--dismiss", - "applies": ".s-notice", - "description": "Applies to child button element within the banner to position it appropriately." - }, - { - "class": ".s-notice--actions", - "applies": ".s-notice", - "description": "Container styling for notice actions including the dismiss button." + "description": "Base notice parent class." }, { "class": ".s-notice__info", "applies": ".s-notice", - "description": "Visual style for information notices." + "description": "Applies info (blue) visual styles." }, { "class": ".s-notice__success", "applies": ".s-notice", - "description": "Visual style for success notices." + "description": "Applies success (green) visual styles." }, { "class": ".s-notice__warning", "applies": ".s-notice", - "description": "Visual style for warning notices." + "description": "Applies warning (yellow) visual styles." }, { "class": ".s-notice__danger", "applies": ".s-notice", - "description": "Visual style for danger notices." + "description": "Applies danger (red) visual styles." }, { "class": ".s-notice__featured", "applies": ".s-notice", - "description": "Visual style for featured notices." + "description": "Applies featured (purple) visual styles." }, { "class": ".s-notice__activity", "applies": ".s-notice", - "description": "Visual style for activity notices." + "description": "Applies activity (pink) visual styles." }, { "class": ".s-notice__important", "applies": ".s-notice", - "description": "Emboldens the above visual styles by strengthening the background saturation. This should be used for time-sensitive, pressing information that needs to be noticed by the user." + "description": "Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user." + }, + { + "class": ".s-notice--dismiss", + "description": "Child of .s-notice. Applies to child button element within the notice to position it appropriately." + }, + { + "class": ".s-notice--actions", + "description": "Child of .s-notice. Container styling for notice actions including the dismiss button." + }, + { + "class": ".s-toast", + "description": "Parent of .s-notice. See the Toast section for more information." } ], - "behavior": [ + "base": [ { - "type": "Inline", - "class": ".s-notice", - "applies": "N/A", - "description": "Notice inserted within the content area." + "type": "default", + "icon": "Help" }, { - "type": "Toast", - "class": ".s-toast", - "applies": "Container", - "description": "Adds a container to properly fix a floating toast notice to the top-center of the page. These toasts typically disappear after a set time (i.e. 3 seconds)" + "type": "info", + "icon": "Info" + }, + { + "type": "success", + "icon": "Check" + }, + { + "type": "warning", + "icon": "Alert" + }, + { + "type": "danger", + "icon": "AlertFill" + }, + { + "type": "featured", + "icon": "Star" + }, + { + "type": "activity", + "icon": "Notification" } ], - "access": [ + "accessibility": [ { "item": "aria-labelledby=\"[id]\"", "applies": ".s-toast", @@ -132,5 +119,85 @@ "description": "A form of live region which contains advisory information but isn't important enough to justify an alert role. Elements with a status role have an implicit aria-live value of polite and implicit aria-atomic value of true. If the element controlling the status appears in a different area of the page, you must make the relationship explicit with the aria-controls attribute.", "url": "https://www.w3.org/TR/wai-aria-1.1/#status" } - ] + ], + "javascript": { + "attributes": [ + { + "item": "data-controller=\"s-toast\"", + "appliesText": "Controller element", + "description": "Wires up the element to the toast controller. This may be a .s-toast element or a wrapper element." + }, + { + "item": "data-s-toast-target=\"toast\"", + "appliesText": "Controller element", + "description": "Wires up the element that is to be shown/hidden" + }, + { + "item": "data-s-toast-target=\"initialFocus\"", + "appliesText": "Any child focusable element", + "description": "Designates which element to focus on toast show. If absent, defaults to the first focusable element within the toast." + }, + { + "item": "data-action=\"s-toast#toggle\"", + "appliesText": "Toggling element", + "description": "Wires up the element to toggle the visibility of a toast" + }, + { + "item": "data-s-toast-return-element=\"[css selector]\"", + "appliesText": "Controller element", + "description": "(optional) Designates the element to return focus to when the toast is closed. If left unset, focus is not altered on close." + }, + { + "item": "data-s-toast-remove-when-hidden=\"true\"", + "appliesText": "Controller element", + "description": "(optional) Removes the toast from the DOM entirely when it is hidden" + } + ], + "events": [ + { + "item": "s-toast:show", + "appliesText": "Toast target", + "description": "Fires immediately before showing the toast. Calling .preventDefault() cancels the display of the toast." + }, + { + "item": "s-toast:shown", + "appliesText": "Toast target", + "description": "Fires after the toast has been visually shown" + }, + { + "item": "s-toast:hide", + "appliesText": "Toast target", + "description": "Fires immediately before hiding the toast. Calling .preventDefault() cancels the removal of the toast." + }, + { + "item": "s-toast:hidden", + "appliesText": "Toast target", + "description": "Fires after the toast has been visually hidden" + } + ], + "eventDetails": [ + { + "item": "dispatcher", + "applies": "s-toast:*", + "description": "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." + }, + { + "item": "returnElement", + "applies": "s-toast:show,
s-toast:hide", + "description": "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." + } + ], + "helpers": [ + { + "item": "Stacks.showToast", + "appliesText": "element", + "description": "Helper to manually show an s-toast element via external JS" + }, + { + "item": "Stacks.hideToast", + "appliesText": "element", + "description": "Helper to manually hide an s-toast element via external JS" + } + ] + } } diff --git a/packages/stacks-docs/_data/components/page-titles.json b/packages/stacks-docs/_data/components/page-titles.json new file mode 100644 index 0000000000..ac43d41131 --- /dev/null +++ b/packages/stacks-docs/_data/components/page-titles.json @@ -0,0 +1,28 @@ +{ + "classes": [ + { + "class": ".s-page-title", + "description": "Base class for the page title component." + }, + { + "class": ".s-page-title--text", + "description": "Child of .s-page-title. Contains the page title and description." + }, + { + "class": ".s-page-title--description", + "description": "Child of .s-page-title--text. Contains the page description." + }, + { + "class": ".s-page-title--header", + "description": "Child of .s-page-title--text. Contains the page title." + }, + { + "class": ".s-page-title--actions", + "description": "Child of .s-page-title. Contains the page actions." + } + ], + "example": { + "title": "Page title", + "description": "Optional description de Finibus Bonorum et Malorum with an optional link." + } +} \ No newline at end of file diff --git a/packages/stacks-docs/_includes/docs-table.html b/packages/stacks-docs/_includes/docs-table.html new file mode 100644 index 0000000000..c70d46f45a --- /dev/null +++ b/packages/stacks-docs/_includes/docs-table.html @@ -0,0 +1,95 @@ +{% comment %} + Reusable classes reference table (Class | Applied to | Description). + Set docsClasses in parent scope. Column header classes default as below; override by + setting classColClasses, appliesColClasses, or descriptionColClasses before including. + + Usage: + {% assign docsClasses = badges.classes %} + {% include "docs-table.html" %} + Override one column: {% assign appliesColClasses = "s-table--cell4" %} +{% endcomment %} +{% assign tableId = tableId | default: "docs-table" %} +{% assign col1Classes = col1Classes | default: "s-table--cell3" %} +{% assign col2Classes = col2Classes | default: "s-table--cell2" %} +{% assign col3Classes = col3Classes | default: "" %} +{% assign col1Text = col1Text | default: "Class" %} +{% assign col2Text = col2Text | default: "Modifies" %} +{% assign col3Text = col3Text | default: "Description" %} +{% assign expandableBtnText = expandableBtnText | default: "Show all classes" %} +{% assign expandableClassesTable = expandableClassesTable | default: false %} +
+ + + + + + + + + + {% for item in docsClasses %} + + + + + + {% endfor %} + +
+ {{ col1Text }} + + {{ col2Text }} + + {{ col3Text }} +
+ {{ item.class | default: item.item }} + + {% if item.appliesText or item.applies %} + {% if item.appliesText %} + {{ item.appliesText }} + {% endif %} + {% if item.applies %} + {{ item.applies }} + {% endif %} + {% else %} + N/A + {% endif %} + {{ item.description }}
+
+{% if expandableClassesTable %} + +{% endif %} + +{% if expandableClassesTable %} + +{% endif %} + + +{% assign tableId = nil %} +{% assign col1Classes = nil %} +{% assign col2Classes = nil %} +{% assign col3Classes = nil %} +{% assign col1Text = nil %} +{% assign col2Text = nil %} +{% assign col3Text = nil %} +{% assign expandableBtnText = nil %} +{% assign expandableClassesTable = nil %} diff --git a/packages/stacks-docs/assets/less/stacks-documentation.less b/packages/stacks-docs/assets/less/stacks-documentation.less index adfc54f394..629f9d6611 100644 --- a/packages/stacks-docs/assets/less/stacks-documentation.less +++ b/packages/stacks-docs/assets/less/stacks-documentation.less @@ -93,7 +93,6 @@ h2, h3 { background-color: var(--black-150); border: var(--su1) solid var(--black-200); border-radius: var(--su2); - color: var(--green-600); font-family: var(--ff-mono); overflow-wrap: break-word; margin: var(--sun1); @@ -172,7 +171,7 @@ h2, h3 { color: var(--black-500); - font-size: var(--fs-body3); + font-size: var(--fs-body2); line-height: 1.5; margin-bottom: var(--su16); margin-top: 0; @@ -235,10 +234,6 @@ h2, h3 { --_dt-c: var(--green-400); } - code { - font-size: 1em; - } - min-width: var(--su344); } diff --git a/packages/stacks-docs/product/components/activity-indicator.html b/packages/stacks-docs/product/components/activity-indicator.html index 6012439c2c..aca456d8bf 100644 --- a/packages/stacks-docs/product/components/activity-indicator.html +++ b/packages/stacks-docs/product/components/activity-indicator.html @@ -7,31 +7,13 @@ tags: components --- -{% assign examples = " ,3,12,370,new" | split: "," %} -
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in activity-indicator.indicator %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{% if item.applies == "N/A" %}{{ item.applies }}{% else %}{{ item.applies }}{% endif %}{{ item.description }}
-
+ {% assign docsClasses = activity-indicator.classes %} + {% assign col2Classes = "s-table--cell4" %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %} {% header "h3", "Default" %} @@ -92,7 +74,7 @@ {% endhighlight %}
- {% for example in examples %} + {% for example in activity-indicator.examples %}
{{ example }}
New activity
@@ -146,11 +128,10 @@
{% endhighlight %}
- {% assign variants = "success,warning,danger" | split: "," %}
- {% for variant in variants %} + {% for variant in activity-indicator.variants %}
- {% for example in examples %} + {% for example in activity-indicator.examples %}
{{ example }}
New activity
diff --git a/packages/stacks-docs/product/components/avatars.html b/packages/stacks-docs/product/components/avatars.html index b5e6600b90..529d1f1401 100644 --- a/packages/stacks-docs/product/components/avatars.html +++ b/packages/stacks-docs/product/components/avatars.html @@ -6,29 +6,14 @@ description: Avatars are used to quickly identify users or teams. tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in avatars-component.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsClasses = avatars.classes %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %} {% header "h3", "Users" %} @@ -64,85 +49,31 @@ {% endhighlight %}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + {% for example in avatars.examples %} + + + + + + {% endfor %} +
- 16px - default - - - demo avatar - -
- 24px - .s-avatar__24 - - - demo avatar - -
- 32px - .s-avatar__32 - - - demo avatar - -
- 48px - .s-avatar__48 - - - demo avatar - -
- 64px - .s-avatar__64 - - - demo avatar - -
- 96px - .s-avatar__96 - - - demo avatar - -
- 128px - .s-avatar__128 - - - demo avatar - -
+ {{ example }}px + + {% if example == "16" %}default{% else %}.s-avatar__{{ example }}{% endif %} + + + demo avatar + +
@@ -170,34 +101,35 @@ {% endhighlight %}
- - - - - - - - + + + + + + + + + {% for example in avatars.examples %} + {% if example == 16 or example == 24 %} + + + + + + {% endif %} + {% endfor %} +
- 16px - default - - -
-
Online
-
- demo avatar - -
- 24px - .s-avatar__24 - - -
-
Online
-
- demo avatar - -
+ {{ example }}px + + {% if example == 16 %}default{% else %}.s-avatar__{{ example }}{% endif %} + + +
+
Online
+
+ demo avatar + +
@@ -254,202 +186,55 @@ {% endhighlight %}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
- 16px - default - - -
- - {% icon "ShieldXSm", "native s-avatar--badge" %} -
- Hum - - 		- -
- - {% icon "ShieldXSm", "native s-avatar--badge" %} -
- Hum - - 		- -
- - {% icon "ShieldXSm", "native s-avatar--badge" %} -
- Hum - -
- 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" %} - -
+ + + + + + + + + + + {% for example in avatars.examples %} + + + + {% for bgColor in avatars.teamBgs %} + + {% endfor %} + + {% endfor %} +
+ {{ example }}px + + {% if example == "16" %}default{% else %}.s-avatar__{{ example }}{% endif %} + + {% if example == 16 %} + +
+ {% if bgColor == "png" %} + + {% else %} + + {% endif %} + {% icon "ShieldXSm", "native s-avatar--badge" %} +
+ Hum + + {% else %} + + {% if bgColor == "png" %} + + {% else %} + + Hum + {% endif %} + {% icon "ShieldXSm", "native s-avatar--badge" %} + + {% endif %} +
diff --git a/packages/stacks-docs/product/components/badges.html b/packages/stacks-docs/product/components/badges.html index a69e5e3562..2fd0272802 100644 --- a/packages/stacks-docs/product/components/badges.html +++ b/packages/stacks-docs/product/components/badges.html @@ -6,6 +6,14 @@ description: Badges are labels used for flags, earned achievements, and number totals. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsClasses = badges.classes %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %} +
+
{% header "h2", "Styles" %} {% header "h3", "Default" %} @@ -115,7 +123,6 @@ Example - Class Description @@ -132,14 +139,6 @@ {{ type.label }} - -
- .s-badge > - {% if type.class != nil %} - .{{ type.class }} - {% endif %} -
- {{ type.description }} {% endfor %} @@ -179,7 +178,7 @@ Example - Class + Modifier class Description @@ -198,7 +197,6 @@
- .s-badge {% if type.class != nil %} .{{ type.class }} {% endif %} @@ -262,7 +260,7 @@ Example - Class + Modifier class Description @@ -282,12 +280,10 @@
- .s-badge {% if type.class != nil %} .{{ type.class }} - {% endif %} - {% if badge.class != nil %} - .{{ badge.class }} + {% else %} + N/A {% endif %}
@@ -320,7 +316,7 @@ Example - Class + Modifier classes Description @@ -337,13 +333,12 @@
- .s-badge - {% if type.class != nil %} - .{{ type.class }} - {% endif %} {% if badge.class != nil %} .{{ badge.class }} {% endif %} + {% if type.class != nil %} + .{{ type.class }} + {% endif %}
{{ type.description }} @@ -381,7 +376,7 @@ Example - Class + Modifier classes Description @@ -391,7 +386,7 @@ {% for type in types %} - + {% if type.icon != nil %} {% icon type.icon %} {{ type.label }} @@ -402,7 +397,7 @@
- {% assign classes = type.html | split: " " %} + {% assign classes = type.classes | split: " " %} {% for class in classes %} .{{ class }} {% endfor %} @@ -444,13 +439,12 @@ {% for type in types %} - {{ type.label }} + {{ type.label }}
- .s-badge - {% if type.class != nil %} - .{{ type.class }} + {% if type.modifier != nil %} + .s-badge__{{ type.modifier }} {% endif %}
@@ -484,7 +478,7 @@ Examples - Class + Modifier class Description @@ -494,15 +488,14 @@ {% for type in types %} - + {{ type.label }}
- .s-badge - {% if type.class != nil %} - .{{ type.class }} + {% if type.modifier != nil %} + .s-badge__{{ type.modifier }} {% endif %}
diff --git a/packages/stacks-docs/product/components/banners.html b/packages/stacks-docs/product/components/banners.html index 4d11045433..eee85d96b1 100644 --- a/packages/stacks-docs/product/components/banners.html +++ b/packages/stacks-docs/product/components/banners.html @@ -2,166 +2,28 @@ layout: page title: Banners figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=5982-7648&m=dev -description: Banners are a type of notice, delivering both system and engagement messaging. These are highly intrusive messaging methods and so should be used appropriately. +description: Banners are full-width notices used for system and engagement messaging. They are highly intrusive and should be used only when essential information needs to be conveyed to the user. tags: components --- - - - +
+ {% header "h2", "Classes" %} + {% assign docsClasses = banners.classes %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %} +
+ {% header "h2", "Usage guidelines" %}

System banners are used for system messaging. They are full-width notices placed in one of two locations:

    -
  1. 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.
    2. +
  2. 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.
  3. 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.

- {% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in banners.system %} - - - - - - {% endfor %} - -
ClassApplies toDescription
{{ item.class }}{% if item.applies == "N/A" %}{{ item.applies }}{% else %}{{ item.applies }}{% endif %}{{ item.description }}
-
- {% header "h2", "JavaScript" %} -

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.

- - {% header "h3", "Attributes" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeApplied toDescription
data-controller="s-banner"Controller elementWires 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 elementWires up the element that is to be shown/hidden
data-s-banner-remove-when-hidden="true"Controller elementOptional Removes the banner from the DOM entirely when it is hidden
-
- {% header "h3", "Events" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EventElementDescription
s-banner:showBanner targetDefault preventable Fires immediately before showing the banner. Calling .preventDefault() cancels the display of the banner.
s-banner:shownBanner targetFires after the banner has been visually shown
s-banner:hideBanner targetDefault preventable Fires immediately before hiding the banner. Calling .preventDefault() cancels the removal of the banner.
s-banner:hiddenBanner targetFires after the banner has been visually hidden
-
-
- - - - - - - - - - - - - - - -
event.detailApplicable eventsDescription
dispatchers-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.
-
- {% header "h3", "Helpers" %} -
- - - - - - - - - - - - - - - - - - - - -
FunctionParametersDescription
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
-
- {% header "h2", "Examples" %}
@@ -315,3 +177,133 @@
+ + +
+ {% header "h2", "JavaScript" %} +

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.

+ + {% header "h3", "Attributes" %} +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeApplied toDescription
data-controller="s-banner"Controller elementWires 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 elementWires up the element that is to be shown/hidden
data-s-banner-remove-when-hidden="true"Controller elementOptional Removes the banner from the DOM entirely when it is hidden
+
+ {% header "h3", "Events" %} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventElementDescription
s-banner:showBanner targetDefault preventable Fires immediately before showing the banner. Calling .preventDefault() cancels the display of the banner.
s-banner:shownBanner targetFires after the banner has been visually shown
s-banner:hideBanner targetDefault preventable Fires immediately before hiding the banner. Calling .preventDefault() cancels the removal of the banner.
s-banner:hiddenBanner targetFires after the banner has been visually hidden
+
+
+ + + + + + + + + + + + + + + +
event.detailApplicable eventsDescription
dispatchers-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.
+
+ {% header "h3", "Helpers" %} +
+ + + + + + + + + + + + + + + + + + + + +
FunctionParametersDescription
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
+
+
+ + + + + + \ No newline at end of file diff --git a/packages/stacks-docs/product/components/bling.html b/packages/stacks-docs/product/components/bling.html index 5aece75f53..b05c19437c 100644 --- a/packages/stacks-docs/product/components/bling.html +++ b/packages/stacks-docs/product/components/bling.html @@ -5,6 +5,14 @@ description: Bling is used to indicate award type in badges, topbar, and user cards. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsClasses = bling.classes %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %} +
+
{% header "h2", "Types" %}

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..1a120b8a84 100644 --- a/packages/stacks-docs/product/components/breadcrumbs.html +++ b/packages/stacks-docs/product/components/breadcrumbs.html @@ -5,29 +5,14 @@ description: Breadcrumbs are used to provide context for the currently-viewed page. tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in breadcrumbs.classes %} - - - - - - {% endfor %} - -
ClassParentDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsClasses = breadcrumbs.classes %} + {% assign col2Classes = "s-table--cell3"%} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %}

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..6da50f99a3 100644 --- a/packages/stacks-docs/product/components/button-groups.html +++ b/packages/stacks-docs/product/components/button-groups.html @@ -5,29 +5,15 @@ 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 --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in button-groups.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsClasses = button-groups.classes %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %} +
+
{% header "h2", "Button attributes" %} {% for item in button-groups.button-attributes %} diff --git a/packages/stacks-docs/product/components/buttons.html b/packages/stacks-docs/product/components/buttons.html index 8d2c8f4640..1a164cd0c4 100644 --- a/packages/stacks-docs/product/components/buttons.html +++ b/packages/stacks-docs/product/components/buttons.html @@ -6,6 +6,14 @@ description: Buttons are user interface elements which allows users to take actions throughout the project. It is important that they have ample click space and help communicate the importance of their actions. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsClasses = buttons.classes %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %} +
+
{% header "h2", "Styles" %}

Stacks provides 3 different button styles:

diff --git a/packages/stacks-docs/product/components/cards.html b/packages/stacks-docs/product/components/cards.html index 2521ef0d98..e76942a711 100644 --- a/packages/stacks-docs/product/components/cards.html +++ b/packages/stacks-docs/product/components/cards.html @@ -5,6 +5,14 @@ description: Cards are used to group similar concepts and tasks together to make information easier to scan, read, and act on. Cards should use a heading that sets clear expectations about the card’s purpose, paragraphs that put the most critical information first, and (optionally) calls to action on the bottom to direct user action. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsClasses = cards.classes %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %} +
+
{% header "h2", "Base" %}

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..6b909f80f2 100644 --- a/packages/stacks-docs/product/components/checkbox.html +++ b/packages/stacks-docs/product/components/checkbox.html @@ -6,6 +6,14 @@ description: Checkable inputs that visually allow for multiple options or true/false values. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsClasses = checkbox_radio.checkbox-classes %} + {% assign col1Classes = "s-table--cell4" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Base" %} diff --git a/packages/stacks-docs/product/components/code-blocks.html b/packages/stacks-docs/product/components/code-blocks.html index 7e026ca1eb..e8d290e4f7 100644 --- a/packages/stacks-docs/product/components/code-blocks.html +++ b/packages/stacks-docs/product/components/code-blocks.html @@ -4,36 +4,12 @@ description: Stacks provides styling for code blocks with syntax highlighting provided by highlight.js. Special care was taken to make sure our light and dark themes felt like Stack Overflow while maintaining near AAA color contrasts and still being distinguishable for those with a color vision deficiency. tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - -
ClassApplies toOutput
.s-code-blockpreAdds proper styling to pre-formatted code.
.linenums.s-code-blockAdds a line numbers column to the code block.
.linenums:<n>.s-code-blockAdds a line numbers column to the code block starting at a number <n>.
-
+ {% assign docsClasses = code-blocks.classes %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/empty-states.html b/packages/stacks-docs/product/components/empty-states.html index 7f1aa69243..49a4065164 100644 --- a/packages/stacks-docs/product/components/empty-states.html +++ b/packages/stacks-docs/product/components/empty-states.html @@ -6,6 +6,14 @@ description: Empty states are used when there is no data to show. Ideally they orient the user by providing feedback based on the the user’s last interaction or communicate the benefits of a feature. When appropriate, they should explain the next steps the user should take and provide guidance with a clear call-to-action. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsClasses = empty-states.classes %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %} +
+
{% header "h2", "No data or results" %}

diff --git a/packages/stacks-docs/product/components/expandable.html b/packages/stacks-docs/product/components/expandable.html index 4a2e7759ad..fcd736c20c 100644 --- a/packages/stacks-docs/product/components/expandable.html +++ b/packages/stacks-docs/product/components/expandable.html @@ -5,6 +5,15 @@ description: An expandable, sometimes called an accordion, is an element that can be hidden / revealed with a sliding transition. tags: components --- + +

+ {% header "h2", "Classes" %} + {% assign docsClasses = expandable.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Examples" %} {% header "h3", "Basic" %} diff --git a/packages/stacks-docs/product/components/link-previews.html b/packages/stacks-docs/product/components/link-previews.html index 93c3710497..bc6e885111 100644 --- a/packages/stacks-docs/product/components/link-previews.html +++ b/packages/stacks-docs/product/components/link-previews.html @@ -6,27 +6,13 @@ ---
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in link-previews.classes %} - - - - - - {% endfor %} - -
ClassParentDescription
{{ item.class }}{{ item.parent }}{{ item.description }}
-
+ {% assign docsClasses = link-previews.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign col3Text = "Description" %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %}

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:

@@ -50,29 +36,27 @@
{% endhighlight %}
+ {% assign baseExample = link-previews.examples.base %}
-
- {% icon "Jira", "native" %} -
+
{% icon "Jira", "native" %}
- Using hooks for a simple fetch request and breaking the rules of hooks, unsure how? + {{ baseExample.title }}
- Issue submitted by Ricky Otero on Aug 12, 2019 • RESOLVED + {{ baseExample.details }}
-

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 %}
- https://stackoverflow.atlassian.net/projects/SREREQ/queues/custom/1 - Privacy notice + {{ baseExample.url }} + {{ baseExample.misc }}
@@ -103,17 +87,18 @@
{% endhighlight %}
+ {% assign codeExample = link-previews.examples.code %}
{% icon "GitHub" %}
@@ -139,8 +124,8 @@ {% endhighlight %}
- https://github.com/StackExchange/Stacks/blob/develop/Gruntfile.js -
(truncated)
+ {{ codeExample.url }} +
{{ codeExample.misc }}
@@ -196,11 +181,11 @@ {% icon "GitHub" %}
- - Gruntfile.js + + {{ codeExample.title }}
- Located in StackExchange / Stacks + {{ codeExample.details }}
@@ -226,8 +211,8 @@ {% endhighlight %}
- https://github.com/StackExchange/Stacks/blob/develop/Gruntfile.js -
(truncated)
+ {{ codeExample.url }} +
{{ codeExample.misc }}
diff --git a/packages/stacks-docs/product/components/links.html b/packages/stacks-docs/product/components/links.html index 2a541fa751..20bc9b946d 100644 --- a/packages/stacks-docs/product/components/links.html +++ b/packages/stacks-docs/product/components/links.html @@ -5,30 +5,14 @@ description: Links are lightly styled via the 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" %}
- {% header "h2", "Single link" %} - {% header "h3", "Single link classes" %} -
- - - - - - - - - - {% for item in links.single-links %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% header "h3", "Link classes" %} + {% assign docsClasses = links.link-classes %} + {% include "docs-table.html" %}
+
{% header "h3", "Single link examples" %}
@@ -60,30 +44,17 @@

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" %}
- {% header "h2", "Descendent anchors" %} - {% header "h3", "Descendent anchor classes" %} -
- - - - - - - - - - {% for item in links.descendent-anchors %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
- {% header "h3", "Descendent anchor examples" %} + {% header "h3", "Anchor classes" %} + {% assign docsClasses = links.anchors-classes %} + {% assign col1Classes = "s-table--cell3" %} + {% assign col2Classes = "s-table--cell2" %} + {% include "docs-table.html" %} +
+ +
+ {% header "h3", "Anchor examples" %}

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 +72,7 @@

…
{% endhighlight %}
- {% for item in links.descendent-anchors %} + {% for item in links.anchors-classes %} {% if item.name != "base" %}
There is a {{ item.name }} link here, , and another one. diff --git a/packages/stacks-docs/product/components/loader.html b/packages/stacks-docs/product/components/loader.html index 2b0db11d9e..81018c453c 100644 --- a/packages/stacks-docs/product/components/loader.html +++ b/packages/stacks-docs/product/components/loader.html @@ -8,34 +8,8 @@
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in loader.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
- {{ item.class }} - - {% if item.applies == "N/A" %} - {{ item.applies }} - {% else %} - {{ item.applies }} - {% endif %} - {{ item.description }}
-
+ {% assign docsClasses = loader.classes %} + {% include "docs-table.html" %}
{% header "h2", "Examples" %} {% header "h3", "Base" %} @@ -60,38 +34,8 @@
{% header "h3", "Sizes" %} - - - - - - - - - - {% for size in loader.sizes %} - - - - - - {% endfor %} - -
ClassApplied toExample
- {% if size == "" %} - .s-loader - {% else %} - .{{ size }} - {%endif %} - - {% if size == "" %} - N/A - {% else %} - .s-loader - {% endif %} - -
-
Loading…
-
-
+ {% assign docsClasses = loader.sizes-classes %} + {% assign col2Classes = "s-table--cell3" %} + {% assign col3Text = "Example" %} + {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/menus.html b/packages/stacks-docs/product/components/menus.html index 57c5570218..a84a18a607 100644 --- a/packages/stacks-docs/product/components/menus.html +++ b/packages/stacks-docs/product/components/menus.html @@ -8,37 +8,19 @@ ---
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in menu.classes %} - - - - - - {% endfor %} - -
ClassParentDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsClasses = menu.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %} -

- 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.

+
{% highlight html %}
diff --git a/packages/stacks-docs/product/components/modals.html b/packages/stacks-docs/product/components/modals.html index 182e70cca5..68c3dc7def 100644 --- a/packages/stacks-docs/product/components/modals.html +++ b/packages/stacks-docs/product/components/modals.html @@ -9,27 +9,12 @@ ---
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in modals.classes %} - - - - - - {% endfor %} - -
ClassApplies toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsClasses = modals.classes %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %} +
+
{% header "h2", "JavaScript" %} {% header "h3", "Attributes" %}
diff --git a/packages/stacks-docs/product/components/navigation.html b/packages/stacks-docs/product/components/navigation.html index e0afc170af..fe13d54738 100644 --- a/packages/stacks-docs/product/components/navigation.html +++ b/packages/stacks-docs/product/components/navigation.html @@ -9,26 +9,10 @@ ---
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in navigation.classes %} - - - - - - {% endfor %} - -
ClassApplies toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsClasses = navigation.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% 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..b013bbb54e 100644 --- a/packages/stacks-docs/product/components/notices.html +++ b/packages/stacks-docs/product/components/notices.html @@ -7,234 +7,29 @@ tags: components --- - - - -
- {% header "h2", "Accessibility" %} -
- - - - - - - - - - {% for item in notices.access %} - - - - - - {% endfor %} - -
ItemApplied toDescription
{{ 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)
-
+ {% header "h2", "Classes" %} + {% assign docsClasses = notices.classes %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %}
- {% header "h2", "JavaScript" %} - {% header "h3", "Attributes" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeApplied toDescription
data-controller="s-toast"Controller elementWires 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 elementWires up the element that is to be shown/hidden
data-s-toast-target="initialFocus"Any child focusable elementOptional 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 elementWires up the element to toggle the visibility of a toast
data-s-toast-return-element="[css selector]"Controller elementOptional 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 elementOptional Removes the toast from the DOM entirely when it is hidden
-
- {% header "h3", "Events" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EventElementDescription
s-toast:showToast targetDefault preventable Fires immediately before showing the toast. Calling .preventDefault() cancels the display of the toast.
s-toast:shownToast targetFires after the toast has been visually shown
s-toast:hideToast targetDefault preventable Fires immediately before hiding the toast. Calling .preventDefault() cancels the removal of the toast.
s-toast:hiddenToast targetFires after the toast has been visually hidden
-
-
- - - - - - - - - - - - - - - - - - - - - - -
event.detailApplicable eventsDescription
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" %} -
- - - - - - - - - - - - - - - - - - - - -
FunctionParametersDescription
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 docsClasses = notices.accessibility %} + {% assign expandableClassesTable = true %} + {% assign col1Text = "Item" %} + {% assign col1Classes = "s-table--cell4" %} + {% assign expandableBtnText = "Show all accessibility items" %} + {% include "docs-table.html" %}
- {% header "h2", "Visual styles" %} - {% header "h3", "Classes" %} -
- - - - - - - - - - {% for item in notices.visual %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }} - {% if item.applies == "N/A" %} - {{ item.applies }} - {% else %} - {% assign class = item.applies | split: " " %} - - {% for name in class %} - {{ name }} - {% endfor %} - {% endif %} - {{ item.description }}
-
- + {% header "h2", "Examples" %} {% header "h3", "Base" %} -

Default notice variations

{% highlight html %}
@@ -245,7 +40,7 @@ @Svg.Info …
-
+
@Svg.Check … …
@@ -298,7 +93,7 @@ @Svg.Info …
-
- {% 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 +147,10 @@ {% endhighlight %}
- -
- {% header "h2", "Behaviors" %} -
- - - - - - - - - - - {% for item in notices.behavior %} - - - - - - {% endfor %} - -
BehaviorClassApplied toDescription
{{ 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 }}
-
- - {% 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. -

- -
-
- -
-
- -
- {% icon "Alert" %} - 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 +217,69 @@ {% endfor %}
+
+ +
+ +
+ + {% header "h3", "JavaScript" %} + + {% header "h4", "Attributes" %} + {% assign docsClasses = notices.javascript.attributes %} + {% assign col1Text = "Attribute" %} + {% assign col1Classes = "s-table--cell5" %} + {% assign tableId = "docs-javascript-attributes-table" %} +
+ {% include "docs-table.html" %} +
+ + {% header "h4", "Events" %} + {% assign docsClasses = notices.javascript.events %} + {% assign col1Text = "Event" %} + {% assign tableId = "docs-javascript-events-table" %} +
+ {% include "docs-table.html" %} +
+ + {% header "h4", "Event details" %} + {% assign docsClasses = notices.javascript.eventDetails %} + {% assign col1Text = "event.detail" %} + {% assign col2Text = "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 docsClasses = notices.javascript.helpers %} + {% assign col1Text = "Function" %} + {% assign col2Text = "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..b3671e6630 100644 --- a/packages/stacks-docs/product/components/page-titles.html +++ b/packages/stacks-docs/product/components/page-titles.html @@ -6,43 +6,18 @@ ---
- {% header "h2", "Components" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - -
ComponentDescription
Page titleTitle of the page. Refer to the content section of Stacks for things like word choice, naming, and capitalization.
Description OptionalAdditional context for content and actions on the page.
Actions OptionalFree-form area to include buttons, filters, or other HTML content.
Breadcrumbs OptionalBreadcrumbs 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 docsClasses = page-titles.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% 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 +26,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 +45,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 +67,8 @@

Page title

-

Page title

-

Optional description de Finibus Bonorum et Malorum with an optional link.

+

{{ example.title }}

+

{{ example.description }}

@@ -106,10 +79,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 +108,7 @@

Page title

…
-

Page title

+

{{ example.title }}

Optional description de Finibus Bonorum et Malorum with an optional link.

From 9591266286a8ffa1cea3b86b81ce62380e5f6391 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 13 Feb 2026 16:26:21 -0500 Subject: [PATCH 2/5] Unify component json/html file names (with exceptions); improve docs table js --- .../stacks-docs/_data/components/links.json | 2 -- .../stacks-docs/_data/components/loader.json | 1 - .../components/{menu.json => menus.json} | 1 - .../components/pagination-component.json | 10 ++++------ .../_data/components/popovers.json | 1 - .../_data/components/post-summary.json | 1 - .../_data/components/progress-bars.json | 12 ++++++++++++ .../stacks-docs/_data/components/prose.json | 1 - .../stacks-docs/_data/components/tag.json | 1 + .../_data/components/tags-component.json | 3 --- ...{uploader-component.json => uploader.json} | 1 - .../{user-card.json => user-cards.json} | 11 +---------- .../stacks-docs/_data/components/vote.json | 1 - .../stacks-docs/_includes/docs-table.html | 19 +++---------------- .../assets/js/global.navigation.js | 13 +++++++++++++ .../product/components/button-groups.html | 1 - .../stacks-docs/product/components/cards.html | 1 - .../product/components/link-previews.html | 1 + .../stacks-docs/product/components/menus.html | 2 +- .../product/components/uploader.html | 2 +- .../product/components/user-cards.html | 12 ++++++------ 21 files changed, 43 insertions(+), 54 deletions(-) rename packages/stacks-docs/_data/components/{menu.json => menus.json} (97%) create mode 100644 packages/stacks-docs/_data/components/progress-bars.json create mode 100644 packages/stacks-docs/_data/components/tag.json rename packages/stacks-docs/_data/components/{uploader-component.json => uploader.json} (98%) rename packages/stacks-docs/_data/components/{user-card.json => user-cards.json} (97%) diff --git a/packages/stacks-docs/_data/components/links.json b/packages/stacks-docs/_data/components/links.json index 3fc276b4bb..af30ee8a9a 100644 --- a/packages/stacks-docs/_data/components/links.json +++ b/packages/stacks-docs/_data/components/links.json @@ -2,7 +2,6 @@ "link-classes": [ { "class": ".s-link", - "applies": "N/A", "description": "Base link style that is used almost universally." }, { @@ -40,7 +39,6 @@ { "class": ".s-anchors", "name": "base", - "applies": "N/A", "description": "A consistent link style is applied to all descendent anchors.", "exampleClasses": "" }, diff --git a/packages/stacks-docs/_data/components/loader.json b/packages/stacks-docs/_data/components/loader.json index 93c1715eb7..d3ad8e2e35 100644 --- a/packages/stacks-docs/_data/components/loader.json +++ b/packages/stacks-docs/_data/components/loader.json @@ -2,7 +2,6 @@ "classes": [ { "class": ".s-loader", - "applies": "N/A", "description": "Base class for the loader component" }, { diff --git a/packages/stacks-docs/_data/components/menu.json b/packages/stacks-docs/_data/components/menus.json similarity index 97% rename from packages/stacks-docs/_data/components/menu.json rename to packages/stacks-docs/_data/components/menus.json index bf2ac129ef..0fa8233020 100644 --- a/packages/stacks-docs/_data/components/menu.json +++ b/packages/stacks-docs/_data/components/menus.json @@ -2,7 +2,6 @@ "classes": [ { "class": ".s-menu", - "applies": "N/A", "description": "Base container styling for a menu." }, { diff --git a/packages/stacks-docs/_data/components/pagination-component.json b/packages/stacks-docs/_data/components/pagination-component.json index b9785252ee..e8ff5dd038 100644 --- a/packages/stacks-docs/_data/components/pagination-component.json +++ b/packages/stacks-docs/_data/components/pagination-component.json @@ -2,18 +2,16 @@ "classes": [ { "class": ".s-pagination", - "applies": "N/A", - "description": "Base pagination style that is used universally." + "description": "Base pagination style." }, { "class": ".s-pagination--item", - "applies": "N/A", - "description": "A child element that’s used as a link and labeled with the page number." + "description": "Child of .s-pagination. A child element that's used as a link and labeled with the page number." }, { "class": ".is-selected", "applies": ".s-pagination--item", - "description": "Active state that’s applied to the current page." + "description": "Active state that's applied to the current page." }, { "class": ".s-pagination--item__nav", @@ -26,4 +24,4 @@ "description": "Clears the background and removes any interactivity. Used for ellipses and descriptions." } ] -} \ No newline at end of file +} diff --git a/packages/stacks-docs/_data/components/popovers.json b/packages/stacks-docs/_data/components/popovers.json index b14c792a3a..bb14cef91d 100644 --- a/packages/stacks-docs/_data/components/popovers.json +++ b/packages/stacks-docs/_data/components/popovers.json @@ -2,7 +2,6 @@ "automatic": [ { "class": ".s-popover", - "applies": "N/A", "description": "Base parent container for popovers" }, { diff --git a/packages/stacks-docs/_data/components/post-summary.json b/packages/stacks-docs/_data/components/post-summary.json index eb7d0604f4..8405e89623 100644 --- a/packages/stacks-docs/_data/components/post-summary.json +++ b/packages/stacks-docs/_data/components/post-summary.json @@ -2,7 +2,6 @@ "classes": [ { "class": ".s-post-summary", - "applies": "N/A", "description": "Base parent container for a post summary" }, { diff --git a/packages/stacks-docs/_data/components/progress-bars.json b/packages/stacks-docs/_data/components/progress-bars.json new file mode 100644 index 0000000000..8e6cf7462b --- /dev/null +++ b/packages/stacks-docs/_data/components/progress-bars.json @@ -0,0 +1,12 @@ +{ + "classes": [ + { + "class": ".s-progress", + "description": "Base class for the progress bar component." + }, + { + "class": ".s-progress--bar", + "description": "Child of .s-progress. A child element that shows the user’s current progress to accomplishing a goal with a background color." + } + ] +} \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/prose.json b/packages/stacks-docs/_data/components/prose.json index faaaea6041..c924249209 100644 --- a/packages/stacks-docs/_data/components/prose.json +++ b/packages/stacks-docs/_data/components/prose.json @@ -2,7 +2,6 @@ "classes": [ { "class": ".s-prose", - "applies": "N/A", "description": "Adds proper styling for rendered Markdown." }, { diff --git a/packages/stacks-docs/_data/components/tag.json b/packages/stacks-docs/_data/components/tag.json new file mode 100644 index 0000000000..dfa2aa131f --- /dev/null +++ b/packages/stacks-docs/_data/components/tag.json @@ -0,0 +1 @@ +{"classes":[{"class":".s-tag","description":"Base tag style that is used almost universally."},{"class":".s-tag__moderator","applies":".s-tag","description":"Exclusively used within Meta communities by moderators (and employees) to assign unique statuses to questions."},{"class":".s-tag__required","applies":".s-tag","description":"Exclusively used within Meta communities to denote the post type. One of these tags are required on all Meta posts."},{"class":".s-tag__ignored","applies":".s-tag","description":"Prepends an icon to indicate the tag is ignored."},{"class":".s-tag__watched","applies":".s-tag","description":"Prepends an icon to indicate the tag is watched."},{"class":".s-tag--dismiss","description":"A child element within .s-tag for a clear or dismiss action icon. When using this element, it should be rendered as a button containing the icon and the parent .s-tag should be rendered as a span element."},{"class":".s-tag--sponsor","description":"A child element within .s-tag that correctly positions a tag's sponsor logo."}],"sizes":[{"class":"s-tag__sm"},{"class":"N/A"},{"class":"s-tag__lg"}]} diff --git a/packages/stacks-docs/_data/components/tags-component.json b/packages/stacks-docs/_data/components/tags-component.json index edd7083660..8e68e1c9e3 100644 --- a/packages/stacks-docs/_data/components/tags-component.json +++ b/packages/stacks-docs/_data/components/tags-component.json @@ -2,7 +2,6 @@ "classes": [ { "class": ".s-tag", - "applies": "N/A", "description": "Base tag style that is used almost universally." }, { @@ -27,12 +26,10 @@ }, { "class": ".s-tag--dismiss", - "applies": "N/A", "description": "A child element within .s-tag for a clear or dismiss action icon. When using this element, it should be rendered as a button containing the icon and the parent .s-tag should be rendered as a span element." }, { "class": ".s-tag--sponsor", - "applies": "N/A", "description": "A child element within .s-tag that correctly positions a tag’s sponsor logo." } ], diff --git a/packages/stacks-docs/_data/components/uploader-component.json b/packages/stacks-docs/_data/components/uploader.json similarity index 98% rename from packages/stacks-docs/_data/components/uploader-component.json rename to packages/stacks-docs/_data/components/uploader.json index 59744aebc4..c6a89dedba 100644 --- a/packages/stacks-docs/_data/components/uploader-component.json +++ b/packages/stacks-docs/_data/components/uploader.json @@ -2,7 +2,6 @@ "classes": [ { "class": ".s-uploader", - "applies": "N/A", "description": "Base uploader element" }, { diff --git a/packages/stacks-docs/_data/components/user-card.json b/packages/stacks-docs/_data/components/user-cards.json similarity index 97% rename from packages/stacks-docs/_data/components/user-card.json rename to packages/stacks-docs/_data/components/user-cards.json index f9480e792d..fc286189ce 100644 --- a/packages/stacks-docs/_data/components/user-card.json +++ b/packages/stacks-docs/_data/components/user-cards.json @@ -2,12 +2,10 @@ "classes": [ { "class": ".s-user-card", - "applies": "N/A", "description": "Base user card container that applies the basic style." }, { "class": ".s-user-card--group", - "applies": "N/A", "description": "A container for group elements." }, { @@ -17,37 +15,30 @@ }, { "class": ".s-user-card--column", - "applies": "N/A", "description": "A container for column elements." }, { - "class": ".s-user-card--row", - "applies": "N/A", + "class": ".s-user-card--row", "description": "A container for row elements." }, { "class": ".s-user-card--bio", - "applies": "N/A", "description": "Container for the user's bio." }, { "class": ".s-user-card--recognition", - "applies": "N/A", "description": "Container for recognition by a collective." }, { "class": ".s-user-card--rep", - "applies": "N/A", "description": "Container for the user's reputation." }, { "class": ".s-user-card--time", - "applies": "N/A", "description": "Container for the user's timestamp." }, { "class": ".s-user-card--username", - "applies": "N/A", "description": "Container for the user's username." } ], diff --git a/packages/stacks-docs/_data/components/vote.json b/packages/stacks-docs/_data/components/vote.json index b69212a0a2..a146e072f3 100644 --- a/packages/stacks-docs/_data/components/vote.json +++ b/packages/stacks-docs/_data/components/vote.json @@ -2,7 +2,6 @@ "classes": [ { "class": ".s-vote", - "applies": "N/A", "description": "Base vote component." }, { diff --git a/packages/stacks-docs/_includes/docs-table.html b/packages/stacks-docs/_includes/docs-table.html index c70d46f45a..5222264722 100644 --- a/packages/stacks-docs/_includes/docs-table.html +++ b/packages/stacks-docs/_includes/docs-table.html @@ -62,27 +62,14 @@ {% if expandableClassesTable %} {% endif %} -{% if expandableClassesTable %} - -{% endif %} - {% assign tableId = nil %} {% assign col1Classes = nil %} diff --git a/packages/stacks-docs/assets/js/global.navigation.js b/packages/stacks-docs/assets/js/global.navigation.js index 0a090de58a..ca6df65ff3 100644 --- a/packages/stacks-docs/assets/js/global.navigation.js +++ b/packages/stacks-docs/assets/js/global.navigation.js @@ -8,6 +8,19 @@ $(document).ready(function() { e.preventDefault(); }); + // Docs table "Show all classes" - use delegation so it works after sidebar nav AJAX load + $(document).on("click", ".js-docs-table-expand", function() { + var button = $(this); + var tableId = button.attr("aria-controls"); + var table = tableId ? document.getElementById(tableId) : null; + if (table) { + button.addClass("d-none"); + button.attr("aria-expanded", "true"); + table.classList.remove("v-truncate", "v-truncate-fade", "overflow-auto"); + table.classList.add("overflow-x-auto"); + } + }); + function regenerateMenu () { // Hide the navigation if we've opened it hamburgerBtn.removeClass("is-selected"); diff --git a/packages/stacks-docs/product/components/button-groups.html b/packages/stacks-docs/product/components/button-groups.html index 6da50f99a3..52bef5770f 100644 --- a/packages/stacks-docs/product/components/button-groups.html +++ b/packages/stacks-docs/product/components/button-groups.html @@ -9,7 +9,6 @@
{% header "h2", "Classes" %} {% assign docsClasses = button-groups.classes %} - {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/cards.html b/packages/stacks-docs/product/components/cards.html index e76942a711..dce49e4c91 100644 --- a/packages/stacks-docs/product/components/cards.html +++ b/packages/stacks-docs/product/components/cards.html @@ -9,7 +9,6 @@
{% header "h2", "Classes" %} {% assign docsClasses = cards.classes %} - {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/link-previews.html b/packages/stacks-docs/product/components/link-previews.html index bc6e885111..b7d2780cc5 100644 --- a/packages/stacks-docs/product/components/link-previews.html +++ b/packages/stacks-docs/product/components/link-previews.html @@ -10,6 +10,7 @@ {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% assign col3Text = "Description" %} + {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/menus.html b/packages/stacks-docs/product/components/menus.html index a84a18a607..2ab04eae8b 100644 --- a/packages/stacks-docs/product/components/menus.html +++ b/packages/stacks-docs/product/components/menus.html @@ -8,7 +8,7 @@ ---
{% header "h2", "Classes" %} - {% assign docsClasses = menu.classes %} + {% assign docsClasses = menus.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/uploader.html b/packages/stacks-docs/product/components/uploader.html index 59cb1f79f4..7ae910b6bf 100644 --- a/packages/stacks-docs/product/components/uploader.html +++ b/packages/stacks-docs/product/components/uploader.html @@ -17,7 +17,7 @@ - {% for item in uploader-component.classes %} + {% for item in uploader.classes %} {{ item.class }} {{ item.applies }} diff --git a/packages/stacks-docs/product/components/user-cards.html b/packages/stacks-docs/product/components/user-cards.html index 54758d0ebe..601b854dca 100644 --- a/packages/stacks-docs/product/components/user-cards.html +++ b/packages/stacks-docs/product/components/user-cards.html @@ -17,7 +17,7 @@ - {% for item in user-card.classes %} + {% for item in user-cards.classes %} {{ item.class }} {{ item.applies }} @@ -77,7 +77,7 @@
{% endhighlight %}
- {% for user in user-card.base %} + {% for user in user-cards.base %}
@@ -180,7 +180,7 @@
{% endhighlight %}
- {% for user in user-card.with-badges %} + {% for user in user-cards.with-badges %}
@@ -254,7 +254,7 @@ - {% for item in user-card.sizes %} + {% for item in user-cards.sizes %} {{ item.size }} @@ -316,7 +316,7 @@
{% endhighlight %}
- {% for user in user-card.small %} + {% for user in user-cards.small %}
@@ -524,7 +524,7 @@ - {% for state in user-card.states %} + {% for state in user-cards.states %} {{ state.name }} {{ state.class }} From 50e234822781cf492c7f1e58a18898bf0f4a34a7 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 13 Feb 2026 18:13:34 -0500 Subject: [PATCH 3/5] More component page updates --- .../components/pagination-component.json | 32 +- .../_data/components/popovers.json | 150 +++- .../_data/components/progress-bars.json | 111 ++- .../stacks-docs/_data/components/select.json | 33 + .../_data/components/sidebar-widgets.json | 20 + .../stacks-docs/_data/components/tables.json | 62 +- .../_data/components/tags-component.json | 10 + .../stacks-docs/_data/components/topbar.json | 144 ++-- .../stacks-docs/_includes/docs-table.html | 2 +- .../product/components/pagination.html | 116 ++- .../product/components/popovers.html | 660 +++++++----------- .../product/components/post-summary.html | 311 ++++----- .../product/components/progress-bars.html | 142 +--- .../stacks-docs/product/components/prose.html | 25 +- .../stacks-docs/product/components/radio.html | 7 + .../product/components/select.html | 9 + .../product/components/sidebar-widgets.html | 8 + .../product/components/tables.html | 32 +- .../stacks-docs/product/components/tags.html | 26 +- .../product/components/topbar.html | 25 +- 20 files changed, 999 insertions(+), 926 deletions(-) create mode 100644 packages/stacks-docs/_data/components/select.json create mode 100644 packages/stacks-docs/_data/components/sidebar-widgets.json diff --git a/packages/stacks-docs/_data/components/pagination-component.json b/packages/stacks-docs/_data/components/pagination-component.json index e8ff5dd038..aeb7b3f4d2 100644 --- a/packages/stacks-docs/_data/components/pagination-component.json +++ b/packages/stacks-docs/_data/components/pagination-component.json @@ -23,5 +23,35 @@ "applies": ".s-pagination--item", "description": "Clears the background and removes any interactivity. Used for ellipses and descriptions." } - ] + ], + "examples": { + "base": { + "nextButton": true, + "previousButton": true, + "items": [ + { + "page": 1, + "classes": "is-selected" + }, + { + "page": 2 + }, + { + "page": 3 + }, + { + "page": 4 + }, + { + "page": 5 + }, + { + "page": "…" + }, + { + "page": 122386 + } + ] + } + } } diff --git a/packages/stacks-docs/_data/components/popovers.json b/packages/stacks-docs/_data/components/popovers.json index bb14cef91d..f54152872c 100644 --- a/packages/stacks-docs/_data/components/popovers.json +++ b/packages/stacks-docs/_data/components/popovers.json @@ -1,28 +1,164 @@ { - "automatic": [ + "classes": [ { "class": ".s-popover", "description": "Base parent container for popovers" }, { "class": ".s-popover__tooltip", - "applies": ".s-popover", + "applies": ".s-popover", "description": "Removes minimum size constraints to support shorter tooltip text" }, { "class": ".is-visible", - "applies": ".s-popover", + "applies": ".s-popover", "description": "This class toggles the popover visibility" }, { "class": ".s-popover--close", - "applies": "Child of .s-popover", - "description": "Used to dismiss a popover" + "description": "Child of .s-popover. Used to dismiss a popover" }, { "class": ".s-popover--content", - "applies": "Child of .s-popover", - "description": "Wrapper around the popover content to apply appropriate overflow styles" + "description": "Child of .s-popover. Wrapper around the popover content to apply appropriate overflow styles" + } + ], + "interactiveAttributes": [ + { + "item": "id=\"{POPOVER_ID}\"", + "applies": ".s-popover", + "description": "A unique id that the popover’s toggling element can target. Matches the value of [aria-controls] on the toggling element." + }, + { + "item": "data-controller=\"s-popover\"", + "appliesText": "Controller element", + "description": "Wires up the element to the popover controller. This may be a toggling element or a wrapper element." + }, + { + "item": "data-s-popover-reference-selector=\"[css selector]\"", + "appliesText": "Controller element", + "description": "(optional) Designates the element to use as the popover reference. If left unset, the value defaults to the controller element." + }, + { + "item": "aria-controls=\"{POPOVER_ID}\"", + "appliesText": "Reference element", + "description": "Associates the element to the desired popover element." + }, + { + "item": "data-action=\"s-popover#toggle\"", + "appliesText": "Toggling element", + "description": "Wires up the element to toggle the visibility of a generic popover." + }, + { + "item": "data-s-popover-toggle-class=\"[class list]\"", + "appliesText": "Controller element", + "description": "Adds an optional space-delineated list of classes to be toggled on the originating element when the popover is shown or hidden." + }, + { + "item": "data-s-popover-placement=\"[placement]\"", + "appliesText": "Controller element", + "description": "Dictates where to place the popover in relation to the reference element. By default, the placement value is bottom. Accepted placements are auto, top, right, bottom, left. Each placement can take an additional -start and -end variation." + }, + { + "item": "data-s-popover-auto-show=\"[true|false]\"", + "appliesText": "Controller element", + "description": "(optional) If true, the popover will appear immediately when the Stacks controller is first connected. This should be used in place of .is-visible for displaying popovers on load as it will prevent the popover from appearing before it has been correctly positioned." + }, + { + "item": "data-s-popover-hide-on-outside-click=\"[always|never|if-in-viewport|after-dismissal]\"", + "appliesText": "Controller element", + "description": "(optional) Default: always
  • If always, the popover will appear disappear when outside clicks occur.
  • If if-in-viewport, the popover will only disappear when outside clicks occur if the popover is in the viewport.
  • If never, the popover will not disappear on outside clicks and will only be dismissed through other means, e.g. data-target=\"s-popover#hide\".
  • If after-dismissal, the popover will not disappear on outside clicks unless it has been dismissed some other way at least once.
" + } + ], + "interactiveEvents": [ + { + "item": "s-popover:show", + "description": "Fires immediately before showing and positioning the popover. This fires before the popover is first displayed to the user, and can be used to create or initialize the popover element. Calling .preventDefault() cancels the display of the popover." + }, + { + "item": "s-popover:shown", + "description": "Fires immediately after showing the popover." + }, + { + "item": "s-popover:hide", + "description": "Fires immediately before hiding the popover. Calling .preventDefault() prevents the removal of the popover." + }, + { + "item": "s-popover:hidden", + "description": "Fires immediately after hiding the popover." + } + ], + "dispatchedEvents": [ + { + "item": "dispatcher", + "applies": "s-popover:*", + "description": "Contains the Element that initiated the event. For instance, the button clicked to show, the element clicked outside the popover that caused it to hide, etc." + } + ], + "tooltipHoverAttributes": [ + { + "item": "id=\"{POPOVER_ID}\"", + "applies": ".s-popover", + "description": "A unique id that the popover’s toggling element can target. Matches the value of [aria-describedby] on the toggling element." + }, + { + "item": "data-controller=\"s-tooltip\"", + "appliesText": "Controller element", + "description": "Wires up the element to the tooltip controller." + }, + { + "item": "data-s-tooltip-reference-selector=\"[css selector]\"", + "appliesText": "Controller element", + "description": "(optional) Designates the element to use as the tooltip reference. If left unset, the value defaults to the controller element." + }, + { + "item": "aria-describedby=\"{POPOVER_ID}\"", + "appliesText": "Reference element", + "description": "Associates the element to the desired popover element." + }, + { + "item": "title=\"{TITLE}\"", + "appliesText": "Controller element", + "description": "If aria-describedby is not present or valid, and the title attribute exists, the title will be removed from the element and be used to create a popover immediately after the element. All content will be escaped and inserted as text." + }, + { + "item": "data-s-tooltip-html-title=\"{TITLE}\"", + "appliesText": "Controller element", + "description": "Acts the exact same as the title attribute, but inserts the raw text directly as html. If both this and the title attribute exist on the element, this attribute will be used." + }, + { + "item": "data-s-tooltip-placement=\"[placement]\"", + "appliesText": "Controller element", + "description": "Dictates where to place the tooltip in relation to the reference element. By default, the placement value is bottom. Accepted placements are auto, top, right, bottom, left. Each placement can take an additional -start and -end variation." + } + ], + "tooltipHoverEvents": [ + { + "item": "s-tooltip:show", + "appliesText": "Controller element", + "description": "Default preventable Fires immediately before showing and positioning the tooltip. This fires before the tooltip is first displayed to the user, and can be used to create or initialize the tooltip element. Calling .preventDefault() cancels the display of the popover." + }, + { + "item": "s-tooltip:shown", + "appliesText": "Controller element", + "description": "Fires immediately after showing the tooltip." + }, + { + "item": "s-tooltip:hide", + "appliesText": "Controller element", + "description": "Default preventable Fires immediately before hiding the tooltip. Calling .preventDefault() prevents the removal of the tooltip." + }, + { + "item": "s-tooltip:hidden", + "appliesText": "Controller element", + "description": "Fires immediately after hiding the tooltip." + } + ], + "tooltipDispatchedEvents": [ + { + "item": "dispatcher", + "applies": "s-tooltip:*", + "description": "Contains the Element that initiated the event. For instance, the element hovered over to show, etc." } ] } \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/progress-bars.json b/packages/stacks-docs/_data/components/progress-bars.json index 8e6cf7462b..df13f0a1aa 100644 --- a/packages/stacks-docs/_data/components/progress-bars.json +++ b/packages/stacks-docs/_data/components/progress-bars.json @@ -2,11 +2,118 @@ "classes": [ { "class": ".s-progress", - "description": "Base class for the progress bar component." + "description": "The parent class for all progress bars." }, { "class": ".s-progress--bar", - "description": "Child of .s-progress. A child element that shows the user’s current progress to accomplishing a goal with a background color." + "description": "A child element of .s-progress. It shows the user’s current progress to accomplishing a goal with a background color." + }, + { + "class": ".s-progress--label", + "description": "A child element of .s-progress. It’s used to describe what progress bar is tracking." + }, + { + "class": ".s-progress__brand", + "applies": ".s-progress", + "description": "A modifying class applied to .s-progress. It changes the bar color from green to orange." + }, + { + "class": ".s-progress__info", + "applies": ".s-progress", + "description": "Modifier for an info progress bar. It changes the bar color from green to blue." + }, + { + "class": ".s-progress__circular", + "applies": ".s-progress", + "description": "Modifier for a circular progress bar. It changes the bar to be a percentage of a circle." + }, + { + "class": ".s-progress__privilege", + "applies": ".s-progress", + "description": "Modifier for a privilege progress bar. It changes the bar color from green to a lighter green (for legibility reasons)." + }, + { + "class": ".s-progress__badge", + "applies": ".s-progress", + "description": "Modifier for a badge progress bar." + }, + { + "class": ".s-progress__gold", + "applies": ".s-progress__badge", + "description": "Modifier for a gold badge progress bar. Applied to .s-progress__badge." + }, + { + "class": ".s-progress__silver", + "applies": ".s-progress__badge", + "description": "Modifier for a silver badge progress bar. Applied to .s-progress__badge." + }, + { + "class": ".s-progress__bronze", + "applies": ".s-progress__badge", + "description": "Modifier for a bronze badge progress bar. Applied to .s-progress__badge." + }, + { + "class": ".s-progress__segmented", + "applies": ".s-progress", + "description": "Modifier for a segmented progress bar" + }, + { + "class": ".s-progress__stepped", + "applies": ".s-progress", + "description": "Modifier for a stepped progress bar" + }, + { + "class": ".s-progress--step", + "description": "A child of .s-progress--stepped that’s a wrapper for each individual step." + }, + { + "class": ".is-active", + "applies": ".s-progress--step", + "description": "A modifier .s-progress__step that adds visual styling to the active step." + }, + { + "class": ".is-completed", + "applies": ".s-progress--step", + "description": "A modifier .s-progress__step that adds visual styling to a completed step." + }, + { + "class": ".s-progress--stop", + "description": "A child of .s-progress--step, the circle that might contain a checkmark if the step’s been completed." + }, + { + "class": ".s-progress--bar__left", + "description": "A child of .s-progress--step that draws a line on the left side of a step." + }, + { + "class": ".s-progress--bar__right", + "description": "A child of .s-progress--step that draws a line on the right side of a step." + } + ], + "parameters": [ + { + "item": "role=\"progressbar\"", + "applies": ".s-progress--bar", + "description": "This parameter communicates that element is displaying progress status that takes a long time or consists of several steps. (Source)" + }, + { + "item": "aria-valuemin", + "applies": ".s-progress--bar", + "description": "This parameter defines the minimum allowed value for the progress bar. (Source)" + }, + { + "item": "aria-valuemax", + "applies": ".s-progress--bar", + "description": "This parameter defines the maximum allowed value for the progress bar. (Source)" + }, + { + "item": "aria-valuenow", + "applies": ".s-progress--bar", + "description": "This parameter defines the current value for the progress bar. (Source)" + }, + { + "item": "style=\"width: [value]%\"", + "applies": ".s-progress--bar", + "description": "This parameter sets the width of the progress bar as a percentage. The value is the aria-valuenow value displayed as a percentage." } ] } \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/select.json b/packages/stacks-docs/_data/components/select.json new file mode 100644 index 0000000000..05012ec9bb --- /dev/null +++ b/packages/stacks-docs/_data/components/select.json @@ -0,0 +1,33 @@ +{ + "classes": [ + { + "class": ".s-select", + "description": "Base select style." + }, + { + "class": ".s-select__sm", + "applies": ".s-select", + "description": "Apply a small size." + }, + { + "class": ".s-select__lg", + "applies": ".s-select", + "description": "Apply a large size." + }, + { + "class": ".has-error", + "applies": ".s-select", + "description": "Apply an error state." + }, + { + "class": ".has-success", + "applies": ".s-select", + "description": "Apply a success state." + }, + { + "class": ".has-warning", + "applies": ".s-select", + "description": "Apply a warning state." + } + ] +} diff --git a/packages/stacks-docs/_data/components/sidebar-widgets.json b/packages/stacks-docs/_data/components/sidebar-widgets.json new file mode 100644 index 0000000000..1990319881 --- /dev/null +++ b/packages/stacks-docs/_data/components/sidebar-widgets.json @@ -0,0 +1,20 @@ +{ + "classes": [ + { + "class": ".s-sidebarwidget", + "description": "Base sidebar widget style." + }, + { + "class": ".s-sidebarwidget--content", + "description": "Container for the sidebar widget content." + }, + { + "class": ".s-sidebarwidget--header", + "description": "Container for the sidebar widget header." + }, + { + "class": ".s-sidebarwidget--footer", + "description": "Container for the sidebar widget footer." + } + ] +} diff --git a/packages/stacks-docs/_data/components/tables.json b/packages/stacks-docs/_data/components/tables.json index 3b68ebb323..7996bd9b8c 100644 --- a/packages/stacks-docs/_data/components/tables.json +++ b/packages/stacks-docs/_data/components/tables.json @@ -1,4 +1,54 @@ { + "classes": [ + { + "class": ".s-table-container", + "description": "Container for the table." + }, + { + "class": ".s-table", + "description": "Base table style." + }, + { + "class": ".s-table__b0", + "applies": ".s-table", + "description": "Removes all table cell borders." + }, + { + "class": ".s-table__bx", + "applies": ".s-table", + "description": "Shows only horizontal table cell borders. Good for tables with lots of data that can be sorted and filtered." + }, + { + "class": ".s-table__bx-simple", + "applies": ".s-table", + "description": "Removes most of the default borders and backgrounds. Good for tables without much data that don't need to be sorted or filtered." + }, + { + "class": ".s-table__stripes", + "applies": ".s-table", + "description": "Apply zebra striping to the table." + }, + { + "class": ".s-table__sortable", + "applies": ".s-table", + "description": "Applies styling to imply the table is sortable." + }, + { + "class": ".s-table__sm", + "applies": ".s-table", + "description": "Apply a condensed sizing to the table." + }, + { + "class": ".s-table__lg", + "applies": ".s-table", + "description": "Apply a large sizing to the table." + }, + { + "class": ".s-table--cell", + "applies": ".s-table", + "description": "Table cell width in 12 evenly divided columns. Replace with the number of columns the cell should span." + } + ], "widths": [ { "class": ".s-table--cell1", @@ -51,32 +101,32 @@ ], "data-attributes": [ { - "attribute": "data-controller=\"s-table\"", + "item": "data-controller=\"s-table\"", "applies": "table", "description": "Wires up the table to the JS controller" }, { - "attribute": "data-s-table-target=\"column\"", + "item": "data-s-table-target=\"column\"", "applies": "th", "description": "Marks this is a sortable column for the purpose of modifying arrow icons" }, { - "attribute": "data-action=\"click->s-table#sort\"", + "item": "data-action=\"click->s-table#sort\"", "applies": "button", "description": "Causes a click on the header cell to sort by this column" }, { - "attribute": "data-s-table-sort-to=\"top\"", + "item": "data-s-table-sort-to=\"top\"", "applies": "tr", "description": "Forces the sorting of a row to the top" }, { - "attribute": "data-s-table-sort-to=\"bottom\"", + "item": "data-s-table-sort-to=\"bottom\"", "applies": "tr", "description": "Forces the sorting of a row to the bottom" }, { - "attribute": "data-s-table-sort-val=\"[x]\"", + "item": "data-s-table-sort-val=\"[x]\"", "applies": "td", "description": "Optionally use a custom value for sorting instead of the cell’s text content" } diff --git a/packages/stacks-docs/_data/components/tags-component.json b/packages/stacks-docs/_data/components/tags-component.json index 8e68e1c9e3..2ac7047061 100644 --- a/packages/stacks-docs/_data/components/tags-component.json +++ b/packages/stacks-docs/_data/components/tags-component.json @@ -24,6 +24,16 @@ "applies": ".s-tag", "description": "Prepends an icon to indicate the tag is watched." }, + { + "class": ".s-tag__sm", + "applies": ".s-tag", + "description": "Apply a small size to the tag." + }, + { + "class": ".s-tag__lg", + "applies": ".s-tag", + "description": "Apply a large size to the tag." + }, { "class": ".s-tag--dismiss", "description": "A child element within .s-tag for a clear or dismiss action icon. When using this element, it should be rendered as a button containing the icon and the parent .s-tag should be rendered as a span element." diff --git a/packages/stacks-docs/_data/components/topbar.json b/packages/stacks-docs/_data/components/topbar.json index 1a7adbb775..4399b874e4 100644 --- a/packages/stacks-docs/_data/components/topbar.json +++ b/packages/stacks-docs/_data/components/topbar.json @@ -1,76 +1,68 @@ -[ - { - "class": ".s-topbar", - "description": "Base class" - }, - { - "class": ".s-topbar__light", - "applies": "`.s-topbar`", - "description": "Forced light theme" - }, - { - "class": ".s-topbar__dark", - "applies": "`.s-topbar`", - "description": "Forced dark theme" - }, - { - "class": ".s-topbar--skip-link", - "description": "Applied to an anchor tag for bypassing the top-level navigation links and jump to the main content on a page. [See WCAG Technique G1](https://www.w3.org/WAI/WCAG22/Techniques/general/G1)", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--container", - "description": "Add **atomic** `classes` here to customize internal content width; defaults to `.wmx12`", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--logo", - "description": "The logo. Can apply `.is-selected` to this", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--menu-btn", - "description": "Hamburger menu icon. Add `.is-selected` to turn it into an X", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--content", - "description": "Contains `li > .s-topbar--item` elements that don’t look like anything in particular", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--item", - "description": "A topbar item element with hover, active and focused styling. Can add `.is-selected`", - "applies": "Child of `.s-topbar--content > li`" - }, - { - "class": ".s-topbar--item__unset", - "description": "This class excludes the `.s-topbar--item` from any automatic styling. This is useful for calls to action, e.g. buttons or log in links", - "applies": "`.s-topbar--item`" - }, - { - "class": ".s-topbar--navigation", - "description": "Apply to `nav` to ensure proper layout", - "applies": "Parent of `.s-topbar--container`" - }, - { - "class": ".s-topbar--notice", - "description": "A badge-styled notice that stands out. Add `.is-unread` to make it stand out more", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--searchbar", - "description": "Contains a search input and an optional `.s-select`. Hides itself on mobile.", - "applies": "Child of `.s-topbar`" - }, - { - "class": ".s-topbar--searchbar--input-group", - "description": "Holds the search input + icon", - "applies": "Child of `.s-topbar--searchbar`" - }, - { - "class": ".s-topbar--searchbar__open", - "applies": "`.s-topbar--searchbar`", - "description": "On mobile, this class shows the search input below the topbar. Toggle this class with a button" - } -] +{ + "classes": [ + { + "class": ".s-topbar", + "description": "Base class" + }, + { + "class": ".s-topbar__light", + "applies": ".s-topbar", + "description": "Applies a forced light theme" + }, + { + "class": ".s-topbar__dark", + "applies": ".s-topbar", + "description": "Applies a forced dark theme" + }, + { + "class": ".s-topbar--skip-link", + "description": "Child of .s-topbar. Applied to an anchor tag for bypassing the top-level navigation links and jump to the main content on a page. See WCAG Technique G1" + }, + { + "class": ".s-topbar--container", + "description": "Child of .s-topbar. Add atomic classes here to customize internal content width; defaults to `.wmx12`" + }, + { + "class": ".s-topbar--logo", + "description": "Child of .s-topbar--container. The logo. Can apply .is-selected to this" + }, + { + "class": ".s-topbar--menu-btn", + "description": "Child of .s-topbar--container. Hamburger menu icon. Add .is-selected to turn it into an X" + }, + { + "class": ".s-topbar--navigation", + "description": "Child of .s-topbar--container. Apply to nav to ensure proper layout." + }, + { + "class": ".s-topbar--content", + "description": "Child of .s-topbar--navigation. Contains li > .s-topbar--item elements that don’t look like anything in particular" + }, + { + "class": ".s-topbar--item", + "description": "Child of .s-topbar--content > li. A topbar item element with hover, active and focused styling. Can add `.is-selected`" + }, + { + "class": ".s-topbar--item__unset", + "applies": ".s-topbar--item", + "description": "This class excludes the .s-topbar--item from any automatic styling. This is useful for calls to action, e.g. buttons or log in links." + }, + { + "class": ".s-topbar--notice", + "description": "Child of .s-topbar--container. A badge-styled notice that stands out. Add .is-unread to make it stand out more." + }, + { + "class": ".s-topbar--searchbar", + "description": "Child of .s-topbar--container. Contains a search input and an optional `.s-select`. Hides itself on mobile." + }, + { + "class": ".s-topbar--searchbar--input-group", + "description": "Child of .s-topbar--searchbar. Holds the search input + icon." + }, + { + "class": ".s-topbar--searchbar__open", + "applies": ".s-topbar--searchbar", + "description": "On mobile, this class shows the search input below the topbar. Toggle this class with a button." + } + ] +} diff --git a/packages/stacks-docs/_includes/docs-table.html b/packages/stacks-docs/_includes/docs-table.html index 5222264722..7952bdb84b 100644 --- a/packages/stacks-docs/_includes/docs-table.html +++ b/packages/stacks-docs/_includes/docs-table.html @@ -19,7 +19,7 @@ {% assign expandableClassesTable = expandableClassesTable | default: false %}
diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html index 2b964278b0..8599c54305 100644 --- a/packages/stacks-docs/product/components/pagination.html +++ b/packages/stacks-docs/product/components/pagination.html @@ -6,35 +6,27 @@ description: Pagination splits content into pages, as seen on questions, tags, users, and jobs listings. tags: components --- +
{% header "h2", "Classes" %} -
-
- - - - - - - - - {% for item in pagination-component.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsClasses = pagination-component.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %}
+
{% header "h2", "Example" %}
{% highlight html %}
+
- {% header "h2", "Hover tooltips" %} + {% header "h2", "Tooltips" %}

When a popover is intended only for display as an on-hover tooltip and contains no interactive text, the s-tooltip controller can be used in place of s-popover. This is a separate controller that can be used alongside s-popover on a single target element.

- {% header "h3", "Hover attributes" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeApplied toDescription
id="{POPOVER_ID}".s-popoverA unique id that the popover’s toggling element can target. Matches the value of [aria-describedby] on the toggling element.
data-controller="s-tooltip"Controller elementWires up the element to the tooltip controller.
data-s-tooltip-reference-selector="[css selector]"Controller elementOptional Designates the element to use as the tooltip reference. If left unset, the value defaults to the controller element.
aria-describedby="{POPOVER_ID}"Reference elementAssociates the element to the desired popover element.
title="{TITLE}"Controller elementIf aria-describedby is not present or valid, and the title attribute exists, the title will be removed from the element and be used to create a popover immediately after the element. All content will be escaped and inserted as text.
data-s-tooltip-html-title="{TITLE}"Controller elementActs the exact same as the title attribute, but inserts the raw text directly as html. If both this and the title attribute exist on the element, this attribute will be used.
data-s-tooltip-placement="[placement]"Controller elementDictates where to place the popover in relation to the reference element. By default, the placement value is bottom. Accepted placements are auto, top, right, bottom, left. Each placement can take an additional -start and -end variation.
-
- {% header "h3", "Hover events" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EventElementDescription
s-tooltip:showController elementDefault preventable Fires immediately before showing and positioning the tooltip. This fires before the tooltip is first displayed to the user, and can be used to create or initialize the tooltip element. Calling .preventDefault() cancels the display of the popover.
s-tooltip:shownController elementFires immediately after showing the tooltip.
s-tooltip:hideController elementDefault preventable Fires immediately before hiding the tooltip. Calling .preventDefault() prevents the removal of the tooltip.
s-tooltip:hiddenController elementFires immediately after hiding the tooltip.
-
-
- - - - - - - - - - - - - - - -
event.detailApplicable eventsDescription
dispatchers-tooltip:*Contains the Element that initiated the event. For instance, the element hovered over to show, etc.
-
- {% header "h3", "Hover examples" %} +
+ {% header "h3", "Tooltip hover attributes" %} + {% assign tableId = "popovers-tooltip-hover-attributes-table" %} + {% assign docsClasses = popovers.tooltipHoverAttributes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col1Text = "Attribute" %} + {% assign col2Text = "Applied to" %} + {% assign expandableClassesTable = true %} + {% assign expandableBtnText = "Show all tooltip hover attributes" %} + {% include "docs-table.html" %} +
+ +
+ {% header "h3", "Tooltip hover events" %} + {% assign tableId = "popovers-tooltip-hover-events-table" %} + {% assign docsClasses = popovers.tooltipHoverEvents %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col1Text = "Event" %} + {% assign col2Text = "Element" %} + {% assign expandableClassesTable = true %} + {% assign expandableBtnText = "Show all tooltip hover events" %} + {% include "docs-table.html" %} +
+ +
+ {% header "h3", "Tooltip dispatched events" %} + {% assign tableId = "popovers-tooltip-dispatched-events-table" %} + {% assign docsClasses = popovers.tooltipDispatchedEvents %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col1Text = "Event" %} + {% assign col2Text = "Element" %} + {% include "docs-table.html" %} +
+
+ +
+ {% header "h2", "Tooltip examples" %}

If the user doesn’t need to interact with the contents of the popover, it may be appropriate to only show it on hover. This will make popovers feel like a tooltip. To do so, we provide an alternative controller, s-tooltip, that shows the tooltip only on hover.

- {% header "h4", "Title attribute" %} -

In the simple case where no markup is needed in the tooltip, the popover element can be omitted and automatically generated using the title attribute.

+
+ {% header "h3", "Title attribute" %} +

In the simple case where no markup is needed in the tooltip, the popover element can be omitted and automatically generated using the title attribute.

-
+
{% highlight html %} {% endhighlight %} -
- +
+ +
-
+
- {% header "h4", "JavaScript configuration (tooltips)" %} -

In cases where the tooltip needs to display simple text or HTML, the popover can be configured using JavaScript. Plain text tooltips will render characters like <, >, and & as is. HTML tooltips will render the HTML as expected.

-
+
+ {% header "h3", "JavaScript configuration (tooltips)" %} +

In cases where the tooltip needs to display simple text or HTML, the popover can be configured using JavaScript. Plain text tooltips will render characters like <, >, and & as is. HTML tooltips will render the HTML as expected.

+
{% highlight javascript %} Stacks.setTooltipText(el, "Plain text tooltip", @@ -526,20 +375,22 @@

Lorem ipsum

placement: "top-end" }); {% endhighlight %} -
- - +
+ + +
-
+
- {% header "h4", "Rich tooltips" %} -

When a rich tooltip is required, a popover element can be configured in much the same way as an s-popover controller, with the most notable difference being the use of aria-describedby instead of aria-controls.

+
+ {% header "h3", "Rich tooltips" %} +

When a rich tooltip is required, a popover element can be configured in much the same way as an s-popover controller, with the most notable difference being the use of aria-describedby instead of aria-controls.

-
+
{% highlight html %}
{% endhighlight %} -
- -
- {% header "h4", "Tooltips and interactive popovers" %} -

Hover tooltips can be used alongside interactive popovers. Tooltips will no appear when the interactive popover is visible.

+
+ {% header "h3", "Tooltips and interactive popovers" %} +

Hover tooltips can be used alongside interactive popovers. Tooltips will no appear when the interactive popover is visible.

-
+
{% highlight html %}
{% endhighlight %} -
- -
+
{% header "h2", "Manual placement" %} {% tip, "warning" %} Our Stimulus popover controller handles the positioning of popovers for you. Popovers can be positioned manually for various legacy reasons, but we recommend using the s-popover controller's placement property instead. {% endtip %} - {% header "h3", "Manual examples" %} -

Popovers can also be positioned manually if you aren’t using the built-in JavaScript interactivity. Practically, this might look like adding something like t8 l8 to .s-popover.

-

By default, popovers are hidden and positioned absolutely. Adding the class .is-visible will show the popover.

-
+
+ {% header "h3", "Manual examples" %} +

Popovers can also be positioned manually if you aren’t using the built-in JavaScript interactivity. Practically, this might look like adding something like t8 l8 to .s-popover.

+

By default, popovers are hidden and positioned absolutely. Adding the class .is-visible will show the popover.

+ +
{% highlight html %}
@@ -649,14 +506,15 @@

Lorem ipsum

{% endhighlight %} -
-
-
-

Example popover with manual placement

+
+
+
+

Example popover with manual placement

+
-
+
diff --git a/packages/stacks-docs/product/components/post-summary.html b/packages/stacks-docs/product/components/post-summary.html index ed021a30ee..44ecb18d13 100644 --- a/packages/stacks-docs/product/components/post-summary.html +++ b/packages/stacks-docs/product/components/post-summary.html @@ -8,33 +8,22 @@
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in post-summary.classes %} - - - - - - {% endfor %} - -
ClassParentDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign tableId = "post-summary-classes-table" %} + {% assign docsClasses = post-summary.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell4" %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %}
-{% header "h2", "Examples" %} -{% header "h3", "Base" %}
-

Use the post summary component to provide a concise summary of a question, article, or other content.

-
+ {% header "h2", "Examples" %} + +
+ {% header "h3", "Base" %} + +

Use the post summary component to provide a concise summary of a question, article, or other content.

+
{% highlight html %}
@@ -89,33 +78,35 @@
{% endhighlight %} -
- {% render 'post-summary-item.html' %} -
-
+
+ {% render 'post-summary-item.html' %} +
+
-{% header "h3", "Answered" %} -
-

- Add the .s-post-summary__answered modifier class to indicate that the post has an accepted answer. -

-
+
+ {% header "h3", "Answered" %} + +

+ Add the .s-post-summary__answered modifier class to indicate that the post has an accepted answer. +

+
{% highlight html %}
…
{% endhighlight %} -
- {% render 'post-summary-item.html', data: post-summary.answered %} -
-
+
+ {% render 'post-summary-item.html', data: post-summary.answered %} +
+
-
- {% header "h3", "Bountied" %} -

- Include the .s-post-summary--stats-bounty element to indicate that the post has a bounty. -

-
+
+ {% header "h3", "Bountied" %} + +

+ Include the .s-post-summary--stats-bounty element to indicate that the post has a bounty. +

+
{% highlight html %}
@@ -142,15 +133,16 @@ …
{% endhighlight %} -
- {% render 'post-summary-item.html', data: post-summary.bountied %} -
-
+
+ {% render 'post-summary-item.html', data: post-summary.bountied %} +
+
-{% header "h3", "Ignored" %} -
-

Including an ignored tag will automatically apply custom ignored styling to the post summary.

-
+
+ {% header "h3", "Ignored" %} + +

Including an ignored tag will automatically apply custom ignored styling to the post summary.

+
{% highlight html %}
… @@ -163,18 +155,19 @@
{% endhighlight %} -
- {% render 'post-summary-item.html', - data: post-summary.ignored - %} +
+ {% render 'post-summary-item.html', + data: post-summary.ignored + %} +
-
-
+
-{% header "h3", "Watched" %} -
-

Including a watched tag will automatically apply custom watched styling to the post summary.

-
+
+ {% header "h3", "Watched" %} + +

Including a watched tag will automatically apply custom watched styling to the post summary.

+
{% highlight html %}
… @@ -187,35 +180,37 @@
{% endhighlight %} -
- {% render 'post-summary-item.html', - data: post-summary.watched - %} +
+ {% render 'post-summary-item.html', + data: post-summary.watched + %} +
-
-
+ -{% header "h3", "Deleted" %} -
-

Include the .s-post-summary__deleted modifier class applies custom deleted styling to the post summary.

-
+
+ {% header "h3", "Deleted" %} + +

Include the .s-post-summary__deleted modifier class applies custom deleted styling to the post summary.

+
{% highlight html %}
…
{% endhighlight %} -
- {% render 'post-summary-item.html', - data: post-summary.deleted - %} +
+ {% render 'post-summary-item.html', + data: post-summary.deleted + %} +
-
-
+
-{% header "h3", "State badges" %} -
-

Include the appropriate state badge to indicate the current state of the post.

-
+
+ {% header "h3", "State badges" %} + +

Include the appropriate state badge to indicate the current state of the post.

+
{% highlight html %}
@@ -322,20 +317,20 @@
{% endhighlight %} -
- {% for data in post-summary.states %} - {% render 'post-summary-item.html', - data: data - %} - {% endfor %} +
+ {% for data in post-summary.states %} + {% render 'post-summary-item.html', + data: data + %} + {% endfor %} +
-
-
+ -{% header "h3", "Content types" %} -
-

Include the appropriate content type badge to indicate the type of content the post represents.

-
+
+ {% header "h3", "Content types" %} +

Include the appropriate content type badge to indicate the type of content the post represents.

+
{% highlight html %}
@@ -389,42 +384,43 @@
{% endhighlight %} -
- {% for data in post-summary.contentTypes %} - {% render 'post-summary-item.html', data: data %} - {% endfor %} +
+ {% for data in post-summary.contentTypes %} + {% render 'post-summary-item.html', data: data %} + {% endfor %} +
-
-
+ - -{% header "h3", "Excerpt sizes" %} -
- {% header "h4", "Classes" %} -

Post summaries can be shown without an excerpt or with an excerpt with one, two, or three lines of text. Exclude the excerpt container to hide the excerpt or apply the appropriate truncation class to the excerpt container. See also Truncation.

-
- - - - - - - - - {% for item in post-summary.excerptSizes %} - {% if item.excerptLines > 0 %} +
+ {% header "h3", "Excerpt sizes" %} + + {% header "h4", "Classes" %} +

Post summaries can be shown without an excerpt or with an excerpt with one, two, or three lines of text. Exclude the excerpt container to hide the excerpt or apply the appropriate truncation class to the excerpt container. See also Truncation.

+ +
+
ClassDescription
+ - - - - {% endif %} - {% endfor %} - -
.v-truncate{{ item.excerptLines }}Truncates the excerpt to {{ item.excerptLines }} lines of text.
-
+ Class + Description + + + + {% for item in post-summary.excerptSizes %} + {% if item.excerptLines > 0 %} + + .v-truncate{{ item.excerptLines }} + Truncates the excerpt to {{ item.excerptLines }} lines of text. + + {% endif %} + {% endfor %} + + + - {% header "h4", "Examples" %} -
+ {% header "h4", "Examples" %} +
{% highlight html %}
@@ -462,39 +458,39 @@
{% endhighlight %} -
- {% for data in post-summary.excerptSizes %} - {% render 'post-summary-item.html', - data: data - %} - {% endfor %} +
+ {% for data in post-summary.excerptSizes %} + {% render 'post-summary-item.html', + data: data + %} + {% endfor %} +
-
-
+ -{% header "h3", "Small container" %} -
-

Post summaries adapt to their container size. When shown with a container smaller than 448px, the post summary renders with a compact layout.

-
+
+ {% header "h3", "Small container" %} + +

Post summaries adapt to their container size. When shown with a container smaller than 448px, the post summary renders with a compact layout.

+
{% highlight html %}
…
{% endhighlight %} -
-
- {% for data in post-summary.small %} - {% render 'post-summary-item.html', data: data %} - {% endfor %} +
+
+ {% for data in post-summary.small %} + {% render 'post-summary-item.html', data: data %} + {% endfor %} +
-
-
+
- -{% header "h3", "Answers" %} -
- -

Answers to a question can be shown in a post summary. Include the .s-post-summary--answers container to show the answers.

-

For accepted answers, add the .s-post-summary--answer__accepted modifier class and display the Accepted answer text and icon as shown in the example below.

-
+
+ {% header "h3", "Answers" %} + +

Answers to a question can be shown in a post summary. Include the .s-post-summary--answers container to show the answers.

+

For accepted answers, add the .s-post-summary--answer__accepted modifier class and display the Accepted answer text and icon as shown in the example below.

+
{% highlight html %}
…
@@ -578,10 +574,11 @@
{% endhighlight %} -
- {% for data in post-summary.withAnswers %} - {% render 'post-summary-item.html', data: data %} - {% endfor %} +
+ {% for data in post-summary.withAnswers %} + {% render 'post-summary-item.html', data: data %} + {% endfor %} +
-
+
diff --git a/packages/stacks-docs/product/components/progress-bars.html b/packages/stacks-docs/product/components/progress-bars.html index fab134d9e9..d59eba254f 100644 --- a/packages/stacks-docs/product/components/progress-bars.html +++ b/packages/stacks-docs/product/components/progress-bars.html @@ -5,133 +5,27 @@ tags: components ---
- {% header "h2", "Classes and parameters" %} -

These are the various classes and parameters used within progress bars.

+ {% header "h2", "Classes" %} + {% assign tableId = "progress-bars-classes-table" %} + {% assign docsClasses = progress-bars.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign expandableClassesTable = false %} + {% include "docs-table.html" %} +
- {% header "h3", "Classes" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassesDescription
.s-progressThe parent class for all progress bars.
.s-progress--barA child element of .s-progress. It shows the user’s current progress to accomplishing a goal with a background color.
.s-progress--labelA child element of .s-progress. It’s used to describe what progress bar is tracking.
.s-progress__brandA modifying class applied to .s-progress, it changes the bar color from green to orange.
.s-progress__infoA modifying class applied to .s-progress, it changes the bar color from green to blue.
.s-progress__circularA modifying class applied to .s-progress, it changes the bar to be a percentage of a circle.
.s-progress__privilegeA modifying class applied to .s-progress, it changes the bar color from green to a lighter green (for legibility reasons).
.s-progress__badgeA modifying class applied to .s-progress, it is applied when a badge progress bar is desired.
.s-progress__goldA modifying class applied to .s-progress__badge, it is used when a gold badge progress bar is desired.
.s-progress__silverA modifying class applied to .s-progress__badge, it is used when a silver badge progress bar is desired.
.s-progress__bronzeA modifying class applied to .s-progress__badge, it is used when a bronze badge progress bar is desired.
.s-progress__segmentedA modifying class applied to .s-progress for a segmented progress bar
.s-progress__steppedA modifying class applied to .s-progress for a stepped progress bar
.s-progress--stepA child of .s-progress__stepped that’s a wrapper for each individual step
.is-activeA modifier .s-progress__step that adds visual styling to the active step.
.is-completedA modifier .s-progress__step that adds visual styling to a completed step.
.s-progress--stopA child of .s-progress__step, the circle that might contain a checkmark if the step’s been completed.
.s-progress--bar__leftA modifier of .s-progress__bar that draws a line on the left side of a step.
.s-progress--bar__rightA modifier of .s-progress__bar that draws a line on the right side of a step.
-
- {% header "h3", "Parameters" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterDescription
role="progressbar"Applied to .s-progress--bar, this parameter communicates that element is displaying progress status that takes a long time or consists of several steps. (Source)
aria-valueminApplied to .s-progress--bar, this parameter defines the minimum allowed value for the progress bar. (Source)
aria-valuemaxApplied to .s-progress--bar, this parameter defines the maximum allowed value for the progress bar. (Source)
aria-valuenowApplied to .s-progress--bar, this parameter defines the current value for the progress bar. (Source)
style="width: [value]%"Applied to .s-progress--bar, this is the aria-valuenow value displayed as a percentage.
-
+
+ {% header "h2", "Parameters" %} + {% assign tableId = "progress-bars-parameters-table" %} + {% assign docsClasses = progress-bars.parameters %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign col1Text = "Parameter" %} + {% assign col2Text = "Applies to" %} + {% include "docs-table.html" %}
+
{% header "h2", "Base style" %}

Since most progress bars are used to show successful completion of a task, the default fill color is green.

diff --git a/packages/stacks-docs/product/components/prose.html b/packages/stacks-docs/product/components/prose.html index 56e50cb520..a0e35b1cbe 100644 --- a/packages/stacks-docs/product/components/prose.html +++ b/packages/stacks-docs/product/components/prose.html @@ -8,26 +8,13 @@ {% assign expandBtnContainerClasses = "ps-sticky bg-white z-popover py16 t64 bb bc-black-200 sm:py8" %}
- {% header "h2", "Classes" %} -
- - - - - - - - - {% for item in components.prose.classes %} - - - - - {% endfor %} - -
ClassOutput
{{ item.class }}{{ item.description }}
-
+ {% header "h2", "Parameters" %} + {% assign docsClasses = prose.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %} {% header "h3", "Minimal" %} diff --git a/packages/stacks-docs/product/components/radio.html b/packages/stacks-docs/product/components/radio.html index 95660c01b4..f4a910708d 100644 --- a/packages/stacks-docs/product/components/radio.html +++ b/packages/stacks-docs/product/components/radio.html @@ -6,8 +6,15 @@ description: Checkable inputs that visually allow for single selection from multiple options. tags: components --- +
+ {% header "h2", "Classes" %} + {% assign docsClasses = checkbox_radio.radio-classes %} + {% assign col1Classes = "s-table--cell4" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Base" %}

Use the .s-radio to wrap input[type="radio"] elements to apply radio styles.

diff --git a/packages/stacks-docs/product/components/select.html b/packages/stacks-docs/product/components/select.html index 61c24dabba..a86d61c40d 100644 --- a/packages/stacks-docs/product/components/select.html +++ b/packages/stacks-docs/product/components/select.html @@ -6,6 +6,15 @@ description: A selectable menu list from which a user can make a single selection. Typically they are used when there are more than four possible options. The custom select menu styling is achieved by wrapping the select tag within the .s-select class. tags: components --- + +
+ {% header "h2", "Classes" %} + {% assign docsClasses = select.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Base style" %}
diff --git a/packages/stacks-docs/product/components/sidebar-widgets.html b/packages/stacks-docs/product/components/sidebar-widgets.html index a230af1516..6ec792d792 100644 --- a/packages/stacks-docs/product/components/sidebar-widgets.html +++ b/packages/stacks-docs/product/components/sidebar-widgets.html @@ -5,6 +5,14 @@ tags: components --- +
+ {% header "h2", "Classes" %} + {% assign docsClasses = sidebar-widgets.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Basic style" %} diff --git a/packages/stacks-docs/product/components/tables.html b/packages/stacks-docs/product/components/tables.html index 4772a6d85b..522b0eeb09 100644 --- a/packages/stacks-docs/product/components/tables.html +++ b/packages/stacks-docs/product/components/tables.html @@ -6,6 +6,14 @@ tags: components --- +
+ {% header "h2", "Classes" %} + {% assign docsClasses = tables.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %} +
+
{% header "h2", "Default style" %}

Tables should be wrapped in a container, .s-table-container. This provides horizontal scrolling when necessary in the smallest breakpoints. The default table style is a bordered cell layout with a stylized header row.

@@ -733,26 +741,10 @@

If the table contains rows that should not be sorted, but rather always be at the top or always be at the bottom, add data-s-table-sort-to="top" or data-s-table-sort-to="bottom" to the <tr> element.

{% header "h3", "JavaScript data attributes" %} -
- - - - - - - - - - {% for item in tables.data-attributes %} - - - - - - {% endfor %} - -
AttributeApplied toDescription
{{ item.attribute }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsClasses = tables.data-attributes %} + {% assign col1Classes = "s-table--cell5" %} + {% assign col2Classes = "s-table--cell2" %} + {% include "docs-table.html" %} {% header "h3", "JavaScript example" %}
diff --git a/packages/stacks-docs/product/components/tags.html b/packages/stacks-docs/product/components/tags.html index ec3ec454bf..685d5d2b97 100644 --- a/packages/stacks-docs/product/components/tags.html +++ b/packages/stacks-docs/product/components/tags.html @@ -6,28 +6,14 @@ description: Tags are an interactive, community-generated keyword that allow communities to label, organize, and discover related content. Tags are maintained by their respective communities tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in tags-component.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsClasses = tags-component.classes %} + {% include "docs-table.html" %} +
+ +
{% header "h2", "Accessibility" %}

Tags should be focusable and navigable with the keyboard. diff --git a/packages/stacks-docs/product/components/topbar.html b/packages/stacks-docs/product/components/topbar.html index 988d03b67d..83943e5474 100644 --- a/packages/stacks-docs/product/components/topbar.html +++ b/packages/stacks-docs/product/components/topbar.html @@ -7,26 +7,11 @@

{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in topbar %} - - - - - - {% endfor %} - -
ClassApplies toDescription
{{ item.class }}{{ item.applies | default: "N/A" | markdown | newline_to_br }}{{ item.description | markdown }}
-
+ {% assign docsClasses = topbar.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %}
From 94b6074620e945d7d1624a93173e07cd17c2e60f Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 13 Feb 2026 18:52:57 -0500 Subject: [PATCH 4/5] A couple more docs tweaks; logical naming --- .../_data/components/uploader.json | 72 +++++++++++--- .../_data/components/user-cards.json | 33 ++++--- .../stacks-docs/_data/components/vote.json | 15 +-- .../stacks-docs/_includes/docs-table.html | 6 +- .../components/activity-indicator.html | 2 +- .../product/components/avatars.html | 2 +- .../product/components/badges.html | 2 +- .../product/components/banners.html | 2 +- .../stacks-docs/product/components/bling.html | 2 +- .../product/components/breadcrumbs.html | 2 +- .../product/components/button-groups.html | 2 +- .../product/components/buttons.html | 2 +- .../stacks-docs/product/components/cards.html | 2 +- .../product/components/checkbox.html | 2 +- .../product/components/code-blocks.html | 2 +- .../product/components/empty-states.html | 2 +- .../product/components/expandable.html | 2 +- .../product/components/link-previews.html | 2 +- .../stacks-docs/product/components/links.html | 4 +- .../product/components/loader.html | 4 +- .../stacks-docs/product/components/menus.html | 2 +- .../product/components/modals.html | 2 +- .../product/components/navigation.html | 2 +- .../product/components/notices.html | 12 +-- .../product/components/page-titles.html | 2 +- .../product/components/pagination.html | 2 +- .../product/components/popovers.html | 14 +-- .../product/components/post-summary.html | 2 +- .../product/components/progress-bars.html | 4 +- .../stacks-docs/product/components/prose.html | 2 +- .../stacks-docs/product/components/radio.html | 2 +- .../product/components/select.html | 2 +- .../product/components/sidebar-widgets.html | 2 +- .../product/components/tables.html | 4 +- .../stacks-docs/product/components/tags.html | 2 +- .../product/components/topbar.html | 2 +- .../product/components/uploader.html | 98 ++++--------------- .../product/components/user-cards.html | 59 +++-------- .../stacks-docs/product/components/vote.html | 25 +---- 39 files changed, 168 insertions(+), 234 deletions(-) diff --git a/packages/stacks-docs/_data/components/uploader.json b/packages/stacks-docs/_data/components/uploader.json index c6a89dedba..9a397bf8df 100644 --- a/packages/stacks-docs/_data/components/uploader.json +++ b/packages/stacks-docs/_data/components/uploader.json @@ -6,53 +6,95 @@ }, { "class": ".is-active", - "applies": ".s-uploader", + "applies": ".s-uploader", "description": "Active styling for uploader element. Added on dragenter or when input has value." }, { "class": ".is-disabled", - "applies": ".s-uploader", + "applies": ".s-uploader", "description": "Appropriately styles the uploader when it is disabled. Don’t forget to also add the disabled attribute on the input itself." }, { "class": ".has-error", - "applies": ".s-uploader", + "applies": ".s-uploader", "description": "Adds error styling to the component." }, { "class": ".has-success", - "applies": ".s-uploader", + "applies": ".s-uploader", "description": "Adds success styling to the component." }, { "class": ".has-warning", - "applies": ".s-uploader", + "applies": ".s-uploader", "description": "Adds warning styling to the component." }, { "class": ".s-uploader--container", - "applies": "Child of .s-uploader", - "description": "Container for the visual elements of the uploader." + "description": "Child of .s-uploader. Container for the visual elements of the uploader." }, { "class": ".s-uploader--input", - "applies": "Child of .s-uploader", - "description": "Adds proper styling to the uploader's file input. Visually hidden." + "description": "Child of .s-uploader--container. Adds proper styling to the uploader's file input. Visually hidden." }, { "class": ".s-uploader--previews", - "applies": "Child of .s-uploader--container", - "description": "Container for selected item(s) preview." + "description": "Child of .s-uploader--container. Container for selected item(s) preview." }, { "class": ".s-uploader--preview", - "applies": "Child of .s-uploader--previews", - "description": "An image or string to preview a selected file." + "description": "Child of .s-uploader--previews. An image or string to preview a selected file." }, { "class": ".s-uploader--reset", - "applies": "Child of .s-uploader--container", - "description": "Used to reset the uploader." + "description": "Child of .s-uploader--container. Used to reset the uploader." + } + ], + "attributes": [ + { + "item": "data-controller=\"s-uploader\"", + "appliesText": "Controller element", + "description": "Wires up the element to the uploader controller. This may be a .s-uploader element or a wrapper element." + }, + { + "item": "data-target=\"s-uploader.uploader\"", + "applies": ".s-uploader", + "description": "Wires up the element containing input, previews, and reset targets." + }, + { + "item": "data-s-uploader-target=\"input\"", + "applies": ".s-uploader--input", + "description": "Designates the file input element." + }, + { + "item": "data-target=\"s-uploader.previews\"", + "applies": ".s-uploader--previews", + "description": "Designates the element to act as a container to file preview(s)." + }, + { + "item": "data-action=\"input->s-uploader#handleInput\"", + "applies": "input[type=file]", + "description": "Wires up the element to provide files for preview on change." + }, + { + "item": "data-action=\"click->s-uploader#reset\"", + "appliesText": "Any child element", + "description": "Wires up the element to reset the uploader to its initial state." + }, + { + "item": "data-s-uploader-show-on-input", + "appliesText": "Any child element", + "description": "Toggles element visibility. Shows when input has value." + }, + { + "item": "data-s-uploader-hide-on-input", + "appliesText": "Any child element", + "description": "Toggles element visibility. Hides when input has value." + }, + { + "item": "data-s-uploader-enable-on-input", + "appliesText": "Any child element", + "description": "Toggles element disabled state. Disables when input has no value." } ] } diff --git a/packages/stacks-docs/_data/components/user-cards.json b/packages/stacks-docs/_data/components/user-cards.json index fc286189ce..3f48abf5d3 100644 --- a/packages/stacks-docs/_data/components/user-cards.json +++ b/packages/stacks-docs/_data/components/user-cards.json @@ -4,15 +4,6 @@ "class": ".s-user-card", "description": "Base user card container that applies the basic style." }, - { - "class": ".s-user-card--group", - "description": "A container for group elements." - }, - { - "class": ".s-user-card--group__split", - "applies": "Modifier for
.s-user-card--group", - "description": "Inserts a separator between each element." - }, { "class": ".s-user-card--column", "description": "A container for column elements." @@ -21,6 +12,15 @@ "class": ".s-user-card--row", "description": "A container for row elements." }, + { + "class": ".s-user-card--group", + "description": "A container for group elements." + }, + { + "class": ".s-user-card--group__split", + "applies": ".s-user-card--group", + "description": "Inserts a separator between each element." + }, { "class": ".s-user-card--bio", "description": "Container for the user's bio." @@ -40,6 +40,14 @@ { "class": ".s-user-card--username", "description": "Container for the user's username." + }, + { + "class": ".s-user-card__sm", + "description": "Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies." + }, + { + "class": ".s-user-card__lg", + "description": "Use the large variant when space permits and more detailed information is desired." } ], "base": [ @@ -195,18 +203,17 @@ ], "sizes": [ { - "size": "small", "class": ".s-user-card__sm", + "appliesText": "small", "description": "Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies." }, { - "size": "default", - "class": "N/A", + "item": "N/A", "description": "Use the default variant when the user needs a more primary focus of the content. This style features a larger avatar to establish top-level hierarchy like question and answer authors." }, { - "size": "large", "class": ".s-user-card__lg", + "appliesText": "large", "description": "Use the large variant when space permits and more detailed information is desired" } ], diff --git a/packages/stacks-docs/_data/components/vote.json b/packages/stacks-docs/_data/components/vote.json index a146e072f3..f1e79a5b61 100644 --- a/packages/stacks-docs/_data/components/vote.json +++ b/packages/stacks-docs/_data/components/vote.json @@ -16,28 +16,23 @@ }, { "class": ".s-vote--btn", - "applies": ".s-vote", - "description": "Vote button." + "description": "Child of .s-vote. Vote button." }, { "class": ".s-vote--votes", - "applies": ".s-vote", - "description": "Container for vote counts." + "description": "Child of .s-vote. Container for vote counts." }, { "class": ".s-vote--upvotes", - "applies": ".s-vote--votes", - "description": "Upvote count." + "description": "Child of .s-vote--votes. Upvote count." }, { "class": ".s-vote--total", - "applies": ".s-vote--votes", - "description": "Total vote count." + "description": "Child of .s-vote--votes. Total vote count." }, { "class": ".s-vote--downvotes", - "applies": ".s-vote--votes", - "description": "Downvote count." + "description": "Child of .s-vote--votes. Downvote count." } ], "groups": { diff --git a/packages/stacks-docs/_includes/docs-table.html b/packages/stacks-docs/_includes/docs-table.html index 7952bdb84b..5aa3fe99e6 100644 --- a/packages/stacks-docs/_includes/docs-table.html +++ b/packages/stacks-docs/_includes/docs-table.html @@ -1,10 +1,10 @@ {% comment %} Reusable classes reference table (Class | Applied to | Description). - Set docsClasses in parent scope. Column header classes default as below; override by + Set docsItems in parent scope. Column header classes default as below; override by setting classColClasses, appliesColClasses, or descriptionColClasses before including. Usage: - {% assign docsClasses = badges.classes %} + {% assign docsItems = itemType.items %} {% include "docs-table.html" %} Override one column: {% assign appliesColClasses = "s-table--cell4" %} {% endcomment %} @@ -36,7 +36,7 @@ - {% for item in docsClasses %} + {% for item in docsItems %} {{ item.class | default: item.item }} diff --git a/packages/stacks-docs/product/components/activity-indicator.html b/packages/stacks-docs/product/components/activity-indicator.html index aca456d8bf..0351616612 100644 --- a/packages/stacks-docs/product/components/activity-indicator.html +++ b/packages/stacks-docs/product/components/activity-indicator.html @@ -9,7 +9,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = activity-indicator.classes %} + {% assign docsItems = activity-indicator.classes %} {% assign col2Classes = "s-table--cell4" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/avatars.html b/packages/stacks-docs/product/components/avatars.html index 529d1f1401..ef110c14c0 100644 --- a/packages/stacks-docs/product/components/avatars.html +++ b/packages/stacks-docs/product/components/avatars.html @@ -9,7 +9,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = avatars.classes %} + {% assign docsItems = avatars.classes %} {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/badges.html b/packages/stacks-docs/product/components/badges.html index 2fd0272802..60156845e0 100644 --- a/packages/stacks-docs/product/components/badges.html +++ b/packages/stacks-docs/product/components/badges.html @@ -9,7 +9,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = badges.classes %} + {% assign docsItems = badges.classes %} {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/banners.html b/packages/stacks-docs/product/components/banners.html index eee85d96b1..8afefd623a 100644 --- a/packages/stacks-docs/product/components/banners.html +++ b/packages/stacks-docs/product/components/banners.html @@ -8,7 +8,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = banners.classes %} + {% assign docsItems = banners.classes %} {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/bling.html b/packages/stacks-docs/product/components/bling.html index b05c19437c..b85b6835c5 100644 --- a/packages/stacks-docs/product/components/bling.html +++ b/packages/stacks-docs/product/components/bling.html @@ -8,7 +8,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = bling.classes %} + {% assign docsItems = bling.classes %} {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/breadcrumbs.html b/packages/stacks-docs/product/components/breadcrumbs.html index 1a120b8a84..d99319eedb 100644 --- a/packages/stacks-docs/product/components/breadcrumbs.html +++ b/packages/stacks-docs/product/components/breadcrumbs.html @@ -8,7 +8,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = breadcrumbs.classes %} + {% assign docsItems = breadcrumbs.classes %} {% assign col2Classes = "s-table--cell3"%} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/button-groups.html b/packages/stacks-docs/product/components/button-groups.html index 52bef5770f..c72109d1ca 100644 --- a/packages/stacks-docs/product/components/button-groups.html +++ b/packages/stacks-docs/product/components/button-groups.html @@ -8,7 +8,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = button-groups.classes %} + {% assign docsItems = button-groups.classes %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/buttons.html b/packages/stacks-docs/product/components/buttons.html index 1a164cd0c4..962db59106 100644 --- a/packages/stacks-docs/product/components/buttons.html +++ b/packages/stacks-docs/product/components/buttons.html @@ -9,7 +9,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = buttons.classes %} + {% assign docsItems = buttons.classes %} {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/cards.html b/packages/stacks-docs/product/components/cards.html index dce49e4c91..c24bba8d0e 100644 --- a/packages/stacks-docs/product/components/cards.html +++ b/packages/stacks-docs/product/components/cards.html @@ -8,7 +8,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = cards.classes %} + {% assign docsItems = cards.classes %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/checkbox.html b/packages/stacks-docs/product/components/checkbox.html index 6b909f80f2..60d884f3f4 100644 --- a/packages/stacks-docs/product/components/checkbox.html +++ b/packages/stacks-docs/product/components/checkbox.html @@ -9,7 +9,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = checkbox_radio.checkbox-classes %} + {% assign docsItems = checkbox_radio.checkbox-classes %} {% assign col1Classes = "s-table--cell4" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/code-blocks.html b/packages/stacks-docs/product/components/code-blocks.html index e8d290e4f7..680fc1dc79 100644 --- a/packages/stacks-docs/product/components/code-blocks.html +++ b/packages/stacks-docs/product/components/code-blocks.html @@ -7,7 +7,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = code-blocks.classes %} + {% assign docsItems = code-blocks.classes %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/empty-states.html b/packages/stacks-docs/product/components/empty-states.html index 49a4065164..b10c725a38 100644 --- a/packages/stacks-docs/product/components/empty-states.html +++ b/packages/stacks-docs/product/components/empty-states.html @@ -9,7 +9,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = empty-states.classes %} + {% assign docsItems = empty-states.classes %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/expandable.html b/packages/stacks-docs/product/components/expandable.html index fcd736c20c..76e5ca82c0 100644 --- a/packages/stacks-docs/product/components/expandable.html +++ b/packages/stacks-docs/product/components/expandable.html @@ -8,7 +8,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = expandable.classes %} + {% assign docsItems = expandable.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/link-previews.html b/packages/stacks-docs/product/components/link-previews.html index b7d2780cc5..1dfd059bc3 100644 --- a/packages/stacks-docs/product/components/link-previews.html +++ b/packages/stacks-docs/product/components/link-previews.html @@ -6,7 +6,7 @@ ---
{% header "h2", "Classes" %} - {% assign docsClasses = link-previews.classes %} + {% assign docsItems = link-previews.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% assign col3Text = "Description" %} diff --git a/packages/stacks-docs/product/components/links.html b/packages/stacks-docs/product/components/links.html index 20bc9b946d..d96bffe3b4 100644 --- a/packages/stacks-docs/product/components/links.html +++ b/packages/stacks-docs/product/components/links.html @@ -9,7 +9,7 @@ {% header "h2", "Links" %}
{% header "h3", "Link classes" %} - {% assign docsClasses = links.link-classes %} + {% assign docsItems = links.link-classes %} {% include "docs-table.html" %}
@@ -47,7 +47,7 @@ {% header "h2", "Anchors" %}
{% header "h3", "Anchor classes" %} - {% assign docsClasses = links.anchors-classes %} + {% assign docsItems = links.anchors-classes %} {% assign col1Classes = "s-table--cell3" %} {% assign col2Classes = "s-table--cell2" %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/loader.html b/packages/stacks-docs/product/components/loader.html index 81018c453c..e3f75e4859 100644 --- a/packages/stacks-docs/product/components/loader.html +++ b/packages/stacks-docs/product/components/loader.html @@ -8,7 +8,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = loader.classes %} + {% assign docsItems = loader.classes %} {% include "docs-table.html" %}
@@ -34,7 +34,7 @@
{% header "h3", "Sizes" %} - {% assign docsClasses = loader.sizes-classes %} + {% assign docsItems = loader.sizes-classes %} {% assign col2Classes = "s-table--cell3" %} {% assign col3Text = "Example" %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/menus.html b/packages/stacks-docs/product/components/menus.html index 2ab04eae8b..27a835607f 100644 --- a/packages/stacks-docs/product/components/menus.html +++ b/packages/stacks-docs/product/components/menus.html @@ -8,7 +8,7 @@ ---
{% header "h2", "Classes" %} - {% assign docsClasses = menus.classes %} + {% assign docsItems = menus.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/modals.html b/packages/stacks-docs/product/components/modals.html index 68c3dc7def..d7d70e4c81 100644 --- a/packages/stacks-docs/product/components/modals.html +++ b/packages/stacks-docs/product/components/modals.html @@ -9,7 +9,7 @@ ---
{% header "h2", "Classes" %} - {% assign docsClasses = modals.classes %} + {% assign docsItems = modals.classes %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/navigation.html b/packages/stacks-docs/product/components/navigation.html index fe13d54738..76f4f86af9 100644 --- a/packages/stacks-docs/product/components/navigation.html +++ b/packages/stacks-docs/product/components/navigation.html @@ -9,7 +9,7 @@ ---
{% header "h2", "Classes" %} - {% assign docsClasses = navigation.classes %} + {% assign docsItems = navigation.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/notices.html b/packages/stacks-docs/product/components/notices.html index b013bbb54e..70dd241534 100644 --- a/packages/stacks-docs/product/components/notices.html +++ b/packages/stacks-docs/product/components/notices.html @@ -10,7 +10,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = notices.classes %} + {% assign docsItems = notices.classes %} {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
@@ -18,7 +18,7 @@
{% header "h2", "Accessibility" %} {% assign tableId = "docs-accessibility-table" %} - {% assign docsClasses = notices.accessibility %} + {% assign docsItems = notices.accessibility %} {% assign expandableClassesTable = true %} {% assign col1Text = "Item" %} {% assign col1Classes = "s-table--cell4" %} @@ -226,7 +226,7 @@ {% header "h3", "JavaScript" %} {% header "h4", "Attributes" %} - {% assign docsClasses = notices.javascript.attributes %} + {% assign docsItems = notices.javascript.attributes %} {% assign col1Text = "Attribute" %} {% assign col1Classes = "s-table--cell5" %} {% assign tableId = "docs-javascript-attributes-table" %} @@ -235,7 +235,7 @@
{% header "h4", "Events" %} - {% assign docsClasses = notices.javascript.events %} + {% assign docsItems = notices.javascript.events %} {% assign col1Text = "Event" %} {% assign tableId = "docs-javascript-events-table" %}
@@ -243,7 +243,7 @@
{% header "h4", "Event details" %} - {% assign docsClasses = notices.javascript.eventDetails %} + {% assign docsItems = notices.javascript.eventDetails %} {% assign col1Text = "event.detail" %} {% assign col2Text = "Applicable events" %} {% assign tableId = "docs-javascript-event-details-table" %} @@ -255,7 +255,7 @@

The following helpers are available to manually show and hide a toast notice.

- {% assign docsClasses = notices.javascript.helpers %} + {% assign docsItems = notices.javascript.helpers %} {% assign col1Text = "Function" %} {% assign col2Text = "Parameters" %} {% assign tableId = "docs-javascript-helpers-table" %} diff --git a/packages/stacks-docs/product/components/page-titles.html b/packages/stacks-docs/product/components/page-titles.html index b3671e6630..6e8dfef09e 100644 --- a/packages/stacks-docs/product/components/page-titles.html +++ b/packages/stacks-docs/product/components/page-titles.html @@ -7,7 +7,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = page-titles.classes %} + {% assign docsItems = page-titles.classes %} {% assign col1Classes = "s-table--cell4" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html index 8599c54305..8be398033c 100644 --- a/packages/stacks-docs/product/components/pagination.html +++ b/packages/stacks-docs/product/components/pagination.html @@ -9,7 +9,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = pagination-component.classes %} + {% assign docsItems = pagination-component.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/popovers.html b/packages/stacks-docs/product/components/popovers.html index fa67362198..885e76ee54 100644 --- a/packages/stacks-docs/product/components/popovers.html +++ b/packages/stacks-docs/product/components/popovers.html @@ -12,7 +12,7 @@
{% header "h2", "Classes" %} {% assign tableId = "popovers-classes-table" %} - {% assign docsClasses = popovers.classes %} + {% assign docsItems = popovers.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %} @@ -26,7 +26,7 @@
{% header "h3", "Interactive Attributes" %} {% assign tableId = "popovers-interactive-attributes-table" %} - {% assign docsClasses = popovers.interactiveAttributes %} + {% assign docsItems = popovers.interactiveAttributes %} {% assign col1Classes = "s-table--cell4" %} {% assign col1Text = "Attribute" %} {% assign col2Text = "Applied to" %} @@ -38,7 +38,7 @@
{% header "h3", "Interactive Events" %} {% assign tableId = "popovers-interactive-events-table" %} - {% assign docsClasses = popovers.interactiveEvents %} + {% assign docsItems = popovers.interactiveEvents %} {% assign col1Classes = "s-table--cell4" %} {% assign col1Text = "Event" %} {% assign col2Text = "Element" %} @@ -48,7 +48,7 @@
{% header "h3", "Dispatched Events" %} {% assign tableId = "popovers-dispatched-events-table" %} - {% assign docsClasses = popovers.dispatchedEvents %} + {% assign docsItems = popovers.dispatchedEvents %} {% assign col1Classes = "s-table--cell4" %} {% assign col1Text = "Event" %} {% assign col2Text = "Element" %} @@ -298,7 +298,7 @@

Lorem ipsum

{% header "h3", "Tooltip hover attributes" %} {% assign tableId = "popovers-tooltip-hover-attributes-table" %} - {% assign docsClasses = popovers.tooltipHoverAttributes %} + {% assign docsItems = popovers.tooltipHoverAttributes %} {% assign col1Classes = "s-table--cell4" %} {% assign col1Text = "Attribute" %} {% assign col2Text = "Applied to" %} @@ -310,7 +310,7 @@

Lorem ipsum

{% header "h3", "Tooltip hover events" %} {% assign tableId = "popovers-tooltip-hover-events-table" %} - {% assign docsClasses = popovers.tooltipHoverEvents %} + {% assign docsItems = popovers.tooltipHoverEvents %} {% assign col1Classes = "s-table--cell4" %} {% assign col1Text = "Event" %} {% assign col2Text = "Element" %} @@ -322,7 +322,7 @@

Lorem ipsum

{% header "h3", "Tooltip dispatched events" %} {% assign tableId = "popovers-tooltip-dispatched-events-table" %} - {% assign docsClasses = popovers.tooltipDispatchedEvents %} + {% assign docsItems = popovers.tooltipDispatchedEvents %} {% assign col1Classes = "s-table--cell4" %} {% assign col1Text = "Event" %} {% assign col2Text = "Element" %} diff --git a/packages/stacks-docs/product/components/post-summary.html b/packages/stacks-docs/product/components/post-summary.html index 44ecb18d13..d091789f55 100644 --- a/packages/stacks-docs/product/components/post-summary.html +++ b/packages/stacks-docs/product/components/post-summary.html @@ -9,7 +9,7 @@
{% header "h2", "Classes" %} {% assign tableId = "post-summary-classes-table" %} - {% assign docsClasses = post-summary.classes %} + {% assign docsItems = post-summary.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell4" %} {% assign expandableClassesTable = true %} diff --git a/packages/stacks-docs/product/components/progress-bars.html b/packages/stacks-docs/product/components/progress-bars.html index d59eba254f..3af5ff4eb8 100644 --- a/packages/stacks-docs/product/components/progress-bars.html +++ b/packages/stacks-docs/product/components/progress-bars.html @@ -7,7 +7,7 @@
{% header "h2", "Classes" %} {% assign tableId = "progress-bars-classes-table" %} - {% assign docsClasses = progress-bars.classes %} + {% assign docsItems = progress-bars.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% assign expandableClassesTable = false %} @@ -17,7 +17,7 @@
{% header "h2", "Parameters" %} {% assign tableId = "progress-bars-parameters-table" %} - {% assign docsClasses = progress-bars.parameters %} + {% assign docsItems = progress-bars.parameters %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% assign col1Text = "Parameter" %} diff --git a/packages/stacks-docs/product/components/prose.html b/packages/stacks-docs/product/components/prose.html index a0e35b1cbe..cf3e513aea 100644 --- a/packages/stacks-docs/product/components/prose.html +++ b/packages/stacks-docs/product/components/prose.html @@ -9,7 +9,7 @@
{% header "h2", "Parameters" %} - {% assign docsClasses = prose.classes %} + {% assign docsItems = prose.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/radio.html b/packages/stacks-docs/product/components/radio.html index f4a910708d..66326d876c 100644 --- a/packages/stacks-docs/product/components/radio.html +++ b/packages/stacks-docs/product/components/radio.html @@ -9,7 +9,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = checkbox_radio.radio-classes %} + {% assign docsItems = checkbox_radio.radio-classes %} {% assign col1Classes = "s-table--cell4" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/select.html b/packages/stacks-docs/product/components/select.html index a86d61c40d..4ace306e97 100644 --- a/packages/stacks-docs/product/components/select.html +++ b/packages/stacks-docs/product/components/select.html @@ -9,7 +9,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = select.classes %} + {% assign docsItems = select.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/sidebar-widgets.html b/packages/stacks-docs/product/components/sidebar-widgets.html index 6ec792d792..d859675943 100644 --- a/packages/stacks-docs/product/components/sidebar-widgets.html +++ b/packages/stacks-docs/product/components/sidebar-widgets.html @@ -7,7 +7,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = sidebar-widgets.classes %} + {% assign docsItems = sidebar-widgets.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/tables.html b/packages/stacks-docs/product/components/tables.html index 522b0eeb09..5028b15f24 100644 --- a/packages/stacks-docs/product/components/tables.html +++ b/packages/stacks-docs/product/components/tables.html @@ -8,7 +8,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = tables.classes %} + {% assign docsItems = tables.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %} @@ -741,7 +741,7 @@

If the table contains rows that should not be sorted, but rather always be at the top or always be at the bottom, add data-s-table-sort-to="top" or data-s-table-sort-to="bottom" to the <tr> element.

{% header "h3", "JavaScript data attributes" %} - {% assign docsClasses = tables.data-attributes %} + {% assign docsItems = tables.data-attributes %} {% assign col1Classes = "s-table--cell5" %} {% assign col2Classes = "s-table--cell2" %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/tags.html b/packages/stacks-docs/product/components/tags.html index 685d5d2b97..add85e2bf1 100644 --- a/packages/stacks-docs/product/components/tags.html +++ b/packages/stacks-docs/product/components/tags.html @@ -9,7 +9,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = tags-component.classes %} + {% assign docsItems = tags-component.classes %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/topbar.html b/packages/stacks-docs/product/components/topbar.html index 83943e5474..7cf0581c57 100644 --- a/packages/stacks-docs/product/components/topbar.html +++ b/packages/stacks-docs/product/components/topbar.html @@ -7,7 +7,7 @@
{% header "h2", "Classes" %} - {% assign docsClasses = topbar.classes %} + {% assign docsItems = topbar.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% assign expandableClassesTable = true %} diff --git a/packages/stacks-docs/product/components/uploader.html b/packages/stacks-docs/product/components/uploader.html index 7ae910b6bf..d104170103 100644 --- a/packages/stacks-docs/product/components/uploader.html +++ b/packages/stacks-docs/product/components/uploader.html @@ -5,90 +5,30 @@ description: The Stacks uploader is a custom-styled file input with added functionality to preview the file or files the user is uploading. tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in uploader.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign tableId = "uploader-classes-table" %} + {% assign docsItems = uploader.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %} +
+ +
{% header "h2", "JavaScript" %} + {% header "h3", "Attributes" %} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeApplied toDescription
data-controller="s-uploader"Controller elementWires up the element to the uploader controller. This may be a .s-uploader element or a wrapper element.
data-target="s-uploader.uploader".s-uploaderWires up the element containing input, previews, and reset targets.
data-s-uploader-target="input".s-uploader--inputDesignates the file input element.
data-target="s-uploader.previews".s-uploader--previewsDesignates the element to act as a container to file preview(s).
data-action="input->s-uploader#handleInput"input[type=file] elementWires up the element to provide files for preview on change.
data-action="click->s-uploader#reset"Any child elementWires up the element to reset the uploader to its initial state.
data-s-uploader-show-on-inputAny child elementToggles element visibility. Shows when input has value.
data-s-uploader-hide-on-inputAny child elementToggles element visibility. Hides when input has value.
data-s-uploader-enable-on-inputAny child elementToggles element disabled state. Disables when input has no value.
-
+ {% assign tableId = "uploader-attributes-table" %} + {% assign docsItems = uploader.attributes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign expandableClassesTable = true %} + {% assign expandableBtnText = "Show all attributes" %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %}

Including a file input with the class s-uploader--input within s-uploader will provide the correct styling for an upload section.

diff --git a/packages/stacks-docs/product/components/user-cards.html b/packages/stacks-docs/product/components/user-cards.html index 601b854dca..5c5e5d4f9a 100644 --- a/packages/stacks-docs/product/components/user-cards.html +++ b/packages/stacks-docs/product/components/user-cards.html @@ -5,29 +5,17 @@ description: User cards are a combination of a user and metadata about the user or post tags: components --- +
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in user-cards.classes %} - - - - - - {% endfor %} - -
ClassApplied toDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign tableId = "user-cards-classes-table" %} + {% assign docsItems = user-cards.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign expandableClassesTable = true %} + {% include "docs-table.html" %}
+
{% header "h2", "Examples" %} {% header "h3", "Default" %} @@ -244,32 +232,11 @@
{% header "h3", "Sizes" %} -
- - - - - - - - - - {% for item in user-cards.sizes %} - - - - - - {% endfor %} - -
SizeClassDescription
{{ item.size }} - {% if item.class == "N/A" %} - {{ item.class }} - {% else %} - {{ item.class }} - {% endif %} - {{ item.description }}
-
+ {% assign docsItems = user-cards.sizes %} + {% assign tableId = "user-cards-sizes-table" %} + {% assign col2Text = "Size" %} + {% include "docs-table.html" %} + {% header "h4", "Small" %}
{% highlight html %} diff --git a/packages/stacks-docs/product/components/vote.html b/packages/stacks-docs/product/components/vote.html index 2ebed43695..36f8f6a19e 100644 --- a/packages/stacks-docs/product/components/vote.html +++ b/packages/stacks-docs/product/components/vote.html @@ -7,29 +7,12 @@ tags: components --- -
{% header "h2", "Classes" %} -
- - - - - - - - - - {% for item in vote.classes %} - - - - - - {% endfor %} - -
ClassParentDescription
{{ item.class }}{{ item.applies }}{{ item.description }}
-
+ {% assign docsItems = vote.classes %} + {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% include "docs-table.html" %}
From 36511d55adfec9bbce4c29a539a64945d48be835 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 13 Feb 2026 20:19:11 -0500 Subject: [PATCH 5/5] make that table better --- .../stacks-docs/_data/components/avatars.json | 4 + .../stacks-docs/_data/components/banners.json | 28 ++-- .../_data/components/breadcrumbs.json | 6 +- .../stacks-docs/_data/components/buttons.json | 24 +++- .../_data/components/expandable.json | 1 + .../_data/components/link-previews.json | 46 +++---- .../stacks-docs/_data/components/loader.json | 4 +- .../stacks-docs/_data/components/menus.json | 10 +- .../stacks-docs/_data/components/modals.json | 35 ++--- .../_data/components/navigation.json | 38 +++--- .../stacks-docs/_data/components/notices.json | 35 ++--- .../_data/components/page-titles.json | 18 ++- .../components/pagination-component.json | 11 +- .../_data/components/popovers.json | 18 +-- .../_data/components/post-summary.json | 98 +++++++------- .../_data/components/progress-bars.json | 83 ++++++------ .../_data/components/sidebar-widgets.json | 3 + .../stacks-docs/_data/components/tables.json | 19 +-- .../_data/components/tags-component.json | 18 +-- .../stacks-docs/_data/components/topbar.json | 68 +++++----- .../_data/components/uploader.json | 45 ++++--- .../_data/components/user-cards.json | 15 ++- .../stacks-docs/_data/components/vote.json | 35 ++--- .../stacks-docs/_includes/docs-table.html | 123 +++++++++++++----- .../components/activity-indicator.html | 3 +- .../product/components/badges.html | 1 + .../stacks-docs/product/components/bling.html | 1 + .../product/components/breadcrumbs.html | 2 + .../product/components/button-groups.html | 2 + .../stacks-docs/product/components/cards.html | 1 + .../product/components/checkbox.html | 1 + .../product/components/code-blocks.html | 3 +- .../product/components/empty-states.html | 2 + .../product/components/expandable.html | 3 +- .../product/components/link-previews.html | 5 +- .../stacks-docs/product/components/links.html | 4 +- .../product/components/loader.html | 5 +- .../stacks-docs/product/components/menus.html | 2 +- .../product/components/modals.html | 1 - .../product/components/navigation.html | 1 - .../product/components/notices.html | 19 ++- .../product/components/page-titles.html | 2 + .../product/components/pagination.html | 3 +- .../product/components/popovers.html | 34 ++--- .../product/components/post-summary.html | 4 +- .../product/components/progress-bars.html | 10 +- .../stacks-docs/product/components/prose.html | 3 +- .../stacks-docs/product/components/radio.html | 1 + .../product/components/select.html | 3 +- .../product/components/sidebar-widgets.html | 1 + .../product/components/tables.html | 1 - .../product/components/topbar.html | 1 - .../product/components/uploader.html | 4 +- .../product/components/user-cards.html | 17 +-- .../stacks-docs/product/components/vote.html | 1 - 55 files changed, 538 insertions(+), 388 deletions(-) diff --git a/packages/stacks-docs/_data/components/avatars.json b/packages/stacks-docs/_data/components/avatars.json index 43e12c4c9e..08e1e4b28c 100644 --- a/packages/stacks-docs/_data/components/avatars.json +++ b/packages/stacks-docs/_data/components/avatars.json @@ -6,18 +6,22 @@ }, { "class": ".s-avatar--image", + "parent": ".s-avatar", "description": "A child element for displaying a user’s profile image." }, { "class": ".s-avatar--letter", + "parent": ".s-avatar", "description": "A child element for displaying an abbreviated Team name." }, { "class": ".s-avatar--badge", + "parent": ".s-avatar", "description": "A child element that provides positioning to the shield on Team avatars." }, { "class": ".s-avatar--indicator", + "parent": ".s-avatar", "description": "A child element that provides positioning to the activity indicator on user's avatars." }, { diff --git a/packages/stacks-docs/_data/components/banners.json b/packages/stacks-docs/_data/components/banners.json index bf12bd07df..d5250c7a2d 100644 --- a/packages/stacks-docs/_data/components/banners.json +++ b/packages/stacks-docs/_data/components/banners.json @@ -4,6 +4,21 @@ "class": ".s-banner", "description": "Base banner parent class. This defaults to a system banner style." }, + { + "class": ".s-banner--actions", + "parent": ".s-banner", + "description": "Container styling for banner actions including the dismiss button." + }, + { + "class": ".s-banner--dismiss", + "parent": ".s-banner", + "description": "Applies to child button element within the banner to position it appropriately." + }, + { + "class": ".s-banner__important", + "applies": ".s-banner", + "description": "Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user." + }, { "class": ".s-banner__info", "applies": ".s-banner", @@ -34,23 +49,10 @@ "applies": ".s-banner", "description": "Applies activity (pink) visual styles." }, - { - "class": ".s-banner__important", - "applies": ".s-banner", - "description": "Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user." - }, { "class": ".is-pinned", "applies": ".s-banner", "description": "Pins the banner to the top of the browser window." - }, - { - "class": ".s-banner--dismiss", - "description": "Child of .s-banner. Applies to child button element within the banner to position it appropriately." - }, - { - "class": ".s-banner--actions", - "description": "Child of .s-banner. Container styling for banner actions including the dismiss button." } ] } \ No newline at end of file diff --git a/packages/stacks-docs/_data/components/breadcrumbs.json b/packages/stacks-docs/_data/components/breadcrumbs.json index b96e61ea54..30da2b2a8c 100644 --- a/packages/stacks-docs/_data/components/breadcrumbs.json +++ b/packages/stacks-docs/_data/components/breadcrumbs.json @@ -6,17 +6,17 @@ }, { "class": ".s-breadcrumbs--item", - "applies": ".s-breadcrumbs", + "parent": ".s-breadcrumbs", "description": "Individual breadcrumb element containing a link and a divider" }, { "class": ".s-breadcrumbs--link", - "applies": ".s-breadcrumbs--item", + "parent": ".s-breadcrumbs--item", "description": "Breadcrumb link element" }, { "class": ".s-breadcrumbs--divider", - "applies": ".s-breadcrumbs--item", + "parent": ".s-breadcrumbs--item", "description": "Breadcrumb divider element" } ] diff --git a/packages/stacks-docs/_data/components/buttons.json b/packages/stacks-docs/_data/components/buttons.json index 8a53aef62d..0c35ff7fff 100644 --- a/packages/stacks-docs/_data/components/buttons.json +++ b/packages/stacks-docs/_data/components/buttons.json @@ -6,63 +6,77 @@ }, { "class": ".s-btn--badge", - "applies": ".s-btn", + "parent": ".s-btn", "description": "Badge container for the button" }, { "class": ".s-btn__clear", + "applies": ".s-btn", "description": "Clear button variant" }, { "class": ".s-btn__danger", + "applies": ".s-btn", "description": "Danger button variant" }, { "class": ".s-btn__featured", + "applies": ".s-btn", "description": "Featured button variant" }, { "class": ".s-btn__tonal", + "applies": ".s-btn", "description": "Tonal button variant" }, { "class": ".s-btn__dropdown", + "applies": ".s-btn", "description": "Dropdown button variant" }, { "class": ".s-btn__icon", + "applies": ".s-btn", "description": "Icon button variant" }, - { - "class": ".s-btn__xs", - "description": "Extra small button variant" - }, { "class": ".s-btn__link", + "applies": ".s-btn", "description": "Link button variant" }, { "class": ".s-btn__unset", + "applies": ".s-btn", "description": "Unset button variant" }, { "class": ".s-btn__facebook", + "applies": ".s-btn", "description": "Facebook button variant" }, { "class": ".s-btn__github", + "applies": ".s-btn", "description": "GitHub button variant" }, { "class": ".s-btn__google", + "applies": ".s-btn", "description": "Google button variant" }, + { + "class": ".s-btn__xs", + "applies": ".s-btn", + "description": "Extra small button variant" + }, { "class": ".s-btn__sm", + "applies": ".s-btn", "description": "Small button variant" }, { "class": ".s-btn__lg", + "applies": ".s-btn", "description": "Large button variant" } ], diff --git a/packages/stacks-docs/_data/components/expandable.json b/packages/stacks-docs/_data/components/expandable.json index 9f8166e1ff..a8678863d7 100644 --- a/packages/stacks-docs/_data/components/expandable.json +++ b/packages/stacks-docs/_data/components/expandable.json @@ -6,6 +6,7 @@ }, { "class": ".s-expandable--content", + "parent": ".s-expandable", "description": "Class for the expandable content. This is the content that will be shown and hidden when the expandable is toggled." }, { diff --git a/packages/stacks-docs/_data/components/link-previews.json b/packages/stacks-docs/_data/components/link-previews.json index 76d854241a..48e259cbed 100644 --- a/packages/stacks-docs/_data/components/link-previews.json +++ b/packages/stacks-docs/_data/components/link-previews.json @@ -6,52 +6,52 @@ }, { "class": ".s-link-preview--header", - "applies": ".s-link-preview", + "parent": ".s-link-preview", "description": "Top section containing the title and details" }, - { - "class": ".s-link-preview--icon", - "applies": ".s-link-preview--header", - "description": "Logo of the third party link. Use the @Svg.Helper." - }, - { - "class": ".s-link-preview--title", - "applies": ".s-link-preview--header", - "description": "Title of the linked file" - }, - { - "class": ".s-link-preview--details", - "applies": ".s-link-preview--header", - "description": "Details and meta data of the linked file" - }, { "class": ".s-link-preview--body", - "applies": ".s-link-preview", + "parent": ".s-link-preview", "description": "Middle section containing the body of the linked file whose expected content is rich text or markdown" }, { "class": ".s-link-preview--code", - "applies": ".s-link-preview", + "parent": ".s-link-preview", "description": "Middle section containing the body of the linked file whose expected content is code" }, { "class": ".s-link-preview--footer", - "applies": ".s-link-preview", + "parent": ".s-link-preview", "description": "Bottom section containing URL details" }, + { + "class": ".s-link-preview--icon", + "parent": ".s-link-preview--header", + "description": "Logo of the third party link. Use the @Svg.Helper." + }, + { + "class": ".s-link-preview--title", + "parent": ".s-link-preview--header", + "description": "Title of the linked file." + }, + { + "class": ".s-link-preview--details", + "parent": ".s-link-preview--header", + "description": "Details and meta data of the linked file." + }, { "class": ".s-link-preview--url", - "applies": ".s-link-preview--footer", - "description": "URL of the linked file" + "parent": ".s-link-preview--footer", + "description": "URL of the linked file." }, { "class": ".s-link-preview--misc", - "applies": ".s-link-preview--footer", + "parent": ".s-link-preview--footer", "description": "(optional) A small catch-all for anything you might need. This page contains a few use cases." }, { "class": ".linenums", - "applies": ".s-link-preview--code", + "parent": ".s-link-preview--code", "description": "Added to the pre of the preview block to properly display line numbers" } ], diff --git a/packages/stacks-docs/_data/components/loader.json b/packages/stacks-docs/_data/components/loader.json index d3ad8e2e35..a8a7dbdbad 100644 --- a/packages/stacks-docs/_data/components/loader.json +++ b/packages/stacks-docs/_data/components/loader.json @@ -6,8 +6,8 @@ }, { "class": ".s-loader--sr-text", - "applies": ".s-loader", - "description": "Child necessary to render the center loader block and renders the accessible text" + "parent": ".s-loader", + "description": "Necessary to render the center loader block and renders the accessible text" }, { "class": ".s-loader__sm", diff --git a/packages/stacks-docs/_data/components/menus.json b/packages/stacks-docs/_data/components/menus.json index 0fa8233020..24abbe7f7a 100644 --- a/packages/stacks-docs/_data/components/menus.json +++ b/packages/stacks-docs/_data/components/menus.json @@ -6,27 +6,27 @@ }, { "class": ".s-menu--divider", - "applies": ".s-menu", + "parent": ".s-menu", "description": "Adds a divider line between menu sections." }, { "class": ".s-menu--item", - "applies": ".s-menu", + "parent": ".s-menu", "description": "Applies link styling to link within a menu. Used for actionable elements." }, { "class": ".s-menu--title", - "applies": ".s-menu", + "parent": ".s-menu", "description": "Adds appropriate styling for a title within a menu." }, { "class": ".s-menu--icon", - "applies": ".s-menu--item", + "parent": ".s-menu--item", "description": "Applies styling to an icon." }, { "class": ".s-menu--action", - "applies": ".s-menu--item", + "parent": ".s-menu--item", "description": "Applies link styling to link within a menu. Used for actionable elements." }, { diff --git a/packages/stacks-docs/_data/components/modals.json b/packages/stacks-docs/_data/components/modals.json index 3dda31b172..9c9a92c9f3 100644 --- a/packages/stacks-docs/_data/components/modals.json +++ b/packages/stacks-docs/_data/components/modals.json @@ -5,34 +5,39 @@ "description": "Base parent container for modals." }, { - "class": ".s-modal__danger", - "applies": ".s-modal", - "description": "Adds styling for potentially dangerous actions." + "class": ".s-modal--dialog", + "parent": ".s-modal", + "description": "Creates a container that holds the modal dialog with proper padding and shadows." }, { - "class": ".s-modal--dialog", - "description": "Child of .s-modal. Creates a container that holds the modal dialog with proper padding and shadows." + "class": ".s-modal--body", + "parent": ".s-modal--dialog", + "description": "Adds proper styling to the modal dialog’s body text." }, { - "class": ".s-modal__full", - "applies": ".s-modal--dialog", - "description": "Child of .s-modal--dialog.Makes the container take up as much of the screen as possible." + "class": ".s-modal--close", + "parent": ".s-modal--dialog", + "description": "Used to dismiss a modal." }, { "class": ".s-modal--header", - "description": "Child of .s-modal--dialog. Adds proper styling to the modal dialog’s header." + "parent": ".s-modal--dialog", + "description": "Adds proper styling to the modal dialog’s header." }, { - "class": ".s-modal--body", - "description": "Child of .s-modal--dialog. Adds proper styling to the modal dialog’s body text." + "class": ".s-modal--footer", + "parent": ".s-modal--dialog", + "description": "Adds the desired spacing to the row of button actions." }, { - "class": ".s-modal--footer", - "description": "Child of .s-modal--dialog. Adds the desired spacing to the row of button actions." + "class": ".s-modal__danger", + "applies": ".s-modal", + "description": "Adds styling for potentially dangerous actions." }, { - "class": ".s-modal--close", - "description": "Child of .s-modal--dialog. Used to dismiss a modal." + "class": ".s-modal__full", + "applies": ".s-modal--dialog", + "description": "Makes the container take up as much of the screen as possible." } ] } diff --git a/packages/stacks-docs/_data/components/navigation.json b/packages/stacks-docs/_data/components/navigation.json index 1e64e68c91..69497aa379 100644 --- a/packages/stacks-docs/_data/components/navigation.json +++ b/packages/stacks-docs/_data/components/navigation.json @@ -5,9 +5,24 @@ "description": "Base parent container for navigation." }, { - "class": ".s-navigation__vertical", - "applies": ".s-navigation", - "description": "Renders the navigation vertically." + "class": ".s-navigation--item", + "parent": ".s-navigation", + "description": "The individual item in a navigation" + }, + { + "class": ".s-navigation--avatar", + "parent": ".s-navigation--item", + "description": "Applies styling to the avatar of the navigation item" + }, + { + "class": ".s-navigation--icon", + "parent": ".s-navigation--item", + "description": "Applies styling to the icon of the navigation item" + }, + { + "class": ".s-navigation--item-text", + "parent": ".s-navigation--item", + "description": "The element meant to contain the text of the navigation item" }, { "class": ".s-navigation__scroll", @@ -20,8 +35,9 @@ "description": "Tightens up the overall spacing and reduces the text size" }, { - "class": ".s-navigation--item", - "description": "Child of .s-navigation. The individual item in a navigation" + "class": ".s-navigation__vertical", + "applies": ".s-navigation", + "description": "Renders the navigation vertically." }, { "class": ".s-navigation--item__dropdown", @@ -32,18 +48,6 @@ "class": ".is-selected", "applies": ".s-navigation--item", "description": "Applies to a navigation item that’s currently selected / active" - }, - { - "class": ".s-navigation--item-text", - "description": "Child of .s-navigation--item.The element meant to contain the text of the navigation item" - }, - { - "class": ".s-navigation--icon", - "description": "Child of .s-navigation--item. Applies styling to the icon of the navigation item" - }, - { - "class": ".s-navigation--avatar", - "description": "Child of .s-navigation--item. Applies styling to the avatar of the navigation item" } ], "navigation-attributes": [ diff --git a/packages/stacks-docs/_data/components/notices.json b/packages/stacks-docs/_data/components/notices.json index e6ec0fc7c6..a994b4e7a6 100644 --- a/packages/stacks-docs/_data/components/notices.json +++ b/packages/stacks-docs/_data/components/notices.json @@ -2,22 +2,23 @@ "classes": [ { "class": ".s-notice", + "context": ".s-toast when rendered as a toast", "description": "Base notice parent class." }, { - "class": ".s-notice__info", - "applies": ".s-notice", - "description": "Applies info (blue) visual styles." + "class": ".s-notice--actions", + "parent": ".s-notice", + "description": "Container styling for notice actions including the dismiss button." }, { - "class": ".s-notice__success", - "applies": ".s-notice", - "description": "Applies success (green) visual styles." + "class": ".s-notice--dismiss", + "parent": ".s-notice", + "description": "Applies to child button element within the notice to position it appropriately." }, { - "class": ".s-notice__warning", + "class": ".s-notice__activity", "applies": ".s-notice", - "description": "Applies warning (yellow) visual styles." + "description": "Applies activity (pink) visual styles." }, { "class": ".s-notice__danger", @@ -30,22 +31,24 @@ "description": "Applies featured (purple) visual styles." }, { - "class": ".s-notice__activity", + "class": ".s-notice__important", "applies": ".s-notice", - "description": "Applies activity (pink) visual styles." + "description": "Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user." }, { - "class": ".s-notice__important", + "class": ".s-notice__info", "applies": ".s-notice", - "description": "Applies an important visual style. This should be used for time-sensitive, pressing information that needs to be noticed by the user." + "description": "Applies info (blue) visual styles." }, { - "class": ".s-notice--dismiss", - "description": "Child of .s-notice. Applies to child button element within the notice to position it appropriately." + "class": ".s-notice__success", + "applies": ".s-notice", + "description": "Applies success (green) visual styles." }, { - "class": ".s-notice--actions", - "description": "Child of .s-notice. Container styling for notice actions including the dismiss button." + "class": ".s-notice__warning", + "applies": ".s-notice", + "description": "Applies warning (yellow) visual styles." }, { "class": ".s-toast", diff --git a/packages/stacks-docs/_data/components/page-titles.json b/packages/stacks-docs/_data/components/page-titles.json index ac43d41131..7d290313ce 100644 --- a/packages/stacks-docs/_data/components/page-titles.json +++ b/packages/stacks-docs/_data/components/page-titles.json @@ -4,21 +4,25 @@ "class": ".s-page-title", "description": "Base class for the page title component." }, + { + "class": ".s-page-title--actions", + "parent": ".s-page-title", + "description": "Contains the page actions." + }, { "class": ".s-page-title--text", - "description": "Child of .s-page-title. Contains the page title and description." + "parent": ".s-page-title", + "description": "Contains the page title and description." }, { "class": ".s-page-title--description", - "description": "Child of .s-page-title--text. Contains the page description." + "parent": ".s-page-title--text", + "description": "Contains the page description." }, { "class": ".s-page-title--header", - "description": "Child of .s-page-title--text. Contains the page title." - }, - { - "class": ".s-page-title--actions", - "description": "Child of .s-page-title. Contains the page actions." + "parent": ".s-page-title--text", + "description": "Contains the page title." } ], "example": { diff --git a/packages/stacks-docs/_data/components/pagination-component.json b/packages/stacks-docs/_data/components/pagination-component.json index aeb7b3f4d2..1207d125bd 100644 --- a/packages/stacks-docs/_data/components/pagination-component.json +++ b/packages/stacks-docs/_data/components/pagination-component.json @@ -6,12 +6,13 @@ }, { "class": ".s-pagination--item", - "description": "Child of .s-pagination. A child element that's used as a link and labeled with the page number." + "parent": ".s-pagination", + "description": "A child element that's used as a link and labeled with the page number." }, { - "class": ".is-selected", + "class": ".s-pagination--item__clear", "applies": ".s-pagination--item", - "description": "Active state that's applied to the current page." + "description": "Clears the background and removes any interactivity. Used for ellipses and descriptions." }, { "class": ".s-pagination--item__nav", @@ -19,9 +20,9 @@ "description": "Styles the Next or Previous button with a circular background and fixed dimensions. Typically used with an icon to indicate navigation to the next page." }, { - "class": ".s-pagination--item__clear", + "class": ".is-selected", "applies": ".s-pagination--item", - "description": "Clears the background and removes any interactivity. Used for ellipses and descriptions." + "description": "Active state that's applied to the current page." } ], "examples": { diff --git a/packages/stacks-docs/_data/components/popovers.json b/packages/stacks-docs/_data/components/popovers.json index f54152872c..b82ef04c87 100644 --- a/packages/stacks-docs/_data/components/popovers.json +++ b/packages/stacks-docs/_data/components/popovers.json @@ -4,6 +4,16 @@ "class": ".s-popover", "description": "Base parent container for popovers" }, + { + "class": ".s-popover--close", + "parent": ".s-popover", + "description": "Used to dismiss a popover" + }, + { + "class": ".s-popover--content", + "parent": ".s-popover", + "description": "Wrapper around the popover content to apply appropriate overflow styles" + }, { "class": ".s-popover__tooltip", "applies": ".s-popover", @@ -13,14 +23,6 @@ "class": ".is-visible", "applies": ".s-popover", "description": "This class toggles the popover visibility" - }, - { - "class": ".s-popover--close", - "description": "Child of .s-popover. Used to dismiss a popover" - }, - { - "class": ".s-popover--content", - "description": "Child of .s-popover. Wrapper around the popover content to apply appropriate overflow styles" } ], "interactiveAttributes": [ diff --git a/packages/stacks-docs/_data/components/post-summary.json b/packages/stacks-docs/_data/components/post-summary.json index 8405e89623..c3282d8fd3 100644 --- a/packages/stacks-docs/_data/components/post-summary.json +++ b/packages/stacks-docs/_data/components/post-summary.json @@ -5,104 +5,104 @@ "description": "Base parent container for a post summary" }, { - "class": ".s-post-summary__answered", - "applies": ".s-post-summary", - "description": "Adds the styling necessary for a question with accepted answers" + "class": ".s-post-summary--answers", + "parent": ".s-post-summary", + "description": "Container for the post summary answers" }, { - "class": ".s-post-summary__deleted", - "applies": ".s-post-summary", - "description": "Adds the styling necessary for a deleted post" + "class": ".s-post-summary--content", + "parent": ".s-post-summary", + "description": "Container for the post summary content" }, { - "class": ".s-post-summary--sm-hide", - "applies": ".s-post-summary", - "description": "Hides the stats container on small screens" + "class": ".s-post-summary--stats", + "parent": ".s-post-summary", + "description": "Container for the post summary stats" }, { - "class": ".s-post-summary--sm-show", - "applies": ".s-post-summary", - "description": "Shows the stats container on small screens" + "class": ".s-post-summary--tags", + "parent": ".s-post-summary", + "description": "Container for the post summary tags" }, { - "class": ".s-post-summary--answers", - "applies": ".s-post-summary", - "description": "Container for the post summary answers" + "class": ".s-post-summary--title", + "parent": ".s-post-summary", + "description": "Container for the post summary title" }, { "class": ".s-post-summary--answer", - "applies": ".s-post-summary--answers", + "parent": ".s-post-summary--answers", "description": "Container for the post summary answer" }, - { - "class": ".s-post-summary--answer__accepted", - "applies": ".s-post-summary--answer", - "description": "Adds the styling necessary for an accepted answer" - }, - { - "class": ".s-post-summary--content", - "applies": ".s-post-summary", - "description": "Container for the post summary content" - }, { "class": ".s-post-summary--content-meta", - "applies": ".s-post-summary--content", + "parent": ".s-post-summary--content", "description": "A container for post meta data, things like tags and user cards." }, { "class": ".s-post-summary--content-type", - "applies": ".s-post-summary--content", + "parent": ".s-post-summary--content", "description": "Container for the post summary content type" }, { "class": ".s-post-summary--excerpt", - "applies": ".s-post-summary--content", + "parent": ".s-post-summary--content", "description": "Container for the post summary excerpt" }, - { - "class": ".s-post-summary--stats", - "applies": ".s-post-summary", - "description": "Container for the post summary stats" - }, { "class": ".s-post-summary--stats-answers", - "applies": ".s-post-summary--stats", + "parent": ".s-post-summary--stats", "description": "Container for the post summary answers" }, { "class": ".s-post-summary--stats-bounty", - "applies": ".s-post-summary--stats", + "parent": ".s-post-summary--stats", "description": "Container for the post summary bounty" }, { "class": ".s-post-summary--stats-item", - "applies": ".s-post-summary--stats", + "parent": ".s-post-summary--stats", "description": "A genericcontainer for views, comments, read time, and other meta data which prepends a separator icon." }, { "class": ".s-post-summary--stats-votes", - "applies": ".s-post-summary--stats", + "parent": ".s-post-summary--stats", "description": "Container for the post summary votes" }, { - "class": ".s-post-summary--tags", - "applies": ".s-post-summary", - "description": "Container for the post summary tags" + "class": ".s-post-summary--title-link", + "parent": ".s-post-summary--title", + "description": "Link styling for the post summary title" }, { - "class": ".s-post-summary--title", + "class": ".s-post-summary--title-icon", + "parent": ".s-post-summary--title", + "description": "Icon styling for the post summary title" + }, + { + "class": ".s-post-summary--sm-hide", + "applies": ".s-post-summary > *", + "description": "Hides the stats container on small screens." + }, + { + "class": ".s-post-summary--sm-show", + "applies": ".s-post-summary > *", + "description": "Shows the stats container on small screens." + }, + { + "class": ".s-post-summary__answered", "applies": ".s-post-summary", - "description": "Container for the post summary title" + "description": "Adds the styling necessary for a question with accepted answers" }, { - "class": ".s-post-summary--title-link", - "applies": ".s-post-summary--title", - "description": "Link styling for the post summary title" + "class": ".s-post-summary__deleted", + "applies": ".s-post-summary", + "description": "Adds the styling necessary for a deleted post" }, { - "class": ".s-post-summary--title-icon", - "applies": ".s-post-summary--title", - "description": "Icon styling for the post summary title" + "class": ".s-post-summary--answer__accepted", + "applies": ".s-post-summary--answer", + "description": "Adds the styling necessary for an accepted answer" } ], "answered": { diff --git a/packages/stacks-docs/_data/components/progress-bars.json b/packages/stacks-docs/_data/components/progress-bars.json index df13f0a1aa..f779241e60 100644 --- a/packages/stacks-docs/_data/components/progress-bars.json +++ b/packages/stacks-docs/_data/components/progress-bars.json @@ -6,87 +6,88 @@ }, { "class": ".s-progress--bar", - "description": "A child element of .s-progress. It shows the user’s current progress to accomplishing a goal with a background color." + "parent": ".s-progress", + "description": "Shows the user’s current progress to accomplishing a goal with a background color." }, { "class": ".s-progress--label", - "description": "A child element of .s-progress. It’s used to describe what progress bar is tracking." + "parent": ".s-progress", + "description": "Used to describe what progress bar is tracking." }, { - "class": ".s-progress__brand", + "class": ".s-progress--bar__left", + "parent": ".s-progress--step", + "description": "Draws a line on the left side of a step." + }, + { + "class": ".s-progress--bar__right", + "parent": ".s-progress--step", + "description": "Draws a line on the right side of a step." + }, + { + "class": ".s-progress--step", + "parent": ".s-progress--stepped", + "description": "Wrapper for each individual step." + }, + { + "class": ".s-progress__badge", "applies": ".s-progress", - "description": "A modifying class applied to .s-progress. It changes the bar color from green to orange." + "description": "Styles the progress bar as a badge." }, { - "class": ".s-progress__info", + "class": ".s-progress__brand", "applies": ".s-progress", - "description": "Modifier for an info progress bar. It changes the bar color from green to blue." + "description": "Applies the brand color to the progress bar." }, { "class": ".s-progress__circular", "applies": ".s-progress", - "description": "Modifier for a circular progress bar. It changes the bar to be a percentage of a circle." + "description": "Styles the progress bar as a circular progress bar." + }, + { + "class": ".s-progress__info", + "applies": ".s-progress", + "description": "Applies the info color to the progress bar." }, { "class": ".s-progress__privilege", "applies": ".s-progress", - "description": "Modifier for a privilege progress bar. It changes the bar color from green to a lighter green (for legibility reasons)." + "description": "Used to display a privilege progress bar." }, { - "class": ".s-progress__badge", + "class": ".s-progress__segmented", + "applies": ".s-progress", + "description": "Styles the progress bar as a segmented progress bar." + }, + { + "class": ".s-progress__stepped", "applies": ".s-progress", - "description": "Modifier for a badge progress bar." + "description": "Styles the progress bar as a stepped progress bar." }, { "class": ".s-progress__gold", "applies": ".s-progress__badge", - "description": "Modifier for a gold badge progress bar. Applied to .s-progress__badge." + "description": "Styles the progress bar as a gold badge." }, { "class": ".s-progress__silver", "applies": ".s-progress__badge", - "description": "Modifier for a silver badge progress bar. Applied to .s-progress__badge." + "description": "Styles the progress bar as a silver badge." }, { "class": ".s-progress__bronze", "applies": ".s-progress__badge", - "description": "Modifier for a bronze badge progress bar. Applied to .s-progress__badge." - }, - { - "class": ".s-progress__segmented", - "applies": ".s-progress", - "description": "Modifier for a segmented progress bar" - }, - { - "class": ".s-progress__stepped", - "applies": ".s-progress", - "description": "Modifier for a stepped progress bar" - }, - { - "class": ".s-progress--step", - "description": "A child of .s-progress--stepped that’s a wrapper for each individual step." + "description": "Styles the progress bar as a bronze badge." }, { "class": ".is-active", "applies": ".s-progress--step", - "description": "A modifier .s-progress__step that adds visual styling to the active step." + "description": "Styles the active step." }, { "class": ".is-completed", "applies": ".s-progress--step", - "description": "A modifier .s-progress__step that adds visual styling to a completed step." - }, - { - "class": ".s-progress--stop", - "description": "A child of .s-progress--step, the circle that might contain a checkmark if the step’s been completed." - }, - { - "class": ".s-progress--bar__left", - "description": "A child of .s-progress--step that draws a line on the left side of a step." - }, - { - "class": ".s-progress--bar__right", - "description": "A child of .s-progress--step that draws a line on the right side of a step." + "description": "Styles the completed step." } ], "parameters": [ diff --git a/packages/stacks-docs/_data/components/sidebar-widgets.json b/packages/stacks-docs/_data/components/sidebar-widgets.json index 1990319881..23871de9d6 100644 --- a/packages/stacks-docs/_data/components/sidebar-widgets.json +++ b/packages/stacks-docs/_data/components/sidebar-widgets.json @@ -6,14 +6,17 @@ }, { "class": ".s-sidebarwidget--content", + "parent": ".s-sidebarwidget", "description": "Container for the sidebar widget content." }, { "class": ".s-sidebarwidget--header", + "parent": ".s-sidebarwidget", "description": "Container for the sidebar widget header." }, { "class": ".s-sidebarwidget--footer", + "parent": ".s-sidebarwidget", "description": "Container for the sidebar widget footer." } ] diff --git a/packages/stacks-docs/_data/components/tables.json b/packages/stacks-docs/_data/components/tables.json index 7996bd9b8c..bf30299c8a 100644 --- a/packages/stacks-docs/_data/components/tables.json +++ b/packages/stacks-docs/_data/components/tables.json @@ -6,8 +6,14 @@ }, { "class": ".s-table", + "parent": ".s-table-container", "description": "Base table style." }, + { + "class": ".s-table--cell:n", + "parent": ".s-table > tr > td", + "description": "Table cell width in 12 evenly divided columns. Replace :n with the number of columns the cell should span." + }, { "class": ".s-table__b0", "applies": ".s-table", @@ -24,14 +30,14 @@ "description": "Removes most of the default borders and backgrounds. Good for tables without much data that don't need to be sorted or filtered." }, { - "class": ".s-table__stripes", + "class": ".s-table__sortable", "applies": ".s-table", - "description": "Apply zebra striping to the table." + "description": "Applies styling to imply the table is sortable." }, { - "class": ".s-table__sortable", + "class": ".s-table__stripes", "applies": ".s-table", - "description": "Applies styling to imply the table is sortable." + "description": "Apply zebra striping to the table." }, { "class": ".s-table__sm", @@ -42,11 +48,6 @@ "class": ".s-table__lg", "applies": ".s-table", "description": "Apply a large sizing to the table." - }, - { - "class": ".s-table--cell", - "applies": ".s-table", - "description": "Table cell width in 12 evenly divided columns. Replace with the number of columns the cell should span." } ], "widths": [ diff --git a/packages/stacks-docs/_data/components/tags-component.json b/packages/stacks-docs/_data/components/tags-component.json index 2ac7047061..d64b739a84 100644 --- a/packages/stacks-docs/_data/components/tags-component.json +++ b/packages/stacks-docs/_data/components/tags-component.json @@ -4,6 +4,16 @@ "class": ".s-tag", "description": "Base tag style that is used almost universally." }, + { + "class": ".s-tag--dismiss", + "parent": ".s-tag", + "description": "For a clear or dismiss action icon. When using this element, it should be rendered as a button containing the icon and the parent .s-tag should be rendered as a span element." + }, + { + "class": ".s-tag--sponsor", + "parent": ".s-tag", + "description": "Correctly positions a tag’s sponsor logo." + }, { "class": ".s-tag__moderator", "applies": ".s-tag", @@ -33,14 +43,6 @@ "class": ".s-tag__lg", "applies": ".s-tag", "description": "Apply a large size to the tag." - }, - { - "class": ".s-tag--dismiss", - "description": "A child element within .s-tag for a clear or dismiss action icon. When using this element, it should be rendered as a button containing the icon and the parent .s-tag should be rendered as a span element." - }, - { - "class": ".s-tag--sponsor", - "description": "A child element within .s-tag that correctly positions a tag’s sponsor logo." } ], "sizes": [ diff --git a/packages/stacks-docs/_data/components/topbar.json b/packages/stacks-docs/_data/components/topbar.json index 4399b874e4..9927f42605 100644 --- a/packages/stacks-docs/_data/components/topbar.json +++ b/packages/stacks-docs/_data/components/topbar.json @@ -5,64 +5,74 @@ "description": "Base class" }, { - "class": ".s-topbar__light", - "applies": ".s-topbar", - "description": "Applies a forced light theme" - }, - { - "class": ".s-topbar__dark", - "applies": ".s-topbar", - "description": "Applies a forced dark theme" + "class": ".s-topbar--container", + "parent": ".s-topbar", + "description": "Add atomic classes here to customize internal content width; defaults to `.wmx12`" }, { "class": ".s-topbar--skip-link", - "description": "Child of .s-topbar. Applied to an anchor tag for bypassing the top-level navigation links and jump to the main content on a page. See WCAG Technique G1" - }, - { - "class": ".s-topbar--container", - "description": "Child of .s-topbar. Add atomic classes here to customize internal content width; defaults to `.wmx12`" + "parent": ".s-topbar", + "description": "Applied to an anchor tag for bypassing the top-level navigation links and jump to the main content on a page. See WCAG Technique G1" }, { "class": ".s-topbar--logo", - "description": "Child of .s-topbar--container. The logo. Can apply .is-selected to this" + "parent": ".s-topbar--container", + "description": "The logo. Can apply .is-selected to this" }, { "class": ".s-topbar--menu-btn", - "description": "Child of .s-topbar--container. Hamburger menu icon. Add .is-selected to turn it into an X" + "parent": ".s-topbar--container", + "description": "Hamburger menu icon. Add .is-selected to turn it into an X" }, { "class": ".s-topbar--navigation", - "description": "Child of .s-topbar--container. Apply to nav to ensure proper layout." + "parent": ".s-topbar--container", + "description": "Apply to nav to ensure proper layout." }, { - "class": ".s-topbar--content", - "description": "Child of .s-topbar--navigation. Contains li > .s-topbar--item elements that don’t look like anything in particular" + "class": ".s-topbar--notice", + "parent": ".s-topbar--container", + "description": "A badge-styled notice that stands out. Add .is-unread to make it stand out more." }, { - "class": ".s-topbar--item", - "description": "Child of .s-topbar--content > li. A topbar item element with hover, active and focused styling. Can add `.is-selected`" + "class": ".s-topbar--searchbar", + "parent": ".s-topbar--container", + "description": "Contains a search input and an optional `.s-select`. Hides itself on mobile." }, { - "class": ".s-topbar--item__unset", - "applies": ".s-topbar--item", - "description": "This class excludes the .s-topbar--item from any automatic styling. This is useful for calls to action, e.g. buttons or log in links." + "class": ".s-topbar--content", + "parent": ".s-topbar--navigation", + "description": "Contains li > .s-topbar--item elements that don’t look like anything in particular" }, { - "class": ".s-topbar--notice", - "description": "Child of .s-topbar--container. A badge-styled notice that stands out. Add .is-unread to make it stand out more." + "class": ".s-topbar--item", + "parent": ".s-topbar--content > li", + "description": "A topbar item element with hover, active and focused styling. Can add `.is-selected`" }, { - "class": ".s-topbar--searchbar", - "description": "Child of .s-topbar--container. Contains a search input and an optional `.s-select`. Hides itself on mobile." + "class": ".s-topbar--searchbar--input-group", + "parent": ".s-topbar--searchbar", + "description": "Holds the search input + icon." }, { - "class": ".s-topbar--searchbar--input-group", - "description": "Child of .s-topbar--searchbar. Holds the search input + icon." + "class": ".s-topbar--item__unset", + "applies": ".s-topbar--item", + "description": "This class excludes the .s-topbar--item from any automatic styling. This is useful for calls to action, e.g. buttons or log in links." }, { "class": ".s-topbar--searchbar__open", "applies": ".s-topbar--searchbar", "description": "On mobile, this class shows the search input below the topbar. Toggle this class with a button." + }, + { + "class": ".s-topbar__light", + "applies": ".s-topbar", + "description": "Applies a forced light theme" + }, + { + "class": ".s-topbar__dark", + "applies": ".s-topbar", + "description": "Applies a forced dark theme" } ] } diff --git a/packages/stacks-docs/_data/components/uploader.json b/packages/stacks-docs/_data/components/uploader.json index 9a397bf8df..943ad8c242 100644 --- a/packages/stacks-docs/_data/components/uploader.json +++ b/packages/stacks-docs/_data/components/uploader.json @@ -4,6 +4,31 @@ "class": ".s-uploader", "description": "Base uploader element" }, + { + "class": ".s-uploader--container", + "parent": ".s-uploader", + "description": "Container for the visual elements of the uploader." + }, + { + "class": ".s-uploader--input", + "parent": ".s-uploader--container", + "description": "Adds proper styling to the uploader's file input. Visually hidden." + }, + { + "class": ".s-uploader--previews", + "parent": ".s-uploader--container", + "description": "Container for selected item(s) preview." + }, + { + "class": ".s-uploader--reset", + "parent": ".s-uploader--container", + "description": "Used to reset the uploader." + }, + { + "class": ".s-uploader--preview", + "parent": ".s-uploader--previews", + "description": "An image or string to preview a selected file." + }, { "class": ".is-active", "applies": ".s-uploader", @@ -28,26 +53,6 @@ "class": ".has-warning", "applies": ".s-uploader", "description": "Adds warning styling to the component." - }, - { - "class": ".s-uploader--container", - "description": "Child of .s-uploader. Container for the visual elements of the uploader." - }, - { - "class": ".s-uploader--input", - "description": "Child of .s-uploader--container. Adds proper styling to the uploader's file input. Visually hidden." - }, - { - "class": ".s-uploader--previews", - "description": "Child of .s-uploader--container. Container for selected item(s) preview." - }, - { - "class": ".s-uploader--preview", - "description": "Child of .s-uploader--previews. An image or string to preview a selected file." - }, - { - "class": ".s-uploader--reset", - "description": "Child of .s-uploader--container. Used to reset the uploader." } ], "attributes": [ diff --git a/packages/stacks-docs/_data/components/user-cards.json b/packages/stacks-docs/_data/components/user-cards.json index 3f48abf5d3..28239baa72 100644 --- a/packages/stacks-docs/_data/components/user-cards.json +++ b/packages/stacks-docs/_data/components/user-cards.json @@ -6,21 +6,19 @@ }, { "class": ".s-user-card--column", + "applies": ".s-user-card > *", "description": "A container for column elements." }, { "class": ".s-user-card--row", + "applies": ".s-user-card > *", "description": "A container for row elements." }, { "class": ".s-user-card--group", + "applies": ".s-user-card > *", "description": "A container for group elements." }, - { - "class": ".s-user-card--group__split", - "applies": ".s-user-card--group", - "description": "Inserts a separator between each element." - }, { "class": ".s-user-card--bio", "description": "Container for the user's bio." @@ -43,11 +41,18 @@ }, { "class": ".s-user-card__sm", + "applies": ".s-user-card", "description": "Use the small variant for space-constrained areas, such as post summaries, or to establish visual hierarchy for secondary content like comments and replies." }, { "class": ".s-user-card__lg", + "applies": ".s-user-card", "description": "Use the large variant when space permits and more detailed information is desired." + }, + { + "class": ".s-user-card--group__split", + "applies": ".s-user-card--group", + "description": "Inserts a separator between each element." } ], "base": [ diff --git a/packages/stacks-docs/_data/components/vote.json b/packages/stacks-docs/_data/components/vote.json index f1e79a5b61..0ef4d634bf 100644 --- a/packages/stacks-docs/_data/components/vote.json +++ b/packages/stacks-docs/_data/components/vote.json @@ -5,34 +5,39 @@ "description": "Base vote component." }, { - "class": ".s-vote__expanded", - "applies": ".s-vote", - "description": "Expanded vote style that shows upvote and downvote counts separately." + "class": ".s-vote--btn", + "parent": ".s-vote", + "description": "Vote button." }, { - "class": ".s-vote__horizontal", - "applies": ".s-vote", - "description": "Horizontal vote style that arranges buttons and counts in a row. This layout does not officially support downvoting or expanded vote count." + "class": ".s-vote--votes", + "parent": ".s-vote", + "description": "Container for vote counts." }, { - "class": ".s-vote--btn", - "description": "Child of .s-vote. Vote button." + "class": ".s-vote--downvotes", + "parent": ".s-vote--votes", + "description": "Downvote count." }, { - "class": ".s-vote--votes", - "description": "Child of .s-vote. Container for vote counts." + "class": ".s-vote--total", + "parent": ".s-vote--votes", + "description": "Total vote count." }, { "class": ".s-vote--upvotes", - "description": "Child of .s-vote--votes. Upvote count." + "parent": ".s-vote--votes", + "description": "Upvote count." }, { - "class": ".s-vote--total", - "description": "Child of .s-vote--votes. Total vote count." + "class": ".s-vote__expanded", + "applies": ".s-vote", + "description": "Expanded vote style that shows upvote and downvote counts separately." }, { - "class": ".s-vote--downvotes", - "description": "Child of .s-vote--votes. Downvote count." + "class": ".s-vote__horizontal", + "applies": ".s-vote", + "description": "Horizontal vote style that arranges buttons and counts in a row. This layout does not officially support downvoting or expanded vote count." } ], "groups": { diff --git a/packages/stacks-docs/_includes/docs-table.html b/packages/stacks-docs/_includes/docs-table.html index 5aa3fe99e6..52fd1928b8 100644 --- a/packages/stacks-docs/_includes/docs-table.html +++ b/packages/stacks-docs/_includes/docs-table.html @@ -8,14 +8,36 @@ {% include "docs-table.html" %} Override one column: {% assign appliesColClasses = "s-table--cell4" %} {% endcomment %} -{% assign tableId = tableId | default: "docs-table" %} -{% assign col1Classes = col1Classes | default: "s-table--cell3" %} -{% assign col2Classes = col2Classes | default: "s-table--cell2" %} -{% assign col3Classes = col3Classes | default: "" %} -{% assign col1Text = col1Text | default: "Class" %} -{% assign col2Text = col2Text | default: "Modifies" %} -{% assign col3Text = col3Text | default: "Description" %} -{% assign expandableBtnText = expandableBtnText | default: "Show all classes" %} +{% if tableId == nil %} + {% assign tableId = "docs-table" %} +{% endif %} +{% if col1Classes == nil %} + {% assign col1Classes = "s-table--cell3" %} +{% endif %} +{% if col2Classes == nil %} + {% assign col2Classes = "s-table--cell2" %} +{% endif %} +{% if col3Classes == nil %} + {% assign col3Classes = "s-table--cell2" %} +{% endif %} +{% if col4Classes == nil %} + {% assign col4Classes = "" %} +{% endif %} +{% if col1Heading == nil %} + {% assign col1Heading = "Class" %} +{% endif %} +{% if col2Heading == nil %} + {% assign col2Heading = "Parent" %} +{% endif %} +{% if col3Heading == nil %} + {% assign col3Heading = "Modifies" %} +{% endif %} +{% if col4Heading == nil %} + {% assign col4Heading = "Description" %} +{% endif %} +{% if expandableBtnText == nil %} + {% assign expandableBtnText = "Show all classes" %} +{% endif %} {% assign expandableClassesTable = expandableClassesTable | default: false %}
- - {{ col1Text }} - - - {{ col2Text }} - - - {{ col3Text }} - + {% if col1Heading != "" %} + + {{ col1Heading }} + + {% endif %} + {% if col2Heading != "" %} + + {{ col2Heading }} + + {% endif %} + {% if col3Heading != "" %} + + {{ col3Heading }} + + {% endif %} + {% if col4Heading != "" %} + + {{ col4Heading }} + + {% endif %} {% for item in docsItems %} - - {{ item.class | default: item.item }} - - - {% if item.appliesText or item.applies %} - {% if item.appliesText %} - {{ item.appliesText }} + {% if col1Heading != "" %} + + {{ item.class | default: item.item }} + + {% endif %} + {% if col2Heading != "" %} + + {% if item.context or item.parent %} + {% if item.context %} + {{ item.context }} + {% endif %} + {% if item.parent %} + {{ item.parent }} + {% endif %} + {% else %} + N/A {% endif %} - {% if item.applies %} - {{ item.applies }} + + {% endif %} + {% if col3Heading != "" %} + + {% if item.appliesText or item.applies %} + {% if item.appliesText %} + {{ item.appliesText }} + {% endif %} + {% if item.applies %} + {{ item.applies }} + {% endif %} + {% else %} + N/A {% endif %} - {% else %} - N/A - {% endif %} - - {{ item.description }} + + {% endif %} + {% if col4Heading != "" %} + {{ item.description }} + {% endif %} {% endfor %} @@ -75,8 +128,10 @@ {% assign col1Classes = nil %} {% assign col2Classes = nil %} {% assign col3Classes = nil %} -{% assign col1Text = nil %} -{% assign col2Text = nil %} -{% assign col3Text = nil %} +{% assign col4Classes = nil %} +{% assign col1Heading = nil %} +{% assign col2Heading = nil %} +{% assign col3Heading = nil %} +{% assign col4Heading = nil %} {% assign expandableBtnText = nil %} {% assign expandableClassesTable = nil %} diff --git a/packages/stacks-docs/product/components/activity-indicator.html b/packages/stacks-docs/product/components/activity-indicator.html index 0351616612..2d959746d4 100644 --- a/packages/stacks-docs/product/components/activity-indicator.html +++ b/packages/stacks-docs/product/components/activity-indicator.html @@ -10,7 +10,8 @@
{% header "h2", "Classes" %} {% assign docsItems = activity-indicator.classes %} - {% assign col2Classes = "s-table--cell4" %} + {% assign col3Classes = "s-table--cell4" %} + {% assign col2Heading = "" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/badges.html b/packages/stacks-docs/product/components/badges.html index 60156845e0..c4392d6a01 100644 --- a/packages/stacks-docs/product/components/badges.html +++ b/packages/stacks-docs/product/components/badges.html @@ -10,6 +10,7 @@
{% header "h2", "Classes" %} {% assign docsItems = badges.classes %} + {% assign col2Heading = "" %} {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/bling.html b/packages/stacks-docs/product/components/bling.html index b85b6835c5..d09767ecef 100644 --- a/packages/stacks-docs/product/components/bling.html +++ b/packages/stacks-docs/product/components/bling.html @@ -9,6 +9,7 @@
{% header "h2", "Classes" %} {% assign docsItems = bling.classes %} + {% assign col2Heading = "" %} {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/breadcrumbs.html b/packages/stacks-docs/product/components/breadcrumbs.html index d99319eedb..d8e975a573 100644 --- a/packages/stacks-docs/product/components/breadcrumbs.html +++ b/packages/stacks-docs/product/components/breadcrumbs.html @@ -9,7 +9,9 @@
{% header "h2", "Classes" %} {% assign docsItems = breadcrumbs.classes %} + {% assign col1Classes = "s-table--cell4"%} {% assign col2Classes = "s-table--cell3"%} + {% assign col3Heading = "" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/button-groups.html b/packages/stacks-docs/product/components/button-groups.html index c72109d1ca..e7a4e704a5 100644 --- a/packages/stacks-docs/product/components/button-groups.html +++ b/packages/stacks-docs/product/components/button-groups.html @@ -9,6 +9,8 @@
{% header "h2", "Classes" %} {% assign docsItems = button-groups.classes %} + {% assign col2Heading = "" %} + {% assign col3Heading = "" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/cards.html b/packages/stacks-docs/product/components/cards.html index c24bba8d0e..3212c2dec2 100644 --- a/packages/stacks-docs/product/components/cards.html +++ b/packages/stacks-docs/product/components/cards.html @@ -9,6 +9,7 @@
{% header "h2", "Classes" %} {% assign docsItems = cards.classes %} + {% assign col2Heading = "" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/checkbox.html b/packages/stacks-docs/product/components/checkbox.html index 60d884f3f4..8207c58a9c 100644 --- a/packages/stacks-docs/product/components/checkbox.html +++ b/packages/stacks-docs/product/components/checkbox.html @@ -11,6 +11,7 @@ {% header "h2", "Classes" %} {% assign docsItems = checkbox_radio.checkbox-classes %} {% assign col1Classes = "s-table--cell4" %} + {% assign col2Heading = "" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/code-blocks.html b/packages/stacks-docs/product/components/code-blocks.html index 680fc1dc79..ed0e7e48fc 100644 --- a/packages/stacks-docs/product/components/code-blocks.html +++ b/packages/stacks-docs/product/components/code-blocks.html @@ -8,7 +8,8 @@
{% header "h2", "Classes" %} {% assign docsItems = code-blocks.classes %} - {% assign col2Classes = "s-table--cell3" %} + {% assign col2Heading = "" %} + {% assign col3Classes = "s-table--cell3" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/empty-states.html b/packages/stacks-docs/product/components/empty-states.html index b10c725a38..87bace788c 100644 --- a/packages/stacks-docs/product/components/empty-states.html +++ b/packages/stacks-docs/product/components/empty-states.html @@ -10,6 +10,8 @@
{% header "h2", "Classes" %} {% assign docsItems = empty-states.classes %} + {% assign col2Heading = "" %} + {% assign col3Heading = "" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/expandable.html b/packages/stacks-docs/product/components/expandable.html index 76e5ca82c0..e9eb23e314 100644 --- a/packages/stacks-docs/product/components/expandable.html +++ b/packages/stacks-docs/product/components/expandable.html @@ -9,8 +9,9 @@
{% header "h2", "Classes" %} {% assign docsItems = expandable.classes %} - {% assign col1Classes = "s-table--cell4" %} + {% assign col1Classes = "s-table--cell3" %} {% assign col2Classes = "s-table--cell3" %} + {% assign col3Classes = "s-table--cell3" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/link-previews.html b/packages/stacks-docs/product/components/link-previews.html index 1dfd059bc3..d8c3d99246 100644 --- a/packages/stacks-docs/product/components/link-previews.html +++ b/packages/stacks-docs/product/components/link-previews.html @@ -8,8 +8,9 @@ {% header "h2", "Classes" %} {% assign docsItems = link-previews.classes %} {% assign col1Classes = "s-table--cell4" %} - {% assign col2Classes = "s-table--cell3" %} - {% assign col3Text = "Description" %} + {% assign col2Classes = "s-table--cell4" %} + {% assign col3Heading = "" %} + {% assign col4Heading = "Description" %} {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/links.html b/packages/stacks-docs/product/components/links.html index d96bffe3b4..e619dae754 100644 --- a/packages/stacks-docs/product/components/links.html +++ b/packages/stacks-docs/product/components/links.html @@ -10,6 +10,7 @@
{% header "h3", "Link classes" %} {% assign docsItems = links.link-classes %} + {% assign col2Heading = "" %} {% include "docs-table.html" %}
@@ -49,7 +50,8 @@ {% header "h3", "Anchor classes" %} {% assign docsItems = links.anchors-classes %} {% assign col1Classes = "s-table--cell3" %} - {% assign col2Classes = "s-table--cell2" %} + {% assign col3Classes = "s-table--cell2" %} + {% assign col2Heading = "" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/loader.html b/packages/stacks-docs/product/components/loader.html index e3f75e4859..55add7716d 100644 --- a/packages/stacks-docs/product/components/loader.html +++ b/packages/stacks-docs/product/components/loader.html @@ -35,7 +35,8 @@
{% header "h3", "Sizes" %} {% assign docsItems = loader.sizes-classes %} - {% assign col2Classes = "s-table--cell3" %} - {% assign col3Text = "Example" %} + {% assign col3Classes = "s-table--cell3" %} + {% assign col2Heading = "" %} + {% assign col4Heading = "Example" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/menus.html b/packages/stacks-docs/product/components/menus.html index 27a835607f..3014ae9cc4 100644 --- a/packages/stacks-docs/product/components/menus.html +++ b/packages/stacks-docs/product/components/menus.html @@ -9,8 +9,8 @@
{% header "h2", "Classes" %} {% assign docsItems = menus.classes %} - {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} + {% assign col3Classes = "s-table--cell3" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/modals.html b/packages/stacks-docs/product/components/modals.html index d7d70e4c81..588417f618 100644 --- a/packages/stacks-docs/product/components/modals.html +++ b/packages/stacks-docs/product/components/modals.html @@ -10,7 +10,6 @@
{% header "h2", "Classes" %} {% assign docsItems = modals.classes %} - {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/navigation.html b/packages/stacks-docs/product/components/navigation.html index 76f4f86af9..03ca2a5066 100644 --- a/packages/stacks-docs/product/components/navigation.html +++ b/packages/stacks-docs/product/components/navigation.html @@ -11,7 +11,6 @@ {% header "h2", "Classes" %} {% assign docsItems = navigation.classes %} {% assign col1Classes = "s-table--cell4" %} - {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %} {% for item in navigation.navigation-attributes %} diff --git a/packages/stacks-docs/product/components/notices.html b/packages/stacks-docs/product/components/notices.html index 70dd241534..f7a05e6ef8 100644 --- a/packages/stacks-docs/product/components/notices.html +++ b/packages/stacks-docs/product/components/notices.html @@ -20,8 +20,9 @@ {% assign tableId = "docs-accessibility-table" %} {% assign docsItems = notices.accessibility %} {% assign expandableClassesTable = true %} - {% assign col1Text = "Item" %} + {% assign col1Heading = "Item" %} {% assign col1Classes = "s-table--cell4" %} + {% assign col2Heading = "" %} {% assign expandableBtnText = "Show all accessibility items" %} {% include "docs-table.html" %}
@@ -227,8 +228,9 @@ {% header "h4", "Attributes" %} {% assign docsItems = notices.javascript.attributes %} - {% assign col1Text = "Attribute" %} + {% assign col1Heading = "Attribute" %} {% assign col1Classes = "s-table--cell5" %} + {% assign col2Heading = "" %} {% assign tableId = "docs-javascript-attributes-table" %}
{% include "docs-table.html" %} @@ -236,7 +238,8 @@ {% header "h4", "Events" %} {% assign docsItems = notices.javascript.events %} - {% assign col1Text = "Event" %} + {% assign col1Heading = "Event" %} + {% assign col2Heading = "" %} {% assign tableId = "docs-javascript-events-table" %}
{% include "docs-table.html" %} @@ -244,8 +247,9 @@ {% header "h4", "Event details" %} {% assign docsItems = notices.javascript.eventDetails %} - {% assign col1Text = "event.detail" %} - {% assign col2Text = "Applicable events" %} + {% assign col1Heading = "event.detail" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Applicable events" %} {% assign tableId = "docs-javascript-event-details-table" %}
{% include "docs-table.html" %} @@ -256,8 +260,9 @@ The following helpers are available to manually show and hide a toast notice.

{% assign docsItems = notices.javascript.helpers %} - {% assign col1Text = "Function" %} - {% assign col2Text = "Parameters" %} + {% assign col1Heading = "Function" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Parameters" %} {% assign tableId = "docs-javascript-helpers-table" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/page-titles.html b/packages/stacks-docs/product/components/page-titles.html index 6e8dfef09e..8123de2148 100644 --- a/packages/stacks-docs/product/components/page-titles.html +++ b/packages/stacks-docs/product/components/page-titles.html @@ -9,6 +9,8 @@ {% header "h2", "Classes" %} {% assign docsItems = page-titles.classes %} {% assign col1Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign col3Heading = "" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html index 8be398033c..5eee2feeac 100644 --- a/packages/stacks-docs/product/components/pagination.html +++ b/packages/stacks-docs/product/components/pagination.html @@ -10,8 +10,7 @@
{% header "h2", "Classes" %} {% assign docsItems = pagination-component.classes %} - {% assign col1Classes = "s-table--cell4" %} - {% assign col2Classes = "s-table--cell3" %} + {% assign col3Classes = "s-table--cell3" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/popovers.html b/packages/stacks-docs/product/components/popovers.html index 885e76ee54..09e2f22217 100644 --- a/packages/stacks-docs/product/components/popovers.html +++ b/packages/stacks-docs/product/components/popovers.html @@ -13,8 +13,6 @@ {% header "h2", "Classes" %} {% assign tableId = "popovers-classes-table" %} {% assign docsItems = popovers.classes %} - {% assign col1Classes = "s-table--cell4" %} - {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %}
@@ -28,8 +26,9 @@ {% assign tableId = "popovers-interactive-attributes-table" %} {% assign docsItems = popovers.interactiveAttributes %} {% assign col1Classes = "s-table--cell4" %} - {% assign col1Text = "Attribute" %} - {% assign col2Text = "Applied to" %} + {% assign col1Heading = "Attribute" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Applied to" %} {% assign expandableClassesTable = true %} {% assign expandableBtnText = "Show all interactive attributes" %} {% include "docs-table.html" %} @@ -39,9 +38,9 @@ {% header "h3", "Interactive Events" %} {% assign tableId = "popovers-interactive-events-table" %} {% assign docsItems = popovers.interactiveEvents %} - {% assign col1Classes = "s-table--cell4" %} - {% assign col1Text = "Event" %} - {% assign col2Text = "Element" %} + {% assign col1Heading = "Event" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "" %} {% include "docs-table.html" %}
@@ -50,8 +49,9 @@ {% assign tableId = "popovers-dispatched-events-table" %} {% assign docsItems = popovers.dispatchedEvents %} {% assign col1Classes = "s-table--cell4" %} - {% assign col1Text = "Event" %} - {% assign col2Text = "Element" %} + {% assign col1Heading = "Event" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Element" %} {% include "docs-table.html" %}
@@ -299,9 +299,9 @@

Lorem ipsum

{% header "h3", "Tooltip hover attributes" %} {% assign tableId = "popovers-tooltip-hover-attributes-table" %} {% assign docsItems = popovers.tooltipHoverAttributes %} - {% assign col1Classes = "s-table--cell4" %} - {% assign col1Text = "Attribute" %} - {% assign col2Text = "Applied to" %} + {% assign col1Heading = "Attribute" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Applied to" %} {% assign expandableClassesTable = true %} {% assign expandableBtnText = "Show all tooltip hover attributes" %} {% include "docs-table.html" %} @@ -312,8 +312,9 @@

Lorem ipsum

{% assign tableId = "popovers-tooltip-hover-events-table" %} {% assign docsItems = popovers.tooltipHoverEvents %} {% assign col1Classes = "s-table--cell4" %} - {% assign col1Text = "Event" %} - {% assign col2Text = "Element" %} + {% assign col1Heading = "Event" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Element" %} {% assign expandableClassesTable = true %} {% assign expandableBtnText = "Show all tooltip hover events" %} {% include "docs-table.html" %} @@ -324,8 +325,9 @@

Lorem ipsum

{% assign tableId = "popovers-tooltip-dispatched-events-table" %} {% assign docsItems = popovers.tooltipDispatchedEvents %} {% assign col1Classes = "s-table--cell4" %} - {% assign col1Text = "Event" %} - {% assign col2Text = "Element" %} + {% assign col1Heading = "Event" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Element" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/post-summary.html b/packages/stacks-docs/product/components/post-summary.html index d091789f55..e6f38c2769 100644 --- a/packages/stacks-docs/product/components/post-summary.html +++ b/packages/stacks-docs/product/components/post-summary.html @@ -10,8 +10,8 @@ {% header "h2", "Classes" %} {% assign tableId = "post-summary-classes-table" %} {% assign docsItems = post-summary.classes %} - {% assign col1Classes = "s-table--cell4" %} - {% assign col2Classes = "s-table--cell4" %} + {% assign col2Classes = "s-table--cell3" %} + {% assign col3Classes = "s-table--cell3" %} {% assign expandableClassesTable = true %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/progress-bars.html b/packages/stacks-docs/product/components/progress-bars.html index 3af5ff4eb8..bad0506754 100644 --- a/packages/stacks-docs/product/components/progress-bars.html +++ b/packages/stacks-docs/product/components/progress-bars.html @@ -8,8 +8,7 @@ {% header "h2", "Classes" %} {% assign tableId = "progress-bars-classes-table" %} {% assign docsItems = progress-bars.classes %} - {% assign col1Classes = "s-table--cell4" %} - {% assign col2Classes = "s-table--cell3" %} + {% assign col1Classes = "s-table--cell3" %} {% assign expandableClassesTable = false %} {% include "docs-table.html" %}
@@ -19,9 +18,10 @@ {% assign tableId = "progress-bars-parameters-table" %} {% assign docsItems = progress-bars.parameters %} {% assign col1Classes = "s-table--cell4" %} - {% assign col2Classes = "s-table--cell3" %} - {% assign col1Text = "Parameter" %} - {% assign col2Text = "Applies to" %} + {% assign col2Heading = "" %} + {% assign col3Classes = "s-table--cell3" %} + {% assign col1Heading = "Parameter" %} + {% assign col3Heading = "Applies to" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/prose.html b/packages/stacks-docs/product/components/prose.html index cf3e513aea..6dffe26cf5 100644 --- a/packages/stacks-docs/product/components/prose.html +++ b/packages/stacks-docs/product/components/prose.html @@ -10,8 +10,7 @@
{% header "h2", "Parameters" %} {% assign docsItems = prose.classes %} - {% assign col1Classes = "s-table--cell4" %} - {% assign col2Classes = "s-table--cell3" %} + {% assign col2Heading = "" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/radio.html b/packages/stacks-docs/product/components/radio.html index 66326d876c..f0f9862e30 100644 --- a/packages/stacks-docs/product/components/radio.html +++ b/packages/stacks-docs/product/components/radio.html @@ -11,6 +11,7 @@ {% header "h2", "Classes" %} {% assign docsItems = checkbox_radio.radio-classes %} {% assign col1Classes = "s-table--cell4" %} + {% assign col2Heading = "" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/select.html b/packages/stacks-docs/product/components/select.html index 4ace306e97..c9752bd821 100644 --- a/packages/stacks-docs/product/components/select.html +++ b/packages/stacks-docs/product/components/select.html @@ -11,7 +11,8 @@ {% header "h2", "Classes" %} {% assign docsItems = select.classes %} {% assign col1Classes = "s-table--cell4" %} - {% assign col2Classes = "s-table--cell3" %} + {% assign col3Classes = "s-table--cell3" %} + {% assign col2Heading = "" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/sidebar-widgets.html b/packages/stacks-docs/product/components/sidebar-widgets.html index d859675943..30d1f9d4c0 100644 --- a/packages/stacks-docs/product/components/sidebar-widgets.html +++ b/packages/stacks-docs/product/components/sidebar-widgets.html @@ -10,6 +10,7 @@ {% assign docsItems = sidebar-widgets.classes %} {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} + {% assign col3Heading = "" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/tables.html b/packages/stacks-docs/product/components/tables.html index 5028b15f24..30f682ca3f 100644 --- a/packages/stacks-docs/product/components/tables.html +++ b/packages/stacks-docs/product/components/tables.html @@ -9,7 +9,6 @@
{% header "h2", "Classes" %} {% assign docsItems = tables.classes %} - {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %}
diff --git a/packages/stacks-docs/product/components/topbar.html b/packages/stacks-docs/product/components/topbar.html index 7cf0581c57..49a706625e 100644 --- a/packages/stacks-docs/product/components/topbar.html +++ b/packages/stacks-docs/product/components/topbar.html @@ -8,7 +8,6 @@
{% header "h2", "Classes" %} {% assign docsItems = topbar.classes %} - {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% assign expandableClassesTable = true %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/uploader.html b/packages/stacks-docs/product/components/uploader.html index d104170103..f1f614f763 100644 --- a/packages/stacks-docs/product/components/uploader.html +++ b/packages/stacks-docs/product/components/uploader.html @@ -10,7 +10,6 @@ {% header "h2", "Classes" %} {% assign tableId = "uploader-classes-table" %} {% assign docsItems = uploader.classes %} - {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% assign expandableClassesTable = true %} {% include "docs-table.html" %} @@ -23,7 +22,8 @@ {% assign tableId = "uploader-attributes-table" %} {% assign docsItems = uploader.attributes %} {% assign col1Classes = "s-table--cell4" %} - {% assign col2Classes = "s-table--cell3" %} + {% assign col3Classes = "s-table--cell3" %} + {% assign col2Heading = "" %} {% assign expandableClassesTable = true %} {% assign expandableBtnText = "Show all attributes" %} {% include "docs-table.html" %} diff --git a/packages/stacks-docs/product/components/user-cards.html b/packages/stacks-docs/product/components/user-cards.html index 5c5e5d4f9a..af515a24e4 100644 --- a/packages/stacks-docs/product/components/user-cards.html +++ b/packages/stacks-docs/product/components/user-cards.html @@ -234,7 +234,8 @@ {% header "h3", "Sizes" %} {% assign docsItems = user-cards.sizes %} {% assign tableId = "user-cards-sizes-table" %} - {% assign col2Text = "Size" %} + {% assign col2Heading = "" %} + {% assign col3Heading = "Size" %} {% include "docs-table.html" %} {% header "h4", "Small" %} @@ -401,7 +402,7 @@
{% endhighlight %}
- {% for user in user-card.large %} + {% for user in user-cards.large %}
@@ -543,7 +544,7 @@
{% endhighlight %}
- {% for user in user-card.original-poster %} + {% for user in user-cards.original-poster %}
@@ -652,7 +653,7 @@
{% endhighlight %}
- {% for user in user-card.new-contributor %} + {% for user in user-cards.new-contributor %}
@@ -730,7 +731,7 @@
{% endhighlight %}
- {% for user in user-card.deleted-user %} + {% for user in user-cards.deleted-user %}
{% if user.size == 'small' %} @@ -764,7 +765,7 @@ - {% for bling in user-card.additional-bling %} + {% for bling in user-cards.additional-bling %} {{ bling.name }} {% if bling.class == "N/A" %} @@ -879,7 +880,7 @@
{% endhighlight %}
- {% for user in user-card.recognized-member %} + {% for user in user-cards.recognized-member %}
{% if user.size != 'small' %}
@@ -1037,7 +1038,7 @@
{% endhighlight %}
- {% for user in user-card.awarded %} + {% for user in user-cards.awarded %}
diff --git a/packages/stacks-docs/product/components/vote.html b/packages/stacks-docs/product/components/vote.html index 36f8f6a19e..f841dca776 100644 --- a/packages/stacks-docs/product/components/vote.html +++ b/packages/stacks-docs/product/components/vote.html @@ -10,7 +10,6 @@
{% header "h2", "Classes" %} {% assign docsItems = vote.classes %} - {% assign col1Classes = "s-table--cell4" %} {% assign col2Classes = "s-table--cell3" %} {% include "docs-table.html" %}