diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index ababb11c82d..b0f0b110900 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,6 +1,6 @@ # Default to system one design and one dev -* @carbon-design-system/developers-system @carbon-design-system/design +* @carbon-design-system/developers-system-reviewers @carbon-design-system/design # Diana Tran is the owner for Sustainability Software Patterns @@ -8,7 +8,7 @@ src/pages/community/patterns/login-pattern/* @dianatran18 @lukefirth # Eliad Moosavi and Natasha Decoste are the code owners for Data Visualization -src/pages/data-visualization/* @theiliad @natashadecoste +src/pages/data-visualization/* @theiliad # @natashadecoste # Zvonimir Fras for Angular tutorial @@ -16,4 +16,4 @@ src/pages/data-visualization/* @theiliad @natashadecoste # Lee Chase for Vue tutorial -/src/pages/tutorial/vue/* @lee-chase \ No newline at end of file +/src/pages/tutorial/vue/* @lee-chase diff --git a/.github/ISSUE_TEMPLATE/docs-issue.yaml b/.github/ISSUE_TEMPLATE/docs-issue.yaml new file mode 100644 index 00000000000..f66a7fc0ec6 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/docs-issue.yaml @@ -0,0 +1,96 @@ +name: Documentation issue 📖 +description: + Report missing, incorrect, or otherwise inconsistent documentation here. +title: '[Docs]: ' +labels: 'type: bug 🐛' +body: + - type: markdown + attributes: + value: '## Welcome!' + - type: markdown + attributes: + value: + Thanks for taking the time to fill out this form that will help us make + more clear documention. + + - type: dropdown + id: project + attributes: + label: Project + description: Where is the problem you're identifying in the documentation? + multiple: false + options: + - https://www.carbondesignsystem.com + - https://react.carbondesignsystem.com + - https://github.com/carbon-design-system/carbon/tree/main/docs + validations: + required: true + + - type: input + id: section + attributes: + label: Section + description: + 'Which page are you experiencing the problem with the documentation?' + placeholder: https://carbondesignsystem.com/components/accordion/usage/ + validations: + required: true + + - type: textarea + id: problem + attributes: + label: Problem + description: + 'Describe the problem you’re experiencing in the documentation. Please + attach any screen shots or videos to illustrate the problem.' + placeholder: + The abc component is missing usage instructions about the xyz prop. + validations: + required: true + + - type: textarea + id: solution + attributes: + label: Solution + description: + 'What would you expect to see instead? Please attach any screen shots or + videos to illustrate a possible solution.' + placeholder: _Your amazing idea here_ + + - type: dropdown + id: severity + attributes: + label: Suggested Severity + description: + 'Read more to understand our [severity + levels](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/support.md#severity)' + options: + - 'Severity 1 = The documentation damages the brand or exposes + intellectual property.' + - 'Severity 2 = The documentation is wrong or missing major details. It + conflicts with what we are saying in another part of the system. ' + - "Severity 3 = The documentation is mis-leading, somewhat true, missing + minor details, or grammatically incorrect. It doesn't present + conflicts with other parts of the design system." + - 'Severity 4 = Unrelated to a user task. Content has a typo.' + + - type: input + id: application + attributes: + label: Application + description: 'What application do you work on?' + + - type: checkboxes + id: terms + attributes: + label: Code of Conduct + description: Please confirm the following + options: + - label: + I agree to follow this project's [Code of + Conduct](https://github.com/carbon-design-system/carbon/blob/f555616971a03fd454c0f4daea184adf41fff05b/.github/CODE_OF_CONDUCT.md) + required: true + - label: + I checked the [current + issues](https://github.com/carbon-design-system/carbon/issues) for + duplicate problems diff --git a/.gitignore b/.gitignore index 33c5078d629..6962d4e2256 100644 --- a/.gitignore +++ b/.gitignore @@ -113,3 +113,6 @@ build-timestamp .now .vercel + +# Yarn install state +.yarn/install-state.gz diff --git a/api/survey.ts b/api/survey.ts deleted file mode 100644 index a1cea8e6009..00000000000 --- a/api/survey.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { NowRequest, NowResponse } from '@now/node'; -import fetch, { FetchError } from 'node-fetch'; - -import { WebClient } from '@slack/web-api'; - -require('dotenv').config(); //eslint-disable-line @typescript-eslint/no-var-requires - -const permittedOrigins = [ - 'https://www.carbondesignsystem.com', - 'https://w3.ibm.com', -]; - -module.exports = async (req: NowRequest, res: NowResponse) => { - if (req.cookies.survey_recently_submitted) { - return res.json({ error: 'Survey recently submitted.' }); - } - - if (!process.env.SURVEYGIZMO_REQUEST_URI) { - return res.json({ error: 'Invalid SurveyGizmo request uri.' }); - } - - if (!process.env.SLACK_TOKEN || !process.env.SLACK_CHANNEL) { - return res.json({ error: 'Invalid Slack token or channel.' }); - } - - // Initialize Slack web client - const slack = new WebClient(process.env.SLACK_TOKEN); - - // Only allow requests from specified urls - const { origin } = req.headers; - if (!origin || Array.isArray(origin) || !permittedOrigins.includes(origin)) { - return res.json({ - error: `Request sent from unauthorized origin: ${origin}`, - }); - } - - // Prepare data for SurveyGizmo - const { experience, comment, path } = JSON.parse(req.body); - const surveyBody = JSON.stringify({ - data: { - '2': { value: experience }, - '3': { value: comment }, - '4': { value: path }, - }, - }); - - await fetch(process.env.SURVEYGIZMO_REQUEST_URI, { - method: 'PUT', - body: surveyBody, - headers: { - 'Content-Type': 'application/json', - }, - }).catch((error: FetchError) => res.json({ error: error.message })); - - // Prepare data for Slack - const emoji = - experience === 'Negative' - ? ':disappointed:' - : experience === 'Neutral' - ? ':neutral_face:' - : ':grinning:'; - - const blocks = [ - { - type: 'section', - text: { - type: 'mrkdwn', - text: `${emoji} *${experience}* web page experience ${emoji}`, - }, - }, - ]; - - if (path) { - blocks[0].text.text += `\n>*Path:*\n>${path}`; - } - - if (comment) { - blocks[0].text.text += `\n>*Comment:*\n>${comment}`; - } - - await slack.chat.postMessage({ - blocks, - channel: process.env.SLACK_CHANNEL, - } as any); - - // Set a "recently submitted" cookie that expires after one minute to mitigate spam - res.setHeader( - 'Set-Cookie', - 'survey_recently_submitted=true; Max-Age=60; Secure; SameSite=None' - ); - - res.status(200).send('success'); -}; diff --git a/package.json b/package.json index 83ab047829a..b36f7efa771 100644 --- a/package.json +++ b/package.json @@ -39,12 +39,12 @@ "dependencies": { "@babel/core": "^7.15.8", "@carbon/charts-react": "0.55.0", - "@carbon/elements": "^11.40.0", - "@carbon/icons": "^11.36.0", - "@carbon/icons-react": "^11.36.0", - "@carbon/pictograms": "^12.31.0", - "@carbon/pictograms-react": "^11.57.0", - "@carbon/react": "^1.51.0", + "@carbon/elements": "^11.49.0", + "@carbon/icons": "^11.45.0", + "@carbon/icons-react": "^11.45.0", + "@carbon/pictograms": "^12.37.1", + "@carbon/pictograms-react": "^11.63.1", + "@carbon/react": "^1.61.0", "@loadable/component": "^5.15.2", "@slack/web-api": "^5.11.0", "babel-preset-env": "^1.7.0", @@ -57,7 +57,7 @@ "gatsby": "^4.25.7", "gatsby-image": "^3.7.1", "gatsby-plugin-image": "^2.9.0", - "gatsby-theme-carbon": "^3.4.13", + "gatsby-theme-carbon": "^3.4.19", "lodash-es": "^4.17.15", "markdown-it": "^12.3.2", "nanoid": "^2.1.11", diff --git a/src/components/A11yStatus/A11yStatus.js b/src/components/A11yStatus/A11yStatus.js index 22f199b6cfb..14ae613508d 100644 --- a/src/components/A11yStatus/A11yStatus.js +++ b/src/components/A11yStatus/A11yStatus.js @@ -24,7 +24,6 @@ import { help, hidden, moreLink, - table, variant, version, headingLink, @@ -397,10 +396,7 @@ const A11yStatus = ({ components, layout }) => { Framework: React (@carbon/react)

- + diff --git a/src/components/A11yStatusTag/A11yStatusTag.js b/src/components/A11yStatusTag/A11yStatusTag.js index 1f8e354fd5a..5b3e66d4ba8 100644 --- a/src/components/A11yStatusTag/A11yStatusTag.js +++ b/src/components/A11yStatusTag/A11yStatusTag.js @@ -43,15 +43,15 @@ const A11yStatusTag = ({ tag, tooltip }) => { const { color, text, definition } = tags[tag]; - return ( + return tooltip ? ( + + + {text} + + + ) : ( - {tooltip ? ( - - {text} - - ) : ( - text - )} + {text} ); }; diff --git a/src/components/A11yStatusTag/a11y-status-tag.module.scss b/src/components/A11yStatusTag/a11y-status-tag.module.scss index ca8157c1799..8559eda696a 100644 --- a/src/components/A11yStatusTag/a11y-status-tag.module.scss +++ b/src/components/A11yStatusTag/a11y-status-tag.module.scss @@ -1,3 +1,12 @@ :global(.page-table) .tag { margin-left: 0; } + +:global(.cds--popover-container .cds--definition-term) { + border: none; +} + +:global(.cds--popover-container .cds--definition-term) .tag span { + border-block-end: 1px dotted $border-strong; + cursor: pointer; +} diff --git a/src/components/ColorTokenTable/ColorTokenTable.js b/src/components/ColorTokenTable/ColorTokenTable.js index 704b7af51bc..e41b51385e8 100644 --- a/src/components/ColorTokenTable/ColorTokenTable.js +++ b/src/components/ColorTokenTable/ColorTokenTable.js @@ -435,6 +435,75 @@ export default class ColorTokenTable extends React.Component {
+
+

AI

+
+
+ + + + + + + + + + {Object.keys(colorTokens['ai']).map((token, i) => + this.renderToken( + token, + colorTokens['ai'][token], + i + ) + )} + +
TokenRoleValue
+
+
+

Chat

+
+
+ + + + + + + + + + {Object.keys(colorTokens['chat']).map((token, i) => + this.renderToken( + token, + colorTokens['chat'][token], + i + ) + )} + +
TokenRoleValue
+
+
+

Chat button

+
+
+ + + + + + + + + + {Object.keys(colorTokens['chat-button']).map((token, i) => + this.renderToken( + token, + colorTokens['chat-button'][token], + i + ) + )} + +
TokenRoleValue
+
); diff --git a/src/components/ComponentOverview/images/Structured list.svg b/src/components/ComponentOverview/images/Structured list.svg index 76268a8d686..1e920568797 100644 --- a/src/components/ComponentOverview/images/Structured list.svg +++ b/src/components/ComponentOverview/images/Structured list.svg @@ -3,32 +3,42 @@ - - - - - - - - - - - - - - - - - - + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Homepage/Carbon-AI-banner-image.jpg b/src/components/Homepage/Carbon-AI-banner-image.jpg new file mode 100644 index 00000000000..f074c0e3fbb Binary files /dev/null and b/src/components/Homepage/Carbon-AI-banner-image.jpg differ diff --git a/src/components/Homepage/Carbon-V11-Banner-Image.jpg b/src/components/Homepage/Carbon-V11-Banner-Image.jpg deleted file mode 100644 index ecd500a3554..00000000000 Binary files a/src/components/Homepage/Carbon-V11-Banner-Image.jpg and /dev/null differ diff --git a/src/data/guidelines/color-tokens.js b/src/data/guidelines/color-tokens.js index 92a144c3fd1..2b017d3728c 100644 --- a/src/data/guidelines/color-tokens.js +++ b/src/data/guidelines/color-tokens.js @@ -1482,6 +1482,69 @@ const colorTokens = { }, }, }, + '$link-inverse-hover': { + role: ['Hover color for links on $background-inverse backgrounds'], + value: { + white: { + name: 'Blue 30', + hex: '#a6c8ff', + }, + g10: { + name: 'Blue 30', + hex: '#a6c8ff', + }, + g90: { + name: 'Blue 70', + hex: '#0043ce', + }, + g100: { + name: 'Blue 70', + hex: '#0043ce', + }, + }, + }, + '$link-inverse-active': { + role: ['Active color for links on $background-inverse backgrounds'], + value: { + white: { + name: 'Gray 10', + hex: '#f4f4f4', + }, + g10: { + name: 'Gray 10', + hex: '#f4f4f4', + }, + g90: { + name: 'Gray 100', + hex: '#161616', + }, + g100: { + name: 'Gray 100', + hex: '#161616', + }, + }, + }, + '$link-inverse-visited': { + role: ['Color for visited links on $background-inverse backgrounds'], + value: { + white: { + name: 'Purple 40', + hex: '#be95ff', + }, + g10: { + name: 'Purple 40', + hex: '#be95ff', + }, + g90: { + name: 'Purple 60', + hex: '#8a3ffc', + }, + g100: { + name: 'Purple 60', + hex: '#8a3ffc', + }, + }, + }, '$link-visited': { role: ['Color for visited links'], value: { @@ -2992,11 +3055,11 @@ const colorTokens = { }, g90: { name: 'Cyan 70 hover', - hex: '#bae6ff', + hex: '#0066bd', }, g100: { name: 'Cyan 70 hover', - hex: '#bae6ff', + hex: '#0066bd', }, }, }, @@ -3190,6 +3253,730 @@ const colorTokens = { }, }, }, + ai: { + '$ai-aura-start': { + role: ['Linear gradient start value for large AI layers'], + value: { + white: { + name: 'Blue 50, 10%', + hex: '#4589ff @ 10%', + }, + g10: { + name: 'Blue 50, 10%', + hex: '#4589ff @ 10%', + }, + g90: { + name: 'Blue 50, 10%', + hex: '#4589ff @ 10%', + }, + g100: { + name: 'Blue 50, 10%', + hex: '#4589ff @ 10%', + }, + }, + }, + '$ai-aura-start-sm': { + role: ['Linear gradient start value for small AI layers'], + value: { + white: { + name: 'Blue 50, 16%', + hex: '#4589ff @ 16%', + }, + g10: { + name: 'Blue 50, 16%', + hex: '#4589ff @ 16%', + }, + g90: { + name: 'Blue 50, 16%', + hex: '#4589ff @ 16%', + }, + g100: { + name: 'Blue 50, 16%', + hex: '#4589ff @ 16%', + }, + }, + }, + '$ai-aura-end': { + role: ['Linear gradient start value for all AI layers'], + value: { + white: { + name: 'White, 0%', + hex: '#ffffff @ 0%', + }, + g10: { + name: 'White, 0%', + hex: '#ffffff @ 0%', + }, + g90: { + name: 'Black, 0%', + hex: '#000000 @ 0%', + }, + g100: { + name: 'Black, 0%', + hex: '#000000 @ 0%', + }, + }, + }, + '$ai-aura-hover-start': { + role: ['Linear gradient start value for the AI aura hover'], + value: { + white: { + name: 'Blue 50, 32%', + hex: '#4589ff', + }, + g10: { + name: 'Blue 50, 32%', + hex: '#4589ff', + }, + g90: { + name: 'Blue 50, 40%', + hex: '#4589ff @ 40%', + }, + g100: { + name: 'Blue 50, 40%', + hex: '#4589ff @ 40%', + }, + }, + }, + '$ai-aura-hover-end': { + role: ['Linear gradient end value for the AI aura hover'], + value: { + white: { + name: 'White, 0%', + hex: '#ffffff @ 0%', + }, + g10: { + name: 'White, 0%', + hex: '#ffffff @ 0%', + }, + g90: { + name: 'Black, 0%', + hex: '#000000 @ 0%', + }, + g100: { + name: 'Black, 0%', + hex: '#000000 @ 0%', + }, + }, + }, + '$ai-aura-hover-background': { + role: ['Hover background color for AI layers'], + value: { + white: { + name: 'Blue 10', + hex: '#edf5ff', + }, + g10: { + name: 'Blue 10', + hex: '#edf5ff', + }, + g90: { + name: '$layer-hover', + hex: '#e8e8e8', + }, + g100: { + name: '$layer-hover', + hex: '#e8e8e8', + }, + }, + }, + '$ai-border-start': { + role: ['Linear gradient start value for AI borders'], + value: { + white: { + name: 'Blue 30, 64%', + hex: '#a6c8ff @ 64%', + }, + g10: { + name: 'Blue 30, 64%', + hex: '#a6c8ff @ 64%', + }, + g90: { + name: 'Blue 30, 36%', + hex: '#a6c8ff @ 36%', + }, + g100: { + name: 'Blue 30, 36%', + hex: '#a6c8ff @ 36%', + }, + }, + }, + '$ai-border-end': { + role: ['Linear gradient end value for AI borders'], + value: { + white: { + name: 'Blue 40', + hex: '#78a9ff', + }, + g10: { + name: 'Blue 40', + hex: '#78a9ff', + }, + g90: { + name: 'Red 50', + hex: '#4589ff', + }, + g100: { + name: 'Red 50', + hex: '#4589ff', + }, + }, + }, + '$ai-border-strong': { + role: [ + 'Medium contrast border for AI elements', + 'Border-bottom paired with AI fields', + '3:1 AA non-text contrast', + ], + value: { + white: { + name: 'Blue 50', + hex: '#4589ff', + }, + g10: { + name: 'Blue 50', + hex: '#4589ff', + }, + g90: { + name: 'Blue 40', + hex: '#78a9ff', + }, + g100: { + name: 'Blue 40', + hex: '#78a9ff', + }, + }, + }, + '$ai-drop-shadow': { + role: ['Drop shadow for the AI layer'], + value: { + white: { + name: 'Blue 60, 10%', + hex: '#0f62fe @ 10%', + }, + g10: { + name: 'Blue 60, 10%', + hex: '#0f62fe @ 10%', + }, + g90: { + name: 'Black, 28%', + hex: '#000000 @ 28%', + }, + g100: { + name: 'Black, 28%', + hex: '#000000 @ 28%', + }, + }, + }, + '$ai-inner-shadow': { + role: ['Inner shadow for the AI layer'], + value: { + white: { + name: 'Blue 50, 10%', + hex: '#4589ff @ 10%', + }, + g10: { + name: 'Blue 50, 10%', + hex: '#4589ff @ 10%', + }, + g90: { + name: 'Blue 50, 16%', + hex: '#4589ff @ 16%', + }, + g100: { + name: 'Blue 50, 16%', + hex: '#4589ff @ 16%', + }, + }, + }, + '$ai-popover-background': { + role: ['Background color for the AI explainability popover'], + value: { + white: { + name: 'White', + hex: '#ffffff', + }, + g10: { + name: 'White', + hex: '#ffffff', + }, + g90: { + name: 'Gray 100', + hex: '#161616', + }, + g100: { + name: 'Gray 100', + hex: '#161616', + }, + }, + }, + '$ai-popover-shadow-outer-01': { + role: ['1 of 2 shadow colors for the AI explainability popover'], + value: { + white: { + name: 'Blue 70, 6%', + hex: '#0043ce @ 6%', + }, + g10: { + name: 'Blue 70, 6%', + hex: '#0043ce @ 6%', + }, + g90: { + name: 'Black, 12%', + hex: '#000000 @ 12%', + }, + g100: { + name: 'Black, 12%', + hex: '#000000 @ 12%', + }, + }, + }, + '$ai-popover-shadow-outer-02': { + role: ['2 of 2 shadow colors for the AI explainability popover'], + value: { + white: { + name: 'Black, 4%', + hex: '#000000 @ 4%', + }, + g10: { + name: 'Black, 4%', + hex: '#000000 @ 4%', + }, + g90: { + name: 'Black, 8%', + hex: '#000000 @ 8%', + }, + g100: { + name: 'Black, 8%', + hex: '#000000 @ 8%', + }, + }, + }, + '$ai-skeleton-element': { + role: ['Skeleton color for AI text and UI elements'], + value: { + white: { + name: 'Blue 50', + hex: '#4589ff', + }, + g10: { + name: 'Blue 50', + hex: '#4589ff', + }, + g90: { + name: 'Blue 40, 30%', + hex: '#78a9ff @ 30%', + }, + g100: { + name: 'Blue 40, 30%', + hex: '#78a9ff @ 30%', + }, + }, + }, + '$ai-skeleton-background': { + role: ['Skeleton color for AI containers'], + value: { + white: { + name: 'Blue 20', + hex: '#d0e2ff', + }, + g10: { + name: 'Blue 20', + hex: '#d0e2ff', + }, + g90: { + name: 'Blue 40, 50%', + hex: '#78a9ff @ 50%', + }, + g100: { + name: 'Blue 40, 50%', + hex: '#78a9ff @ 50%', + }, + }, + }, + '$ai-overlay': { + role: ['Background overlay for AI components'], + value: { + white: { + name: 'Blue 100, 50%', + hex: '#001141 @ 50%', + }, + g10: { + name: 'Blue 100, 50%', + hex: '#001141 @ 50%', + }, + g90: { + name: 'Black, 50%', + hex: '#000000 @ 50%', + }, + g100: { + name: 'Black, 50%', + hex: '#000000 @ 50%', + }, + }, + }, + }, + chat: { + '$chat-avatar-bot': { + role: ['Chat avatar background color for bots'], + value: { + white: { + name: 'Gray 60', + hex: '#6f6f6f', + }, + g10: { + name: 'Gray 60', + hex: '#6f6f6f', + }, + g90: { + name: 'Gray 50', + hex: '#8d8d8d', + }, + g100: { + name: 'Gray 50', + hex: '#8d8d8d', + }, + }, + }, + '$chat-avatar-agent': { + role: ['Chat avatar background color for agents'], + value: { + white: { + name: 'Gray 80', + hex: '#393939', + }, + g10: { + name: 'Gray 80', + hex: '#393939', + }, + g90: { + name: 'Gray 30', + hex: '#c6c6c6', + }, + g100: { + name: 'Gray 30', + hex: '#c6c6c6', + }, + }, + }, + '$chat-avatar-user': { + role: ['Chat avatar background color for users'], + value: { + white: { + name: 'Blue 60', + hex: '#0f62fe', + }, + g10: { + name: 'Blue 60', + hex: '#0f62fe', + }, + g90: { + name: 'Blue 50', + hex: '#4589ff', + }, + g100: { + name: 'Blue 50', + hex: '#4589ff', + }, + }, + }, + '$chat-bubble-user': { + role: ['Chat bubble background color for users'], + value: { + white: { + name: 'Gray 20', + hex: '#e0e0e0', + }, + g10: { + name: 'Gray 20', + hex: '#e0e0e0', + }, + g90: { + name: 'Gray 80', + hex: '#393939', + }, + g100: { + name: 'Gray 80', + hex: '#393939', + }, + }, + }, + '$chat-bubble-agent': { + role: ['Chat bubble background color for agents'], + value: { + white: { + name: 'White', + hex: '#ffffff', + }, + g10: { + name: 'White', + hex: '#ffffff', + }, + g90: { + name: 'Gray 90', + hex: '#262626', + }, + g100: { + name: 'Gray 90', + hex: '#262626', + }, + }, + }, + '$chat-bubble-border': { + role: ['Chat bubble border color for agents'], + value: { + white: { + name: 'Gray 20', + hex: '#e0e0e0', + }, + g10: { + name: 'Gray 20', + hex: '#e0e0e0', + }, + g90: { + name: 'Gray 70', + hex: '#525252', + }, + g100: { + name: 'Gray 70', + hex: '#525252', + }, + }, + }, + '$chat-prompt-background': { + role: ['Background color for chat prompt input'], + value: { + white: { + name: 'White', + hex: '#ffffff', + }, + g10: { + name: 'White', + hex: '#ffffff', + }, + g90: { + name: 'Gray 100', + hex: '#161616', + }, + g100: { + name: 'Gray 100', + hex: '#161616', + }, + }, + }, + '$chat-prompt-border-start': { + role: ['Linear gradient start value for chat prompts border'], + value: { + white: { + name: 'Gray 10', + hex: '#f4f4f4', + }, + g10: { + name: 'Gray 10', + hex: '#f4f4f4', + }, + g90: { + name: 'Gray 90', + hex: '#262626', + }, + g100: { + name: 'Gray 90', + hex: '#262626', + }, + }, + }, + '$chat-prompt-border-end': { + role: ['Linear gradient end value for chat prompts border'], + value: { + white: { + name: 'Gray 10, 0%', + hex: '#f4f4f4 @ 0%', + }, + g10: { + name: 'Gray 10, 0%', + hex: '#f4f4f4 @ 0%', + }, + g90: { + name: 'Gray 90, 0%', + hex: '#262626 @ 0%', + }, + g100: { + name: 'Gray 90, 0%', + hex: '#262626 @ 0%', + }, + }, + }, + '$chat-shell-background': { + role: ['Chat shell background color'], + value: { + white: { + name: 'White', + hex: '#ffffff', + }, + g10: { + name: 'White', + hex: '#ffffff', + }, + g90: { + name: 'Gray 90', + hex: '#262626', + }, + g100: { + name: 'Gray 90', + hex: '#262626', + }, + }, + }, + '$chat-header-background': { + role: ['Chat header background color'], + value: { + white: { + name: 'White', + hex: '#ffffff', + }, + g10: { + name: 'White', + hex: '#ffffff', + }, + g90: { + name: 'Gray 90', + hex: '#262626', + }, + g100: { + name: 'Gray 90', + hex: '#262626', + }, + }, + }, + }, + 'chat-button': { + '$chat-button': { + role: ['Chat quick action button color'], + value: { + white: { + name: '$link-primary', + hex: '#0f62fe', + }, + g10: { + name: '$link-primary', + hex: '#0f62fe', + }, + g90: { + name: '$link-primary', + hex: '#78a9ff', + }, + g100: { + name: '$link-primary', + hex: '#78a9ff', + }, + }, + }, + '$chat-button-hover': { + role: ['Hover color for $chat-button'], + value: { + white: { + name: '$background-hover', + hex: '#8d8d8d @ 12%', + }, + g10: { + name: '$background-hover', + hex: '#8d8d8d @ 12%', + }, + g90: { + name: '$background-hover', + hex: '#8d8d8d @ 16%', + }, + g100: { + name: '$background-hover', + hex: '#8d8d8d @ 16%', + }, + }, + }, + '$chat-button-text-hover': { + role: ['Text color for hovered chat button'], + value: { + white: { + name: '$link-primary-hover', + hex: '#0043ce', + }, + g10: { + name: '$link-primary-hover', + hex: '#0043ce', + }, + g90: { + name: '$link-primary-hover', + hex: '#a6c8ff', + }, + g100: { + name: '$link-primary-hover', + hex: '#a6c8ff', + }, + }, + }, + '$chat-button-active': { + role: ['Active color for $chat-button'], + value: { + white: { + name: '$background-active', + hex: '#8d8d8d @ 50%', + }, + g10: { + name: '$background-active', + hex: '#8d8d8d @ 50%', + }, + g90: { + name: '$background-active', + hex: '#8d8d8d @ 40%', + }, + g100: { + name: '$background-active', + hex: '#8d8d8d @ 40%', + }, + }, + }, + '$chat-button-selected': { + role: ['Selected color for $chat-button'], + value: { + white: { + name: '$background-selected', + hex: '#8d8d8d @ 20%', + }, + g10: { + name: '$background-selected', + hex: '#8d8d8d @ 20%', + }, + g90: { + name: '$background-selected', + hex: '#8d8d8d @ 24%', + }, + g100: { + name: '$background-selected', + hex: '#8d8d8d @ 24%', + }, + }, + }, + '$chat-button-text-selected': { + role: ['Text color for selected chat-button'], + value: { + white: { + name: '$text-secondary', + hex: '#525252', + }, + g10: { + name: '$text-secondary', + hex: '#525252', + }, + g90: { + name: '$text-secondary', + hex: '#c6c6c6', + }, + g100: { + name: '$text-secondary', + hex: '#c6c6c6', + }, + }, + }, + }, }; -export default colorTokens; \ No newline at end of file +export default colorTokens; diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index 4af4fad5021..477a17e74b0 100644 --- a/src/data/nav-items.yaml +++ b/src/data/nav-items.yaml @@ -78,6 +78,8 @@ pages: - title: Accessibility path: /guidelines/accessibility/overview/ + - title: Carbon for AI + path: /guidelines/carbon-for-ai/ - title: Content path: /guidelines/content/overview/ - title: Components @@ -86,6 +88,8 @@ path: /components/overview/components - title: Accordion path: /components/accordion/usage/ + - title: AI label + path: /components/ai-label/usage/ - title: Breadcrumb path: /components/breadcrumb/usage/ - title: Button @@ -116,12 +120,12 @@ path: /components/list/usage/ - title: Loading path: /components/loading/usage/ - - title: Modal - path: /components/modal/usage/ - title: Menu path: /components/menu/usage/ - title: Menu buttons path: /components/menu-buttons/usage/ + - title: Modal + path: /components/modal/usage/ - title: Notification path: /components/notification/usage/ - title: Number input diff --git a/src/gatsby-theme-carbon/components/FeedbackDialog/FeedbackDialog.js b/src/gatsby-theme-carbon/components/FeedbackDialog/FeedbackDialog.js deleted file mode 100644 index bc07b6a86b1..00000000000 --- a/src/gatsby-theme-carbon/components/FeedbackDialog/FeedbackDialog.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import ThemeFeedbackDialog from 'gatsby-theme-carbon/src/components/FeedbackDialog/FeedbackDialog'; - -function onSubmit(data) { - if (process.env.NODE_ENV === 'production') { - return fetch(process.env.BACKEND_URI, { - method: 'POST', - body: JSON.stringify(data), - credentials: 'include', - mode: 'no-cors', - }); - } -} - -function FeedbackDialog({ props }) { - return ; -} - -export default FeedbackDialog; diff --git a/src/gatsby-theme-carbon/templates/Homepage.js b/src/gatsby-theme-carbon/templates/Homepage.js index e79c5ac26dc..3e2111a7f4e 100644 --- a/src/gatsby-theme-carbon/templates/Homepage.js +++ b/src/gatsby-theme-carbon/templates/Homepage.js @@ -4,7 +4,7 @@ import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage'; import { blue20, purple20, gray100 } from '@carbon/elements'; import { calloutLink, callToAction } from './Homepage.module.scss'; // import HomepageVideo from '../../components/HomepageVideo/HomepageVideo'; -import ImageV11 from '../../components/Homepage/Carbon-V11-Banner-Image.jpg'; +import ImageV11 from '../../components/Homepage/Carbon-AI-banner-image.jpg'; const FirstLeftText = () =>

Carbon Design System

; @@ -53,9 +53,9 @@ const customProps = {
diff --git a/src/pages/404.js b/src/pages/404.js index 963250d1081..7bd1de05765 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -3,7 +3,7 @@ import { FourOhFour } from 'gatsby-theme-carbon'; const links = [ { href: '/all-about-carbon/what-is-carbon', text: 'All about Carbon' }, - { href: '/components/overview', text: 'Components overview' }, + { href: '/components/overview/components', text: 'Components overview' }, { href: '/designing/get-started', text: 'Get started designing' }, { href: '/developing/get-started', text: 'Get started developing' }, ]; diff --git a/src/pages/community/contribute-a-chart.mdx b/src/pages/community/contribute-a-chart.mdx deleted file mode 100644 index cf6bb20ad8e..00000000000 --- a/src/pages/community/contribute-a-chart.mdx +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Contribute a chart -description: - Anyone can add assets to the community chart index. Maintainers can submit a - short pull request in GitHub to a chart to the index. - -tabs: ['Data visualization index', 'Contribute a chart'] ---- - - - -Anyone can add assets to the community chart index. Maintainers can submit a -short pull request in GitHub to add a chart to the index. - - - -## Add a chart using the GitHub UI - -1. In the - [index folder](https://github.com/carbon-design-system/carbon-website/tree/main/src/data/chart-index) - of the carbon-website GitHub repo, open your team folder. Create a folder if - your team doesn’t have one yet. -2. Click `Add file` (top right), then `Create new file`. -3. Name your file `chart-name.yml`, where _chart-name_ is the name of your - chart. -4. Copy and paste the following template into the `Edit new file` section of the - page and fill out the correct information for your component. - - ``` - name: chart name - website_url: >- - url of documentation / guidance page (if any) - code_url: >- - url of component code on GitHub (if any) - maintainer: name of maintainer team - description: >- - short description of purpose and usage of chart - chart_type: choose one of Comparisons | Trends | Part-to-whole | Correlations | Connections | Geospatial | Other - complexity: choose one of Basic | Advanced - platform: Web - aliases: - - fuzzy term for component (e.g. an alias for a "alluvial" chart might be "flow") - date_added: YYY-MM-DDT00:00:00.000Z - ``` - -5. Once done, click the green `Commit new file` button at the bottom. - -After submitting the PR for the data, you should upload a thumbnail image. - -1. Go back to your team folder in the - [index](https://github.com/carbon-design-system/carbon-website/tree/main/src/data/chart-index). -2. Inside your team folder, open the `images` folder. -3. In the top right, click `Add file` then `Upload files` to upload your image - to that page then submit the PR. Note: name your image file with the same - name as the chart (e.g. `chart-name.png` to match `component-name.yml`). Your - image should be 320px x 240px. - -And you’re done! The Carbon team will review and merge the PR. - -If you’re unsure about how to make a PR through GitHub, create an issue in the -repo instead and we’ll help you out. Be sure to include all the necessary -component information and images. diff --git a/src/pages/community/how-to-contribute.mdx b/src/pages/community/how-to-contribute.mdx deleted file mode 100644 index 2f7a3c3a2c5..00000000000 --- a/src/pages/community/how-to-contribute.mdx +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Contributing a component -description: - Anyone can add assets to the community component index. Maintainers can submit - a short pull request in GitHub to add components to the index. - -tabs: ['Component index', 'How to contribute'] ---- - - - -Anyone can add assets to the community component index. Maintainers can submit a -short pull request in GitHub to add components to the index. - - - -## Add a component using the GitHub UI - -1. In the - [index folder](https://github.com/carbon-design-system/carbon-website/tree/main/src/data/index) - of the carbon-website GitHub repo, open your team folder. Create a folder if - your team doesn’t have one yet). -2. On the next page, click `Add file` (top right) then `Create new file`. -3. Name your file `component-name.yml`, where _component-name_ is the name of - your component. -4. Copy and paste the following template into the `Edit new file` section of the - page and fill out the correct information for your component. - - ``` - name: component name - website_url: >- - url of documentation / guidance page (if any) - code_url: >- - url of component code on GitHub - maintainer: name of maintainer team - description: >- - short description of purpose and usage of component - framework: choose one of Vanilla | Angular | React | Vue - design_asset: choose one of Sketch | Axure | Adobe XD | Figma - platform: Web - aliases: - - fuzzy term for component (e.g. an alias for a "card" component might be "tile") - date_added: YYY-MM-DDT00:00:00.000Z - ``` - -5. Once done, click the green `Commit new file` button at the bottom. - -After submitting the PR for the data, you should upload a thumbnail image. Go -back to your team folder in the -[index](https://github.com/carbon-design-system/carbon-website/tree/main/src/data/index). - -1. Inside your team folder click the `images` folder. -2. In the top right, click `Add file` then `Upload files` to upload your image - to that page then submit the PR. Note: name your image file with the same - name as the component (e.g. `component-name.png` to match - `component-name.yml`). - -And you’re done! The Carbon team will review and merge the PR. - -If you’re unsure about how to make a PR through GitHub, create an issue in the -repo instead and we’ll help you out. Be sure to include all the necessary -component information and images. diff --git a/src/pages/community/patterns/create-flows/images/WideTearsheet.png b/src/pages/community/patterns/create-flows/images/WideTearsheet.png new file mode 100644 index 00000000000..bfaa98cbb54 Binary files /dev/null and b/src/pages/community/patterns/create-flows/images/WideTearsheet.png differ diff --git a/src/pages/community/patterns/create-flows/images/WideTearsheetShowAll.png b/src/pages/community/patterns/create-flows/images/WideTearsheetShowAll.png new file mode 100644 index 00000000000..3bfb21f4976 Binary files /dev/null and b/src/pages/community/patterns/create-flows/images/WideTearsheetShowAll.png differ diff --git a/src/pages/community/patterns/create-flows/images/inline-create-example.png b/src/pages/community/patterns/create-flows/images/inline-create-example.png new file mode 100644 index 00000000000..263f3968ff5 Binary files /dev/null and b/src/pages/community/patterns/create-flows/images/inline-create-example.png differ diff --git a/src/pages/community/patterns/create-flows/index.mdx b/src/pages/community/patterns/create-flows/index.mdx index ce1274639fa..6c673876cbd 100644 --- a/src/pages/community/patterns/create-flows/index.mdx +++ b/src/pages/community/patterns/create-flows/index.mdx @@ -78,14 +78,15 @@ Narrow or Wide tearsheet variations for single or multistep options, respectively. + + + +![Animated inline create example](/images/InlineCreateExample.gif) + +![Animated inline create example](/images/inline-create-example.png) -Animated inline create example + Example of an inline create @@ -222,6 +223,7 @@ respectively. ### Anatomy of a wide tearsheet + ![Anatomy of a wide tearsheet](images/WideTearsheetAnatomy.jpg) @@ -274,19 +276,22 @@ respectively. ![Alternative left panel width of 320px](images/WideTearsheetAlternateWidth.jpg) -Alternative left panel width of 320px - + ### Behaviors + + ![Wide tearsheet animated Create flow](images/WideTearsheetAnimated.gif) -Animated illustration of the Create flow in a Wide tearsheet +![Wide tearsheet animated Create flow](images/WideTearsheet.png) + + @@ -316,10 +321,16 @@ all options for a particular Create flow if it will enhance the user experience. no gradient. + + ![Wide tearsheet animated options toggle](images/WideTearsheetShowAllOptionsAnimated.gif) +![Wide tearsheet animated options toggle](images/WideTearsheetShowAll.png) + + + Animated illustration of the "Show all available options" toggle behavior diff --git a/src/pages/components/UI-shell-header/images/skip-to-main-content.png b/src/pages/components/UI-shell-header/images/skip-to-main-content.png new file mode 100644 index 00000000000..eccb5ea6fd6 Binary files /dev/null and b/src/pages/components/UI-shell-header/images/skip-to-main-content.png differ diff --git a/src/pages/components/UI-shell-header/usage.mdx b/src/pages/components/UI-shell-header/usage.mdx index f43bdc17759..f927a0f2999 100644 --- a/src/pages/components/UI-shell-header/usage.mdx +++ b/src/pages/components/UI-shell-header/usage.mdx @@ -16,16 +16,6 @@ interaction patterns that persist between and across products. - - -**v11 update:** The UI shell is now themeable and has been updated to use inline -theming. The UI shell uses Carbon theme tokens instead of component specific -tokens and the color will follow each theme's styles. For v10 implementation -guidance, go to -[v10 UI Shell–Header](https://v10.carbondesignsystem.com/components/UI-shell-header/usage). - - - Live demo @@ -245,16 +235,22 @@ of the navigation’s focusable controls. This lets users easily skip the navigation region and begin interacting with the page’s main content area. - + + + ![hint text](images/skip-to-main-content.gif) +![hint text](images/skip-to-main-content.png) + + + The "Skip to main content link" is the first focusable element on the Carbon website. - + #### Screen readers diff --git a/src/pages/components/UI-shell-left-panel/usage.mdx b/src/pages/components/UI-shell-left-panel/usage.mdx index 817bbdd4590..47814f1c76e 100644 --- a/src/pages/components/UI-shell-left-panel/usage.mdx +++ b/src/pages/components/UI-shell-left-panel/usage.mdx @@ -16,16 +16,6 @@ interaction patterns that persist between and across products. - - -**v11 update:** The UI shell is now themeable and has been updated to use inline -theming. The UI shell uses Carbon theme tokens instead of component specific -tokens and the color will follow each theme's styles. For v10 implementation -guidance, go to -[v10 UI Shell–Left panel](https://v10.carbondesignsystem.com/components/UI-shell-left-panel/usage/). - - - Live demo diff --git a/src/pages/components/UI-shell-right-panel/usage.mdx b/src/pages/components/UI-shell-right-panel/usage.mdx index f1401063da0..103520f458f 100644 --- a/src/pages/components/UI-shell-right-panel/usage.mdx +++ b/src/pages/components/UI-shell-right-panel/usage.mdx @@ -16,16 +16,6 @@ interaction patterns that persist between and across products. - - -**v11 update:** The UI shell is now themeable and has been updated to use inline -theming. The UI shell uses Carbon theme tokens instead of component specific -tokens and the color will follow each theme's styles. For v10 implementation -guidance, go to -[v10 UI Shell–Right panel](https://v10.carbondesignsystem.com/components/UI-shell-right-panel/usage/). - - - Live demo diff --git a/src/pages/components/accordion/usage.mdx b/src/pages/components/accordion/usage.mdx index cfdabbb03c6..9b3fb226cfc 100755 --- a/src/pages/components/accordion/usage.mdx +++ b/src/pages/components/accordion/usage.mdx @@ -22,7 +22,6 @@ associated sections of content. Formatting Content Behaviors -Modifiers Related References Feedback @@ -47,14 +46,12 @@ associated sections of content. ## Overview The accordion component delivers large amounts of content in a small space -through progressive disclosure. The header title give the user a high level +through progressive disclosure. The header title gives the user a high level overview of the content allowing the user to decide which sections to read. Accordions can make information processing and discovering more effective. However, it does hide content from users and it's important to account for a -user not noticing or reading all of the included content. If a user is likely to -read all of the content then don't use an accordion as it adds the burden of an -extra click; instead use a full scrolling page with normal headers. +user not noticing or reading all of the included content. ### When to use @@ -64,6 +61,14 @@ extra click; instead use a full scrolling page with normal headers. - When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel. +### When not to use + +- When organizing large amounts of information that can be nested, consider + using [tree view](/components/tree-view/usage) instead. +- If a user is likely to read all of the content, then don't use an accordion as + it adds the burden of an extra click; instead use a full scrolling page with + normal headers. + ## Formatting ### Anatomy @@ -83,6 +88,35 @@ extra click; instead use a full scrolling page with normal headers. ### Alignment +#### Flush alignment + +Use flush alignment when designing within smaller spaces on a page such as side +panels or sidebars to achieve better text alignment with other content. Flush +alignment is also used to help avoid converging rule lines between components +that are close to each other on a page. + + + + +![accordion flush alignment](images/accordion-flush.png) + + + + +Flush alignment places the row title and chevron icons with 0px padding, keeping +them flush to the rule dividers. For hover and focus interactive states, the +left and right padding receives an additional 16px padding. + + + + +![accordion flush alignment spec](images/accordion-flush-spec.png) + + + + +#### Icon alignment + By default the chevron icon is placed on the `end` side of the header. This allows for the title on the `start` side to align with other type elements in the layout, which is the preferred alignment scenario. @@ -136,9 +170,9 @@ such as a side panel or tile. When placing an accordion on the 2x Grid with its default alignment, the indented title and content align to the grid columns, and the top and bottom borders hang into the gutter. However, the accordion can be modified to have a -[flush alignment](https://carbondesignsystem.com/components/accordion/usage#modifiers) -where the titles and content are instead flush aligned with the top and bottom -borders having 0px padding. +[flush alignment](/components/accordion/usage#alignment) where the titles and +content are instead flush aligned with the top and bottom borders having 0px +padding. @@ -171,6 +205,11 @@ When the accordion content is longer than the viewport the whole accordion should vertically scroll. Content should not scroll inside of an individual panel. Content should never scroll horizontally in an accordion. +### Further guidance + +For further content guidance, see Carbon's +[content guidelines](<[https://www.carbondesignsystem.com/guidelines/content/general](https://www.carbondesignsystem.com/guidelines/content/general)>). + ## Behaviors ### States @@ -236,35 +275,6 @@ Users can trigger a state change by pressing `Enter` or `Space` while the header area has focus. For additional keyboard interactions, see the [accessibility tab](/components/accordion/accessibility#keyboard-interactions). -## Modifiers - -#### Flush alignment - -Use flush alignment when designing within smaller spaces on a page such as side -panels or sidebars to achieve better text alignment with other content. Flush -alignment is also used to help avoid converging rule lines between components -that are close to each other on a page. - - - - -![accordion flush alignment](images/accordion-flush.png) - - - - -Flush alignment places the row title and chevron icons with 0px padding, keeping -them flush to the rule dividers. For hover and focus interactive states, the -left and right padding receives an additional 16px padding. - - - - -![accordion flush alignment spec](images/accordion-flush-spec.png) - - - - ## Related The following components are additional ways to organize content. Consider the @@ -272,11 +282,17 @@ type and length of content you are working with when choosing a content container. Longer form content may benefit from tabs or a content switcher while very short content might do better in a structured list. -- [Content switcher](/components/content-switcher/usage) -- [Progress indicator](/components/progress-indicator/usage) -- [Structured list](/components/structured-list/usage) -- [Tabs](/components/tabs/usage) -- [Tree view](/components/tree-view/usage) +- [Content switchers](/components/content-switcher/usage) allow users to toggle + between two or more content sections within the same space on the screen. +- [Progress indicators](/components/progress-indicator/usage) guide users + through any linear, multistep task by showing the user their completed, + current, and future steps. +- [Structured lists](/components/structured-list/usage) group content that is + similar or related, such as terms and definitions. +- [Tabs](/components/tabs/usage) organize related content by allowing the user + to navigate between groups of information that appear within the same context. +- [Tree view](/components/tree-view/usage) is a hierarchical structure that + provides nested levels of navigation. ## References diff --git a/src/pages/components/ai-label/accessibility.mdx b/src/pages/components/ai-label/accessibility.mdx new file mode 100755 index 00000000000..346c6748267 --- /dev/null +++ b/src/pages/components/ai-label/accessibility.mdx @@ -0,0 +1,91 @@ +--- +title: AI label +description: The AI label indicates an instance of AI in the UI. +tabs: ['Usage', 'Style', 'Code', 'Accessibility'] +--- + + + +No accessibility annotations are needed for AI labels, but keep these +considerations in mind if you are modifying Carbon or creating a custom +component. + + + + + +What Carbon provides +Development considerations + + + +## What Carbon provides + +### Keyboard interactions + +The AI labels is the trigger button. The AI label is in the tab order and is +activated by pressing `Enter` or `Space`. The activation toggles the +explainability popover open and closed, and focus remains on the trigger. + +When the popover contains interactive elements, pressing `Tab` will move focus +to the first component in the popover. When the popover only has non-interactive +text, or when the focus is on the last component in the popover, pressing `Tab` +will close the popover and move focus to the next tab stop on the page. Pressing +`Esc` in an open popover closes it and returns focus to the trigger. + + + + +![Example of AI label keyboard interaction](images/ai-label-accessibility-1.png) + + + + + + The AI label icon button that triggers the popover is in the page tab order, + as are interactive elements inside an open popover. + + +#### Input interactions + +The AI label can appear inside user inputs, where it adds an additional tab +stop. For example, a text input will take focus as normal (the existing value +will be selected), and then the AI label will take a second tab stop. If the +user clears the existing AI-supplied value, (with the `Delete` key), then the AI +label becomes a `revert` icon, which on activation will restore the AI-supplied +value in the input. + + + + +![The AI label inside the input takes its own tab stop, and still toggles the explainability popover on and off.](images/ai-label-accessibility-3.png) + + + The AI label button is a second tab stop after the inital tab stop for the + input. + + + + + + + + +![The revert button replaces the AI label, but otherwise the keyboard navigation and operation is similar.](images/ai-label-accessibility-4.png) + + + + + + The AI label changes to a "revert" symbol if a user modifies the input value. + Activating "revert" restores the prior AI value. + + +## Development considerations + +Keep these considerations in mind if you are modifying Carbon or creating a +custom component. + +- The icon button has `aria-label="AI - Show information"`. +- The button uses `aria-expanded` to set toggletip visibility and + `aria-controls` to handle navigation to the content. diff --git a/src/pages/components/ai-label/code.mdx b/src/pages/components/ai-label/code.mdx new file mode 100755 index 00000000000..04771894871 --- /dev/null +++ b/src/pages/components/ai-label/code.mdx @@ -0,0 +1,45 @@ +--- +title: AI label +description: The AI label indicates an instance of AI in the UI. +tabs: ['Usage', 'Style', 'Code', 'Accessibility'] +--- + + + +Preview the AI label component with the React live demo. For detailed code usage +documentation, see the Storybooks for each framework below. + + + +## Documentation + + + + + + + + + + + + + + + + + + +## Live demo + + + +The live demo for AI label will be added soon. Check back later for updates. + + diff --git a/src/pages/components/ai-label/images/ai-explainability-light.png b/src/pages/components/ai-label/images/ai-explainability-light.png new file mode 100644 index 00000000000..6e9301cf8f4 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-explainability-light.png differ diff --git a/src/pages/components/ai-label/images/ai-label-01.png b/src/pages/components/ai-label/images/ai-label-01.png new file mode 100644 index 00000000000..ea47a4e58bc Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-01.png differ diff --git a/src/pages/components/ai-label/images/ai-label-accessibility-1.png b/src/pages/components/ai-label/images/ai-label-accessibility-1.png new file mode 100644 index 00000000000..3032349687c Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-accessibility-1.png differ diff --git a/src/pages/components/ai-label/images/ai-label-accessibility-3.png b/src/pages/components/ai-label/images/ai-label-accessibility-3.png new file mode 100644 index 00000000000..d60de024317 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-accessibility-3.png differ diff --git a/src/pages/components/ai-label/images/ai-label-accessibility-4.png b/src/pages/components/ai-label/images/ai-label-accessibility-4.png new file mode 100644 index 00000000000..a4636e111e2 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-accessibility-4.png differ diff --git a/src/pages/components/ai-label/images/ai-label-anatomy.png b/src/pages/components/ai-label/images/ai-label-anatomy.png new file mode 100644 index 00000000000..d8170fb8608 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-anatomy.png differ diff --git a/src/pages/components/ai-label/images/ai-label-click-target.png b/src/pages/components/ai-label/images/ai-label-click-target.png new file mode 100644 index 00000000000..bb8d28560ab Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-click-target.png differ diff --git a/src/pages/components/ai-label/images/ai-label-explainability-01.png b/src/pages/components/ai-label/images/ai-label-explainability-01.png new file mode 100644 index 00000000000..e6d48bcb836 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-explainability-01.png differ diff --git a/src/pages/components/ai-label/images/ai-label-explainability-anatomy.png b/src/pages/components/ai-label/images/ai-label-explainability-anatomy.png new file mode 100644 index 00000000000..afd625a9d2a Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-explainability-anatomy.png differ diff --git a/src/pages/components/ai-label/images/ai-label-explainability-orientation.png b/src/pages/components/ai-label/images/ai-label-explainability-orientation.png new file mode 100644 index 00000000000..6b4a3b6d0ac Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-explainability-orientation.png differ diff --git a/src/pages/components/ai-label/images/ai-label-levels-both.png b/src/pages/components/ai-label/images/ai-label-levels-both.png new file mode 100644 index 00000000000..66740d45c1e Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-levels-both.png differ diff --git a/src/pages/components/ai-label/images/ai-label-levels-broad.png b/src/pages/components/ai-label/images/ai-label-levels-broad.png new file mode 100644 index 00000000000..80fcd3d0590 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-levels-broad.png differ diff --git a/src/pages/components/ai-label/images/ai-label-levels-focused.png b/src/pages/components/ai-label/images/ai-label-levels-focused.png new file mode 100644 index 00000000000..831a215afb8 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-levels-focused.png differ diff --git a/src/pages/components/ai-label/images/ai-label-localization.png b/src/pages/components/ai-label/images/ai-label-localization.png new file mode 100644 index 00000000000..c7a0267433d Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-localization.png differ diff --git a/src/pages/components/ai-label/images/ai-label-placement-containers.png b/src/pages/components/ai-label/images/ai-label-placement-containers.png new file mode 100644 index 00000000000..2c79bbbfc24 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-placement-containers.png differ diff --git a/src/pages/components/ai-label/images/ai-label-placement-data-table.png b/src/pages/components/ai-label/images/ai-label-placement-data-table.png new file mode 100644 index 00000000000..2c085995f10 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-placement-data-table.png differ diff --git a/src/pages/components/ai-label/images/ai-label-placement-form.png b/src/pages/components/ai-label/images/ai-label-placement-form.png new file mode 100644 index 00000000000..d832c0a4df2 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-placement-form.png differ diff --git a/src/pages/components/ai-label/images/ai-label-placement-icons-exception.png b/src/pages/components/ai-label/images/ai-label-placement-icons-exception.png new file mode 100644 index 00000000000..0558687e6fd Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-placement-icons-exception.png differ diff --git a/src/pages/components/ai-label/images/ai-label-placement-icons.png b/src/pages/components/ai-label/images/ai-label-placement-icons.png new file mode 100644 index 00000000000..fed1b5f9eb4 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-placement-icons.png differ diff --git a/src/pages/components/ai-label/images/ai-label-placement-inputs.png b/src/pages/components/ai-label/images/ai-label-placement-inputs.png new file mode 100644 index 00000000000..a0fd6d92b24 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-placement-inputs.png differ diff --git a/src/pages/components/ai-label/images/ai-label-revert.png b/src/pages/components/ai-label/images/ai-label-revert.png new file mode 100644 index 00000000000..2aa8d54c669 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-revert.png differ diff --git a/src/pages/components/ai-label/images/ai-label-sizes-default.png b/src/pages/components/ai-label/images/ai-label-sizes-default.png new file mode 100644 index 00000000000..32baa009d53 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-sizes-default.png differ diff --git a/src/pages/components/ai-label/images/ai-label-sizes-inline.png b/src/pages/components/ai-label/images/ai-label-sizes-inline.png new file mode 100644 index 00000000000..022ddbb0977 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-sizes-inline.png differ diff --git a/src/pages/components/ai-label/images/ai-label-states.png b/src/pages/components/ai-label/images/ai-label-states.png new file mode 100644 index 00000000000..9136d331f73 Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-states.png differ diff --git a/src/pages/components/ai-label/images/ai-label-variants.png b/src/pages/components/ai-label/images/ai-label-variants.png new file mode 100644 index 00000000000..2d28ce46cfa Binary files /dev/null and b/src/pages/components/ai-label/images/ai-label-variants.png differ diff --git a/src/pages/components/ai-label/images/style-ai-label-explainability-structure.png b/src/pages/components/ai-label/images/style-ai-label-explainability-structure.png new file mode 100644 index 00000000000..3e0e0254601 Binary files /dev/null and b/src/pages/components/ai-label/images/style-ai-label-explainability-structure.png differ diff --git a/src/pages/components/ai-label/images/style-ai-label-explainability.png b/src/pages/components/ai-label/images/style-ai-label-explainability.png new file mode 100644 index 00000000000..3748cc3a35b Binary files /dev/null and b/src/pages/components/ai-label/images/style-ai-label-explainability.png differ diff --git a/src/pages/components/ai-label/images/style-ai-label-states-default.png b/src/pages/components/ai-label/images/style-ai-label-states-default.png new file mode 100644 index 00000000000..a4dcbc70262 Binary files /dev/null and b/src/pages/components/ai-label/images/style-ai-label-states-default.png differ diff --git a/src/pages/components/ai-label/images/style-ai-label-states-inline.png b/src/pages/components/ai-label/images/style-ai-label-states-inline.png new file mode 100644 index 00000000000..d978f137d7b Binary files /dev/null and b/src/pages/components/ai-label/images/style-ai-label-states-inline.png differ diff --git a/src/pages/components/ai-label/images/style-ai-label-structure-default.png b/src/pages/components/ai-label/images/style-ai-label-structure-default.png new file mode 100644 index 00000000000..3c19a925e94 Binary files /dev/null and b/src/pages/components/ai-label/images/style-ai-label-structure-default.png differ diff --git a/src/pages/components/ai-label/images/style-ai-label-structure-inline.png b/src/pages/components/ai-label/images/style-ai-label-structure-inline.png new file mode 100644 index 00000000000..77d9145f4e3 Binary files /dev/null and b/src/pages/components/ai-label/images/style-ai-label-structure-inline.png differ diff --git a/src/pages/components/ai-label/style.mdx b/src/pages/components/ai-label/style.mdx new file mode 100755 index 00000000000..fd1d854f3df --- /dev/null +++ b/src/pages/components/ai-label/style.mdx @@ -0,0 +1,189 @@ +--- +title: AI label +description: The AI label indicates an instance of AI in the UI. +tabs: ['Usage', 'Style', 'Code', 'Accessibility'] +--- + + + +The following page documents visual specifications such as color, typography, +structure, and sizes. + + + + + +Color +Typography +Structure +Sizes + + + +## Color + +### Default color + +| State | Element | Property | Color token | +| ------- | ------- | ---------- | --------------------- | +| Enabled | Text | text color | `$text-primary` | +| | Button | border | `$border-inverse` | +| | | background | `transparent` | +| Hover | Text | text color | `$text-inverse` | +| | Button | border | `$border-inverse` | +| | | background | `$background-inverse` | +| Focus | Button | border | `$focus` | + + + + +![Examples of default AI label states](images/style-ai-label-states-default.png) + + + + +### Inline color + +| State | Element | Property | Color token | +| ------- | ------- | ---------- | ----------------- | +| Enabled | Text | text color | `$text-primary` | +| | Dot | fill | `$icon-primary` | +| | Button | background | `transparent` | +| Hover | Text | text color | `$text-secondary` | +| | Button | border | `$border-inverse` | +| | | background | `transparent` | +| Focus | Button | border | `$focus` | + + + + +![Examples of inline AI label states](images/style-ai-label-states-inline.png) + + + + +### Explainability popover color + +| Element | Property | Color token | +| ------------------ | ---------------------- | ------------------------ | +| Popover background | background | `$ai-popover-background` | +| | linear-gradient: start | `$ai-aura-start` | +| | linear-gradient: end | `$ai-aura-end` | +| Popover border | linear-gradient: start | `$ai-border-start` | +| | linear-gradient: end | `$ai-border-end` | + + + + +![Examples of an explainability popover](images/style-ai-label-explainability.png) + + + + +## Typography + +### Default type + +| Element | Font-size (px/rem) | Font-weight | Type token | +| ------------- | ------------------ | -------------- | ------------- | +| Text (xl) | 20 / 1.25 | SemiBold / 600 | `$heading-03` | +| Text (sm–lg) | 16 / 1 | SemiBold / 600 | `$heading-02` | +| Text (2xs–xs) | 12 / 0.75 | SemiBold / 600 | – | +| Text (mini) | 9 / 0.5625 | SemiBold / 600 | – | + +### Inline type + +| Element | Font-size (px/rem) | Font-weight | Type token | +| --------- | ------------------ | -------------- | ------------- | +| Text (lg) | 16 / 1 | SemiBold / 600 | `$heading-02` | +| Text (md) | 14 / 0.875 | SemiBold / 600 | `$heading-01` | +| Text (sm) | 12 / 0.75 | SemiBold / 600 | – | + +### Explainability popover type + +| Element | Font-size (px/rem) | Font-weight | Type token | +| ------- | ------------------ | ------------- | ------------- | +| Text | 14 / 0.875 | Regular / 400 | `$label-02` | +| Title | 28 / 1.75 | Regular / 400 | `$heading-04` | +| Body | 14 / 0.875 | Regular / 400 | `$body-01` | + +## Structure + +### Default structure + +| Element | Property | Value | Spacing token | +| ------- | -------- | ----------------------------------------------------- | ------------- | +| Button | border | 1px | – | +| | height | See [sizes](/components/ai-label/style#default-sizes) | – | +| Text | padding | centered | – | + +
+ +![Structure of default AI labels](images/style-ai-label-structure-default.png) + +
+ + + Recommended structure and spacing measurements for default AI label | px / rem + + +### Inline structure + +| Element | Property | px/rem | Spacing token | +| -------------- | --------------------------- | ---------------------------------------------------- | ------------- | +| Text | padding-left | 4px | `$spacing-02` | +| Button | border | 1px | – | +| | padding-left, padding-right | 4px | `$spacing-02` | +| | height | See [sizes](/components/ai-label/style#inline-sizes) | – | +| Bullet (sm-md) | height, width | 4px | – | +| Bullet (lg) | height, width | 8px | – | + +
+ +![Structure of inline AI labels](images/style-ai-label-structure-inline.png) + +
+ + + Recommended structure and spacing measurements for inline AI label | px / rem + + +### Explainability popover structure + +| Element | Property | px/rem | Spacing token | +| --------- | -------- | ------ | ------------- | +| Container | padding | 24px | `$spacing-06` | +| Footer | height | 48px | – | + +
+ +![Structure of the explainability popover](images/style-ai-label-explainability-structure.png) + +
+ + + Recommended structure and spacing measurements for the explainability popover + | px / rem + + +## Sizes + +### Default sizes + +| Default size | Height (px/rem) | +| ---------------- | --------------- | +| Mini | 16 / 1 | +| 2x small (2xs) | 20 / 1.25 | +| Extra small (xs) | 24 / 1.5 | +| Small (sm) | 32 / 2 | +| Medium (md) | 40 / 2.5 | +| Large (lg) | 48 / 3 | +| Extra large (xl) | 64 / 4 | + +### Inline sizes + +| Inline size | Height (px/rem) | +| ----------- | --------------- | +| Small (sm) | 16 / 1 | +| Medium (md) | 18 / 1.125 | +| Large (lg) | 22 / 1.375 | diff --git a/src/pages/components/ai-label/usage.mdx b/src/pages/components/ai-label/usage.mdx new file mode 100755 index 00000000000..81858d94501 --- /dev/null +++ b/src/pages/components/ai-label/usage.mdx @@ -0,0 +1,532 @@ +--- +title: AI label +description: The AI label indicates an instance of AI in the UI. +tabs: ['Usage', 'Style', 'Code', 'Accessibility'] +--- + +import A11yStatus from 'components/A11yStatus'; + + + +The AI label indicates an instance of AI in the UI. It enables AI transparency +through the visual recognition the AI icon and is the key pathway to AI +explainability by acting as the trigger for the explainability popover. + + + + + +**New!** +[AI label](https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-slug--overview) +is now available as an experimental component. The AI label was previously +called "AI Slug" but has been changed to better reflect its usage. This name +change will be reflected in code and Figma once it moves to stable in the near +future. + + + + + +Live demo +Overview +Formatting +Content +Behaviors +Related +Feedback + + + +## Live demo + + + +The live demo and accessibility testing status for AI label will be added soon. +Check back later for updates. + + + +## Overview + +The AI label is more than just an indicator of AI instances in the UI. It’s also +a consistent pathway to AI explainability. Its behavior is flexible enough to +cooperate with the behaviors and interactions within existing products. + +The AI label is intended for any scenario where something is being generated by +or with AI to reinforce AI transparency, accountability, and explainability at +any interface level. This also enables more effective recognition and recall of +AI instances in a way that is identifiable across any IBM product. + + + + +![An UI example with various AI label instances](images/ai-label-01.png) + + + + +### Variants + +| Variant | Purpose | +| --------- | ---------------------------------------------------------------------------------------------------------------------------------- | +| _Default_ | The default AI label used in most components and container type use cases. It can be used for both broad and focused AI instances. | +| _Inline_ | A specific type of AI label used only in small focused AI instances and often paired inline with text content. | + + + + +![A default and inline AI label](images/ai-label-variants.png) + + + + +Default (left), Inline (right) + +### When to use + +#### Mark AI-generated content + +AI transparency is key, and the AI label is an accessible, interactive element +that marks any AI instance presented in the interface. + +#### Provides a consistent visual reference point for AI + +For recognition and recall, users need a consistent, identifiable visual +reference to look to when they need to understand more details about how the AI +was built. + +#### A pathway to explainability + +Users must clearly understand how to access more details about how an AI was +built. By providing a bridge to explainability from the AI label, users are +given a recognizable location to learn more about the AI model. + +### When not to use + +#### Don’t use the AI label as decoration + +These are strictly intended to indicate any time a modality or component is +using AI. + +#### Don’t modify AI label behaviors + +The AI label is intended as a pathway to explainability. Any additional +behaviors can set unclear and inconsistent expectations. + +#### Don’t use the AI label as a trigger for AI actions + +The AI label is not a UI icon and should not be used with buttons or other +call-to-actions to trigger an AI action like “regenerate.” Those type of AI +actions will have their own UI icons. + +## Formatting + +### Anatomy + + + + +![Anatomy of AI label](images/ai-label-anatomy.png) + + + + +1. **AI indicator / button**: indicates AI is present and is the button trigger + for the explainability popover. It can be either the default or inline + variant. +2. **Text label**: the text abbreviation for artificial intelligence which can + be translated as needed. +3. **Explainability popover**: Area that contains AI explainability content and + interactive elements. + +### Sizing + +#### Default sizes + +The default AI label spans the range of UI icons and pictogram sizes. Which size +to use is determined by the prominence and hierarchy of the area it is in or by +its neighboring content such as other buttons. When placed next to other ghost +icon buttons we typically recommend going down one size from the button size so +they are optically weighted the same. + +| Default size | Height (px/rem) | +| ---------------- | --------------- | +| Mini | 16 / 1 | +| 2x small (2xs) | 20 / 1.25 | +| Extra small (xs) | 24 / 1.5 | +| Small (sm) | 32 / 2 | +| Medium (md) | 40 / 2.5 | +| Large (lg) | 48 / 3 | +| Extra large (xl) | 64 / 4 | + + + + +![Default AI label sizes](images/ai-label-sizes-default.png) + + + + +#### Inline sizes + +The size of the inline AI label text should match the size of the text it is +placed inline with. For example, when inserting the inline AI label into a table +row with 14px font size, you match it with the medium-size inline AI label that +also has a 14px font. + +| Inline size | Height (px/rem) | Use case | +| ----------- | --------------- | --------------------- | +| Small (sm) | 16 / 1 | Paired with 12px type | +| Medium (md) | 18 / 1.125 | Paired with 14px type | +| Large (lg) | 22 / 1.375 | Paired with 16px type | + + + + +![Inline AI label sizes](images/ai-label-sizes-inline.png) + + + + +### Placement + +The AI label should be placed in consistent locations based on modality to help +users identify AI presence in the interface. Consistent placement reinforces +recognition and recall for users. The instructions for these placements assume a +left-to-right reading order. If right-to-left then these placements should be +mirrored. + +#### In containers + +The AI label should be placed in the upper right of the container with +appropriate margin. Never place the AI label flush to the edges of a container. + + + + +![Example of an AI label placement in a container](images/ai-label-placement-containers.png) + + + + +#### In inputs + +Place AI labels on the right side and in the middle of any form inputs +(dropdowns, text or number input, etc.). + + + + +![Example of an AI label placement in an input](images/ai-label-placement-inputs.png) + + + + +#### With other icons + +If other icons are present alongside the AI label, then the AI label should be +placed in the far left position of the icon group. + + + + +![Example of an AI label placement with other icons](images/ai-label-placement-icons.png) + + + + +The exception is when the icon has an interaction state that alters its size or +position, like an expandable search or toggle-able sort. In these instances, the +AI label is placed to the right of these exceptions but still to the left of +other icon types. + + + + +![Example of an AI label placement with search](images/ai-label-placement-icons-exception.png) + + + + +#### In data tables + +Where the AI label is positioned inside of a data table depends on which parts +of the data are AI generated. For more details, see the +[AI presence](/components/data-table/usage/#ai-presence) section on the data +table component page. + +- If the whole table has an AI presence, then place the AI label in the top + right of the table header. +- If a whole column has an AI presence, then place the AI label in the far right + of the column header. The sort icon of the table column will now appear to the + left of the AI label. +- If a whole row has an AI presence, then place the AI label to the far left of + the row and to the left of any selection or expansion controls. +- If a single cell has an AI presence, then place the AI label inline and left + to the cell text. + + + + +![Example of an AI label placement in data tables](images/ai-label-placement-data-table.png) + + + + +#### In forms + +Where the AI label is placed in a form can vary depending on if the AI presence +is across the whole form or just in certain parts of the form. For more +guidance, see the [AI presence](/components/form/usage/#ai-presence) section on +the form component page. + +- If the entire form has an AI presence, then place the AI label in top right of + the form header. +- If only some parts of the form have an AI presence then the AI label should be + embedded in the components or sections that are AI-generated. + + + + +![Example of an AI label placement in forms](images/ai-label-placement-form.png) + + + + +### Levels of visibility + +The AI label might appear at multiple levels of a page, or it might appear only +once. The content in the AI explainability popover might be focused on a single +AI instance or broadly address multiple instances. All scenarios are acceptable +and possible, but the level of visibility depends on the need for explainability +and/or the need to distinguish AI content from human content. + +| Visibility level | Usecase | +| ---------------- | ------------------------------------------------------------- | +| _Focused_ | Use for individual occurrences of AI within a section | +| _Broad_ | Use for summarization of AI usage across a section of a page. | + +#### Use a focused AI label: + +- When the user needs to have an individual AI instance explained. +- When the user needs to distinguish between AI and non-AI content. + + + + +![Example of a focused AI label instance](images/ai-label-levels-focused.png) + + + + + + An example of focused AI labeling inside single cells in a data table. + + +#### Use a broad AI label: + +- When users don’t need specific explanations of AI on a per-instance level. +- When the user doesn’t need to act on AI at an instance level. + + + + +![Example of a broad AI label instance](images/ai-label-levels-broad.png) + + + + + + An example of broad AI labeling on a whole column in a data table. + + +#### Using both focused and broad AI label + +Use both focused and broad AI labels when AI surfaces throughout the experience, +but: + +- Individual AI instances still need to be explained. +- The user needs to distinguish between AI and non-AI content. +- The user needs to act on AI at an instance level. + + + + +![Example of a broad AI label instance](images/ai-label-levels-both.png) + + + + + + An example of broad AI labeling on the whole chat converation but focused AI + labeling on a single message. + + +## Content + +### Localization + +The abbreviation `AI` in the AI label stands for the English term +`artificial intelligence`. The abbreviation can be localized for other +languages. Here are some examples of abbreviations in other languages. + +- `AI` in Chinese, Indonesia, Italian, Japanese, Korean, Spanish LA +- `IA` in European Spanish, Brazilian Portuguese, France French +- `KI` in German +- `ИИ` in Russian, Bulgarian + + + + +![Examples of the AI label in various languages](images/ai-label-localization.png) + + + + +### Explainability template + +The explainability popover is a configurable content area. Carbon for AI +provides a recommended content template for creating your explainability +content. The template is split into four main content sections: + +- Overview +- Supporting details +- Artifacts and resources +- Additional actions + +_For IBMers only:_ For more information and guidance on designing content for +your explainability popover, see the +[AI explainability popover](https://w3.ibm.com/w3publisher/design-for-ai/carbon-for-ai/ai-explainability-popover) +pattern on Design for AI. + + + + +![Examples of the AI label in various languages](images/ai-label-explainability-anatomy.png) + + + + +## Behaviors + +### States + +AI label has three interactive states: **enabled**, **hover**, and **focus**. +The AI label should never be disabled as part of a disabled or read-only state. +Learn more about states on the [style](/components/ai-label/style) tab. + + + + +![AI labels shown in their three states](images/ai-label-states.png) + + + + +Enabled (left), hover (middle), focus (right) + +### Clickable areas + +In the default AI label, the clickable area is limited to the icon without any +additional external coverage, such as in a icon-only ghost button. The inline AI +label will have a small amount of extra padding around it included in the click +target area. + + + + +![AI label click target](images/ai-label-click-target.png) + + + + +### Explainability popover + +The popover is the first layer of explainability that is accessed by clicking +the AI label. This provides a consistent up-front way to access explainability +with the ability to dig into more details on-demand. Use this popover any time +AI needs to be explained in your experience. + + + + +![An example of an AI explainability popover](images/ai-label-explainability-01.png) + + + + +#### Opening and dismissing the popover + +The AI label is the trigger that opens explainability popover. The interaction +works like a toggletip where the popover remains open until the user clicks or +tabs away from the AI label. For a details on the keyboard interactions of the +explainability popover, see the +[accessibility](/components/ai-label/accessibility#keyboard-interactions) tab. + +#### Popover orientation + +The popover should auto-position itself to the best orientation on the screen so +that it does not appear out of view for the user. It follows the same alignments +as the primitive caret-tip [popover](/components/popover/usage/#caret-tip). + + + + +![Examples of various orientations for the explainability popover](images/ai-label-explainability-orientation.png) + + + + +### Revert function + +Users can manually override AI-suggested content, but they should always be able +to programmatically switch back to the initially suggested AI content. In these +instances, when the content is overridden by the user, the AI presence styling +is removed and the AI label is replaced by a “revert” action icon-only button. +If a user activates the revert action, the AI-generated content will reappear, +along with the AI presence styling and AI label. + + + + +![An example of user edited AI component](images/ai-label-revert.png) + + + + +## Related + +#### Guidelines + +- [Carbon for AI](/guidelines/carbon-for-ai/) + +#### Components + +- [Checkbox](/components/checkbox/usage/#ai-presence) +- [Data table](/components/data-table/usage/#ai-presence) +- [Date picker](/components/date-picker/usage/#ai-presence) +- [Dropdown](/components/dropdown/usage/#ai-presence) +- [Form](/components/form/usage/#ai-presence) +- [Modal](/components/modal/usage/#ai-presence) +- [Number input](/components/number-input/usage/#ai-presence) +- [Popover](/components/popover/usage/) +- [Radio button](/components/radio-button/usage/#ai-presence) +- [Select](/components/select/usage/#ai-presence) +- [Tag](/components/tag/usage/#ai-presence) +- [Text input](/components/text-input/usage/#ai-presence) +- [Tile](/components/tile/usage/#ai-presence) + +#### Design for AI + +_For IBMers only_ + +- [AI label placement](https://w3.ibm.com/w3publisher/design-for-ai/carbon-for-ai/ai-label-placement) +- [AI explainability popover](https://w3.ibm.com/w3publisher/design-for-ai/carbon-for-ai/ai-explainability-popover) + +## Feedback + +Help us improve this component by providing feedback, asking questions, and +leaving any other comments on GitHub. _For IBMers only:_ Questions and feedback +can be directed to Slack in the channels +[#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/) or +[#carbon-for-ai](https://ibm-studios.slack.com/messages/C0603LZUKRV). diff --git a/src/pages/components/checkbox/code.mdx b/src/pages/components/checkbox/code.mdx index 5c6d51cb253..be74637d77d 100755 --- a/src/pages/components/checkbox/code.mdx +++ b/src/pages/components/checkbox/code.mdx @@ -68,5 +68,9 @@ documentation, see the Storybooks for each framework below. label: 'Default', variant: 'components-checkbox--default', }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--checkbox', + }, ]} /> diff --git a/src/pages/components/checkbox/images/checkbox-style-5.png b/src/pages/components/checkbox/images/checkbox-style-5.png new file mode 100644 index 00000000000..5f62408ddb8 Binary files /dev/null and b/src/pages/components/checkbox/images/checkbox-style-5.png differ diff --git a/src/pages/components/checkbox/images/checkbox-usage-10.png b/src/pages/components/checkbox/images/checkbox-usage-10.png index 4df9dfa965e..92231242232 100644 Binary files a/src/pages/components/checkbox/images/checkbox-usage-10.png and b/src/pages/components/checkbox/images/checkbox-usage-10.png differ diff --git a/src/pages/components/checkbox/images/images/checkbox-style-4.png b/src/pages/components/checkbox/images/images/checkbox-style-4.png new file mode 100644 index 00000000000..5f62408ddb8 Binary files /dev/null and b/src/pages/components/checkbox/images/images/checkbox-style-4.png differ diff --git a/src/pages/components/checkbox/images/images/checkbox-usage-10.png b/src/pages/components/checkbox/images/images/checkbox-usage-10.png new file mode 100644 index 00000000000..92231242232 Binary files /dev/null and b/src/pages/components/checkbox/images/images/checkbox-usage-10.png differ diff --git a/src/pages/components/checkbox/style.mdx b/src/pages/components/checkbox/style.mdx index 4bb1d262c33..049594d3376 100755 --- a/src/pages/components/checkbox/style.mdx +++ b/src/pages/components/checkbox/style.mdx @@ -6,6 +6,23 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- + + +The following page documents visual specifications such as color, typography, +and structure. + + + + + +Color +Typography +Structure +AI presence +Feedback + + + ## Color | Element | Property | Color token | @@ -101,3 +118,29 @@ labels should not exceed three words. Structure and spacing measurements for vertical and horizontal checkbox groupings | px / rem + +## AI presence + +The only style modification an AI variant of the checkbox has is the addition of +the slug. All other tokens in the component remain the same as the non-AI +variants. + +More information about designing for AI guidelines is coming soon. + +| Element | Property | Token / Size | +| ------- | -------- | ------------ | +| AI slug | size | mini | + + + + +![Structure and spacing measurements for checkbox with AI presence](images/checkbox-style-5.png) + + + + +## Feedback + +Help us improve this component by providing feedback, asking questions, and +leaving any other comments on +[GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md). diff --git a/src/pages/components/checkbox/usage.mdx b/src/pages/components/checkbox/usage.mdx index 89a61fe1b4f..a343562d749 100755 --- a/src/pages/components/checkbox/usage.mdx +++ b/src/pages/components/checkbox/usage.mdx @@ -15,6 +15,15 @@ select zero, one, or any number of items. + + +Experimental slug is now available for +[checkbox](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--checkbox). +This addition changes the visual appearance of the component and introduces an +AI explainability feature when AI is present in the component. + + + Live demo @@ -22,6 +31,7 @@ select zero, one, or any number of items. Formatting Content Behaviors +AI presence Related References Feedback @@ -38,6 +48,10 @@ select zero, one, or any number of items. label: 'Default', variant: 'components-checkbox--default', }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--checkbox', + }, ]} /> @@ -333,6 +347,24 @@ Users can navigate to and between checkbox inputs by pressing `Tab` or checkbox input has focus. For additional keyboard interactions, see the [accessibility tab](https://www.carbondesignsystem.com/components/checkbox/accessibility). +## AI presence + +Checkbox has a modification that embeds the AI slug when AI present in the +control. The AI variant functions the same as the normal version except with the +addition of the AI slug which is both a visual indicator and the trigger for the +explainability popover. The slug can be placed on the group label or on +individual checkbox labels. + +More information about designing for AI guidelines is coming soon. + + + + +![Checkbox with AI presence](images/checkbox-usage-10.png) + + + + ## Related #### Checkbox versus radio button diff --git a/src/pages/components/content-switcher/style.mdx b/src/pages/components/content-switcher/style.mdx index 55a401c1b8a..9cb16a7cb3b 100755 --- a/src/pages/components/content-switcher/style.mdx +++ b/src/pages/components/content-switcher/style.mdx @@ -76,8 +76,7 @@ Content switcher has three interactive states—**hover**, **focus**, and | Selected | Focus | Container | background-color | `$layer-selected-inverse` | | | | Label text | text-color | `$text-inverse` | | | | Icon | svg | `$text-inverse` | -| | | Border | border | `$focus` | -| | | Border | inset | `$focus-inset` | +| | | Border | inner-border | `$focus-inset` | | | Disabled | Container | background-color | `$layer-selected-disabled` | | | | Label text | text-color | `$text-disabled` | | | | Icon | text-color | `$text-disabled` | @@ -146,7 +145,7 @@ Each container that makes up the content switcher is equal in size. | Icon (lg) | padding-left, padding-right | 14 / 0.875 | – | | Divider | border | 1px | – | -### Text content switcher +### Default structure The width of a text container is determined by the length of the longest label text within its content switcher. @@ -161,7 +160,7 @@ text within its content switcher. Structure and spacing measurements for the text content switcher | px / rem -### Icon content switcher +### Icon-only structure The width of an icon container is determined by the fixed size within its content switcher. @@ -176,7 +175,7 @@ content switcher. Structure and spacing measurements for the icon content switcher | px / rem -### Size +## Size There are three content switcher sizes—small (32px), medium (40px), and large (48px). diff --git a/src/pages/components/content-switcher/usage.mdx b/src/pages/components/content-switcher/usage.mdx index b49d45f83dc..f3012b4729e 100755 --- a/src/pages/components/content-switcher/usage.mdx +++ b/src/pages/components/content-switcher/usage.mdx @@ -10,8 +10,8 @@ import A11yStatus from 'components/A11yStatus'; -Content switchers allow users to toggle between alternate views of similar or -related content within the same space on the screen. +Content switchers allow users to toggle between two or more content sections +within the same space on the screen. @@ -22,9 +22,8 @@ related content within the same space on the screen. Formatting Content Behaviors -Modifier +Modifiers Related -References Feedback @@ -71,16 +70,16 @@ tool may use a content switcher to divide messages into three views such as ### When not to use -#### Related subpages +#### Distinct content areas -When navigating between different but related content like subpages, use +When navigating between distinct content areas like subpages, use [tabs](/components/tabs/usage) instead of a content switcher. Tabs follow the metaphor for sections in a filing cabinet, and two tabs wouldn’t contain the same sheet of paper, so the role of tabs in the information hierarchy is to separate content. -Content switcher is often used alongside tabs, but it typically serves at a -lower hierarchy to organize related content within the tab's contents. +Content switcher is often used with tabs but at a lower hierarchy to sort +related contents within that tab content. #### Binary actions @@ -366,7 +365,7 @@ The content tab is clickable anywhere within the container. Text and icon content switchers with their clickable areas -## Modifier +## Modifiers ### Content switcher with icons diff --git a/src/pages/components/data-table/code.mdx b/src/pages/components/data-table/code.mdx index b6cc217250d..649064a2353 100644 --- a/src/pages/components/data-table/code.mdx +++ b/src/pages/components/data-table/code.mdx @@ -125,6 +125,15 @@ usage documentation, see the Storybooks for each framework below. label: 'With Overflow Menu', variant: 'components-datatable-toolbar--with-overflow-menu', }, + { + label: 'Sorting (with AI slug)', + variant: 'experimental-unstable-slug-datatable--column-slug-sort', + }, + { + label: 'Selection and Expansion (with AI slug)', + variant: + 'experimental-unstable-slug-datatable--slug-with-selection-and-expansion', + }, ]} /> diff --git a/src/pages/components/data-table/images/data-table-usage-search.png b/src/pages/components/data-table/images/data-table-usage-search.png new file mode 100644 index 00000000000..0170caa353a Binary files /dev/null and b/src/pages/components/data-table/images/data-table-usage-search.png differ diff --git a/src/pages/components/data-table/images/style-ai-presence-datatable-row-hover.png b/src/pages/components/data-table/images/style-ai-presence-datatable-row-hover.png new file mode 100644 index 00000000000..4ea0b414d77 Binary files /dev/null and b/src/pages/components/data-table/images/style-ai-presence-datatable-row-hover.png differ diff --git a/src/pages/components/data-table/images/style-ai-presence-datatable.png b/src/pages/components/data-table/images/style-ai-presence-datatable.png new file mode 100644 index 00000000000..dea59f82e75 Binary files /dev/null and b/src/pages/components/data-table/images/style-ai-presence-datatable.png differ diff --git a/src/pages/components/data-table/images/style-ai-presence-entire-datatable.png b/src/pages/components/data-table/images/style-ai-presence-entire-datatable.png new file mode 100644 index 00000000000..be66c4097fa Binary files /dev/null and b/src/pages/components/data-table/images/style-ai-presence-entire-datatable.png differ diff --git a/src/pages/components/data-table/images/style-ai-presence-individual-cells.png b/src/pages/components/data-table/images/style-ai-presence-individual-cells.png new file mode 100644 index 00000000000..1dc6161d98a Binary files /dev/null and b/src/pages/components/data-table/images/style-ai-presence-individual-cells.png differ diff --git a/src/pages/components/data-table/images/style-ai-presence-row-columns.png b/src/pages/components/data-table/images/style-ai-presence-row-columns.png new file mode 100644 index 00000000000..12f9679c542 Binary files /dev/null and b/src/pages/components/data-table/images/style-ai-presence-row-columns.png differ diff --git a/src/pages/components/data-table/images/usage-ai-presence-datatable-column-ai.png b/src/pages/components/data-table/images/usage-ai-presence-datatable-column-ai.png new file mode 100644 index 00000000000..45185c35365 Binary files /dev/null and b/src/pages/components/data-table/images/usage-ai-presence-datatable-column-ai.png differ diff --git a/src/pages/components/data-table/images/usage-ai-presence-datatable-row-ai-d.png b/src/pages/components/data-table/images/usage-ai-presence-datatable-row-ai-d.png new file mode 100644 index 00000000000..5623fb37935 Binary files /dev/null and b/src/pages/components/data-table/images/usage-ai-presence-datatable-row-ai-d.png differ diff --git a/src/pages/components/data-table/images/usage-ai-presence-datatable-row-ai-l.png b/src/pages/components/data-table/images/usage-ai-presence-datatable-row-ai-l.png new file mode 100644 index 00000000000..7e4d4a9b566 Binary files /dev/null and b/src/pages/components/data-table/images/usage-ai-presence-datatable-row-ai-l.png differ diff --git a/src/pages/components/data-table/images/usage-ai-presence-datatable.png b/src/pages/components/data-table/images/usage-ai-presence-datatable.png new file mode 100644 index 00000000000..9955c70289d Binary files /dev/null and b/src/pages/components/data-table/images/usage-ai-presence-datatable.png differ diff --git a/src/pages/components/data-table/images/usage-ai-presence-inline-datatable.png b/src/pages/components/data-table/images/usage-ai-presence-inline-datatable.png new file mode 100644 index 00000000000..00e81c9e62c Binary files /dev/null and b/src/pages/components/data-table/images/usage-ai-presence-inline-datatable.png differ diff --git a/src/pages/components/data-table/style.mdx b/src/pages/components/data-table/style.mdx index 9f3ef7f1195..d31d9860ed3 100755 --- a/src/pages/components/data-table/style.mdx +++ b/src/pages/components/data-table/style.mdx @@ -6,6 +6,22 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- + + +The following page documents visual specifications such as color, typography, +structure, and AI presence. + + + + + +Color +Typography +Structure +AI presence + + + ## Color ### Table header @@ -290,3 +306,87 @@ sizes. Structure and spacing measurements for batch action bar | px/rem + +## AI presence + +The following are the unique styles applied to the component when the AI slug is +present. Unless specified, all other tokens in the component remain the same as +the non-AI variant. + +More information about AI style elements is coming soon. + +Entire table + +| Element | Property | Token / Size | +| -------------------------- | ---------------- | ------------------- | +| Data table:background | background-color | `$layer` \* | +| | box-shadow | `$ai-drop-shadow` | +| | inner-shadow | `$ai-inner-shadow` | +| Linear gradient:background | start | `$ai-aura-start-sm` | +| | stop | `$ai-aura-stop` | +| Linear gradient:border | top | `$ai-border-start` | +| | bottom | `$ai-border-end` | +| AI Slug | size | large | + + + + +![AI Data table](images/style-ai-presence-entire-datatable.png) + + + Structure and spacing measurements for entire data table generated by AI. + + + + + +Individual cells + +| Element | Property | Token / Size | +| ----------- | -------- | ------------ | +| Inline Slug | size | medium | + + + + +![Data table with AI generated cells](images/style-ai-presence-individual-cells.png) + + + Structure and spacing measurements for individual cells of a data table + generated by AI. + + + + + +Rows and columns + +| Element | Property | Token / Size | +| -------------------------- | --------- | ------------------- | +| Linear gradient:background | start | `$ai-aura-start-sm` | +| | stop | `$ai-aura-stop` | +| Linear gradient:border | left, top | `$ai-border-strong` | +| AI Slug | size | mini | + + + + +![Data table with AI generated rows and columns](images/style-ai-presence-row-columns.png) + + + Structure and spacing measurements for rows and columns of a data table + generated by AI. + + + + + + + + +![AI Data table hover interaction](images/style-ai-presence-datatable-row-hover.png) + +Hover interaction for an AI generated row. + + + diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx index 19e50c09e7f..969cd5b697c 100755 --- a/src/pages/components/data-table/usage.mdx +++ b/src/pages/components/data-table/usage.mdx @@ -16,6 +16,15 @@ your product's users. + + +Experimental slug is now available for +[data table](https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-slug-datatable--overview). +This addition changes the visual appearance of the component and introduces an +AI explainability feature when AI is present in the component. + + + Live demo @@ -25,6 +34,7 @@ your product's users. Variants Universal behaviors Modifiers +AI presence Related Feedback @@ -94,6 +104,15 @@ your product's users. label: 'With Overflow Menu', variant: 'components-datatable-toolbar--with-overflow-menu', }, + { + label: 'Sorting (with AI slug)', + variant: 'experimental-unstable-slug-datatable--column-slug-sort', + }, + { + label: 'Selection and Expansion (with AI slug)', + variant: + 'experimental-unstable-slug-datatable--slug-with-selection-and-expansion', + }, ]} /> @@ -208,8 +227,8 @@ row heights. ### Placement Data tables should be placed in a page's main content area and given plenty of -space to display data without truncation. Avoid placing data tables inside -modals or smaller containers where the information can feel cramped or needs +space to display data without truncation. Avoid placing data tables inside data +tables or smaller containers where the information can feel cramped or needs truncation. The data table can be placed on the grid following the three different @@ -308,8 +327,8 @@ For further content guidance, see Carbon's The expandable data table helps present large amounts of data in a small space. Use the expanded section for supplementary information or data that needs additional query time. When the content in the expanded area feels cramped, -consider taking the user to a dedicated page, side panel, or modal to view the -information and complete tasks. +consider taking the user to a dedicated page, side panel, or data table to view +the information and complete tasks. @@ -471,10 +490,15 @@ toolbar. By default the search functionality follows the should be closed by default, and placed below the table title. + + ![data table search](images/datatable_search.gif) +![data table search](images/data-table-usage-search.png) + + @@ -602,6 +626,87 @@ alternating colors to make scanning horizontal information easier for the user. +## AI presence + +Data table has a modification that takes on the AI visual styling when AI is +present in the table. The AI variants of a data table function the same as the +normal variants except for the addition of the AI slug, which is both a visual +indicator and the trigger for the explainability popover. Where the AI label +goes inside of a data table depends on which parts of the data are AI generated. + +More information about designing for AI guidelines is coming soon. + +#### Entire table + +When the entire data table is styled for AI, it indicates to the user that AI is +present in all aspects of the data table. + + + + +![Example of a data table generated by AI](images/usage-ai-presence-datatable.png) + +Example of a data table generated by AI. + + + + +#### Individual cells + +If only some data table cells have content generated by AI, then those cells +have an in-line AI slug next to them. These cells do not get any AI layering. + + + + +![Example of a data table cell generated by AI represneted by the in-line AI slug](images/usage-ai-presence-inline-datatable.png) + + + Example of a data table cell generated by AI represneted by the in-line AI + slug. + + + + + +#### Rows and columns + +If content belonging to only a row or column of the data table is generated by +AI, then only those respective row/s and column/s should receive the AI presence +styling along with the AI slug, not the entire data table. + + + + +![Example of a data table column generated by AI](images/usage-ai-presence-datatable-column-ai.png) + +Example of a data table column generated by AI. + + + + + + + + + + + +![Light mode example of data table rows generated by AI](images/usage-ai-presence-datatable-row-ai-l.png) + + + + + +![Dark mode example of data table rows generated by AI](images/usage-ai-presence-datatable-row-ai-d.png) + + + + + + + + ## Related ### Community extensions diff --git a/src/pages/components/date-picker/code.mdx b/src/pages/components/date-picker/code.mdx index c3bc1d96e92..55fe2af5c60 100755 --- a/src/pages/components/date-picker/code.mdx +++ b/src/pages/components/date-picker/code.mdx @@ -89,5 +89,9 @@ usage documentation, see the Storybooks for each framework below. label: 'Fluid Single (unstable)', variant: 'experimental-unstable-fluiddatepicker--single', }, + { + label: 'Single with AI slug', + variant: 'experimental-unstable-slug-examples--date-picker', + }, ]} /> diff --git a/src/pages/components/date-picker/images/date-picker-AI-default-style.png b/src/pages/components/date-picker/images/date-picker-AI-default-style.png new file mode 100644 index 00000000000..430aef755a2 Binary files /dev/null and b/src/pages/components/date-picker/images/date-picker-AI-default-style.png differ diff --git a/src/pages/components/date-picker/images/date-picker-AI-fluid-style.png b/src/pages/components/date-picker/images/date-picker-AI-fluid-style.png new file mode 100644 index 00000000000..876cb948368 Binary files /dev/null and b/src/pages/components/date-picker/images/date-picker-AI-fluid-style.png differ diff --git a/src/pages/components/date-picker/images/date-picker-AI-presence-default-usage.png b/src/pages/components/date-picker/images/date-picker-AI-presence-default-usage.png new file mode 100644 index 00000000000..4930e878c95 Binary files /dev/null and b/src/pages/components/date-picker/images/date-picker-AI-presence-default-usage.png differ diff --git a/src/pages/components/date-picker/images/date-picker-AI-presence-fluid-usage.png b/src/pages/components/date-picker/images/date-picker-AI-presence-fluid-usage.png new file mode 100644 index 00000000000..4d51f6a2e5f Binary files /dev/null and b/src/pages/components/date-picker/images/date-picker-AI-presence-fluid-usage.png differ diff --git a/src/pages/components/date-picker/images/date-picker-revert-to-AI-default-usage.png b/src/pages/components/date-picker/images/date-picker-revert-to-AI-default-usage.png new file mode 100644 index 00000000000..b3edaa22205 Binary files /dev/null and b/src/pages/components/date-picker/images/date-picker-revert-to-AI-default-usage.png differ diff --git a/src/pages/components/date-picker/images/date-picker-revert-to-AI-fluid-usage.png b/src/pages/components/date-picker/images/date-picker-revert-to-AI-fluid-usage.png new file mode 100644 index 00000000000..4f93239f101 Binary files /dev/null and b/src/pages/components/date-picker/images/date-picker-revert-to-AI-fluid-usage.png differ diff --git a/src/pages/components/date-picker/style.mdx b/src/pages/components/date-picker/style.mdx index b366419fef0..706e855cc58 100644 --- a/src/pages/components/date-picker/style.mdx +++ b/src/pages/components/date-picker/style.mdx @@ -9,7 +9,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] The following page documents visual specifications such as color, typography, -structure, and size. +structure, size, and AI presence. @@ -19,6 +19,7 @@ structure, and size. Typography Structure Size +AI presence Feedback @@ -468,6 +469,49 @@ group. Time picker's total width will vary based on the grid and layout Sizes for default style time picker input | px / rem +## AI presence + +The following are the unique styles applied to the components when the AI slug +is present. Unless specified, all other tokens in the components remain the same +as the non-AI variants. + +More information about designing for AI guidelines is coming soon. + +| Element | Property | Token / Size | +| --------------- | ---------------- | ------------------- | +| Linear-gradient | start | `$ai-aura-start-sm` | +| | stop | `$ai-aura-stop` | +| Field | border-bottom | `$ai-border-strong` | +| | background color | `$field` \* | +| AI slug | size | mini | + + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + + + + + + + + +![Structure and spacing default date picker with AI](images/date-picker-AI-default-style.png) + + + + + +![Structure and spacing fluid date picker with AI](images/date-picker-AI-fluid-style.png) + + + + + + + + ## Feedback Help us improve this component by providing feedback, asking questions, and diff --git a/src/pages/components/date-picker/usage.mdx b/src/pages/components/date-picker/usage.mdx index 9f6f82c4617..a6e81d59284 100755 --- a/src/pages/components/date-picker/usage.mdx +++ b/src/pages/components/date-picker/usage.mdx @@ -15,6 +15,15 @@ and times. + + +Experimental slug is now available for +[date picker](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--date-picker). +This addition changes the visual appearance of the component and introduces an +AI explainability feature when AI is present in the component. + + + Live demo @@ -25,6 +34,7 @@ and times. Simple date input Calendar pickers Time pickers +AI presence Related Feedback @@ -61,6 +71,10 @@ and times. label: 'Fluid Single (unstable)', variant: 'experimental-unstable-fluiddatepicker--single', }, + { + label: 'Single with AI slug', + variant: 'experimental-unstable-slug-examples--date-picker', + }, ]} /> @@ -565,6 +579,67 @@ a meeting time. +## AI presence + +Date picker has a modification that takes on the AI visual styling when the AI +slug is present in the input. The AI variant functions the same as the normal +version except with the addition of the AI slug which is both a visual indicator +and the trigger for the explainability popover. + +More information about designing for AI guidelines is coming soon. + + + + + + + + +![Default date picker with AI presence](images/date-picker-AI-presence-default-usage.png) + + + + + +![Fluid date picker with AI presence](images/date-picker-AI-presence-fluid-usage.png) + + + + + + + + +### Revert to AI + +A date picker can toggle between the AI variant and the non-AI variant depending +on the user’s interaction. If the user manually overrides the AI-suggested +content then the input will change from the AI variant to the non-AI variant. +Once edited, the user should still be able to switch back to the initially AI +generated content via a revert to AI button. + + + + + + + + +![Default date picker with AI revert](images/date-picker-revert-to-AI-default-usage.png) + + + + + +![Fluid date picker with AI revert](images/date-picker-revert-to-AI-fluid-usage.png) + + + + + + + + ## Related #### Asking for relative times and dates diff --git a/src/pages/components/dropdown/code.mdx b/src/pages/components/dropdown/code.mdx index 288a40bfb04..67ea7436a89 100755 --- a/src/pages/components/dropdown/code.mdx +++ b/src/pages/components/dropdown/code.mdx @@ -79,27 +79,42 @@ documentation, see the Storybooks for each framework below. }, { label: 'Fluid dropdown (unstable)', - variant: 'experimental-unstable-fluiddropdown--default', + variant: 'experimental-fluid-components-unstable-fluiddropdown--default', }, { label: 'Fluid Condensed dropdown (unstable)', - variant: 'experimental-unstable-fluiddropdown--condensed', + variant: + 'experimental-fluid-components-unstable-fluiddropdown--condensed', + }, + { + label: 'Dropdown with AI slug', + variant: 'experimental-unstable-slug-examples--dropdown', }, { label: 'Multiselect', variant: 'components-multiselect--default', }, + { + label: 'Multiselect with AI slug', + variant: 'experimental-unstable-slug-examples--multiselect', + }, { label: 'Filterable multiselect', variant: 'components-multiselect--filterable', }, + { + label: 'Filterable multiselect with AI slug', + variant: 'experimental-unstable-slug-examples--filterable-multiselect', + }, { label: 'Fluid multiselect (unstable)', - variant: 'experimental-unstable-fluidmultiselect--default', + variant: + 'experimental-fluid-components-unstable-fluidmultiselect--default', }, { label: 'Fluid condensed multiselect (unstable)', - variant: 'experimental-unstable-fluidmultiselect--condensed', + variant: + 'experimental-fluid-components-unstable-fluidmultiselect--condensed', }, { label: 'Combobox', @@ -107,11 +122,16 @@ documentation, see the Storybooks for each framework below. }, { label: 'Fluid combobox (unstable)', - variant: 'experimental-unstable-fluidcombobox--default', + variant: 'experimental-fluid-components-unstable-fluidcombobox--default', }, { label: 'Fluid condensed combobox (unstable)', - variant: 'experimental-unstable-fluidcombobox--condensed', + variant: + 'experimental-fluid-components-unstable-fluidcombobox--condensed', + }, + { + label: 'Combobox with AI slug', + variant: 'experimental-unstable-slug-examples--combobox', }, ]} /> diff --git a/src/pages/components/dropdown/images/dropdown-ai-presence-default.png b/src/pages/components/dropdown/images/dropdown-ai-presence-default.png new file mode 100644 index 00000000000..0cb524ac259 Binary files /dev/null and b/src/pages/components/dropdown/images/dropdown-ai-presence-default.png differ diff --git a/src/pages/components/dropdown/images/dropdown-ai-presence-fluid.png b/src/pages/components/dropdown/images/dropdown-ai-presence-fluid.png new file mode 100644 index 00000000000..524974557ee Binary files /dev/null and b/src/pages/components/dropdown/images/dropdown-ai-presence-fluid.png differ diff --git a/src/pages/components/dropdown/images/dropdown-ai-revert-default.png b/src/pages/components/dropdown/images/dropdown-ai-revert-default.png new file mode 100644 index 00000000000..e6792684d6b Binary files /dev/null and b/src/pages/components/dropdown/images/dropdown-ai-revert-default.png differ diff --git a/src/pages/components/dropdown/images/dropdown-ai-revert-fluid.png b/src/pages/components/dropdown/images/dropdown-ai-revert-fluid.png new file mode 100644 index 00000000000..a57039119c0 Binary files /dev/null and b/src/pages/components/dropdown/images/dropdown-ai-revert-fluid.png differ diff --git a/src/pages/components/dropdown/images/dropdown-style-ai-presence-ai-revert-default.png b/src/pages/components/dropdown/images/dropdown-style-ai-presence-ai-revert-default.png new file mode 100644 index 00000000000..b19eec6fdc7 Binary files /dev/null and b/src/pages/components/dropdown/images/dropdown-style-ai-presence-ai-revert-default.png differ diff --git a/src/pages/components/dropdown/images/dropdown-style-ai-presence-ai-revert-fluid.png b/src/pages/components/dropdown/images/dropdown-style-ai-presence-ai-revert-fluid.png new file mode 100644 index 00000000000..663fb17c3eb Binary files /dev/null and b/src/pages/components/dropdown/images/dropdown-style-ai-presence-ai-revert-fluid.png differ diff --git a/src/pages/components/dropdown/images/usage-ai-combobox-vertical-divider-do.png b/src/pages/components/dropdown/images/usage-ai-combobox-vertical-divider-do.png new file mode 100644 index 00000000000..2f0eda145b0 Binary files /dev/null and b/src/pages/components/dropdown/images/usage-ai-combobox-vertical-divider-do.png differ diff --git a/src/pages/components/dropdown/images/usage-ai-combobox-vertical-divider-dont.png b/src/pages/components/dropdown/images/usage-ai-combobox-vertical-divider-dont.png new file mode 100644 index 00000000000..238cf4b60e8 Binary files /dev/null and b/src/pages/components/dropdown/images/usage-ai-combobox-vertical-divider-dont.png differ diff --git a/src/pages/components/dropdown/style.mdx b/src/pages/components/dropdown/style.mdx index 5fa4f3c0da7..c6cc9dd3fa8 100644 --- a/src/pages/components/dropdown/style.mdx +++ b/src/pages/components/dropdown/style.mdx @@ -6,6 +6,23 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- + + +The following page documents visual specifications such as color, typography, +structure, and size and AI presence. + + + + + +Color +Typography +Structure +Sizes +AI presence + + + ## Color | Element | Property | Color token | @@ -353,3 +370,46 @@ condensed. Fluid dropdown sizes | px / rem + +## AI presence + +The following are the unique styles applied to the component when the AI slug is +present. Unless specified, all other tokens in the component remain the same as +the non-AI variant. + +More information about AI style elements is coming soon. + +| Element | Property | Token / Size | +| --------------- | ---------------- | ------------------- | +| Linear gradient | start | `$ai-aura-start-sm` | +| | stop | `$ai-aura-stop` | +| Field | border-bottom | `$ai-border-strong` | +| | background color | `$field`\* | +| AI Slug | size | mini | + + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + + + + + + + + +![Default dropdown AI example](images/dropdown-style-ai-presence-ai-revert-default.png) + + + + + +![Fluid dropdown AI example](images/dropdown-style-ai-presence-ai-revert-default.png) + + + + + + + diff --git a/src/pages/components/dropdown/usage.mdx b/src/pages/components/dropdown/usage.mdx index 963209ede95..0ce9374ef58 100755 --- a/src/pages/components/dropdown/usage.mdx +++ b/src/pages/components/dropdown/usage.mdx @@ -17,6 +17,18 @@ action to filter or sort existing content. + + +Experimental slug is now available for +[dropdown](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--dropdown), +[combobox](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--combobox), +[multiselect](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--multiselect), +[filterable multiselect](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--filterable-multiselect). +This addition changes the visual appearance of the component and introduces an +AI explainability feature when AI is present in the component. + + + Live demo @@ -28,6 +40,7 @@ action to filter or sort existing content. Multiselect Combo box Modifiers +AI presence Related References Feedback @@ -51,27 +64,42 @@ action to filter or sort existing content. }, { label: 'Fluid dropdown (unstable)', - variant: 'experimental-unstable-fluiddropdown--default', + variant: 'experimental-fluid-components-unstable-fluiddropdown--default', }, { label: 'Fluid Condensed dropdown (unstable)', - variant: 'experimental-unstable-fluiddropdown--condensed', + variant: + 'experimental-fluid-components-unstable-fluiddropdown--condensed', + }, + { + label: 'Dropdown with AI slug', + variant: 'experimental-unstable-slug-examples--dropdown', }, { label: 'Multiselect', variant: 'components-multiselect--default', }, + { + label: 'Multiselect with AI slug', + variant: 'experimental-unstable-slug-examples--multiselect', + }, { label: 'Filterable multiselect', variant: 'components-multiselect--filterable', }, + { + label: 'Filterable multiselect with AI slug', + variant: 'experimental-unstable-slug-examples--filterable-multiselect', + }, { label: 'Fluid multiselect (unstable)', - variant: 'experimental-unstable-fluidmultiselect--default', + variant: + 'experimental-fluid-components-unstable-fluidmultiselect--default', }, { label: 'Fluid condensed multiselect (unstable)', - variant: 'experimental-unstable-fluidmultiselect--condensed', + variant: + 'experimental-fluid-components-unstable-fluidmultiselect--condensed', }, { label: 'Combobox', @@ -79,11 +107,16 @@ action to filter or sort existing content. }, { label: 'Fluid combobox (unstable)', - variant: 'experimental-unstable-fluidcombobox--default', + variant: 'experimental-fluid-components-unstable-fluidcombobox--default', }, { label: 'Fluid condensed combobox (unstable)', - variant: 'experimental-unstable-fluidcombobox--condensed', + variant: + 'experimental-fluid-components-unstable-fluidcombobox--condensed', + }, + { + label: 'Combobox with AI slug', + variant: 'experimental-unstable-slug-examples--combobox', }, ]} /> @@ -430,6 +463,19 @@ even if it's next to a non-interactive item. + + + +![Do introduce a vertical divider to the left of the leftmost interactive set in an input field.](images/usage-ai-combobox-vertical-divider-do.png) + + + + +![Do not use vertical dividers inconsistently in the same icon set, where some icons have vertical dividers and some do not.](images/usage-ai-combobox-vertical-divider-dont.png) + + + + ### Interactions #### Mouse @@ -804,6 +850,68 @@ modifier for dropdown and does not have filtering functionality._ +## AI presence + +Dropdown and its varinats have a modification that takes on the AI visual +styling when the AI slug is present in the input. The AI variant of these +components function the same as the normal version except with the addition of +the AI slug which is both a visual indicator and the trigger for the +explainability popover. + +More information about designing for AI guidelines is coming soon. + + + + + + + + +![Default dropdown AI presence example](images/dropdown-ai-presence-default.png) + + + + + +![Fluid dropdown AI presence example](images/dropdown-ai-presence-fluid.png) + + + + + + + + +### Revert to AI + +A dropdown can toggle between the AI variant and the non-AI variant depending on +the user’s interaction. If the user manually overrides the AI-suggested content +then the input will change from the AI variant to the non-AI variant. Once +edited, the user should still be able to switch back to the initially AI +generated content via a revert to AI button. + + + + + + + + +![Default dropdown AI revert example](images/dropdown-ai-revert-default.png) + + + + + +![Fluid dropdown AI revert example](images/dropdown-ai-revert-fluid.png) + + + + + + + + ## Related - [Checkbox](https://www.carbondesignsystem.com/components/checkbox/code) diff --git a/src/pages/components/form/images/form-style-presence.png b/src/pages/components/form/images/form-style-presence.png new file mode 100644 index 00000000000..721e5ff7e8e Binary files /dev/null and b/src/pages/components/form/images/form-style-presence.png differ diff --git a/src/pages/components/form/images/form-usage-states-ai.png b/src/pages/components/form/images/form-usage-states-ai.png new file mode 100644 index 00000000000..0eb7e7fb2e3 Binary files /dev/null and b/src/pages/components/form/images/form-usage-states-ai.png differ diff --git a/src/pages/components/form/images/usage-ai-presence-form.png b/src/pages/components/form/images/usage-ai-presence-form.png new file mode 100644 index 00000000000..ce001c333a3 Binary files /dev/null and b/src/pages/components/form/images/usage-ai-presence-form.png differ diff --git a/src/pages/components/form/style.mdx b/src/pages/components/form/style.mdx index 13265b567e2..519feb531dd 100644 --- a/src/pages/components/form/style.mdx +++ b/src/pages/components/form/style.mdx @@ -6,6 +6,22 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- + + +The following page documents visual specifications such as color, typography, +structure, and AI presence. + + + + + +Color +Typography +Structure +AI presence + + + ## Color Refer to the [text input](/components/text-input/usage), @@ -83,3 +99,33 @@ content and layout of the design. On mobile, forms can only have one column. Structure and spacing measurements + +## AI presence + +The following are the unique styles applied to the component when the AI slug is +present. Unless specified, all other tokens in the component remain the same as +the non-AI variant. The AI styling spec of individual components inside of the +form can be found on their respective style tabs. + +More information about AI style elements is coming soon. + +| Element | Property | Token / Size | +| -------------------------- | ---------------- | ------------------- | +| Form:background | background-color | `$layer` \* | +| | box-shadow | `$ai-drop-shadow` | +| | inner-shadow | `$ai-inner-shadow` | +| Linear gradient:background | start | `$ai-aura-start-sm` | +| | stop | `$ai-aura-stop` | +| Linear gradient:border | top | `$ai-border-start` | +| | bottom | `$ai-border-end` | +| AI Slug | size | large | + + + + +![Form AI presence](images/form-style-presence.png) + +Structure and spacing measurements for an AI form. + + + diff --git a/src/pages/components/form/usage.mdx b/src/pages/components/form/usage.mdx index 7f1451c8918..cfcc258ab23 100755 --- a/src/pages/components/form/usage.mdx +++ b/src/pages/components/form/usage.mdx @@ -15,6 +15,15 @@ configure options. + + +Experimental slug is now available for +[form](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-form--form-example). +This addition changes the visual appearance of the component and introduces an +AI explainability feature when AI is present in the component. + + + Live demo @@ -23,6 +32,7 @@ configure options. Content Behaviors Additional guidance +AI presence Related Feedback @@ -388,6 +398,12 @@ form. + + +![Examples fluid input states](images/form-usage-states-ai.png) + + + @@ -407,6 +423,34 @@ pattern. | [Designing for longer forms](/patterns/forms-pattern/#designing-for-longer-forms) | Techniques to help make longer forms less overwhelming, including guidance for accordion and multistep forms. | | [Form variants](/patterns/forms-pattern/#variants) | Forms may be presented as dedicated pages, side panels, or dialogs depending on the use case and the situation. | +## AI presence + +Form has a modification that takes on the AI visual styling when AI is present +in the form. The AI variants of a form function the same as the normal variants +except for the addition of the AI slug, which is both a visual indicator and the +trigger for the explainability popover. + +The AI presence in form can appear in two ways: broadly, over the whole form, or +focused, just in certain parts of the form. When the entire form is styled for +AI, it indicates to the user that AI is present in all aspects of the form. If +only a limited amount of the form content is generated by AI, then only those +components should receive the AI presence styling, not the entire form. + +More information about designing for AI guidelines is coming soon. + + + + +![Example of form with full and compoment based AI presence](images/usage-ai-presence-form.png) + + + Example of form with full AI presence on the left and compoment based AI + presence on the right. + + + + + ## Related diff --git a/src/pages/components/menu-buttons/usage.mdx b/src/pages/components/menu-buttons/usage.mdx index 3bc44fb2a2a..382b4352ae5 100644 --- a/src/pages/components/menu-buttons/usage.mdx +++ b/src/pages/components/menu-buttons/usage.mdx @@ -15,14 +15,6 @@ menu with a list of interactive options. - - -**New in Carbon v11!** Apart from the overflow menu, the menu button and combo -button components have been added to our system and they are only available in -v11. - - - Live demo diff --git a/src/pages/components/menu/usage.mdx b/src/pages/components/menu/usage.mdx index a4e3febf56d..cfb5b060f17 100644 --- a/src/pages/components/menu/usage.mdx +++ b/src/pages/components/menu/usage.mdx @@ -15,13 +15,6 @@ element or perform a specific action. - - -**New in Carbon v11!** Menu is a new component we have added to our system and -is only available in v11. - - - Live demo diff --git a/src/pages/components/modal/code.mdx b/src/pages/components/modal/code.mdx index 6df9df1b6aa..34038ea3f35 100755 --- a/src/pages/components/modal/code.mdx +++ b/src/pages/components/modal/code.mdx @@ -85,5 +85,9 @@ documentation, see the Storybooks for each framework below. label: 'With State Manager', variant: 'components-modal--with-state-manager', }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--modal', + }, ]} /> diff --git a/src/pages/components/modal/images/modal-style-presence.png b/src/pages/components/modal/images/modal-style-presence.png new file mode 100644 index 00000000000..635d9f3c6ce Binary files /dev/null and b/src/pages/components/modal/images/modal-style-presence.png differ diff --git a/src/pages/components/modal/images/modal-usage-ai-presence-g100.png b/src/pages/components/modal/images/modal-usage-ai-presence-g100.png new file mode 100644 index 00000000000..c85adb49e72 Binary files /dev/null and b/src/pages/components/modal/images/modal-usage-ai-presence-g100.png differ diff --git a/src/pages/components/modal/images/modal-usage-ai-presence-w.png b/src/pages/components/modal/images/modal-usage-ai-presence-w.png new file mode 100644 index 00000000000..4b5191be4d0 Binary files /dev/null and b/src/pages/components/modal/images/modal-usage-ai-presence-w.png differ diff --git a/src/pages/components/modal/style.mdx b/src/pages/components/modal/style.mdx index a37011cd32c..0a2f5611ad4 100755 --- a/src/pages/components/modal/style.mdx +++ b/src/pages/components/modal/style.mdx @@ -6,6 +6,23 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- + + +The following page documents visual specifications such as color, typography, +structure, size, and AI presence. + + + + + +Color +Typography +Structure +Sizes +AI presence + + + ## Color Refer to the [button](/components/button/style) for primary and secondary button @@ -193,3 +210,34 @@ the content while sticking to the bottom of the mobile screen. + +## AI presence + +The following are the unique styles applied to the component when the AI slug is +present. Unless specified, all other tokens in the component remain the same as +the non-AI variant. The AI styling spec of individual components inside of the +modal can be found on their respective style tabs. + +More information about AI style elements is coming soon. + +| Element | Property | Token / Size | +| -------------------------- | ---------------- | ------------------- | +| Modal:background | background-color | `$layer` \* | +| | box-shadow | `$ai-drop-shadow` | +| | inner-shadow | `$ai-inner-shadow` | +| Overlay | background-color | `$ai-overlay` | +| Linear gradient:background | start | `$ai-aura-start-sm` | +| | stop | `$ai-aura-stop` | +| Linear gradient:border | top | `$ai-border-start` | +| | bottom | `$ai-border-end` | +| AI Slug | size | large | + + + + +![Modal AI presence](images/modal-style-presence.png) + +Structure and spacing measurements for an AI Modal. + + + diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx index fdc07e7efad..ca0e6848f72 100755 --- a/src/pages/components/modal/usage.mdx +++ b/src/pages/components/modal/usage.mdx @@ -15,6 +15,15 @@ information via a window that sits on top of the page content. + + +Experimental slug is now available for +[modal](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--modal). +This addition changes the visual appearance of the component and introduces an +AI explainability feature when AI is present in the component. + + + Live demo @@ -23,6 +32,7 @@ information via a window that sits on top of the page content. Content Universal behaviors Modal variants +AI presence Related Feedback @@ -55,6 +65,10 @@ information via a window that sits on top of the page content. label: 'With State Manager', variant: 'components-modal--with-state-manager', }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--modal', + }, ]} /> @@ -490,6 +504,43 @@ The Cancel button is aligned to left side of the dialog and uses a ghost button. +## AI presence + +Modal has a modification that takes on the AI visual styling when AI is present +in the entire container. The AI variants of a modal function the same as the +normal variants except for the addition of the AI slug, which is both a visual +indicator and the trigger for the explainability popover. + +The AI presence in modal can appear in two ways: broadly, over the whole modal, +or focused, just in certain parts of the modal. When the entire modal is styled +for AI, it indicates to the user that AI is present in all aspects of the modal. +If only a limited amount of the modal content is generated by AI, then only +those components should receive the AI presence styling, not the entire modal. + +More information about designing for AI guidelines is coming soon. + + + + + + + + +![Modal's light mode AI presence example](images/modal-usage-ai-presence-w.png) + + + + + +![Modal's dark mode AI presence example](images/modal-usage-ai-presence-g100.png) + + + + + + + + ## Related #### Modal vs. notification diff --git a/src/pages/components/notification/images/notification.gif b/src/pages/components/notification/images/notification.gif new file mode 100644 index 00000000000..7e54ff78f12 Binary files /dev/null and b/src/pages/components/notification/images/notification.gif differ diff --git a/src/pages/components/notification/images/notification.png b/src/pages/components/notification/images/notification.png new file mode 100644 index 00000000000..3ae95804356 Binary files /dev/null and b/src/pages/components/notification/images/notification.png differ diff --git a/src/pages/components/notification/style.mdx b/src/pages/components/notification/style.mdx index f188a27b804..19a16c3231d 100755 --- a/src/pages/components/notification/style.mdx +++ b/src/pages/components/notification/style.mdx @@ -57,7 +57,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ## Typography -Notification text should be set in sentence case with only the first word +Write notifications in sentence case, which means only the first word is capitalized. Notification titles should be concise and to the point. | Element | Font-size (px/rem) | Font-weight | Type token | diff --git a/src/pages/components/notification/usage.mdx b/src/pages/components/notification/usage.mdx index 4136b111081..0bef9c04e60 100755 --- a/src/pages/components/notification/usage.mdx +++ b/src/pages/components/notification/usage.mdx @@ -17,16 +17,6 @@ actionable notifications. - - -**v11 update:** An actionable variant has been added to the notification -component. Actionable notifications allow for interactive elements within a -notification, like buttons. Toast and inline notification no longer allow any -interactive elements. For v10 implementation guidance, go to -[v10 Notification](https://v10.carbondesignsystem.com/components/notification/usage/). - - - Live demo @@ -247,10 +237,15 @@ the top of the list, with older notifications being pushed down until they are dismissed. + + + +![Example of toast notification placement](images/notification.gif) -![Example of toast notification placement](images/05_toast_context_608.gif) +![Example of toast notification placement](/images/notification.png) + diff --git a/src/pages/components/number-input/code.mdx b/src/pages/components/number-input/code.mdx index 922e49a65c1..93840152a9d 100755 --- a/src/pages/components/number-input/code.mdx +++ b/src/pages/components/number-input/code.mdx @@ -72,5 +72,9 @@ usage documentation, see the Storybooks for each framework below. label: 'Fluid (unstable)', variant: 'experimental-unstable-fluidnumberinput--default', }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--number-input', + }, ]} /> diff --git a/src/pages/components/number-input/images/number-input-style-ai-default.png b/src/pages/components/number-input/images/number-input-style-ai-default.png new file mode 100644 index 00000000000..24e891fc062 Binary files /dev/null and b/src/pages/components/number-input/images/number-input-style-ai-default.png differ diff --git a/src/pages/components/number-input/images/number-input-style-ai-fluid.png b/src/pages/components/number-input/images/number-input-style-ai-fluid.png new file mode 100644 index 00000000000..b7817380f03 Binary files /dev/null and b/src/pages/components/number-input/images/number-input-style-ai-fluid.png differ diff --git a/src/pages/components/number-input/images/number-input-style-ai-presence-ai-revert-default.png b/src/pages/components/number-input/images/number-input-style-ai-presence-ai-revert-default.png new file mode 100644 index 00000000000..7f2fc073eec Binary files /dev/null and b/src/pages/components/number-input/images/number-input-style-ai-presence-ai-revert-default.png differ diff --git a/src/pages/components/number-input/images/number-input-style-ai-presence-ai-revert-fluid.png b/src/pages/components/number-input/images/number-input-style-ai-presence-ai-revert-fluid.png new file mode 100644 index 00000000000..d39da9d1d51 Binary files /dev/null and b/src/pages/components/number-input/images/number-input-style-ai-presence-ai-revert-fluid.png differ diff --git a/src/pages/components/number-input/images/number-input-usage-12.png b/src/pages/components/number-input/images/number-input-usage-12.png new file mode 100644 index 00000000000..24e891fc062 Binary files /dev/null and b/src/pages/components/number-input/images/number-input-usage-12.png differ diff --git a/src/pages/components/number-input/images/number-input-usage-13.png b/src/pages/components/number-input/images/number-input-usage-13.png new file mode 100644 index 00000000000..d1f58189789 Binary files /dev/null and b/src/pages/components/number-input/images/number-input-usage-13.png differ diff --git a/src/pages/components/number-input/images/number-input-usage-14.png b/src/pages/components/number-input/images/number-input-usage-14.png new file mode 100644 index 00000000000..b7817380f03 Binary files /dev/null and b/src/pages/components/number-input/images/number-input-usage-14.png differ diff --git a/src/pages/components/number-input/images/number-input-usage-15.png b/src/pages/components/number-input/images/number-input-usage-15.png new file mode 100644 index 00000000000..fbb0c85944f Binary files /dev/null and b/src/pages/components/number-input/images/number-input-usage-15.png differ diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx index 7b236e4da42..2f809410d87 100755 --- a/src/pages/components/number-input/style.mdx +++ b/src/pages/components/number-input/style.mdx @@ -6,6 +6,23 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- + + +The following page documents visual specifications such as color, typography, +structure, size, and AI presence. + + + + + +Color +Typography +Structure +Sizes +AI presence + + + ## Color | Element | Property | Color token | @@ -174,3 +191,46 @@ layout, and design. Sizes for number input fields | px / rem + +## AI presence + +The following are the unique styles applied to the component when the AI slug is +present. Unless specified, all other tokens in the component remain the same as +the non-AI variant. + +More information about AI style elements is coming soon. + +| Element | Property | Token / Size | +| --------------- | ---------------- | ------------------- | +| Linear gradient | start | `$ai-aura-start-sm` | +| | stop | `$ai-aura-stop` | +| Field | border-bottom | `$ai-border-strong` | +| | background color | `$field`\* | +| AI Slug | size | mini | + + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + + + + + + + + +![Default number input AI example](images/number-input-style-ai-presence-ai-revert-default.png) + + + + + +![Fluid number input AI example](images/number-input-style-ai-presence-ai-revert-fluid.png) + + + + + + + diff --git a/src/pages/components/number-input/usage.mdx b/src/pages/components/number-input/usage.mdx index f9fd4d919c3..710024cdb5c 100755 --- a/src/pages/components/number-input/usage.mdx +++ b/src/pages/components/number-input/usage.mdx @@ -15,6 +15,15 @@ decrease the value with a two-segment control. + + +Experimental slug is now available for +[number input](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--number-input&_ga=2.126834955.781464953.1715000611-86992666.1707752603&_gl=1*1l8cah1*_ga*ODY5OTI2NjYuMTcwNzc1MjYwMw..*_ga_FYECCCS21D*MTcxNTE3NzAxMC4zNi4xLjE3MTUxNzc1MTQuMC4wLjA.). +This addition changes the visual appearance of the component and introduces an +AI explainability feature when AI is present in the component. + + + Live demo @@ -22,6 +31,7 @@ decrease the value with a two-segment control. Formatting Content Behaviors +AI presence Related References Feedback @@ -42,6 +52,10 @@ decrease the value with a two-segment control. label: 'Fluid (unstable)', variant: 'experimental-unstable-fluidnumberinput--default', }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--number-input', + }, ]} /> @@ -329,6 +343,67 @@ number of children as ‘0’. +## AI presence + +Number input has a modification that takes on the AI visual styling when the AI +slug is present in the input. The AI variant of number input functions the same +as the normal version except with the addition of the AI slug which is both a +visual indicator and the trigger for the explainability popover. + +More information about designing for AI guidelines is coming soon. + + + + + + + + +![Default number input AI presence example](images/number-input-style-ai-default.png) + + + + + +![Fluid number input AI presence example](images/number-input-style-ai-fluid.png) + + + + + + + + +### Revert to AI + +A number input can toggle between the AI variant and the non-AI variant +depending on the user’s interaction. If the user manually overrides the +AI-suggested content then the input will change from the AI variant to the +non-AI variant. Once edited, the user should still be able to switch back to the +initially AI generated content via a revert to AI button. + + + + + + + + +![Default number input AI revert example](images/number-input-usage-13.png) + + + + + +![Fluid number input AI revert example](images/number-input-usage-15.png) + + + + + + + + ## Related - Use [slider](https://carbondesignsystem.com/components/slider/usage/) when diff --git a/src/pages/components/popover/code.mdx b/src/pages/components/popover/code.mdx index 085cd0afcdf..3e48451b1fa 100644 --- a/src/pages/components/popover/code.mdx +++ b/src/pages/components/popover/code.mdx @@ -46,7 +46,7 @@ documentation, see the Storybooks for each framework below. variants={[ { label: 'Auto Align', - variant: 'components-popover--auto-align', + variant: 'components-popover--experimental-auto-align', }, { label: 'Tab Tip', diff --git a/src/pages/components/popover/usage.mdx b/src/pages/components/popover/usage.mdx index 86ee0180112..8fc90cde263 100644 --- a/src/pages/components/popover/usage.mdx +++ b/src/pages/components/popover/usage.mdx @@ -13,13 +13,6 @@ A popover is a layer that pops up over all other elements on a page. - - -**New in v11!** Popover is a new component we have added to our system and is -only available in v11. - - - Live demo @@ -43,7 +36,7 @@ only available in v11. variants={[ { label: 'Auto Align', - variant: 'components-popover--auto-align', + variant: 'components-popover--experimental-auto-align', }, { label: 'Tab Tib', diff --git a/src/pages/components/progress-bar/images/progress-bar-usage-2.png b/src/pages/components/progress-bar/images/progress-bar-usage-2.png new file mode 100644 index 00000000000..4dc245c5d27 Binary files /dev/null and b/src/pages/components/progress-bar/images/progress-bar-usage-2.png differ diff --git a/src/pages/components/progress-bar/images/progress-bar-usage-3.png b/src/pages/components/progress-bar/images/progress-bar-usage-3.png new file mode 100644 index 00000000000..7898808b194 Binary files /dev/null and b/src/pages/components/progress-bar/images/progress-bar-usage-3.png differ diff --git a/src/pages/components/progress-bar/usage.mdx b/src/pages/components/progress-bar/usage.mdx index 750f7380ffe..49a74ef69e0 100644 --- a/src/pages/components/progress-bar/usage.mdx +++ b/src/pages/components/progress-bar/usage.mdx @@ -117,23 +117,35 @@ which a bar is moving along in constant speed, repeating over time. | [Indeterminate](/components/progress-bar/usage#indeterminate-progress-bar) | Use indeterminate progress bars where there is unclear information about the progression — they convey that users’ request, action, or data is being processed at the moment without indicating how long the activity will take. | + + ![Determinate progress bars fill from 0 to 100%.](images/progress-bar-usage-2.gif) +![Determinate progress bars fill from 0 to 100%.](images/progress-bar-usage-2.png) + + + Determinate progress bars fill from 0 to 100%. + ![Indeterminate progress bars move along a fixed track continually until the process is complete.](images/progress-bar-usage-3.gif) +![Indeterminate progress bars move along a fixed track continually until the process is complete.](images/progress-bar-usage-3.png) + + + Indeterminate progress bars move along a fixed track continually until the process is complete. + ## Determinate progress bar diff --git a/src/pages/components/radio-button/code.mdx b/src/pages/components/radio-button/code.mdx index 1c19100cb83..19025d9b187 100755 --- a/src/pages/components/radio-button/code.mdx +++ b/src/pages/components/radio-button/code.mdx @@ -68,5 +68,9 @@ usage documentation, see the Storybooks for each framework below. label: 'Default', variant: 'components-radiobutton--default', }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--radio-button', + }, ]} /> diff --git a/src/pages/components/radio-button/images/images/radio-button-usage-11.png b/src/pages/components/radio-button/images/images/radio-button-usage-11.png new file mode 100644 index 00000000000..641c0578321 Binary files /dev/null and b/src/pages/components/radio-button/images/images/radio-button-usage-11.png differ diff --git a/src/pages/components/radio-button/images/radio-button-style-5.png b/src/pages/components/radio-button/images/radio-button-style-5.png new file mode 100644 index 00000000000..d68b31f594a Binary files /dev/null and b/src/pages/components/radio-button/images/radio-button-style-5.png differ diff --git a/src/pages/components/radio-button/images/radio-button-usage-11.png b/src/pages/components/radio-button/images/radio-button-usage-11.png index 714623f3f49..641c0578321 100644 Binary files a/src/pages/components/radio-button/images/radio-button-usage-11.png and b/src/pages/components/radio-button/images/radio-button-usage-11.png differ diff --git a/src/pages/components/radio-button/style.mdx b/src/pages/components/radio-button/style.mdx index 70160bde701..eb8a29c75be 100755 --- a/src/pages/components/radio-button/style.mdx +++ b/src/pages/components/radio-button/style.mdx @@ -6,6 +6,23 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- + + +The following page documents visual specifications such as color, typography, +and structure. + + + + + +Color +Typography +Structure +AI presence +Feedback + + + ## Color | Element | Property | Color token | @@ -99,3 +116,29 @@ a phrase and any proper nouns capitalized. Structure and spacing measurements for radio button | px | rem + +## AI presence + +The only style modification an AI variant of the radio button has is the +addition of the slug. All other tokens in the component remain the same as the +non-AI variants. + +More information about designing for AI guidelines is coming soon. + +| Element | Property | Token / Size | +| ------- | -------- | ------------ | +| AI slug | size | mini | + + + + +![Structure and spacing measurements for radio button with AI presence](images/radio-button-style-5.png) + + + + +## Feedback + +Help us improve this component by providing feedback, asking questions, and +leaving any other comments on +[GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md). diff --git a/src/pages/components/radio-button/usage.mdx b/src/pages/components/radio-button/usage.mdx index bbef0e8ff95..b75530c0a68 100755 --- a/src/pages/components/radio-button/usage.mdx +++ b/src/pages/components/radio-button/usage.mdx @@ -15,6 +15,15 @@ one selection from the group is allowed. + + +Experimental slug is now available for +[radio button](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--radio-button). +This addition changes the visual appearance of the component and introduces an +AI explainability feature when AI is present in the component. + + + Live demo @@ -22,6 +31,7 @@ one selection from the group is allowed. Formatting Content Behaviors +AI presence Related References Feedback @@ -38,6 +48,10 @@ one selection from the group is allowed. label: 'Default', variant: 'components-radiobutton--default', }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--radio-button', + }, ]} /> @@ -302,6 +316,24 @@ radio button or they can press an arrow key to select the next radio button. For additional keyboard interactions, see the [accessibility tab](https://www.carbondesignsystem.com/components/radio-button/accessibility). +## AI presence + +Radio button has a modification that embeds the AI slug when AI present in the +control. The AI variant functions the same as the normal version except with the +addition of the AI slug which is both a visual indicator and the trigger for the +explainability popover. The slug can be placed on the group label or on +individual checkbox labels. + +More information about designing for AI guidelines is coming soon. + + + + +![Radio button with AI presence](images/images/radio-button-usage-11.png) + + + + ## Related #### Radio buttons versus checkboxes diff --git a/src/pages/components/select/code.mdx b/src/pages/components/select/code.mdx index 6ec834a2dfa..2ca1091a71b 100755 --- a/src/pages/components/select/code.mdx +++ b/src/pages/components/select/code.mdx @@ -76,5 +76,9 @@ documentation, see the Storybooks for each framework below. label: 'Fluid (unstable)', variant: 'experimental-unstable-fluidselect--default', }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--select', + }, ]} /> diff --git a/src/pages/components/select/images/select-AI-default-style.png b/src/pages/components/select/images/select-AI-default-style.png new file mode 100644 index 00000000000..e881e2b9150 Binary files /dev/null and b/src/pages/components/select/images/select-AI-default-style.png differ diff --git a/src/pages/components/select/images/select-AI-fluid-style.png b/src/pages/components/select/images/select-AI-fluid-style.png new file mode 100644 index 00000000000..c6d39de4fae Binary files /dev/null and b/src/pages/components/select/images/select-AI-fluid-style.png differ diff --git a/src/pages/components/select/images/select-AI-presence-default-usage.png b/src/pages/components/select/images/select-AI-presence-default-usage.png new file mode 100644 index 00000000000..5e020429244 Binary files /dev/null and b/src/pages/components/select/images/select-AI-presence-default-usage.png differ diff --git a/src/pages/components/select/images/select-AI-presence-fluid-usage.png b/src/pages/components/select/images/select-AI-presence-fluid-usage.png new file mode 100644 index 00000000000..34e47818793 Binary files /dev/null and b/src/pages/components/select/images/select-AI-presence-fluid-usage.png differ diff --git a/src/pages/components/select/images/select-revert-to-AI-default-usage.png b/src/pages/components/select/images/select-revert-to-AI-default-usage.png new file mode 100644 index 00000000000..5fc15ba0d6d Binary files /dev/null and b/src/pages/components/select/images/select-revert-to-AI-default-usage.png differ diff --git a/src/pages/components/select/images/select-revert-to-AI-fluid-usage.png b/src/pages/components/select/images/select-revert-to-AI-fluid-usage.png new file mode 100644 index 00000000000..2745e56f98e Binary files /dev/null and b/src/pages/components/select/images/select-revert-to-AI-fluid-usage.png differ diff --git a/src/pages/components/select/style.mdx b/src/pages/components/select/style.mdx index 9947c7a98db..b228992f42e 100755 --- a/src/pages/components/select/style.mdx +++ b/src/pages/components/select/style.mdx @@ -6,6 +6,24 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- + + +The following page documents visual specifications such as color, typography, +structure, size, and AI presence. + + + + + +Color +Typography +Structure +Size +AI presence +Feedback + + + ## Color | Element | Property | Color token | @@ -177,7 +195,7 @@ and any proper nouns capitalized. Select text should be three words or less. Structure and spacing measurements for fluid select | px / rem -## Sizes +## Size ### Default select @@ -216,3 +234,52 @@ and any proper nouns capitalized. Select text should be three words or less. Size for fluid select | px / rem + +## AI presence + +The following are the unique styles applied to the components when the AI slug +is present. Unless specified, all other tokens in the components remain the same +as the non-AI variants. + +More information about designing for AI guidelines is coming soon. + +| Element | Property | Token / Size | +| --------------- | ---------------- | ------------------- | +| Linear-gradient | start | `$ai-aura-start-sm` | +| | stop | `$ai-aura-stop` | +| Field | border-bottom | `$ai-border-strong` | +| | background color | `$field` \* | +| AI slug | size | mini | + + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + + + + + + + + +![Structure and spacing measurements for default select with AI](images/select-AI-default-style.png) + + + + + +![Structure and spacing measurements for fluid select with AI](images/select-AI-fluid-style.png) + + + + + + + + +## Feedback + +Help us improve this component by providing feedback, asking questions, and +leaving any other comments on +[GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md). diff --git a/src/pages/components/select/usage.mdx b/src/pages/components/select/usage.mdx index bbb9dce2c23..95a9ac737ec 100755 --- a/src/pages/components/select/usage.mdx +++ b/src/pages/components/select/usage.mdx @@ -14,6 +14,15 @@ Select allows users to choose one option from a list of values. + + +Experimental slug is now available for +[select](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--select). +This addition changes the visual appearance of the component and introduces an +AI explainability feature when AI is present in the component. + + + Live demo @@ -21,6 +30,8 @@ Select allows users to choose one option from a list of values. Formatting Content Universal behaviors +AI presence +Related Feedback @@ -43,6 +54,10 @@ Select allows users to choose one option from a list of values. label: 'Fluid (unstable)', variant: 'experimental-unstable-fluidselect--default', }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--select', + }, ]} /> @@ -415,6 +430,67 @@ red border, an error icon indicator, and an error message. +## AI presence + +Select has a modification that takes on the AI visual styling when the AI slug +is present in the input. The AI variant functions the same as the normal version +except with the addition of the AI slug which is both a visual indicator and the +trigger for the explainability popover. + +More information about designing for AI guidelines is coming soon. + + + + + + + + +![Default select with AI presence](images/select-AI-presence-default-usage.png) + + + + + +![Fluid select with AI presence](images/select-AI-presence-fluid-usage.png) + + + + + + + + +### Revert to AI + +A select can toggle between the AI variant and the non-AI variant depending on +the user’s interaction. If the user manually overrides the AI-suggested content +then the input will change from the AI variant to the non-AI variant. Once +edited, the user should still be able to switch back to the initially AI +generated content via a revert to AI button. + + + + + + + + +![Default select with AI revert](images/select-revert-to-AI-default-usage.png) + + + + + +![Fluid select with AI revert](images/select-revert-to-AI-fluid-usage.png) + + + + + + + + ## Related - If there are fewer than three options to choose from, use a diff --git a/src/pages/components/structured-list/code.mdx b/src/pages/components/structured-list/code.mdx index 42970697537..91d6387a34e 100755 --- a/src/pages/components/structured-list/code.mdx +++ b/src/pages/components/structured-list/code.mdx @@ -21,7 +21,7 @@ code usage documentation, see the Storybooks for each framework below. @@ -71,13 +71,13 @@ code usage documentation, see the Storybooks for each framework below. label: 'Default', variant: 'components-structuredlist--default', }, - { - label: 'Simple', - variant: 'components-structuredlist--simple', - }, { label: 'Selection', variant: 'components-structuredlist--selection', }, + { + label: 'Selectable with Improved Accessibility (unstable)', + variant: 'experimental-feature-flags-structuredlist--selection', + }, ]} /> diff --git a/src/pages/components/structured-list/images/structured-list-style-1.png b/src/pages/components/structured-list/images/structured-list-style-1.png index 55cd8ab3bca..82990e62db2 100644 Binary files a/src/pages/components/structured-list/images/structured-list-style-1.png and b/src/pages/components/structured-list/images/structured-list-style-1.png differ diff --git a/src/pages/components/structured-list/images/structured-list-style-2.png b/src/pages/components/structured-list/images/structured-list-style-2.png index 8590f1071c3..71af3bb0dd1 100644 Binary files a/src/pages/components/structured-list/images/structured-list-style-2.png and b/src/pages/components/structured-list/images/structured-list-style-2.png differ diff --git a/src/pages/components/structured-list/images/structured-list-style-3.png b/src/pages/components/structured-list/images/structured-list-style-3.png index 0d8c97c2303..41eafe19715 100644 Binary files a/src/pages/components/structured-list/images/structured-list-style-3.png and b/src/pages/components/structured-list/images/structured-list-style-3.png differ diff --git a/src/pages/components/structured-list/images/structured-list-style-4.png b/src/pages/components/structured-list/images/structured-list-style-4.png new file mode 100644 index 00000000000..80ab364de8b Binary files /dev/null and b/src/pages/components/structured-list/images/structured-list-style-4.png differ diff --git a/src/pages/components/structured-list/images/structured-list-style-5.png b/src/pages/components/structured-list/images/structured-list-style-5.png new file mode 100644 index 00000000000..914ff79ee4b Binary files /dev/null and b/src/pages/components/structured-list/images/structured-list-style-5.png differ diff --git a/src/pages/components/structured-list/images/structured-list-style-6.png b/src/pages/components/structured-list/images/structured-list-style-6.png new file mode 100644 index 00000000000..12f130aaf3c Binary files /dev/null and b/src/pages/components/structured-list/images/structured-list-style-6.png differ diff --git a/src/pages/components/structured-list/images/structured-list-style-7.png b/src/pages/components/structured-list/images/structured-list-style-7.png new file mode 100644 index 00000000000..2440ce8b4ce Binary files /dev/null and b/src/pages/components/structured-list/images/structured-list-style-7.png differ diff --git a/src/pages/components/structured-list/images/structured-list-usage-1.png b/src/pages/components/structured-list/images/structured-list-usage-1.png index 67fc9bf24f0..0819bab9431 100644 Binary files a/src/pages/components/structured-list/images/structured-list-usage-1.png and b/src/pages/components/structured-list/images/structured-list-usage-1.png differ diff --git a/src/pages/components/structured-list/images/structured-list-usage-2.png b/src/pages/components/structured-list/images/structured-list-usage-2.png index 9307dca8080..4328b4ad549 100644 Binary files a/src/pages/components/structured-list/images/structured-list-usage-2.png and b/src/pages/components/structured-list/images/structured-list-usage-2.png differ diff --git a/src/pages/components/structured-list/images/structured-list-usage-3.png b/src/pages/components/structured-list/images/structured-list-usage-3.png index 5c25fab2d37..17bfbb5a28c 100644 Binary files a/src/pages/components/structured-list/images/structured-list-usage-3.png and b/src/pages/components/structured-list/images/structured-list-usage-3.png differ diff --git a/src/pages/components/structured-list/images/structured-list-usage-4.png b/src/pages/components/structured-list/images/structured-list-usage-4.png new file mode 100644 index 00000000000..957e1000ba9 Binary files /dev/null and b/src/pages/components/structured-list/images/structured-list-usage-4.png differ diff --git a/src/pages/components/structured-list/images/structured-list-usage-5.png b/src/pages/components/structured-list/images/structured-list-usage-5.png new file mode 100644 index 00000000000..4a2ffdf4a96 Binary files /dev/null and b/src/pages/components/structured-list/images/structured-list-usage-5.png differ diff --git a/src/pages/components/structured-list/images/structured-list-usage-6.png b/src/pages/components/structured-list/images/structured-list-usage-6.png new file mode 100644 index 00000000000..ca9da6d2cb9 Binary files /dev/null and b/src/pages/components/structured-list/images/structured-list-usage-6.png differ diff --git a/src/pages/components/structured-list/style.mdx b/src/pages/components/structured-list/style.mdx index fee711f08d5..3866d540028 100644 --- a/src/pages/components/structured-list/style.mdx +++ b/src/pages/components/structured-list/style.mdx @@ -8,36 +8,110 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ## Color -| Element | Property | Color token | -| ------------------ | ------------- | ------------------- | -| Header | text color | `$text-primary` | -| Row text | text color | `$text-secondary` | -| Header row divider | border-bottom | `$border-subtle` \* | -| Row divider | border-bottom | `$border-subtle` \* | +By default, structured lists have a transparent background layer. Optionally, +you can apply a colored background layer to a structured list. Structured lists +with a colored background layer are only available in the hang alignment. + +| Element | Property | Color token | +| -------------------- | ---------------- | ------------------- | +| Header text | text-color | `$text-primary` | +| Header row divider | border-bottom | `$border-subtle` \* | +| Header (transparent) | background-color | transparent | +| Header (background) | background-color | `$layer` \* | +| Row text | text-color | `$text-secondary` | +| Row divider | border-bottom | `$border-subtle` \* | +| Row (transparent) | background-color | transparent | +| Row (background) | background-color | `$layer` \* | +| Icon | icon-color | `$icon-primary` | * Denotes a contextual color token that will change values based on the layer it is placed on. + + + + + + +![Color of the interactive structured list](images/structured-list-style-1.png) + + + + + +![Color of the interactive structured list](images/structured-list-style-2.png) + + + + + + + + ### Interactive states -| Element | Property | Color token | -| ------------ | ---------------- | ---------------- | -| Row:selected | background-color | `layer-selected` | -| Checkmark | fill | `$icon-primary` | -| Row:hover | background-color | `$layer-hover` | -| Row:focus | border | `$focus` | +The structured list interactive states are shown below with its default +transparent background layer and its optional color background layer. + +| State | Element | Proptery | Color token | +| ------------------- | ----------------- | ---------------- | -------------------------- | +| Enabled (selected) | Row | background-color | `$layer-selected` \* | +| | Row text | text-color | `$text-primary` | +| Hover | Row | background-color | `$layer-hover` \* | +| | Row text | text-color | `$text-primary` | +| Hover (selected) | Row | background-color | `$layer-selected-hover` \* | +| | Row text | text-color | `$text-primary` | +| Focus | Row (transparent) | background-color | transparent | +| | Row (background) | background-color | `$layer` \* | +| | Border | border | `$focus` | +| Focus (selected) | Row | background-color | `$layer-selected` \* | +| | Row text | text-color | `$text-primary` | +| | Border | border | `$focus` | +| Disabled | Row (transparent) | background-color | transparent | +| | Row (background) | background-color | `$layer` \* | +| | Row text | text-color | `$text-disabled` | +| | Icon | inner fill | `$icon-disabled` | +| Disabled (selected) | Row | background-color | `$layer-selected` \* | +| | Row text | text-color | `$text-disabled` | +| | Icon | inner fill | `$icon-disabled` | + + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + + + + + + + +![State of the interactive structured list](images/structured-list-style-3.png) + + + + + +![State of the interactive structured list](images/structured-list-style-4.png) + + + + + + + ## Typography Structured list headings should be set in title case, while all other text is set in sentence case. All typography is left aligned. -| Element | Font-size (px/rem) | Font-weight | Type token | -| --------- | ------------------ | -------------- | --------------------- | -| Heading | 14 / 0.875 | SemiBold / 600 | `$heading-compact-01` | -| List text | 14 / 0.875 | Regular / 400 | `$body-01` | +| Element | px / rem | Font-weight | Type token | +| --------- | ---------- | -------------- | --------------------- | +| Heading | 14 / 0.875 | SemiBold / 600 | `$heading-compact-01` | +| List text | 14 / 0.875 | Regular / 400 | `$body-01` | ## Structure @@ -46,40 +120,56 @@ set in sentence case. All typography is left aligned. | Structured list | min-width | 500 / 31.25 | – | | Header | padding-top | 16 / 1 | `$spacing-05` | | | padding-bottom | 8 / 0.5 | `$spacing-03` | -| | padding-left, padding-right | 16 / 1 | `$spacing-05` | +| | padding-right | 16 / 1 | `$spacing-05` | +| | padding-left (hang) | 16 / 1 | `$spacing-05` | +| | padding-left (flush) | 0 | – | | Row text | padding-top | 16 / 1 | `$spacing-05` | | | padding-bottom | 24 / 1.5 | `$spacing-06` | +| | padding-right | 16 / 1 | `$spacing-05` | +| | padding-left (hang) | 16 / 1 | `$spacing-05` | +| | padding-left (flush) | 0 | – | +| Icon | height, width | 16px | – | | | padding-left, padding-right | 16 / 1 | `$spacing-05` | -| Icon | height, width | 16 / 1 | – | + +### Default structure
-![Spacing and measurements for Structured List](images/structured-list-style-1.png) +![Spacing and measurements for default structured list](images/structured-list-style-5.png)
- The width of structured list varies based on content and layout. + Spacing and measurements for default structured list with hang and flush + alignment | px / rem. +### Selectable structure +
-![Spacing and measurements for structured list with selection](images/structured-list-style-2.png) +![Spacing and measurements for selectable structured list](images/structured-list-style-6.png)
- Spacing and measurements for default spacing with hang alignment and flush - alignment| px / rem + Spacing and measurements for selectable structured list with hang alignment | + px / rem. +## Size + +There are two structured list sizes: default and condensed. + +| Element | Size | px / rem | +| -------- | --------- | --------- | +| Row item | Default | 60 / 3.75 | +| | Condensed | 36 / 2.25 | +
-![Spacing and measurements for structured list with selection](images/structured-list-style-3.png) +![Sizes of structured list with selection](images/structured-list-style-7.png)
- - Spacing and measurements for condensed spacing with hang alignment and flush - alignment | px / rem - +Default and condensed sizes for structured lists diff --git a/src/pages/components/structured-list/usage.mdx b/src/pages/components/structured-list/usage.mdx index f74834772e0..e21f971a647 100755 --- a/src/pages/components/structured-list/usage.mdx +++ b/src/pages/components/structured-list/usage.mdx @@ -15,12 +15,25 @@ definitions. + + +[Experimental structured lists](https://react.carbondesignsystem.com/?path=/story/experimental-feature-flags-structuredlist--selection) are +now available. This addition enhances accessibility and only applies to the +visual appearance, not the function of structured lists. Though we are not +deprecating the current structured lists, we encourage all design teams to use +the new experimental structured lists in their products moving forward. + + + Live demo Overview Formatting Content +Default +Selectable +Modifiers Related Feedback @@ -37,14 +50,14 @@ definitions. label: 'Default', variant: 'components-structuredlist--default', }, - { - label: 'Simple', - variant: 'components-structuredlist--simple', - }, { label: 'Selection', variant: 'components-structuredlist--selection', }, + { + label: 'Selectable with Improved Accessibility (unstable)', + variant: 'experimental-feature-flags-structuredlist--selection', + }, ]} /> @@ -57,14 +70,14 @@ read-only values. It helps organize and present grouped information into logical and scannable patterns. The content within a list can be stacked to create hierarchy within the data. -#### When to use +### When to use - To browse information or select certain information within the group in the simplest form - To view description and detailed information, present features, or compare pricing plans -#### When not to use +### When not to use Nesting items is not recommended, as structured lists are used to present simple data. If you have more than 25 items or additional content that needs to be @@ -74,10 +87,19 @@ which supports nesting items and presents a larger set of content. ### Variants -| Variant | Purpose | -| ------------ | ----------------------------------------------------------------------------- | -| _Default_ | Allows the user to quickly browse and view information within a group of data | -| _Selectable_ | Allows the user to mark or select a desired option within a group of data | + + +The +[experimental structured lists](https://react.carbondesignsystem.com/?path=/story/experimental-feature-flags-structuredlist--selection) +with icons positioned on the left apply only to selectable structured lists, not +to default structured lists. + + + +| Variant | Purpose | +| ------------------------- | ----------------------------------------------------------------------------- | +| [Default](#default) | Allows the user to quickly browse and view information within a group of data | +| [Selectable](#selectable) | Allows the user to mark or select a desired option within a group of data | ## Formatting @@ -88,7 +110,7 @@ Structured list is composed of two sections—column header and data row. -![Structured list anatomy](images/structured-list-usage-1.png) +![structured list anatomy](images/structured-list-usage-1.png) @@ -103,9 +125,11 @@ The structured list is available in two different sizes in height: default and condensed. The structure list's width varies based on content and layout. - + + +![data table sizing](images/structured-list-usage-2.png) -![data table anatomy](images/structured-list-usage-2.png) + Default and condensed sizes for structured lists @@ -113,12 +137,14 @@ condensed. The structure list's width varies based on content and layout. ### Alignment The structured list is available in two alignment styles: hang and flush -alignment. +alignment. We do not offer the flush alignment with selectable functionality. - + + +![data table alignment](images/structured-list-usage-3.png) -![data table anatomy](images/structured-list-usage-3.png) + Hang and flush alignment for structured lists @@ -138,16 +164,88 @@ alignment. tooltip on hover. - Column header titles should use sentence-case capitalization. +### States + +The default structured list variant is read-only and does not have any +interactive states other than enabled. The selectable structured list variant +has the following states: **enabled**, **hover**, **focus**, **selected**, +**disabled**, and **skeleton**. For detailed visual information about the +various states for this component, refer to the +[style](/components/structured-list/style) tab. + +| State | When to use | +| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| _Enabled_ | When an action in the list is live but a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component. | +| _Hover_ | When a user’s mouse cursor is hovering over the structured list row. | +| _Focus_ | When a user tabs or clicks on a row, it becomes focused, indicating the user has successfully navigated to the component (except default structured list). | +| _Selected_ | When a user presses space or clicks on a structured list row to select it. | +| _Disabled_ | When the user is not allowed to interact with a selectable structured list due to either permissions, dependencies, or pre-requisites. | +| _Skeleton_ | Use on an initial page load to indicate that the structured list has not yet fully loaded. | + ## Interactions #### Selectable structured list - Only one item can be selected from the list. -- By default, one option should be selected. +- By default, no option should be selected. - If you need to select multiple items, use a [data table.](/components/data-table/usage) - When the user selects an item from the list, the selected row will appear with - the `checkmark--filled` icon. + the `radio-button--checked` icon. + +## Default + +Default structured lists are used to display information to the user, such as +pricing plans. These structured lists can have internal calls-to-action (CTAs), +such as a [button](/components/button/usage) or +a [link](/components/link/usage). + + + + +![default structured list](images/structured-list-usage-4.png) + + Default structured list + + + + +## Selectable + +Selectable structured lists work well for presenting options to a user in a +structured manner, such as a set of pricing plans. Selectable tiles may contain +internal CTAs (like links to docs) if the internal CTA is given its own click +target. Selectable structured lists have a single-select state working like +a [radio button](/components/radio-button/usage). + + + + +![selectable structured list](images/structured-list-usage-5.png) + + Selectable structured list + + + + +## Modifiers + +### Background + +A background has been added to the structured list, and it is optional. The +background is only available for the hang alignment structured list, in default +and selectable variants. It is not available for the flush alignment structured +list. + + + + +![structured list with background](images/structured-list-usage-6.png) + + Default and selectable structured list with background + + + ## Related diff --git a/src/pages/components/tabs/images/tab-style-1.png b/src/pages/components/tabs/images/tab-style-1.png index ad8839c9db9..a1fd187a755 100644 Binary files a/src/pages/components/tabs/images/tab-style-1.png and b/src/pages/components/tabs/images/tab-style-1.png differ diff --git a/src/pages/components/tabs/images/tab-style-10.png b/src/pages/components/tabs/images/tab-style-10.png index 521e64903d0..ee61850f9b6 100644 Binary files a/src/pages/components/tabs/images/tab-style-10.png and b/src/pages/components/tabs/images/tab-style-10.png differ diff --git a/src/pages/components/tabs/images/tab-style-12.png b/src/pages/components/tabs/images/tab-style-12.png index 1d631540d08..0ab0acfad0b 100644 Binary files a/src/pages/components/tabs/images/tab-style-12.png and b/src/pages/components/tabs/images/tab-style-12.png differ diff --git a/src/pages/components/tabs/images/tab-style-13.png b/src/pages/components/tabs/images/tab-style-13.png index 058912e30ef..ceeb26e7d1d 100644 Binary files a/src/pages/components/tabs/images/tab-style-13.png and b/src/pages/components/tabs/images/tab-style-13.png differ diff --git a/src/pages/components/tabs/images/tab-style-14.png b/src/pages/components/tabs/images/tab-style-14.png index d233e97b8cd..0da7743c363 100644 Binary files a/src/pages/components/tabs/images/tab-style-14.png and b/src/pages/components/tabs/images/tab-style-14.png differ diff --git a/src/pages/components/tabs/images/tab-style-15.png b/src/pages/components/tabs/images/tab-style-15.png index e8c74f48b2d..73c15a0518c 100644 Binary files a/src/pages/components/tabs/images/tab-style-15.png and b/src/pages/components/tabs/images/tab-style-15.png differ diff --git a/src/pages/components/tabs/images/tab-style-16.png b/src/pages/components/tabs/images/tab-style-16.png index b209bdcf662..c9353b024e3 100644 Binary files a/src/pages/components/tabs/images/tab-style-16.png and b/src/pages/components/tabs/images/tab-style-16.png differ diff --git a/src/pages/components/tabs/images/tab-style-17.png b/src/pages/components/tabs/images/tab-style-17.png index 3e9000f217e..56b46a3b375 100644 Binary files a/src/pages/components/tabs/images/tab-style-17.png and b/src/pages/components/tabs/images/tab-style-17.png differ diff --git a/src/pages/components/tabs/images/tab-style-18.png b/src/pages/components/tabs/images/tab-style-18.png index 4496e223546..af585e0106b 100644 Binary files a/src/pages/components/tabs/images/tab-style-18.png and b/src/pages/components/tabs/images/tab-style-18.png differ diff --git a/src/pages/components/tabs/images/tab-style-2.png b/src/pages/components/tabs/images/tab-style-2.png index 6161d973687..d5e52625312 100644 Binary files a/src/pages/components/tabs/images/tab-style-2.png and b/src/pages/components/tabs/images/tab-style-2.png differ diff --git a/src/pages/components/tabs/images/tab-style-20.png b/src/pages/components/tabs/images/tab-style-20.png new file mode 100644 index 00000000000..ac15abe25db Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-20.png differ diff --git a/src/pages/components/tabs/images/tab-style-21.png b/src/pages/components/tabs/images/tab-style-21.png new file mode 100644 index 00000000000..1df24713a4f Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-21.png differ diff --git a/src/pages/components/tabs/images/tab-style-22.png b/src/pages/components/tabs/images/tab-style-22.png new file mode 100644 index 00000000000..e164bd3a435 Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-22.png differ diff --git a/src/pages/components/tabs/images/tab-style-4.png b/src/pages/components/tabs/images/tab-style-4.png index 27fa944b743..e7959314aaa 100644 Binary files a/src/pages/components/tabs/images/tab-style-4.png and b/src/pages/components/tabs/images/tab-style-4.png differ diff --git a/src/pages/components/tabs/images/tab-style-5.png b/src/pages/components/tabs/images/tab-style-5.png index 15afe1560f9..77ee4b64dcb 100644 Binary files a/src/pages/components/tabs/images/tab-style-5.png and b/src/pages/components/tabs/images/tab-style-5.png differ diff --git a/src/pages/components/tabs/images/tab-style-6.png b/src/pages/components/tabs/images/tab-style-6.png index 91975ac11a1..b22abc12f1c 100644 Binary files a/src/pages/components/tabs/images/tab-style-6.png and b/src/pages/components/tabs/images/tab-style-6.png differ diff --git a/src/pages/components/tabs/images/tab-style-7.png b/src/pages/components/tabs/images/tab-style-7.png index 4836ddfc928..3a0e211fa5d 100644 Binary files a/src/pages/components/tabs/images/tab-style-7.png and b/src/pages/components/tabs/images/tab-style-7.png differ diff --git a/src/pages/components/tabs/images/tab-usage-1.png b/src/pages/components/tabs/images/tab-usage-1.png new file mode 100644 index 00000000000..3d715c0220c Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-1.png differ diff --git a/src/pages/components/tabs/images/tab-usage-10.png b/src/pages/components/tabs/images/tab-usage-10.png index d62606a6182..b4fa75bc310 100644 Binary files a/src/pages/components/tabs/images/tab-usage-10.png and b/src/pages/components/tabs/images/tab-usage-10.png differ diff --git a/src/pages/components/tabs/images/tab-usage-11.png b/src/pages/components/tabs/images/tab-usage-11.png index cad6577c740..5a4c0547424 100644 Binary files a/src/pages/components/tabs/images/tab-usage-11.png and b/src/pages/components/tabs/images/tab-usage-11.png differ diff --git a/src/pages/components/tabs/images/tab-usage-12a-animated.gif b/src/pages/components/tabs/images/tab-usage-12a-animated.gif new file mode 100644 index 00000000000..44da4a49563 Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-12a-animated.gif differ diff --git a/src/pages/components/tabs/images/tab-usage-12a.png b/src/pages/components/tabs/images/tab-usage-12a.png new file mode 100644 index 00000000000..88bbe222f87 Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-12a.png differ diff --git a/src/pages/components/tabs/images/tab-usage-12b-animated.gif b/src/pages/components/tabs/images/tab-usage-12b-animated.gif new file mode 100644 index 00000000000..c71fe80813d Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-12b-animated.gif differ diff --git a/src/pages/components/tabs/images/tab-usage-12b.png b/src/pages/components/tabs/images/tab-usage-12b.png new file mode 100644 index 00000000000..5be6edef9a3 Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-12b.png differ diff --git a/src/pages/components/tabs/images/tab-usage-13.png b/src/pages/components/tabs/images/tab-usage-13.png index 3e2851c2ad7..05520d0b99a 100644 Binary files a/src/pages/components/tabs/images/tab-usage-13.png and b/src/pages/components/tabs/images/tab-usage-13.png differ diff --git a/src/pages/components/tabs/images/tab-usage-14.png b/src/pages/components/tabs/images/tab-usage-14.png index e99187a7f17..af57232bc91 100644 Binary files a/src/pages/components/tabs/images/tab-usage-14.png and b/src/pages/components/tabs/images/tab-usage-14.png differ diff --git a/src/pages/components/tabs/images/tab-usage-15.png b/src/pages/components/tabs/images/tab-usage-15.png new file mode 100644 index 00000000000..5c23652b547 Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-15.png differ diff --git a/src/pages/components/tabs/images/tab-usage-16.png b/src/pages/components/tabs/images/tab-usage-16.png new file mode 100644 index 00000000000..a3f4cbfc0e1 Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-16.png differ diff --git a/src/pages/components/tabs/images/tab-usage-17.png b/src/pages/components/tabs/images/tab-usage-17.png new file mode 100644 index 00000000000..ad7f4166ed9 Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-17.png differ diff --git a/src/pages/components/tabs/images/tab-usage-18.png b/src/pages/components/tabs/images/tab-usage-18.png new file mode 100644 index 00000000000..50a1cb6d3d7 Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-18.png differ diff --git a/src/pages/components/tabs/images/tab-usage-19.png b/src/pages/components/tabs/images/tab-usage-19.png new file mode 100644 index 00000000000..c21250adb86 Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-19.png differ diff --git a/src/pages/components/tabs/images/tab-usage-2.png b/src/pages/components/tabs/images/tab-usage-2.png index 45ce7ce59bc..25cc50aa32e 100644 Binary files a/src/pages/components/tabs/images/tab-usage-2.png and b/src/pages/components/tabs/images/tab-usage-2.png differ diff --git a/src/pages/components/tabs/images/tab-usage-20.png b/src/pages/components/tabs/images/tab-usage-20.png new file mode 100644 index 00000000000..17658849167 Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-20.png differ diff --git a/src/pages/components/tabs/images/tab-usage-21.png b/src/pages/components/tabs/images/tab-usage-21.png new file mode 100644 index 00000000000..9c1307a96e2 Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-21.png differ diff --git a/src/pages/components/tabs/images/tab-usage-3.png b/src/pages/components/tabs/images/tab-usage-3.png index 85f3a1d7b0d..22ff86c5f7e 100644 Binary files a/src/pages/components/tabs/images/tab-usage-3.png and b/src/pages/components/tabs/images/tab-usage-3.png differ diff --git a/src/pages/components/tabs/images/tab-usage-4.png b/src/pages/components/tabs/images/tab-usage-4.png index a06d063c474..55009a9f489 100644 Binary files a/src/pages/components/tabs/images/tab-usage-4.png and b/src/pages/components/tabs/images/tab-usage-4.png differ diff --git a/src/pages/components/tabs/images/tab-usage-5.png b/src/pages/components/tabs/images/tab-usage-5.png index d75f8b716e0..abec7479e0a 100644 Binary files a/src/pages/components/tabs/images/tab-usage-5.png and b/src/pages/components/tabs/images/tab-usage-5.png differ diff --git a/src/pages/components/tabs/images/tab-usage-6-do.png b/src/pages/components/tabs/images/tab-usage-6-do.png index 01a77f14fd9..22ec24c2042 100644 Binary files a/src/pages/components/tabs/images/tab-usage-6-do.png and b/src/pages/components/tabs/images/tab-usage-6-do.png differ diff --git a/src/pages/components/tabs/images/tab-usage-6-dont.png b/src/pages/components/tabs/images/tab-usage-6-dont.png index 3c24554694e..15c57fc1d33 100644 Binary files a/src/pages/components/tabs/images/tab-usage-6-dont.png and b/src/pages/components/tabs/images/tab-usage-6-dont.png differ diff --git a/src/pages/components/tabs/images/tab-usage-7.png b/src/pages/components/tabs/images/tab-usage-7.png index b3f70551025..5aa16a6ebe0 100644 Binary files a/src/pages/components/tabs/images/tab-usage-7.png and b/src/pages/components/tabs/images/tab-usage-7.png differ diff --git a/src/pages/components/tabs/images/tab-usage-8.png b/src/pages/components/tabs/images/tab-usage-8.png index 0907d12c345..4f5db9d76a1 100644 Binary files a/src/pages/components/tabs/images/tab-usage-8.png and b/src/pages/components/tabs/images/tab-usage-8.png differ diff --git a/src/pages/components/tabs/images/tab-usage-9.png b/src/pages/components/tabs/images/tab-usage-9.png index 52978ada859..b817702affd 100644 Binary files a/src/pages/components/tabs/images/tab-usage-9.png and b/src/pages/components/tabs/images/tab-usage-9.png differ diff --git a/src/pages/components/tabs/images/tabs-usage-1.png b/src/pages/components/tabs/images/tabs-usage-1.png deleted file mode 100644 index 268f04b42e6..00000000000 Binary files a/src/pages/components/tabs/images/tabs-usage-1.png and /dev/null differ diff --git a/src/pages/components/tabs/images/tabs-usage-15.png b/src/pages/components/tabs/images/tabs-usage-15.png deleted file mode 100644 index b695837d469..00000000000 Binary files a/src/pages/components/tabs/images/tabs-usage-15.png and /dev/null differ diff --git a/src/pages/components/tabs/images/tabs-usage-16.png b/src/pages/components/tabs/images/tabs-usage-16.png deleted file mode 100644 index 9175a1b7d57..00000000000 Binary files a/src/pages/components/tabs/images/tabs-usage-16.png and /dev/null differ diff --git a/src/pages/components/tabs/style.mdx b/src/pages/components/tabs/style.mdx index 22dca01aca7..e1f1c0c6851 100755 --- a/src/pages/components/tabs/style.mdx +++ b/src/pages/components/tabs/style.mdx @@ -184,16 +184,18 @@ structure, and size. ### Contained tab color -| Type | Element | Property | Color token | -| ---------- | ------- | ---------------- | --------------------- | -| Unselected | Tab | background-color | `$layer-accent` \* | -| | | border-right | `$border-strong` \* | -| | Label | text-color | `$text-secondary` | -| | Icon | svg | `$icon-secondary` | -| Selected | Tab | background-color | `$layer` \* | -| | | border-top | `$border-interactive` | -| | Label | text-color | `$text-primary` | -| | Icon | svg | `$icon-primary` | +| Type | Element | Property | Color token | +| ---------- | --------------- | ---------------- | --------------------- | +| Unselected | Tab | background-color | `$layer-accent` \* | +| | | border-right | `$border-strong` \* | +| | Label | text-color | `$text-secondary` | +| | Secondary label | text-color | `$text-secondary` | +| | Icon | svg | `$icon-secondary` | +| Selected | Tab | background-color | `$layer` \* | +| | | border-top | `$border-interactive` | +| | Label | text-color | `$text-primary` | +| | Secondary label | text-color | `$text-primary` | +| | Icon | svg | `$icon-primary` | * Denotes a contextual color token that will change values based on the layer @@ -216,15 +218,17 @@ structure, and size.
-| State | Element | Property | Color token | -| -------- | ------- | ---------------- | ------------------------- | -| Hover | Tab | background-color | `$layer-accent-hover` \* | -| | Label | text-color | `$text-primary` | -| | Icon | svg | `$icon-primary` | -| Focus | Tab | border | `$focus` | -| Disabled | Label | text-color | `$text-on-color-disabled` | -| | Icon | svg | `$icon-on-color-disabled` | -| | Tab | background-color | `$button-disabled` | +| State | Element | Property | Color token | +| -------- | --------------- | ---------------- | ------------------------- | +| Hover | Tab | background-color | `$layer-accent-hover` \* | +| | Label | text-color | `$text-primary` | +| | Secondary label | text-color | `$text-primary` | +| | Icon | svg | `$icon-primary` | +| Focus | Tab | border | `$focus` | +| Disabled | Label | text-color | `$text-on-color-disabled` | +| | Secondary label | text-color | `$text-on-color-disabled` | +| | Icon | svg | `$icon-on-color-disabled` | +| | Tab | background-color | `$button-disabled` | * Denotes a contextual color token that will change values based on the layer @@ -359,6 +363,65 @@ tabs.](images/tab-style-12.png) contained tabs. +### Vertical tab color + +| Type | Element | Property | Color token | +| ---------- | ------------------- | ---------------------------------------- | ------------------------ | +| Unselected | Tab | background-color | `$layer` \* | +| | | border-bottom, border-right, border-left | `$border-subtle` \* | +| | Label | text-color | `$text-secondary` | +| | Extended background | background-color | `$layer` \* | +| | | border-right | `$border-subtle` \* | +| Selected | Tab | background-color | `$layer` \* | +| | | border-bottom | `$border-subtle` \* | +| | | border-left | `$border-interactive` \* | +| | Label | text-color | `$text-primary` | +| tab panel | background | background-color | `$layer` \* | + + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + + + + +![Examples of selected and unselected vertical tabs.](images/tab-style-20.png) + + + + +Examples of selected and unselected vertical tabs. + +#### Vertical tab interactive state color + +
+ +| State | Element | Property | Color token | +| -------- | ----------------- | ---------------- | ------------------------- | +| Hover | Label | text-color | `$text-primary` | +| | Tab | background-color | `$layer-hover` \* | +| Focus | Tab: unselected | border | `$focus` | +| | Label: unselected | text-color | `$text-secondary` | +| | Tab: selected | border | `$focus` | +| | Label: selected | text-color | `$text-primary` | +| Disabled | Label | text-color | `$text-on-color-disabled` | + + + + +![Examples of hover, unselected focus, selected focus, and disabled states for vertical tabs.](images/tab-style-21.png) + + + + + + Examples of hover, unselected focus, selected focus, and disabled states for + vertical tabs. + + +
+ ## Typography Tab labels should be set in sentence case, and should not exceed three words. @@ -367,6 +430,7 @@ Tab labels should be set in sentence case, and should not exceed three words. | ----------------- | ------------------ | -------------- | --------------------- | | Label: unselected | 14 / 0.875 | Regular / 400 | `$body-compact-01` | | Label: selected | 14 / 0.875 | SemiBold / 600 | `$heading-compact-01` | +| Secondary label | 12 / 0.75 | Regular / 400 | `$label-01` | ## Structure @@ -518,6 +582,28 @@ Tab labels should be set in sentence case, and should not exceed three words. icons (top) and with icons (bottom)| px / rem +### Verical tab structure + +| Element | Property | px / rem | Spacing token | +| ------------------- | --------------------------- | -------- | ------------- | +| Tab | height | 64 / 4 | – | +| | border-left | 3 px | – | +| Tab: unselected | border-bottom, border-right | 1 px | – | +| Tab: selected | border-bottom | 1 px | – | +| Label | padding-left, padding-right | 16 / 1 | `$spacing-05` | +| Extended background | border-right | 1 px | – | + +
+ +![Structure and spacing measurements for vertical tabs in px and rem](images/tab-style-22.png) + +
+ + + Structure and spacing measurements for vertical tabs without overflow (left) + and with overflow (right) | px / rem + + ## Feedback Help us improve this component by providing feedback, asking questions, and diff --git a/src/pages/components/tabs/usage.mdx b/src/pages/components/tabs/usage.mdx index bebe06a8aa7..46dfa6617aa 100755 --- a/src/pages/components/tabs/usage.mdx +++ b/src/pages/components/tabs/usage.mdx @@ -16,23 +16,16 @@ between groups of information that appear within the same context. - - -**v11 update:** The tab component variant names have changed. Default tabs has -become _Line tabs_ and Container tabs has become _Contained tabs_. The updated -tabs component has new modifiers that allow for icons and secondary labels. For -v10 implementation guidance, go to -[v10 Tabs](https://v10.carbondesignsystem.com/components/tabs/usage/). - - - Live demo Overview Formatting Content -Behaviors +Universal behaviors +Line tabs +Contained tabs +Vertical tabs Modifiers Related References @@ -86,25 +79,23 @@ v10 implementation guidance, go to ## Overview Tabs are used to group different but related content, allowing users to navigate -views without leaving the page. They always contain at least two items and one -tab is active at a time. Tabs can be used on full page layouts or in components -such as modals, cards, or side panels. +views without leaving the page. Tabs can be used on full page layouts or in +components such as modals, cards, or side panels. -![An example of tabs being used.](images/tabs-usage-1.png) +![An example of tabs being used.](images/tab-usage-1.png) ### When to use -- Use tabs to group related information into different categories, helping to - reduce cognitive load. -- Tabs can be used to organize content such as forms, settings, and dashboards - so a user does not have to navigate away from their workflow to complete their - task. +To help reduce cognitive load, use tabs to group related information into +different categories. Tabs can be used to organize content such as forms, +settings, and dashboards so a user does not have to navigate away from their +workflow to complete their task. @@ -116,35 +107,53 @@ such as modals, cards, or side panels. ### When not to use -- Tabs should never be used for primary navigation. If tabs become too complex, - consider using a standard navigation pattern. -- Tabs should not be used to indicate progress. Use the progress indicator - instead. -- Tabs should not be used if the user is comparing information in two groups, as - this would result in the user having to click back and forth to complete a - task. +#### Filtering the same content + +When toggling between different formats of the same content or filtering the +same content, use [content switcher](/components/content-switcher/usage) +instead. Content switcher is often used alongside tabs, but it typically serves +at a lower hierarchy to organize related content within the tab’s contents. + +#### Indicating progress + +When the user needs to work through a step by step linear process, use a +[progress indicator](/components/progress-indicator/usage). Tabs help organize +information hierarchically but remain flexible in how content can be designed +and consumed. + +#### Comparing information + +Tabs should not be used if the user needs to compare information in different +groups, as this would result in the user having to click back and forth to +complete a task. ### Variants -| Variant | Purpose | -| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| _Line_ | A standalone tab that can also be nested within components. It is commonly used within components or for content using the entire page for layout, not connected to any other components. | -| _Contained_ | An emphasized tab that is always attached to a background container. It is commonly used for defined content areas, like sub-pages or attached to cards.  | +| Variant | Purpose | +| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Line](#line-tabs) | A standalone tab that can also be nested within components. It is commonly used within components or for content using the entire page for layout, not connected to any other components. | +| [Contained](#contained-tabs) | An emphasized tab that is commonly used for defined content areas.  | +| [Vertical](#Vertical-tabs) | A tablist with a vertical orientation to browse through content.  | -![Examples of line tabs (top) and contained tabs (bottom)](images/tab-usage-3.png) +![Examples of line tabs (top), contained tabs (middle), and vertical tabs (bottom)](images/tab-usage-3.png) -Examples of line tabs (top) and contained tabs (bottom) + + Examples of line tabs (top), contained tabs (middle), and vertical tabs + (bottom) + ## Formatting -The tab component consists of two distinct zones: selected and unselected. There -are always at least two tabs and one is selected by default. Icons are optional. +The tab component consists of two distinct zones: selected and unselected. One +tab is always selected by default. There are always at least two tabs in +non-dismissible tab groups and at least one in dismissible tab groups. Icons are +optional. ### Anatomy of line tabs @@ -161,18 +170,18 @@ are always at least two tabs and one is selected by default. Icons are optional. #### 1. Line tabs -A. Label
B. Indicator
+A. Label
C. Indicator
D. Scroll button #### 3. Line tabs with icon -A. Label
B. Indicator
C. Icon +A. Label
C. Indicator
E. Icon
F. Tab panel #### 2. Icon-only line tabs -B. Indicator
C. Icon +C. Indicator
E. Icon @@ -192,23 +201,38 @@ B. Indicator
C. Icon #### 1. Contained tabs -A. Label
B. Indicator
D. Container +A. Label
C. Indicator
D. Scroll button #### 3. Contained tabs with icon and secondary label -A. Label
B. Indicator
C. Icon (optional)
D. Container
-E. Secondary label (optional) +A. Label
B. Secondary label (optional)
C. Indicator
E. Icon +(optional)
F. Tab panel -#### 2. Contained tab with icons only +#### 2. Icon-only contained tabs + +C. Indicator
E. Icon + + + + +### Anatomy of vertical tabs + + + -B. Indicator
C. Icon
D. Container +![Anatomy of vertical tabs](images/tab-usage-20.png) +#### Vertical tabs + +A. Label
C. Indicator
F. Tab panel
G. Tablist extended +background + ### Alignment Much like @@ -217,7 +241,9 @@ alignment of tabs depends on where they appear and whether or not they're contained within another component. As a general rule, the first label for both line tabs and contained tabs align with the grid and the text below. If tabs are within another component, such as a card, follow the grid that you are using -inside the component and align the label with text in the component. +inside the component and align the label with text in the component. Vertical +tab labels also align with the grid, so all labels in a tablist will align on +the same grid column. @@ -234,9 +260,9 @@ inside the component and align the label with text in the component. #### Auto-width -With both line tabs and contained tabs, auto-width is the default behavior. Each -tab will be a different size depending on the label's character count but will -have consistent padding on each side of the label. The first label, selected by +With line tabs and contained tabs, auto-width is the default behavior. Each tab +will be a different size depending on the label's character count but will have +consistent padding on each side of the label. The first label, selected by default, should align to the grid. Where the tabs end will vary and may not end on the grid. If needed, you may also use a line to help balance tabs with other components on the page. @@ -254,7 +280,7 @@ components on the page. #### Aligning to grid columns Instead of using the default auto-width behavior, contained tabs also have the -option to align to the grid. As a group, the tabs span a set of columns with +option to align to the grid. As a group, the tablist spans a set of columns with each tab being equal in size. The first tab’s label should align to the first column you are using with the last tab in the group always ending at a column’s edge. The tabs in between will flow accordingly and may or may not align to the @@ -266,6 +292,18 @@ to drive visual rhythm by spacing content in multiples of two columns and aligning the beginning and ending of the tab elements with content below the tabs when possible. +Use grid aligned contained tabs when: + +- When there are 4 tabs or less +- When the tablist can fit on the 2x grid easily without crowding labels +- Labels are short and concise +- When there are other elements on the page that can align to the tablist + +Depending on breakpoints, vertical tabs align to grid columns spanning 4 or 2 +columns of the 16-column grid and connect to a tab panel that can be 8 or 12 +columns wide. See [vertical tabs](#Vertical-tabs) for more information on +breakpoints and responsiveness. + **Note:** Grid aligned tabs are not currently implemented in the components. @@ -309,7 +347,9 @@ tab to the edge of the content area. #### Labels - Use short tab labels that are clear and specific. Labels should be one to two - words, as these are easier to scan. + words, as these are easier to scan. Vertical tabs allow for more characters + within a tab, but stay as concise as possible to avoid truncation and allow + space for labels in various languages. - Text labels should clearly communicate the view users will see and the content contained in the view. @@ -318,47 +358,65 @@ tab to the edge of the content area. - Contained tabs can have secondary labels to add clarity or assist the user in choosing the right selection. +### Overflow content + +Line and tab labels do not need truncation since these types of tabs allow for +horizontal scrolling. The tabs themselves can grow and shrink accordingly. +However, when a label is too long within a vertical tab, the label overflows to +two lines and then truncates with an ellipsis. By mouse, the full title is +disclosed in a browser tooltip on hover. By keyboard, the full title is +disclosed on focus in a tooltip. + + + + +![Overflow content within vertical tabs](images/tab-usage-10.png) + + + + + + On hover, full title is disclosed in a browser tooltip (left) and on focus, + full title is disclosed in Carbon tooltip (right) + + ### Further guidance For further content guidance, see Carbon's [content guidelines](/guidelines/content/overview). -## Behaviors +## Universal behaviors ### States -Tabs allow for three states: **selected, unselected,** and **disabled**. The -default view is that one tab is preselected and is usually the first tab. Only -one tab can be selected at a time. When a user chooses a new item, the previous -tab is automatically deselected. If a user navigates away from a tab, a user -should return to the last tab selected. +Tabs have two main states—**selected** and **unselected**. Other interactive +states are **hover, focus,** and **disabled**. The default view is one tab is +preselected and is usually the first tab. Only one tab can be selected at a +time. When a user chooses a new item, the previous tab is automatically +deselected. If a user navigates away from a tab, it remains the selected tab +until altered by the user. For detailed visual information about the various states for this component, see the [Style tab](https://carbondesignsystem.com/components/tabs/style). - - - -![Tab states](images/tab-usage-10.png) - - - - - - Example of selected, unselected, and disabled states in line tabs (top) and - contained tabs (bottom) - +| State | When to use | +| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Selected | When a user clicks or uses the arrows keys to activate the tab. | +| Unselected | When the user navigates to another tab and the tab is inactive. | +| Hover | When a user is hovering over the tab with the mouse cursor to interact with it. | +| Focus | When a user clicks on the tab or navigates using the keyboard with left and right arrows, it becomes focused, indicating the user has successfully navigated to the component. | +| Disabled | When a user is not allowed to interact with the tab due to either permissions, dependencies, or pre-requisites. The disabled state completely removes the interactive function from a component. The styling is not subject to WCAG contrast compliance. | ### Scrollable When your page requires more tabs that can fit or needs to adapt to a new -browser size, tabs should become scrollable. Left and right arrows appear to -help navigate the user through tabs that might be off-page. +browser size, line and contained tabs should become scrollable. Left and right +arrows appear to help navigate the user through tabs that might be off-page. -![Scrollable tabs](images/tab-usage-11.png) +![Example of line and contained tabs that scroll](images/tab-usage-11.png) @@ -379,18 +437,99 @@ One tab should be selected by default. Users can navigate between tabs by pressing right or left arrow keys. For additional keyboard interactions, see the [Accessibility tab](https://carbondesignsystem.com/components/tabs/accessibility). -#### Screenreader +#### Automatic and manual -VoiceOver: Users can navigate between tabs by pressing `right` or `left` arrow -keys. +Automatic and manual tablists differ in how the tab items are activated. -JAWS: Users can navigate between tabs by pressing `right` or `left` arrow keys. +For automatic tablists, focus and selection are synchronized. When the user +arrows to a tab, it becomes selected, and the tab panel under the tab updates +automatically. Use automatic tabs when tab panel content can load quickly, +allowing for users to scan quickly through information to make a decision +without latency. -NVDA: Users can navigate between tabs by pressing `right` or `left` arrow keys. +Manual tablists allow the user to arrow between the tab items without updating +the tab panel underneath. When the user navigates using arrows, the selected tab +remains selected while focus moves to the next tab. In order to select the +focused tab (and update the tabpanel under the tab), the user would press +`Enter` or `Space`. Use manual tabs when information in the tab panel will take +a longer time to load. This will allow a keyboard user or screen reader to +navigate through the tablist without having to wait for content to load. Learn +more about automatic verses manual tablists in the +[Keyboard interactions](https://carbondesignsystem.com/components/tabs/accessibility#keyboard-interactions) +section of the accessibility tab. For additional information, see the [Accessibility tab](https://carbondesignsystem.com/components/tabs/accessibility). +## Line tabs + +A line tab is standalone tab that can also be nested within components. Although +it is commonly used within components, such as a modal or header, line tabs can +also be used for large content areas using the entire page for layout, not +connected to any other components. Line tabs are highly flexible and can be +placed on background or layer tokens, making it easy to use in many different +scenarios. To help define the tab panel, which is the content area below the +selected tab, a line can be used that extends from the tablist to the end of the +panel. This is currently not part of the Carbon line tabs component and must be +added by teams if desired. + + + + +![Examples of tabs with icons](images/tab-usage-13.png) + + + + +## Contained tabs + +Contained tabs are an emphasized tab commonly used for defined content areas +like sub-pages. Contained tabs are always attached to a tab panel (background +container) that uses the same layer token as the selected tab. Since the +contained tabs are on layers, the tab content tends to stand out against the +background and maintain a high visual hierarchy while line tabs tend to blend +into content more easily. Because of the layering model, be mindful of the +layers used within the tabs so the content does not get too visually +complicated, especially within smaller areas. + + + + +![Examples of contained tabs](images/tab-usage-14.png) + + + + +## Vertical tabs + +Vertical tabs are left and vertically-aligned tabs that allow a user to scan +through information from top to bottom. This vertical orientation is good for +quickly browsing and accessing information, such as a +[get started](https://pages.github.ibm.com/cdai-design/pal/patterns/onboarding/orientation/usage#get-started) +pattern. Do not use vertical tabs in place of +[navigation](https://carbondesignsystem.com/components/UI-shell-left-panel/usage/). + +The tab panel should stay the same height as tabs switch so content outside the +tabs stays in a consistent place. The vertical tablist and panel height should +be determined by the tab that has the most content. To avoid excessive scrolling +within the tab panel, do not overload it with too much content. If more space is +needed than the tab panel allows, consider using line or contained tabs that +allow for full page layouts. Both the tablist and the tab panels are always on +the same layer. At extra large and large breakpoints, vertical tablist spans 4 +columns of the 16-column grid. At the medium breakpoint, the vertical tablist +spans 2 columns. At the small breakpoint, the vertical tablist uses scrolling +contained tabs. + + + + +![Example of vertical tabs in a get started pattern](images/tab-usage-21.png) + + + + +Example of Vertical tabs in a get started pattern + ## Modifiers ### Tabs with icons @@ -402,50 +541,56 @@ label. -![Examples of tabs with icons](images/tab-usage-12.png) +![Examples of contained tabs with icons](images/tab-usage-15.png) +Example of contained tabs with icons. + ### Icon-only tabs You may use icon-only tabs with both line and contained tabs. Icons must be easily recognized and globally accepted. These work best in small, defined spaces and in components. Always use a tooltip for an icon description on hover -to add clarity. +and focus to add clarity. -![Example of icon-only tabs within a side panel](images/tab-usage-13.png) +![Example of icon-only tabs within a side panel](images/tab-usage-16.png) +Example of icon-only tabs within a side panel. + ### Secondary labels Contained tabs that align with the grid allow for a secondary label. Do not use -secondary labels with line tabs or auto-width contained tabs. +secondary labels with line tabs, auto-width contained tabs, or vertical tabs. -![Example of tabs with a secondary label](images/tab-usage-14.png) +![Example of contained tabs with a secondary labe and icon](images/tab-usage-17.png) +Example of contained tabs with a secondary label and icon. + ### Dismissible tabs Dismissible tabs allow users to close tabs providing a focused and relevant -experience. Users can add or remove tabs as needed, accommodating future content -additions or modifications without drastically changing the overall layout or -structure. +experience. Users can add or remove contained or line tabs as needed, +accommodating future content additions or modifications without drastically +changing the overall layout or structure. -![Dismissible tabs](images/tabs-usage-15.png) +![Dismissible tabs](images/tab-usage-18.png) @@ -495,7 +640,7 @@ creating a new tab in a place they expect. -![Dismissible tabs](images/tabs-usage-16.png) +![Dismissible tabs](images/tab-usage-19.png) @@ -513,16 +658,6 @@ allow users to compare and toggle between alternate views of similar or related content. Content that is grouped into tabs is part of the same bigger context but the content does not overlap. -#### Navigation versus tabs - -Tabs should not be used for common navigation patterns. If your tab arrangements -are becoming too complex with different levels of content, consider using -[left](https://www.carbondesignsystem.com/components/UI-shell-left-panel/usage/) -or -[right](https://www.carbondesignsystem.com/components/UI-shell-right-panel/usage/) -UI panels, possibly in conjunction with breadcrumbs, to help the user through -the content. - #### Progress indicator versus tabs [Progress indicator](https://www.carbondesignsystem.com/components/progress-indicator/usage/) diff --git a/src/pages/components/tag/accessibility.mdx b/src/pages/components/tag/accessibility.mdx index ca966261bb1..f16624418cc 100644 --- a/src/pages/components/tag/accessibility.mdx +++ b/src/pages/components/tag/accessibility.mdx @@ -19,205 +19,94 @@ import { ListItem, } from '@carbon/react'; + + +No accessibility annotations are needed for tags, but keep these considerations +in mind if you are modifying Carbon or creating a custom component. + + + - How it works - Accessibility considerations - Resources - Accessibility testing + What Carbon provides + Design recommendations + Development considerations -## How it works +## What Carbon provides -Tags are used for web content that needs to be labeled, categorized, or -organized using keywords that describe them. Tags are often used as a filter -where all tags are in the same color, or used when content is mapped to multiple -categories, where color is used to differentiate between categories. +Carbon bakes keyboard operation into its components, improving the experience of +blind users and others who operate via the keyboard. Carbon incorporates many +other accessibility considerations, some of which are described below. -## Accessibility considerations +### Keyboard interaction -This component has been validated to meet the -[WCAG 2.0 AA](https://www.w3.org/TR/WCAG20/) and -[Section 508](http://www.section508.gov/) accessibility guidelines, however -changes made by the content owner can affect accessibility compliance. Be sure -to review and follow the guidance in this section when updating or adding new -content to this component. +Read-only tags are not in the tab order, are not interactive, and do not receive +focus. -1. Be sure the tag text is clear and concise. -2. Color should not be used as the only means to differentiate tag categories. -3. When using custom colors be sure the minimum contrast requirements are met. -4. Tags that are modified as a link to filter content should also follow the - link Carbon Component guidance. +Dismissible tags are in the tab order and receive focus around the close icon. +Pressing `Enter` or `Space` will dismiss the tag. Tabbing away from the tag will +move focus to the next element in the tab order. -## Resources + + -#### Helpful resources for creating customized accessible implementations +![Dismissible tag in the tab order receiving focus on the close icon to potentially dismiss the tag.](images/tag-accessibility-dismissible.png) -- [IBM Accessibility Requirements](https://www.ibm.com/able/requirements/requirements/): - - [1.4.1 Use of Color](https://www.ibm.com/able/requirements/requirements/#1_4_1) - (WCAG Success Criteria - [1.4.1](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color)) - - [1.4.3 Contrast (Minimum)](https://www.ibm.com/able/requirements/requirements/#1_4_3) - (WCAG Success Criteria - [1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum)) + + -## Accessibility testing +Selectable tags are in the tab order and focus is shown around each tag. +Pressing `Enter` or `Space` toggles the selection on and off. -Accessibility issues are tracked in the -[Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/issues?q=is%3Aopen+label%3A%22type%3A+a11y+%E2%99%BF%22+label%3A%22component%3A+tag%22+) + + -### Automated test +![A group of selectable tags in the tab order, with each tag receiving focus to select or deselect.](images/tag-accessibility-selectable.png) - - - - - - - Automated test environment - - Results - - - - - - - macOS Mojave version 10.14.6 with VoiceOver -
- - Chrome version 77.0.3865.90 -
- - Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG - 2.1 Sept. 2019 Ruleset -
- Carbon React version 7.7.1 - - - DAP test -
- Violations - - - - - + -### macOS Screen reader tests +Operational tags are in the tab order and focus is shown around each tag. +Pressing `Enter` or `Space` will disclose additional related tags. - - - - - Environment - Results - - - - - - - macOS Mojave version 10.14.6 with VoiceOver -
- - Safari Version 13.0.2 -
- Carbon React version 7.7.1 - - - VoiceOver(VO) test: - - - Control-Option-Shift-Down Arrow to enter the Web area. - - - Press Control-Option-Right Arrow key. VO announces the label and - that it is a text element. - - - Navigate to the tag with filter. VO announces, "Clear Filter, - you are currently on a group. To interact with items in this - group press Control-Option-Shift-Down Arrow." (Note: There is an - open issue. VO does not announce the "X" clear filter when Tab - is pressed immediately after the Tag text is read.) - - - - - - - - + -### Windows screen reader tests +![An operational tag in the tab order, disclosing related tags.](images/tag-accessibility-operational.png) - - - - - - Environment - Results - - - - - - - Microsoft Windows 10 -
- - Firefox version 68 -
- - JAWS 18 -
- Carbon React version 7.7.1 - - - JAWS test: - - - Navigate to the Tag. JAWS announces the tag text. - - - Navigate to the Tag with Filter. JAWS announces the tag text and - clear filter. - - - - - - - + -### iOS screen reader tests +## Design recommendations + +Design annotations are not needed, but keep the following point in mind. + +When the tag's title is too long to fit within the available space of the tag +container, the title can be truncated with an ellipsis. By mouse, the full title +is disclosed in a browser tooltip on hover. By keyboard, the full title is +disclosed on focus in a tooltip. Truncation should be set at the title's start, +middle, or end, depending on what is best for the given use case. - - - - Environment - Results - - - - - - iOS version 12.2 with VoiceOver -
- - Safari version 12.2 -
- Carbon React version 7.7.1 - - - VoiceOver test: - - - Swipe Right to the tag. VO announces the tag text and main - landmark. - - - Navigate to the tag with filter. Swipe Right to the "X". VO - announces "Clear Filter Image. Possibly very sharp close." - (Note: There is an open issue. VO should announce this as a - clear filter button.) - - - - - - - + + +![A tag’s truncated full title disclosed in a tooltip on hover by mouse and on focus by keyboard.](images/tag-usage-overflow.png) + + + + + Truncated tag title disclosed in a tooltip on hover by mouse and on focus by + keyboard. + + +## Developer considerations + +Keep this in mind if you’re modifying Carbon or creating a custom component. + +- Do not add an `onClick` functionality to the dismissible tag, and only reserve + interactions for the close icon in the tag. +- Do not nest buttons within the operational tag. Consider using the `as` prop + to change an element tag to avoid nesting buttons. diff --git a/src/pages/components/tag/code.mdx b/src/pages/components/tag/code.mdx index ed3b9ecd016..d174edfa6ff 100755 --- a/src/pages/components/tag/code.mdx +++ b/src/pages/components/tag/code.mdx @@ -65,8 +65,24 @@ documentation, see the Storybooks for each framework below. url="https://react.carbondesignsystem.com" variants={[ { - label: 'Default', - variant: 'components-tag--default', + label: 'Read-only', + variant: 'components-tag--read-only', + }, + { + label: 'Dismissible (unstable)', + variant: 'experimental-unstable-interactivetag--dismissible', + }, + { + label: 'Selectable (unstable)', + variant: 'experimental-unstable-interactivetag--selectable', + }, + { + label: 'Operational (unstable)', + variant: 'experimental-unstable-interactivetag--operational', + }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--tag', }, ]} /> diff --git a/src/pages/components/tag/images/tag-accessibility-dismissible.png b/src/pages/components/tag/images/tag-accessibility-dismissible.png new file mode 100644 index 00000000000..c6d584fd17b Binary files /dev/null and b/src/pages/components/tag/images/tag-accessibility-dismissible.png differ diff --git a/src/pages/components/tag/images/tag-accessibility-operational.png b/src/pages/components/tag/images/tag-accessibility-operational.png new file mode 100644 index 00000000000..f1be7d5a566 Binary files /dev/null and b/src/pages/components/tag/images/tag-accessibility-operational.png differ diff --git a/src/pages/components/tag/images/tag-accessibility-overflow.png b/src/pages/components/tag/images/tag-accessibility-overflow.png new file mode 100644 index 00000000000..7a451311ec5 Binary files /dev/null and b/src/pages/components/tag/images/tag-accessibility-overflow.png differ diff --git a/src/pages/components/tag/images/tag-accessibility-read-only.png b/src/pages/components/tag/images/tag-accessibility-read-only.png new file mode 100644 index 00000000000..5001211e6c1 Binary files /dev/null and b/src/pages/components/tag/images/tag-accessibility-read-only.png differ diff --git a/src/pages/components/tag/images/tag-accessibility-selectable.png b/src/pages/components/tag/images/tag-accessibility-selectable.png new file mode 100644 index 00000000000..8692b85c909 Binary files /dev/null and b/src/pages/components/tag/images/tag-accessibility-selectable.png differ diff --git a/src/pages/components/tag/images/tag-style-structure-ai.png b/src/pages/components/tag/images/tag-style-structure-ai.png new file mode 100644 index 00000000000..e2f9cc5c11c Binary files /dev/null and b/src/pages/components/tag/images/tag-style-structure-ai.png differ diff --git a/src/pages/components/tag/images/tag-usage-ai-presence.png b/src/pages/components/tag/images/tag-usage-ai-presence.png new file mode 100644 index 00000000000..9fc555e7479 Binary files /dev/null and b/src/pages/components/tag/images/tag-usage-ai-presence.png differ diff --git a/src/pages/components/tag/images/tag-usage-overflow-do.png b/src/pages/components/tag/images/tag-usage-overflow-do.png index a79194c8a81..6e420dde2e5 100644 Binary files a/src/pages/components/tag/images/tag-usage-overflow-do.png and b/src/pages/components/tag/images/tag-usage-overflow-do.png differ diff --git a/src/pages/components/tag/images/tag-usage-overflow.png b/src/pages/components/tag/images/tag-usage-overflow.png index d5a74842366..d8b0816a3d5 100644 Binary files a/src/pages/components/tag/images/tag-usage-overflow.png and b/src/pages/components/tag/images/tag-usage-overflow.png differ diff --git a/src/pages/components/tag/style.mdx b/src/pages/components/tag/style.mdx index 7406945fed9..cc664e9b78c 100755 --- a/src/pages/components/tag/style.mdx +++ b/src/pages/components/tag/style.mdx @@ -19,7 +19,7 @@ structure, and size. Typography Structure Size -Feedback +AI presence @@ -310,3 +310,25 @@ There are three tag sizes — small, medium, and large. Small, medium, and large sizes of tag + +## AI presence + +The only style modification an AI variant of the tag has is the addition of the +AI label. All other tokens in the component including the same as the non-AI +variants. The color of the AI label should match the color of the tag text. + +For more information on the AI style elements, see the +[Carbon for AI](/guidelines/carbon-for-ai/) guidelines. + +| Element | Property | Value | Spacing token | +| ----------------- | ------------- | ------------- | ------------- | +| AI label (inline) | size | small | – | +| | padding-right | 4px / 0.25rem | `$spacing-02` | + +
+ +![Structure for AI tags](images/tag-style-structure-ai.png) + +
+ +Structure and spacing measurements of AI tags | px / rem. diff --git a/src/pages/components/tag/usage.mdx b/src/pages/components/tag/usage.mdx index 9eaa6577e1e..16ca7199628 100755 --- a/src/pages/components/tag/usage.mdx +++ b/src/pages/components/tag/usage.mdx @@ -17,11 +17,20 @@ them. -Experimental interactive tags, selectable, operational, and dismissible, are now -available. Dismissible tags are now their own variant and separate from -read-only tags. Though we are not deprecating the current tags, we encourage all -design teams to use the new experimental tags for dismissible, selectable, and -operational use cases in their products moving forward. +**Tag now offers multiple experimental features.** + +
{' '} + +[Experimental tags](https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-interactivetag--overview) +for dismissible, selectable, and operational functionality are now available as +additional tag variants. Dismissible tag is the recommended alternative solution +to the filter prop and will eventually replace the prop in v12. + +
+ +[Experimental slug](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--tag) +(aka AI label) embeds the AI label into the tag and introduces an AI +explainability feature when AI is present in the component. @@ -31,11 +40,13 @@ operational use cases in their products moving forward. Overview Formatting Content +Behaviors Read-only tag Dismissible tag Selectable tag Operational tag Modifiers +AI presence References Feedback @@ -48,8 +59,24 @@ operational use cases in their products moving forward. url="https://react.carbondesignsystem.com" variants={[ { - label: 'Overview', - variant: 'components-tag--overview', + label: 'Read-only', + variant: 'components-tag--read-only', + }, + { + label: 'Dismissible (unstable)', + variant: 'experimental-unstable-interactivetag--dismissible', + }, + { + label: 'Selectable (unstable)', + variant: 'experimental-unstable-interactivetag--selectable', + }, + { + label: 'Operational (unstable)', + variant: 'experimental-unstable-interactivetag--operational', + }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--tag', }, ]} /> @@ -206,11 +233,52 @@ to have 8px of space between them on the top, bottom, left, and right. there are user-defined names of categories, system-generated strings of text, etc. +### Overflow content + +When the tag's title is too long to fit within the available space of the tag +container, the title can be truncated with an ellipsis. By mouse, the full title +is disclosed in a browser tooltip on hover. By keyboard, the full title is +disclosed on focus in a tooltip. Truncation should be set at the title's start, +middle, or end, depending on what is best for the given use case. + + + + +![Truncated tag title disclosed in a tooltip on hover by mouse and on focus by keyboard.](images/tag-usage-overflow.png) + + + + + + Truncated tag title disclosed in a tooltip on hover by mouse and on focus by + keyboard. + + +Avoid having long tag titles wrap to multiple lines within the tag container. +This can construe the shape of the tag and integrity of a traditional tag shape, +which should be compact in form. It can also create misalignment with other tags +if they are placed within a group. + + + + +![Do use a browser tooltip to show the full length of overflow tag title text.](images/tag-usage-overflow-do.png) + + + + +![Do not wrap overflow tag title text to multiple lines.](images/tag-usage-overflow-dont.png) + + + + ### Further guidance For further content guidance, see Carbon’s [content guidelines](https://carbondesignsystem.com/guidelines/content/overview/). +## Behaviors + ### States The four tag variants have different states: @@ -447,6 +515,29 @@ Selectable tags are unavailable in these colors; instead, they use tokens. +## AI presence + +Tag has a modification that embeds the AI label when AI is present in the +component. The AI variants function the same as the normal versions except with +the addition of the inline AI label which is both a visual indicator and the +trigger for the explainability popover. + +For more information on designing for AI, see the +[Carbon for AI](/guidelines/carbon-for-ai/) guidelines. + + + + +![Example of AI labels in tags.](images/tag-usage-ai-presence.png) + + + + + + Read-only AI tag (top), dismissible tag, operational AI tag, and selectable AI + tag + + ## Feedback Help us improve this component by providing feedback, asking questions, and diff --git a/src/pages/components/text-input/code.mdx b/src/pages/components/text-input/code.mdx index ed26ee3b59b..4f14f8eca8d 100755 --- a/src/pages/components/text-input/code.mdx +++ b/src/pages/components/text-input/code.mdx @@ -82,15 +82,25 @@ usage documentation, see the Storybooks for each framework below. }, { label: 'Fluid (unstable)', - variant: 'experimental-unstable-fluidtextinput--default', + variant: 'experimental-fluid-components-unstable-fluidtextinput--default', }, { label: 'Fluid with Tooltip (unstable)', - variant: 'experimental-unstable-fluidtextinput--default-with-tooltip', + variant: + 'experimental-fluid-components-unstable-fluidtextinput--default-with-tooltip', }, { label: 'Fluid with Password Input (unstable)', - variant: 'experimental-unstable-fluidtextinput--password-input', + variant: + 'experimental-fluid-components-unstable-fluidpasswordinput--default', + }, + { + label: 'Text Area with AI slug', + variant: 'experimental-unstable-slug-examples--text-area', + }, + { + label: 'Text Input with AI slug', + variant: 'experimental-unstable-slug-examples--text-input', }, ]} /> diff --git a/src/pages/components/text-input/images/text-input-text-area-ai-presence-ai-revert-default.png b/src/pages/components/text-input/images/text-input-text-area-ai-presence-ai-revert-default.png new file mode 100644 index 00000000000..7e5b7901135 Binary files /dev/null and b/src/pages/components/text-input/images/text-input-text-area-ai-presence-ai-revert-default.png differ diff --git a/src/pages/components/text-input/images/text-input-text-area-ai-presence-ai-revert-fluid.png b/src/pages/components/text-input/images/text-input-text-area-ai-presence-ai-revert-fluid.png new file mode 100644 index 00000000000..7a60eeedaa4 Binary files /dev/null and b/src/pages/components/text-input/images/text-input-text-area-ai-presence-ai-revert-fluid.png differ diff --git a/src/pages/components/text-input/images/text-input-text-area-ai-presence-default.png b/src/pages/components/text-input/images/text-input-text-area-ai-presence-default.png new file mode 100644 index 00000000000..f17d8b632e8 Binary files /dev/null and b/src/pages/components/text-input/images/text-input-text-area-ai-presence-default.png differ diff --git a/src/pages/components/text-input/images/text-input-text-area-ai-presence-fluid.png b/src/pages/components/text-input/images/text-input-text-area-ai-presence-fluid.png new file mode 100644 index 00000000000..6330c4991c0 Binary files /dev/null and b/src/pages/components/text-input/images/text-input-text-area-ai-presence-fluid.png differ diff --git a/src/pages/components/text-input/images/text-input-text-area-ai-presence.png b/src/pages/components/text-input/images/text-input-text-area-ai-presence.png new file mode 100644 index 00000000000..f17d8b632e8 Binary files /dev/null and b/src/pages/components/text-input/images/text-input-text-area-ai-presence.png differ diff --git a/src/pages/components/text-input/images/text-input-text-area-ai-revert-fluid.png b/src/pages/components/text-input/images/text-input-text-area-ai-revert-fluid.png new file mode 100644 index 00000000000..a8298d42060 Binary files /dev/null and b/src/pages/components/text-input/images/text-input-text-area-ai-revert-fluid.png differ diff --git a/src/pages/components/text-input/images/text-input-text-area-ai-revert.png b/src/pages/components/text-input/images/text-input-text-area-ai-revert.png new file mode 100644 index 00000000000..aa60fa35f26 Binary files /dev/null and b/src/pages/components/text-input/images/text-input-text-area-ai-revert.png differ diff --git a/src/pages/components/text-input/images/text-input-usage-invalid.png b/src/pages/components/text-input/images/text-input-usage-invalid.png new file mode 100644 index 00000000000..15c59850f10 Binary files /dev/null and b/src/pages/components/text-input/images/text-input-usage-invalid.png differ diff --git a/src/pages/components/text-input/style.mdx b/src/pages/components/text-input/style.mdx index c7ffa05f20f..9bb814e483f 100755 --- a/src/pages/components/text-input/style.mdx +++ b/src/pages/components/text-input/style.mdx @@ -9,7 +9,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] The following page documents visual specifications such as color, typography, -structure, and size. +structure, size, and AI presence. @@ -19,6 +19,7 @@ structure, and size. Typography Structure Size +AI presence Feedback @@ -326,6 +327,49 @@ These sizes apply only to the default style of text input. Text input default style sizes | px / rem +## AI presence + +The following are the unique styles applied to the component when the AI slug is +present. Unless specified, all other tokens in the component remain the same as +the non-AI variant. + +More information about AI style elements is coming soon. + +| Element | Property | Token / Size | +| --------------- | ---------------- | ------------------- | +| Linear gradient | start | `$ai-aura-start-sm` | +| | stop | `$ai-aura-stop` | +| Field | border-bottom | `$ai-border-strong` | +| | background color | `$field`\* | +| AI Slug | size | mini | + + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + + + + + + + + +![Default text input and text area AI example](images/text-input-text-area-ai-presence-ai-revert-default.png) + + + + + +![Fluid text input and text area AI example](images/text-input-text-area-ai-presence-ai-revert-fluid.png) + + + + + + + + ## Feedback Help us improve this component by providing feedback, asking questions, and diff --git a/src/pages/components/text-input/usage.mdx b/src/pages/components/text-input/usage.mdx index b2c908e8481..cbe92890ce7 100755 --- a/src/pages/components/text-input/usage.mdx +++ b/src/pages/components/text-input/usage.mdx @@ -15,6 +15,17 @@ and short-form entries. + + +Experimental slug is now available for +[text input](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--text-input) +and +[text area](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--text-area). +This addition changes the visual appearance of the component and introduces an +AI explainability feature when AI is present in the component. + + + Live demo @@ -25,6 +36,7 @@ and short-form entries. Content Universal behaviors Modifiers +AI Presence Related Feedback @@ -54,15 +66,25 @@ and short-form entries. }, { label: 'Fluid (unstable)', - variant: 'experimental-unstable-fluidtextinput--default', + variant: 'experimental-fluid-components-unstable-fluidtextinput--default', }, { label: 'Fluid with Tooltip (unstable)', - variant: 'experimental-unstable-fluidtextinput--default-with-tooltip', + variant: + 'experimental-fluid-components-unstable-fluidtextinput--default-with-tooltip', }, { label: 'Fluid with Password Input (unstable)', - variant: 'experimental-unstable-fluidtextinput--password-input', + variant: + 'experimental-fluid-components-unstable-fluidpasswordinput--default', + }, + { + label: 'Text Area with AI slug', + variant: 'experimental-unstable-slug-examples--text-area', + }, + { + label: 'Text Input with AI slug', + variant: 'experimental-unstable-slug-examples--text-input', }, ]} /> @@ -429,11 +451,17 @@ empty. Error states have three visual indicators to signify invalid content: a red border, an error icon indicator, and an error message. + + ![Example of an error state being triggered](images/text-input-usage-2.gif) +![Example of an error state being triggered](images/text-input-usage-invalid.png) + + + ### Required versus optional @@ -555,6 +583,67 @@ met. +## AI presence + +Text input and text area have a modification that takes on the AI visual styling +when the AI slug is present in the input. The AI variant functions the same as +the normal version except with the addition of the AI slug which is both a +visual indicator and the trigger for the explainability popover. + +More information about designing for AI guidelines is coming soon. + + + + + + + + +![Default text input and text area AI presence example](images/text-input-text-area-ai-presence-default.png) + + + + + +![Fluid text input and text area AI presence example](images/text-input-text-area-ai-presence-fluid.png) + + + + + + + + +### Revert to AI + +The text input and text area can toggle between the AI variant and the non-AI +variant depending on the user’s interaction. If the user manually overrides the +AI-suggested content then the input will change from the AI variant to the +non-AI variant. Once edited, the user should still be able to switch back to the +initially AI generated content via a revert to AI button. + + + + + + + + +![Default text input and text area AI revert example](images/text-input-text-area-ai-revert.png) + + + + + +![Fluid text input and text area AI revert example](images/text-input-text-area-ai-revert-fluid.png) + + + + + + + + ## Related - [Form pattern](/patterns/forms-pattern/) diff --git a/src/pages/components/tile/code.mdx b/src/pages/components/tile/code.mdx index c0fbdf4fb03..b3d93f7c0b1 100755 --- a/src/pages/components/tile/code.mdx +++ b/src/pages/components/tile/code.mdx @@ -112,5 +112,9 @@ documentation, see the Storybooks for each framework below. label: 'Selectable with Improved Contrast (unstable)', variant: 'experimental-feature-flags-tile--selectable', }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--tile', + }, ]} /> diff --git a/src/pages/components/tile/images/tile-AI-presence-style.png b/src/pages/components/tile/images/tile-AI-presence-style.png new file mode 100644 index 00000000000..37285d8263e Binary files /dev/null and b/src/pages/components/tile/images/tile-AI-presence-style.png differ diff --git a/src/pages/components/tile/images/tile-AI-presence-usage.png b/src/pages/components/tile/images/tile-AI-presence-usage.png new file mode 100644 index 00000000000..7240466646f Binary files /dev/null and b/src/pages/components/tile/images/tile-AI-presence-usage.png differ diff --git a/src/pages/components/tile/style.mdx b/src/pages/components/tile/style.mdx index fe76b91b42b..ac6a0cae8fb 100644 --- a/src/pages/components/tile/style.mdx +++ b/src/pages/components/tile/style.mdx @@ -9,6 +9,23 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] import { Checkmark } from '@carbon/icons-react'; import { white } from '@carbon/themes'; + + +The following page documents visual specifications such as color, typography, +and structure. + + + + + +Color +Typography +Structure +AI presence +Feedback + + + ## Color @@ -27,6 +44,11 @@ base tiles. | Checkmark icon | svg | `$icon-primary` | | Chevron icon | svg | `$icon-primary` | + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + @@ -50,6 +72,11 @@ base tiles. | Icon:disabled (or pictogram) | svg | `$icon-disabled` | | Text:disabled | text color | `$text-disabled` | + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + #### Base tile Base tile doesn't have a border. It's not interactive, but can have interactive @@ -173,3 +200,43 @@ altered as needed by the product teams. | 1/3 | | | | | | | 1/4 | | | | | | | 1/6 | | | | | | + +## AI presence + +The following are the unique styles applied to the components when the AI slug +is present. Unless specified, all other tokens in the components remain the same +as the non-AI variants. + +More information about designing for AI guidelines is coming soon. + +| Element | Property | Token / Size | +| -------------------------- | ---------------- | ------------------ | +| Tile:background | background-color | `$layer` \* | +| | box-shadow | `$ai-drop-shadow` | +| | inner-shadow | `$ai-inner-shadow` | +| Linear-gradient:background | start | `$ai-aura-start` | +| | top | `$ai-aura-stop` | +| Linear-gradient:border | start | `$ai-border-start` | +| | stop | `$ai-border-stop` | +| AI slug | size | mini | + + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + + + + +![Structure and spacing measurements for tile with AI presence](images/tile-AI-presence-style.png) + + + + +Structure and spacing measurements for tile with AI presence + +## Feedback + +Help us improve this component by providing feedback, asking questions, and +leaving any other comments on +[GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md). diff --git a/src/pages/components/tile/usage.mdx b/src/pages/components/tile/usage.mdx index e174476bc62..2fb05cdc28b 100755 --- a/src/pages/components/tile/usage.mdx +++ b/src/pages/components/tile/usage.mdx @@ -17,11 +17,17 @@ including information, getting started, how-to, next steps, and more. -[Experimental tiles](https://react.carbondesignsystem.com/?path=/docs/experimental-feature-flags-tile--overview) -are now available. This addition enhances accessibility and only applies to the -visual appearance, not the function of tiles. Though we are not deprecating the -current tiles, we encourage all design teams to use the new experimental tiles -in their products moving forward. +Tile now offers multiple experimental features. The experimental +[slug](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-examples--tile) +changes the visual appearance and adds an AI explainability feature when AI is +present in tile. + +
+ +Additionally, a visual accessibility enhancement is available with +[experimental tiles](https://react.carbondesignsystem.com/?path=/docs/experimental-feature-flags-tile--overview). +We encourage teams to start using these tiles, although current tiles are still +supported. @@ -32,6 +38,7 @@ in their products moving forward. Variants Formatting Universal behaviors +AI presence Related References Feedback @@ -92,6 +99,10 @@ in their products moving forward. label: 'Selectable with Improved Contrast (unstable)', variant: 'experimental-feature-flags-tile--selectable', }, + { + label: 'With AI slug', + variant: 'experimental-unstable-slug-examples--tile', + }, ]} /> @@ -498,6 +509,23 @@ what content it contains but all types of tiles can take focus. | Return or Enter | Return or enter will open the tile (if the tile itself is clickable). If the tile is not clickable but has interactive elements, their corresponding actions are performed. | | Space | If the tile is selectable, the space bar will toggle tile selection. | +## AI presence + +Tile has a modification that takes on the AI visual styling when the AI slug is +present in the container. The AI variants function the same as the normal +versions except with the addition of the AI slug which is both a visual +indicator and the trigger for the explainability popover. + +More information about designing for AI guidelines is coming soon. + + + + +![Base, clickable, single-select and multi-select tiles with AI presence](images/tile-AI-presence-usage.png) + + + + ## Related #### Grid diff --git a/src/pages/components/toggletip/usage.mdx b/src/pages/components/toggletip/usage.mdx index 8c3992570e8..dcdb4cad7eb 100644 --- a/src/pages/components/toggletip/usage.mdx +++ b/src/pages/components/toggletip/usage.mdx @@ -18,14 +18,6 @@ element and can contain interactive elements. - - -**New in v11:** Toggletip should be used in place of tooltip if your content -will contain interactive elements. If it does not have any interactive content, -consider using [Tooltip](/components/tooltip/usage/) instead. - - - Live demo @@ -113,6 +105,8 @@ Don't use to present critical information or request required input needed to complete a workflow. Use the [modal component](/components/modal/usage/) instead. +## Formatting + ### Anatomy diff --git a/src/pages/components/tooltip/usage.mdx b/src/pages/components/tooltip/usage.mdx index 1c80bb9cd2b..78b2965f6f0 100755 --- a/src/pages/components/tooltip/usage.mdx +++ b/src/pages/components/tooltip/usage.mdx @@ -16,17 +16,6 @@ clarity to a user. - - -**v11 update:** The tooltip component has been refactored to use the -[popover](/components/popover/usage/) component under the hood to improve -accessibility. Interactive tooltips now use the -[toggletip](/components/toggletip/usage/) component to achieve accessibility -standards. For v10 implementation guidance, see the -[v10 tooltip](https://v10.carbondesignsystem.com/components/tooltip/usage/). - - - Live demo diff --git a/src/pages/contributing/code.mdx b/src/pages/contributing/code.mdx index ac2adb7622b..4118da5dab2 100644 --- a/src/pages/contributing/code.mdx +++ b/src/pages/contributing/code.mdx @@ -34,7 +34,7 @@ roadmap, is open for community contribution. The best way to volunteer is to look through [existing GitHub issues](https://github.com/carbon-design-system/carbon/issues?q=is%3Aopen+is%3Aissue+label%3A%22needs%3A+community+contribution%22+) labeled with `needs: community contribution`. Any issue labeled with -`needs: code contribution` is fair game! Put a comment in the issue saying you'd +`needs: code contribution` is fair game! Put a comment in the issue saying you’d like to help. + -### When not to use (optional) +### When to use - -*It is best practice not to use a dropdown if there are two or fewer options to choose from. In this case, use a radio button group instead.* ---> +- To organize related information. +- To shorten pages and reduce scrolling when content is not crucial to read in + full. +- When space is at a premium and long content cannot be displayed all at once, + like on a mobile interface or in a side panel. -## Live demo + ### When not to use + + - +- When organizing large amounts of information that can be nested, consider + using [tree view](/components/tree-view/usage) instead. +- If a user is likely to read all of the content, then don't use an accordion as + it adds the burden of an extra click; instead use a full scrolling page with + normal headers. ## Formatting ### Anatomy - +See [Notification](https://www.carbondesignsystem.com/components/notification/usage#anatomy) for an additional example.--> + + + + +![accordion anatomy](images/accordion-anatomy.png) + + + + +1. **Header**: contains the section title and is control for revealing the + panel. +2. **Icon**: indicates if the panel is open or closed. +3. **Panel**: the section of content associated with an accordion header. ### Sizing (optional) @@ -119,33 +170,121 @@ Example: ### Alignment (optional) -We have some alignment content in the Structure section of the Style tab, so consider the relationship between the two tabs and include a cross-reference if necessary. +#### Flush alignment -Example: +Use flush alignment when designing within smaller spaces on a page such as side +panels or sidebars to achieve better text alignment with other content. Flush +alignment is also used to help avoid converging rule lines between components +that are close to each other on a page. -*Inside of a modal, body copy, including titles, have a 20% margin-right. However, form inputs and other components expand the full width of a modal window.* ---> + + + +![accordion flush alignment](images/accordion-flush.png) + + + + +Flush alignment places the row title and chevron icons with 0px padding, keeping +them flush to the rule dividers. For hover and focus interactive states, the +left and right padding receives an additional 16px padding. + + + + +![accordion flush alignment spec](images/accordion-flush-spec.png) + + + + +#### Icon alignment + +By default the chevron icon is placed on the `end` side of the header. This +allows for the title on the `start` side to align with other type elements in +the layout, which is the preferred alignment scenario. + +However, in some rare scenarios, the accordion may be modified to place the icon +in `start` front of the title to function more like a tree. Most instances +should use the default `end` alignment, especially for any pure content or +documentation purposes. Icon placement in accordions should be consistent +throughout your page and should not alternate. + + + + + + +![Do use the default end icon alignment to keep accordion text aligned with other content on the page.](./images/accordion-alignment-do.png) + + + + +![Do place icons on the start side for tree like functionality.](./images/accordion-alignment-do-2.png) + + + ### Placement -You may want to include a link here to the Structure section of the Style tab. +Accordions can be placed with main page content or placed inside of a container +such as a side panel or tile. -Example: + +Tips: +- Create simplified illustrations of placement examples using the illustration library. +- Try for 1, 2, or 4 examples. If you only have 3 examples, keep the images on a 2x2 grid and leave the 4th quadrant empty.--> + + + + + +![accordion placement](images/accordion-placement-2m.png) + +![accordion placement](images/accordion-placement-2.png) + +![accordion placement](images/accordion-placement-2.png) + + + + + + + +#### Grid placement + +When placing an accordion on the 2x Grid with its default alignment, the +indented title and content align to the grid columns, and the top and bottom +borders hang into the gutter. However, the accordion can be modified to have a +[flush alignment](https://carbondesignsystem.com/components/accordion/usage#alignment) +where the titles and content are instead flush aligned with the top and bottom +borders having 0px padding. + + + + +![accordion grid placement](images/accordion-placement-1.png) + + + ## Content @@ -156,43 +295,122 @@ Identify the content elements within the component, for example, title, label, p Briefly explain any particular rules such as phrase structure, word limits, and character limits. Where there's more than one rule, use bullets to list out the multiple rules for ease of reading. If necessary, refer out to main content guidelines for more detailed information, for example, capitalization, or recommended action labels. -See [Checkbox](https://www.carbondesignsystem.com/components/checkbox/usage#content) and [Modal](https://www.carbondesignsystem.com/components/modal/usage#content) for examples. +See [Checkbox](https://www.carbondesignsystem.com/components/checkbox/usage#content) and [Modal](https://www.carbondesignsystem.com/components/modal/usage#content) for additional examples. --> -### Overflow content +#### Label - +- Content inside of a section may be split into paragraphs and include + sub-headers if needed. + +### Overflow content + + + +When the accordion content is longer than the viewport the whole accordion +should vertically scroll. Content should not scroll inside of an individual +panel. Content should never scroll horizontally in an accordion. ### Further guidance - + + +For further content guidance, see Carbon's +[content guidelines](<[https://www.carbondesignsystem.com/guidelines/content/general](https://www.carbondesignsystem.com/guidelines/content/general)>). ## Behaviors - +### States + + +The accordion component has two main states: **collapsed** and **expanded**. The +chevron icon at the end of the accordion indicates which state the accordion is +in. The chevron points down to indicate collapsed and up to indicate expanded. + +Accordions begin by default in the collapsed state with all content panels +closed. Starting in a collapsed state gives the user a high level overview of +the available information. + + + + +![accordion states](images/accordion-state-1.png) + + + + +A user can then independently expand each section of the accordion allowing for +multiple sections to be open at once. + + + + +![multiple sections expanded](images/accordion-state-2.png) + + + + +In addition to the collapsed and expanded states, accordions also have +interactive states for focus, hover, and disabled. See the +[style tab](/components/accordion/style) for more details. + + + + +![accordion interactives states](images/accordion-state-3.png) + + + + ### Interactions +#### Mouse + +Users can trigger a state change by clicking on the chevron or clicking anywhere +in the header area. + + + + +![accordion click targets](images/accordion-click-target.png) + + + + +#### Keyboard + +Users can navigate between accordion headers by pressing `Tab` or `Shift-Tab`. +Users can trigger a state change by pressing `Enter` or `Space` while the header +area has focus. For additional keyboard interactions, see the +[accessibility tab](/components/accordion/accessibility#keyboard-interactions). + ### Validation -## Modifiers +## Modifiers (optional) +### Content switcher with icons + +Use icons instead of label text to indicate alternative views of similar or +related content. Icon content switchers are often used when space is limited or +when icons can adequately describe the sections (for example, a list view versus +a card view). + + + + +![Example shows the content switcher with icons only](images/content-switcher-icon.png) + + + + + + + +![Do use consistent icon or text content tabs](images/content-switcher-usage-modifier-do.png) + + + + +![Do not mix icon and text content tabs](images/content-switcher-usage-modifier-dont.png) + + + + ## Related +The following components are additional ways to organize content. Consider the +type and length of content you are working with when choosing a content +container. Longer form content may benefit from tabs or a content switcher while +very short content might do better in a structured list. + +- [Content switchers](/components/content-switcher/usage) allow users to toggle + between two or more content sections within the same space on the screen. +- [Progress indicators](/components/progress-indicator/usage) guide users + through any linear, multistep task by showing the user their completed, + current, and future steps. +- [Structured lists](/components/structured-list/usage) group content that is + similar or related, such as terms and definitions. +- [Tabs](/components/tabs/usage) organize related content by allowing the user + to navigate between groups of information that appear within the same context. +- [Tree view](/components/tree-view/usage) is a hierarchical structure that + provides nested levels of navigation. + ## References +- Hoa Loranger, + [Accordions Are Not Always the Answer for Complex Content on Desktops](https://www.nngroup.com/articles/accordions-complex-content/) + (Nielsen Norman Group, 2014) + ## Feedback - + Help us improve this component by providing feedback, asking questions, and leaving any other comments on diff --git a/src/pages/contributing/get-started.mdx b/src/pages/contributing/get-started.mdx index 8e3b113f32c..e425438f026 100644 --- a/src/pages/contributing/get-started.mdx +++ b/src/pages/contributing/get-started.mdx @@ -3,7 +3,7 @@ title: Get started description: The Carbon Design System is made possible through a vibrant community of designers and developers. Anyone can contribute code, design, documentation, - and ideas. Here's how you can contribute, too! + and ideas. Here’s how you can contribute, too! --- @@ -25,12 +25,12 @@ designers and developers. Anyone can contribute code, design, and documentation. ## Get started -If you're interested in getting involved but don't know where to start, welcome! -Designers and developers like you help to make Carbon great, and we're so glad -you're here. +If you’re interested in getting involved but don't know where to start, welcome! +Designers and developers like you help to make Carbon great, and we’re so glad +you’re here. To get started, subscribe to our [office hours](/whats-happening/meetups/) and -stop on by. We'll help you find an appropriate first contribution depending on +stop on by. We’ll help you find an appropriate first contribution depending on your skills and interests. Read on to learn about common types of contributions and the process. @@ -95,7 +95,7 @@ projects. title="Read-only states" author="Adopter: Carbon for IBM Products" date="Date contributed: May 5th 2023" - readTime="Contributors: Devin O' Bryan, Mike Eaker, Lee Chase" + readTime="Contributors: Devin O’ Bryan, Mike Eaker, Lee Chase" href="https://carbondesignsystem.com/patterns/read-only-states-pattern/"> + + +![2x Grid overview](/images/grid-example.gif) + +![2x Grid overview](/images/grid-example.png) + + 2x Grid overview + + + #### Getting started diff --git a/src/pages/developing/dev-resources/index.mdx b/src/pages/developing/dev-resources/index.mdx index 3f04aca8b76..bc770b2150d 100644 --- a/src/pages/developing/dev-resources/index.mdx +++ b/src/pages/developing/dev-resources/index.mdx @@ -157,17 +157,6 @@ your framework of choice. ## Tools - - - - - - - - - + - + diff --git a/src/pages/developing/react-tutorial/step-2.mdx b/src/pages/developing/react-tutorial/step-2.mdx index bd9ac4e956b..b70a2453472 100644 --- a/src/pages/developing/react-tutorial/step-2.mdx +++ b/src/pages/developing/react-tutorial/step-2.mdx @@ -153,7 +153,7 @@ return ( 7/16 - + 8/16 @@ -257,7 +257,7 @@ supported. -

What is Carbon?

+

What is Carbon?

Carbon is IBM’s open-source design system for digital products and experiences. With the IBM Design Language as its foundation, the @@ -274,16 +274,20 @@ supported. - Rapidly build beautiful and accessible experiences. The Carbon kit - contains all resources you need to get started. +

+ Rapidly build beautiful and accessible experiences. The Carbon kit + contains all resources you need to get started. +

- Carbon provides styles and components in Vanilla, React, Angular, - and Vue for anyone building on the web. +

+ Carbon provides styles and components in Vanilla, React, Angular, + and Vue for anyone building on the web. +

@@ -370,17 +374,24 @@ import Image from 'next/image'; className="landing-page__illo" src="/tab-illo.png" alt="Carbon illustration" - width={786} - height={647} + width={604} + height={498} /> ; ``` -Now let's set the image size in `_landing-page.scss`: +Now let's set the image size in `_landing-page.scss` and also set the background +color of our page: ```scss path=src/app/home/_landing-page.scss +html { + background-color: $layer-01; +} + .landing-page__illo { max-width: 100%; + float: inline-end; + height: auto; } ``` @@ -396,16 +407,31 @@ for now. ```jsx path=src/app/home/page.js - +

The Principles

 - + Carbon is Open - + Carbon is Modular - + Carbon is Consistent @@ -573,7 +599,7 @@ baseline, for consistency as well as development ease so `margins` and ```scss path=src/app/home/_landing-page.scss .tabs-group-content { - padding: $spacing-10 $spacing-06; + padding: $spacing-10 0 $spacing-10 $spacing-06; } .landing-page__subheading { @@ -594,6 +620,7 @@ baseline, for consistency as well as development ease so `margins` and .tabs-group { background-color: $layer-01; + padding: 0 $spacing-03; } ``` @@ -615,19 +642,28 @@ later in the tutorial. You'll notice that we get to re-use the ```scss path=src/app/home/_landing-page.scss .landing-page__r3 { - padding-top: $spacing-09; - padding-bottom: $spacing-09; + padding-top: $spacing-08; + padding-bottom: $spacing-08; padding-left: $spacing-06; @include landing-page-background; } .landing-page__label { @include type-style('heading-01'); + + @include breakpoint-down(md) { + padding-bottom: 1.5rem; + } +} + +.landing-page__title { + padding-bottom: 0.5rem; } ``` -Lastly, we'll fix some grid alignment issues. We'll use one of our breakpoint -mixins for the media queries, like so: +Lastly, we'll fix some grid alignment issues along with the image size for +smaller screens and the HeaderGobalAction component. We'll use one of our +breakpoint mixins for the media queries, like so: ```scss path=src/app/home/_landing-page.scss .landing-page__banner, @@ -641,6 +677,33 @@ mixins for the media queries, like so: margin-right: 0; } } + +@media (max-width: 672px) { + .landing-page__illo { + width: 528px; + widht: 100%; + height: auto; + float: inline-start; + } +} + +@media (max-width: 320px) { + .landing-page__illo { + display: none; + } + + .landing-page__banner { + padding-bottom: $spacing-05 * 4; + } +} +``` + +```scss path=src/components/TutorialHeader/_tutorial-header.scss +@media (max-width: 320px) { + .action-icons { + display: none; + } +} ``` We are almost done with the landing page. You may notice a few styles are off. diff --git a/src/pages/developing/react-tutorial/step-4.mdx b/src/pages/developing/react-tutorial/step-4.mdx index 90b34f79dc4..b5aa8f83212 100644 --- a/src/pages/developing/react-tutorial/step-4.mdx +++ b/src/pages/developing/react-tutorial/step-4.mdx @@ -149,16 +149,31 @@ That markup currently looks like this in `LandingPage`: ```jsx path=src/app/home/page.js - +

The Principles

 - + Carbon is Open - + Carbon is Modular - + Carbon is Consistent @@ -186,7 +201,7 @@ import { Grid, Column } from '@carbon/react'; const InfoSection = (props) => ( - +

{props.heading}

 {props.children} @@ -202,6 +217,7 @@ names that we just added. .info-section__heading { @include type-style('heading-01'); + padding-bottom: $spacing-08; } ``` @@ -214,9 +230,14 @@ looks like `Carbon is Open`. At the bottom of ```javascript path=src/components/Info/Info.js const InfoCard = (props) => { return ( - -

{props.heading}

-

{props.body}

+ +
+

+ {`${splitHeading[0]} `} + {splitHeading[1]} +

+

{props.body}

+
{props.icon()} ); @@ -267,17 +288,36 @@ With everything imported, replace the current: ```jsx path=src/app/home/page.js - -

The Principles

- - - Carbon is Open - - - Carbon is Modular - - - Carbon is Consistent + + + +

The Principles

+ + + Carbon is Open + + + Carbon is Modular + + + Carbon is Consistent + + ``` @@ -285,7 +325,7 @@ With everything imported, replace the current: With the new components: ```javascript path=src/app/home/page.js - + - + -![Always use “Auto” in alignment to ensure the text box is fitting with the content. Spacer snaps to the text box.](images/Layout_overview_Visual-rhythm-dont.svg) +![Always use “Auto” in alignment to ensure the text box fits with the content. Spacer snaps to the text box.](images/Layout_overview_Visual-rhythm-dont.svg) diff --git a/src/pages/elements/2x-grid/usage.mdx b/src/pages/elements/2x-grid/usage.mdx index ec189dae17f..c06fc467816 100644 --- a/src/pages/elements/2x-grid/usage.mdx +++ b/src/pages/elements/2x-grid/usage.mdx @@ -195,7 +195,7 @@ through a product. Although images are used much less frequently in products than in digital experiences, aspect ratios come into play often in product with the tile component, which is used frequently in catalogs and dashboards. -Refer back to the [aspect ratios](/guidelines/2x-grid/overview/#aspect-ratio) +Refer back to the [aspect ratios](/elements/2x-grid/overview/#aspect-ratio) section on the 2x Grid Overview tab to see a list of the most commonly used aspect ratios across the Carbon ecosystem. We understand that it’s not always possible for every image or container to be one of these sizes. However it’s diff --git a/src/pages/elements/color/tokens.mdx b/src/pages/elements/color/tokens.mdx index 85aff4dd01e..a5eedec9c89 100755 --- a/src/pages/elements/color/tokens.mdx +++ b/src/pages/elements/color/tokens.mdx @@ -8,17 +8,6 @@ tabs: ['Overview', 'Usage', 'Tokens', 'Code'] import ColorTokenTable from 'components/ColorTokenTable'; - - -**v11 update:** Color tokens underwent a major renaming in version 11. Visually -components and styles look the same across v10 and v11, but the token names have -changed significantly to improve usability and extend theming functionality. -This website and page contain only the v11 tokens. Helpful links: -[v10 color tokens](https://v10.carbondesignsystem.com/guidelines/color/usage) | -[Color token migration guide](/migrating/guide/design#color-tokens-breaking). - - - ## Tokens by theme diff --git a/src/pages/elements/color/usage.mdx b/src/pages/elements/color/usage.mdx index aeb6085db28..67056127a49 100644 --- a/src/pages/elements/color/usage.mdx +++ b/src/pages/elements/color/usage.mdx @@ -82,13 +82,8 @@ layer 03. Layers stack one on top of the other in a set order. Each step in UI color (excluding interaction colors) is another layer and will require the use of a different set of layering tokens. - - -**Migration note:** Previously, in v10 most color tokens had numeral endings, -now in v11 only layering tokens will have this distinction. For more -information, see the [migration guide](/migrating/guide/design#color-tokens). - - +For more information about how color token migration works, see the +[migration guide](/migrating/guide/design#color-tokens). #### Layer sets @@ -225,15 +220,6 @@ that are not part of the layer sets like type or icons, apply color tokens as you normally would. Non-layer tokens will be the same across variants because they have enough contrast not to need a change with each layer. - - -**Migration note:** In v10, the additional color variants were known as -the light prop variants. The `light` variants now use the 02 layer set. These -new tokens also allow for a third color variant using the 03 layer set in -components that was not possible in v10. - - - diff --git a/src/pages/elements/themes/code.mdx b/src/pages/elements/themes/code.mdx index 146e9127577..97f3af3d721 100644 --- a/src/pages/elements/themes/code.mdx +++ b/src/pages/elements/themes/code.mdx @@ -101,6 +101,95 @@ Themes can also be extended with your own custom tokens: ); ``` +#### System preferences + +Modern browsers and systems have adopted the idea of dark and light themes +applied at a system level. Where no user preference has been specified their +system level theme should be matched. + +For example applying `g10` or `g100` automaticcally based on system preferences. + +```scss +@use '@carbon/themes/scss/themes' as *; +@use '@carbon/themes'; + +/* system preference theme by default */ +:root { + @include themes.theme($g10); +} + +@media (prefers-color-scheme: dark) { + :root { + @include themes.theme($g100); + } +} + +/* user has configured a theme preference for the current page/app */ +[data-carbon-theme='white'] { + @include themes.theme($white); +} + +[data-carbon-theme='g10'] { + @include themes.theme($g10); +} + +[data-carbon-theme='g90'] { + @include themes.theme($g90); +} + +[data-carbon-theme='g100'] { + @include themes.theme($g100); +} +``` + +Some designs include a sections in the opposite theme. + +```scss +@mixin theme-scheme($default, $compliment) { + /* apply default theme */ + @include theme($default, true); + + /* apply to the compliment theme */ + [data-carbon-theme--compliment] { + @include theme($compliment, true); + } + + /* apply the default theme */ + /* to switch back from within a compliment */ + [data-carbon-theme] { + @include theme($default, true); + } +} + +/* system preference theme by default */ +:root { + @include theme-scheme(themes.$g10, themes.$g100); +} + +@media (prefers-color-scheme: dark) { + :root { + @include theme-scheme(themes.$g100, themes.$g10); + } +} + +/* user has configured a theme preference for the current page/app */ +[data-carbon-theme='white'] { + @include theme-scheme(themes.$white, themes.$g90); +} + +[data-carbon-theme='g10'] { + @include theme-scheme(themes.$g10, themes.$g100); +} + +[data-carbon-theme='g90'] { + @include theme-scheme(themes.$g90, themes.$white); +} + +[data-carbon-theme='g100'] { + @include theme-scheme(themes.$g100, themes.$g10); +} +``` + ### JavaScript If you're looking to use these themes in JavaScript, we export a variety of diff --git a/src/pages/elements/typography/type-sets.mdx b/src/pages/elements/typography/type-sets.mdx index 5eb00230a24..4b57cf1a734 100644 --- a/src/pages/elements/typography/type-sets.mdx +++ b/src/pages/elements/typography/type-sets.mdx @@ -21,17 +21,6 @@ sets: expressive and productive. - - -**v11 update:** The two v10 type sets—Productive and Expressive—have been -blended together to work as a unified collection in v11. As a result of this -convergence, type token names have been renamed to better define their -relationship to one another and reflect its styling. Helpful links: -[v10 type tokens](https://v10.carbondesignsystem.com/guidelines/typography/overview) -| [Type token migration guide](/migrating/guide/design#type-tokens-breaking). - - - Overview @@ -111,13 +100,17 @@ headings are needed. The fluid heading styles are primarily used in web pages, and are therefore part of the expressive set of type styles. These headings are responsive and the type -styles change size at different breakpoints. +styles actually change size incrementally (almost imperceptibly) between the +different breakpoints — hence the name "fluid." Do not use these styles inside a container. They may be used in product pages where text sits outside of a container, and a blend of expressive and productive type styles is desired for hierarchy and distinction. For more information, see [Style strategies](/guidelines/typography/style-strategies). +_Note: the slider below shows the type sizes jumping abruptly between +breakpoints, which is not a good representation of the actual behavior._ + ## Fluid display styles diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-accessibility-dark.png b/src/pages/guidelines/carbon-for-ai/images/ai-accessibility-dark.png new file mode 100644 index 00000000000..e5b968e3e90 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-accessibility-dark.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-accessibility-light.png b/src/pages/guidelines/carbon-for-ai/images/ai-accessibility-light.png new file mode 100644 index 00000000000..e9220bcf433 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-accessibility-light.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-chat-dark.png b/src/pages/guidelines/carbon-for-ai/images/ai-chat-dark.png new file mode 100644 index 00000000000..344c2d0a7a6 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-chat-dark.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-chat-light.png b/src/pages/guidelines/carbon-for-ai/images/ai-chat-light.png new file mode 100644 index 00000000000..a2f6cf3986c Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-chat-light.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-components-dark.png b/src/pages/guidelines/carbon-for-ai/images/ai-components-dark.png new file mode 100644 index 00000000000..5de16391bc7 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-components-dark.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-components-light.png b/src/pages/guidelines/carbon-for-ai/images/ai-components-light.png new file mode 100644 index 00000000000..ca89e467dab Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-components-light.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-components-revert.png b/src/pages/guidelines/carbon-for-ai/images/ai-components-revert.png new file mode 100644 index 00000000000..2aa8d54c669 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-components-revert.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-explainability-dark.png b/src/pages/guidelines/carbon-for-ai/images/ai-explainability-dark.png new file mode 100644 index 00000000000..080be353954 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-explainability-dark.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-explainability-light.png b/src/pages/guidelines/carbon-for-ai/images/ai-explainability-light.png new file mode 100644 index 00000000000..6e9301cf8f4 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-explainability-light.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-label-dark.png b/src/pages/guidelines/carbon-for-ai/images/ai-label-dark.png new file mode 100644 index 00000000000..e5dd5f57c8f Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-label-dark.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-label-in-context.png b/src/pages/guidelines/carbon-for-ai/images/ai-label-in-context.png new file mode 100644 index 00000000000..accb88c0aec Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-label-in-context.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-label-light.png b/src/pages/guidelines/carbon-for-ai/images/ai-label-light.png new file mode 100644 index 00000000000..8c6cdffcbcf Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-label-light.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-overview.png b/src/pages/guidelines/carbon-for-ai/images/ai-overview.png new file mode 100644 index 00000000000..c29e809852d Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-overview.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-style-elements-dark.png b/src/pages/guidelines/carbon-for-ai/images/ai-style-elements-dark.png new file mode 100644 index 00000000000..d35f236eade Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-style-elements-dark.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/ai-style-elements-light.png b/src/pages/guidelines/carbon-for-ai/images/ai-style-elements-light.png new file mode 100644 index 00000000000..1725bc3cad4 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/ai-style-elements-light.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/mini-checkbox.png b/src/pages/guidelines/carbon-for-ai/images/mini-checkbox.png new file mode 100644 index 00000000000..75153707acb Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/mini-checkbox.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/mini-data-table.png b/src/pages/guidelines/carbon-for-ai/images/mini-data-table.png new file mode 100644 index 00000000000..62102873a24 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/mini-data-table.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/mini-date-picker.png b/src/pages/guidelines/carbon-for-ai/images/mini-date-picker.png new file mode 100644 index 00000000000..fc045a1fb21 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/mini-date-picker.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/mini-dropdown.png b/src/pages/guidelines/carbon-for-ai/images/mini-dropdown.png new file mode 100644 index 00000000000..d0aed7a00da Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/mini-dropdown.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/mini-form.png b/src/pages/guidelines/carbon-for-ai/images/mini-form.png new file mode 100644 index 00000000000..16b7d7b973d Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/mini-form.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/mini-modal.png b/src/pages/guidelines/carbon-for-ai/images/mini-modal.png new file mode 100644 index 00000000000..d8506f0f7b4 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/mini-modal.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/mini-number-input.png b/src/pages/guidelines/carbon-for-ai/images/mini-number-input.png new file mode 100644 index 00000000000..385a7933228 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/mini-number-input.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/mini-radio-button.png b/src/pages/guidelines/carbon-for-ai/images/mini-radio-button.png new file mode 100644 index 00000000000..950eadd42d3 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/mini-radio-button.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/mini-select.png b/src/pages/guidelines/carbon-for-ai/images/mini-select.png new file mode 100644 index 00000000000..66462e4e9c0 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/mini-select.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/mini-tag.png b/src/pages/guidelines/carbon-for-ai/images/mini-tag.png new file mode 100644 index 00000000000..a93428e8994 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/mini-tag.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/mini-text-input.png b/src/pages/guidelines/carbon-for-ai/images/mini-text-input.png new file mode 100644 index 00000000000..9497dfe9e70 Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/mini-text-input.png differ diff --git a/src/pages/guidelines/carbon-for-ai/images/mini-tile.png b/src/pages/guidelines/carbon-for-ai/images/mini-tile.png new file mode 100644 index 00000000000..46091ef126e Binary files /dev/null and b/src/pages/guidelines/carbon-for-ai/images/mini-tile.png differ diff --git a/src/pages/guidelines/carbon-for-ai/index.mdx b/src/pages/guidelines/carbon-for-ai/index.mdx new file mode 100644 index 00000000000..3e3820d8465 --- /dev/null +++ b/src/pages/guidelines/carbon-for-ai/index.mdx @@ -0,0 +1,605 @@ +--- +title: Carbon for AI +description: + Carbon for AI is an extension of the Carbon system, designed to give AI + instances in IBM products a visually and behaviorally distinct identity. +--- + + + +Carbon for AI is an extension of the Carbon system, designed to give AI +instances in IBM products a visually and behaviorally distinct identity. + + + + + +Introduction +Style elements +AI explainability +AI label +AI chat +AI components +Accessibility +AI resources + + + + + + +![A text input showing the revert to AI state.](images/ai-overview.png) + + + + +## Introduction + +AI introduces a range of new responsibilities when designing experiences across +our software, particularly regarding trust and transparency. Carbon for AI is +the framework for identifying AI-generated content and delivering explainability +in our products. + +#### Use the AI label and styling to mark any instances of AI usage + +Transparency of AI presence is key to user trust. Having a consistent identity +helps build awareness and anticipation of AI presence across our experiences. + +#### Provide transparency of AI at each level of the experience + +Whether AI exists within a single word or across the entire page, users should +clearly understand how pervasive an AI is implemented. + +#### Integrate explainability into the overall user workflow and experience + +This integration requires you to minimize distractions and show explanations +only when needed or requested by the user. + +#### Don’t use the Carbon for AI styling as decoration + +While these new styling elements are enticing, they are strictly intended to +identify any instances of AI being used in an experience. + +### What Carbon for AI provides + +- A set of guidelines and considerations for incorporating AI into products +- Visual guidance and style elements to represent AI’s presence +- A set of reusable core components with the AI styling already applied +- New custom AI components used for AI transparency and explainability + +### Assets + +| AI Asset | Status | Figma library | Code | +| ---------------------------------------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [AI style elements](/guidelines/carbon-for-ai/#style-elements) | Experimental | [(v11) All themes]() | [@carbon/themes](https://github.com/carbon-design-system/carbon/blob/cd57b295688aad843fc7d7b4585db4ee1987afe8/packages/themes/src/white.js#L209) | +| [AI Carbon components](/guidelines/carbon-for-ai/#ai-components) | Experimental | [(v11) All themes]() | [React](https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-slug--overview), [Web-components](https://web-components.carbondesignsystem.com/?path=/story/experimental-slug--default) | +| [AI chat](/guidelines/carbon-for-ai/#ai-chat) | Experimental | [Chat component library](https://www.figma.com/design/j6Wh5Ud6cDLwlx1i4pmQo7/Chat-Component-Library---Carbon-for-AI?m=auto) | [watsonx Assistant](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html), [@carbon-labs/ai-chat](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/chat) | + +## Style elements + +Carbon for AI styling builds on the core Carbon library principles, using light +as a metaphor to “illuminate” AI-generated content. This makes AI-generated or +AI-recommended content distinctive and stands out for users. _For IBMers only_: +To learn more about the Carbon for AI styling, see +[Design for AI: Style elements](https://w3.ibm.com/w3publisher/design-for-ai/carbon-for-ai/ai-style-elements). + +#### Designed to illuminate AI to the users + +Carbon for AI uses light-inspired effects like brightness, glow, and gradients +to emphasize AI instances across the experience. + +#### An extension of the IBM Design Language + +Carbon for AI is designed to coexist alongside the Carbon themes but has its own +unique visual characteristics that distinguishes it as AI while following the +IBM Design Language DNA and principles. + +#### New color and style tokens for creating your AI experiences + +To accommodate for these AI styles, we are introducing a new suite of color and +style tokens that can be found within the main Carbon themes. Using the AI +tokens does not require a different theme or elements package. When building +custom AI component variants or instances in your UI use these new color tokens +to stay consistent with the AI styling. For a full list of the new tokens, go to +[color tokens](/elements/color/tokens). + + + + + + + + +![Light mode UI example of the AI style elements](images/ai-style-elements-light.png) + + + + + +![Dark mode UI example of the AI style elements](images/ai-style-elements-dark.png) + + + + + + + + +## AI explainability + +Explainability is a set of processes and methods that make AI decisions more +comprehensible to humans. _For IBMers only_: To learn more about explainability, +see +[Design for AI: Explainability](https://w3.ibm.com/w3publisher/design-for-ai/ai-ethics/explainability). + +#### Well-designed explainability: + +- Builds trust with users +- Improves understanding of an AI system +- Increases usage and interaction +- Enables product teams to gain further insights to improve the AI system + +#### Use the AI label as the path to explainability + +The AI label is the primary indicator to communicate that AI is present, and +it’s how users can access explainability content. + +#### Start with summarized explanations + +As a first layer of explainability, use the explainability pop-over attached to +the AI label to provide a quick, in-context option to explain AI results for a +particular instance. + + + + + + + + +![Light mode UI example of AI explainability shown in a popover.](images/ai-explainability-light.png) + + + + + +![Dark mode UI example of AI explainability shown in a popover.](images/ai-explainability-dark.png) + + + + + + + + +### Explainability resources + + + + + + + + + + + + + + + + + + +## AI label + + + +**Formerly AI slug:** The AI label was previously called "AI Slug" but has been +updated to better reflect its usage. This name change will be reflected in code +and Figma once it moves to stable in the near future. + + + +The AI label is a component used as an indicator of AI instances in the UI. It +is intended for any scenario where AI is generating content to reinforce AI +transparency, accountability, and explainability at any interface level. It +enables more effective recognition and recall of AI instances in a way that is +identifiable across any IBM product. + +The AI label is also the trigger for the explainability popover which serves as +the first layer of explainability. It provides a consistent, up-front way to +access explainability with the option to dig into more details if needed. + + + + + + + + +![Light mode example of the AI label and explainability popover.](images/ai-label-light.png) + + + + + +![Dark mode example of the AI label and explainability popover.](images/ai-label-dark.png) + + + + + + + + +### When to use the AI label + +#### Mark AI-generated content with an AI label + +AI transparency is key, and the AI label is an accessible, interactive element +that can mark these instances as presented in the interface. The label has been +designed to work in many instances where AI-generated content can be surfaced as +in components, see the +[component section](/guidelines/carbon-for-ai/#ai-components) for more details. + +#### Use the AI label to provide a consistent visual reference point for AI + +For recognition and recall, users need a consistent, identifiable visual +reference to look to when they need to understand more details about how the AI +was built. + +#### Use the AI label as a pathway to explainability + +Users must clearly understand how to access more details about how an AI was +built. By providing a bridge to explainability from the AI label, users are +given a recognizable location to learn more about the AI model. + +For more information about using the AI label, see the +[AI label](/components/ai-label/usage/) component page. + + + + +![A form example with the AI label inside of inputs.](images/ai-label-in-context.png) + + + + +## AI chat + + + +**For internal IBM use only.** This chat component is currently only available +for IBM teams and not publicly available. + + + +AI chat is a conversational framework between a user and an AI that can aid in +creating tasks, finding insights, tracking documents, and more. _For IBMers +only:_ To learn more about chat, see +[Design for AI: Chat pattern](https://w3.ibm.com/w3publisher/design-for-ai/carbon-for-ai/ai-chat-patterns). + + + + + + + + +![Light mode example of the AI chat in a product UI.](images/ai-chat-light.png) + + + + + +![Dark mode example of the AI chat in a product UI.](images/ai-chat-dark.png) + + + + + + + + +### Chat resources + +_For IBMers only_: The chat component Figma library includes design assets, +components, and generals chat usage guidelines. + + + + + + + + + + +## AI components + +Carbon components with an AI presence are styled using Carbon for AI. Each AI +component is required to have an embedded AI label and explainability popover +that alerts users to AI-generated content. When the AI label is turned on, the +component transforms to the AI visual style but still functions like the +standard one. + +#### Start designing + +The AI presence styling for core Carbon components is available in the "(v11) +All themes" Figma library. To use it, simply grab the normal component asset, +and then in the layers panel, go to "Change variable modes" and choose "AI +presence," followed by "All AI elements." + +#### Start developing + +Components in Carbon come with the AI style properties already available for use +through a mix-in. For more details on how to use the AI label in code, see the +[React](https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-slug--overview) +and +[Web-components](https://web-components.carbondesignsystem.com/?path=/docs/experimental-slug--default) +storybooks. + + + + + + + + +![Light mode examples of AI carbon components.](images/ai-components-light.png) + + + + + +![Dark mode examples of AI carbon components.](images/ai-components-dark.png) + + + + + + + + +### Revert functionality + +These components can toggle between the AI variant and the default variant +depending on the user’s interaction. If the user manually overrides the +AI-suggested content then the component will change from the AI variant to the +default variant. Once edited, the user should still be able to switch back to +the initially AI-generated content via a revert to AI button. + + + + +![A text input showing the revert to AI state.](images/ai-components-revert.png) + + + + +### Component list + +The following list of components are the core components that have an available +AI variant. All of the AI components in Carbon have been designed to work +harmoniously together, as parts of a greater whole. + + + + + + + +![AI checkbox](images/mini-checkbox.png) + + + + + +![AI Form](images/mini-form.png) + + + + + +![AI select](images/mini-select.png) + + + + + + + + + +![AI data table](images/mini-data-table.png) + + + + + +![AI modal](images/mini-modal.png) + + + + + +![AI tags](images/mini-tag.png) + + + + + + + + + +![AI date picker](images/mini-date-picker.png) + + + + + +![AI number input](images/mini-number-input.png) + + + + + +![AI text input](images/mini-text-input.png) + + + + + + + + + +![AI dropown](images/mini-dropdown.png) + + + + + +![AI radio button](images/mini-radio-button.png) + + + + + +![AI tile](images/mini-tile.png) + + + + + + + +## Accessibility + +When designing an AI experience, ask if the user knows AI is being used. The +base principle of Carbon for AI is to mark where AI is present while providing +explainability whenever available. This level of transparency helps build trust +between users and the system. This transparency is crucial as the line between +AI and human is becoming increasingly blurred. + +#### Tested for color contrast + +The Carbon for AI style elements and components are tested for accessibility to +ensure that colors, type, and contrast adhere to Carbon’s existing accessibility +standards. + +#### AI label provides accessible AI visibility + +The AI label is the primary indicator to communicate that AI is present. To +ensure that the AI label remains accessible across light and dark themes, use +the provided component. + +#### Light spread is limited for readability + +Carbon for AI utilizes light sources to distinguish it from base Carbon +components. These light sources glow on container edges, but the spread is +limited and subtle to ensure accessible contrast with UI content. + + + + + + + + +![Demonstration of text color contrast in a light mode.](images/ai-accessibility-light.png) + + + + + +![Demonstration of text color contrast in a dark mode.](images/ai-accessibility-dark.png) + + + + + + + + +## AI resources + + + + + + + + + + +## Feedback + +Help us improve this component by providing feedback, asking questions, and +leaving any other comments on GitHub. _For IBMers only_: Questions and feedback +can be directed to Slack in the channels +[#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/) or +[#carbon-for-ai](https://ibm-studios.slack.com/messages/C0603LZUKRV). diff --git a/src/pages/help/faq/index.mdx b/src/pages/help/faq/index.mdx index 4a13496e08c..7d0b61f0dc2 100755 --- a/src/pages/help/faq/index.mdx +++ b/src/pages/help/faq/index.mdx @@ -36,8 +36,8 @@ and developers who contribute back to ### How can I contribute and/or propose new components or ideas? -Check out our [contribution overview](/contributing/overview) to learn all about -the different ways to contribute. Thanks for the help! +Check out our [contribution get started](/contributing/get-started) page to +learn all about the different ways to contribute. Thanks for the help! ### I see a bug. How do I report it? @@ -47,7 +47,7 @@ soon as we can. If you have a fix for the bug, please feel free to submit a PR for it. For larger changes, please see our -[contribution overview](/contributing/overview). +[contribution get started](/contributing/get-started) page. #### Design issue repos @@ -57,7 +57,7 @@ For larger changes, please see our - [Components](https://github.com/carbon-design-system/carbon/issues/new/choose) - [Elements](https://github.com/carbon-design-system/carbon/issues/new/choose) - [Charts](https://github.com/carbon-design-system/carbon-charts/issues/new) -- [Everything else](https://github.com/carbon-design-system/issue-tracking/issues/new) +- [Everything else](https://github.com/carbon-design-system/carbon/issues/new/choose) #### Code repos @@ -70,7 +70,7 @@ For larger changes, please see our ### What can I expect for a response to my bug report? -If you have a pressing bug or change it is best to make PR for the issue +If you have a pressing bug or change it is best to make a PR for the issue yourself. Our team works in sprints and will try to address your bug as soon as possible; sometimes within two or three days, but usually by the following sprint. Issues that are out of scope will be closed until they become a higher @@ -117,8 +117,7 @@ you need to get started with Carbon implementations. ### Where do I find mobile components? -We are currently working on a Carbon mobile Figma kit. When it's ready, you'll -find it on the +The Carbon Native mobile Figma kit is available on the [Other resources](https://carbondesignsystem.com/designing/design-resources/#native-mobile) page. @@ -142,8 +141,9 @@ Carbon charts and their corresponding assets and documentation are now in the You can find earlier versions of Carbon documentation here: **[V6](http://v6.carbondesignsystem.com/)**, **[V7](http://v7.carbondesignsystem.com/)**, -**[V8](http://v8.carbondesignsystem.com/)**, and -**[V9](http://v9.carbondesignsystem.com/).** +**[V8](http://v8.carbondesignsystem.com/)**, +**[V9](http://v9.carbondesignsystem.com/)**, and +**[V10](http://v10.carbondesignsystem.com/).** ## Telemetry diff --git a/src/pages/help/migration-guide/design.mdx b/src/pages/help/migration-guide/design.mdx deleted file mode 100644 index 97097adf512..00000000000 --- a/src/pages/help/migration-guide/design.mdx +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Migration guide -description: - This guide includes everything you need to migrate your offering from an - earlier version of Carbon to v10. -tabs: ['Overview', 'Design', 'Develop'] ---- - - - -The transition from v9 to v10 is primarily visual. The IBM color palette was -updated between versions and a 16-column grid was introduced. - - - - - -IBM Design Language -Design kit -Elements -Design migration strategy - - - -## IBM Design Language - -Carbon v10 delivers the -[IBM Design Language](https://www.ibm.com/design/language/) to product teams. It -represents a complete visual refresh of the system, delivering the ethos of IBM -Design. Carbon v10 is a modern, open-source framework for building digital -products and experiences, with tooling and guidance on color, layout, -typography, iconography, motion, patterns, and content. - -## Design kit - -All components, colors, icons, typography, motion, and grid elements in the kit -align with the IBM Design Language. - -### What changed - -- Sketch kit delivered with Sketch Cloud -- New color tokens -- Updated text styles -- Updated spacing -- Icon updates -- Updated layer styles - -#### Sketch libraries - -Designers can subscribe to the design kit library via Sketch Cloud, and updates -to the contents of the kit will be pushed to subscribers as they become -available. - -#### Icons, pictograms, and the full IBM color palette - -To access the IBM Design Language icons, pictograms, and colors, subscribe to -the -[IBM Design Language libraries](/designing/design-resources#color-grid-and-icons). - -#### Migrating to v10 - -Upgrading to the v10 kit will not automatically change any files created in -previous versions of the kit. Swapping v9 symbols for v10 symbols is a manual -process. - -Although libraries from multiple versions of Carbon can exist in Sketch at the -same time, you should avoid using v10 symbols in an app designed with v9. - -### Setting up the kit - -Head over to [Design kits](/designing/kits/sketch) to set up the new Sketch -libraries. - -## Elements - -### Themes and color - -Carbon offers four color themes. See the -[theming guidelines](/guidelines/color/overview#themes) to learn how to use the -themes, and visit the color migration guide to learn more about color tokens -added in v10. - - - - - - - - - - - -### Icons - -The [icon library](/guidelines/icons/library) was updated and expanded with v10. -The full library of icons and pictograms is available via the IBM Design -Language icon [Sketch library](/guidelines/icons/usage#resources). - -Any v9 icons should be reviewed against the new icons before publishing. -Wherever possible, replace old icons with an updated version. - - - - - - - - - - - -### Typography - -The typeface for Carbon remains -[IBM Plex](/guidelines/typography/overview/#typeface:-ibm-plex). The -[type token](/guidelines/typography/overview#type-tokens-and-sets) architecture -was redesigned for better clarity and flexibility, moving from a basic type -scale model to a more robust token-based architecture. Work with your -development team to discuss how this new architecture might affect your team's -workflow. - - - - - - - - - - - -### Motion - -Carbon v10 adheres to IBM Design Language -[motion standards](/guidelines/motion/overview), designed to bring unity and -cohesion to all motion in a user interface. All interactions that include motion -should abide by these standards. - -### Layout, grid, and spacing - -Carbon v10 uses the 16-column [2x Grid](/guidelines/2x-grid/overview). Carbon -v10 will default to the 12-column grid with an option to switch to the 16-column -grid. Designers starting on new layouts using v10 should use the 16-column grid. - -Layout and spacing token names were updated in v10 but the values remain the -same. - - - - - - - - - - - -## Design migration strategy - -The fastest approach to v10 migration starts with the front-end developer. -Developers should update the product's front end code to v10 and conduct a -visual review with team designers. The transition should not cause any major -breaks in the UI but there will likely be layout and color issues. Product teams -using v9 components in their code should see a mostly seamless code transition. - -Throughout visual review and iteration process, ask: - -- Are you using type tokens? -- Are you using the color tokens correctly? -- Is the spacing between components correct? -- Do animations in the UI match the new motion standards? -- Does the general layout still work, and does it express the IBM Design - Language accurately and effectively? - -Following this review, work any development and design issues into your team's -planning workflow. diff --git a/src/pages/help/migration-guide/develop.mdx b/src/pages/help/migration-guide/develop.mdx deleted file mode 100644 index ee208b6356d..00000000000 --- a/src/pages/help/migration-guide/develop.mdx +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: Migration guide -description: - This guide includes everything you need to migrate your offering from an older - version of Carbon to v10. -tabs: ['Overview', 'Design', 'Develop'] ---- - - - -The repository structure was overhauled during the transition from v9 to v10. -Carbon code now lives in a monorepo. - - - - - -Repo architecture -Carbon components -Carbon elements - - - -## Repo architecture - -[Carbon-themes](https://github.com/carbon-design-system/carbon-themes) was -deprecated in v10, and the themes package -[@carbon/themes](https://github.com/carbon-design-system/carbon/tree/v10/packages/themes) -now lives in the [Carbon](https://github.com/carbon-design-system/carbon) -monorepo. - - - - - - - - - - - -## Carbon components - -Carbon components were reskinned in v10. The redesign was conducted with maximum -backwards compatibility in mind. Users of v9 should be able to upgrade to v10 -automatically with minimal breakage. - -Detailed technical migration docs for Carbon components are available in the -[carbon-components repo](https://github.com/carbon-design-system/carbon/blob/v10/packages/components/docs/migration/migrate-to-10.x.md). -Here you will find links to component-level migration information, as well as a -list of those components that have been removed or are under development. - -There is also a dedicated -[Sass migration guide](https://github.com/carbon-design-system/carbon/blob/v10/packages/components/src/globals/scss/migrate-to-10.x.md) -that covers changes to global styling. - - - - - - - - - - - - - - - - - - - - - - - - - -## Carbon elements - -All technical migration docs for Carbon elements are available in the `carbon` -monorepo -[docs folder](https://github.com/carbon-design-system/carbon/tree/v10/docs/migration). - - - - - - - - - - - -### Icons - -The `@carbon/icons` package can be now be found in the -[Carbon monorepo](https://github.com/carbon-design-system/carbon/tree/v10/packages/icons). - -The -[Carbon icons demo](https://carbon-elements.netlify.com/icons/examples/preview/) -contains a master table for all Carbon icons, including name, size, preview, -download links, quick links for filing issues, module name, and relative path. - - - - - - - - - - - - - - - - - - - - - - - - - -### Color - -The v10 color token architecture is based on the v9 architecture, with some -minor changes to align with the design language. Carbon v9 product teams will -see automatic, non-breaking color updates when they upgrade to v10. - - - - - - - - - - - - - - - - - - - - - - - - - -### Type - -The type token architecture was redesigned for better clarity and flexibility. -V10 moves from a basic type scale model to a more robust token-based -architecture. - - - - - - - - - - - - - - - - - - -### Layout, grid, and spacing - -Token names changed in v10 but spacing values did not. - - - - - - - - - - - - - - - - - - - - - - - - - -### Motion - -Carbon adheres to IBM Design Language motion standards. Motion updates should be -coordinated with your product's design team. - - - - - - - - - - - - - - - - - diff --git a/src/pages/homepage/images/homepage-design.png b/src/pages/homepage/images/homepage-design.png new file mode 100644 index 00000000000..67b2f3494ac Binary files /dev/null and b/src/pages/homepage/images/homepage-design.png differ diff --git a/src/pages/homepage/images/homepage-develop.png b/src/pages/homepage/images/homepage-develop.png new file mode 100644 index 00000000000..52fba03a784 Binary files /dev/null and b/src/pages/homepage/images/homepage-develop.png differ diff --git a/src/pages/homepage/images/homepage-migration.png b/src/pages/homepage/images/homepage-migration.png new file mode 100644 index 00000000000..618b0842dba Binary files /dev/null and b/src/pages/homepage/images/homepage-migration.png differ diff --git a/src/pages/index.mdx b/src/pages/index.mdx index 86d055e6d21..d8ae0b59cd6 100755 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -2,52 +2,58 @@ import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage'; export default HomepageTemplate; - - - - -![Get started for designers](./homepage/images/light-getting-started-designers-mobile.png) - -![Get started for designers](./homepage/images/light-getting-started-designers-tablet.png) - -![Get started for designers](./homepage/images/light-getting-started-designers.png) - - - - - - - - - -![Get started for developers](./homepage/images/light-getting-started-developers-mobile.png) - -![Get started for designers](./homepage/images/light-getting-started-developers-tablet.png) - -![Get started for developers](./homepage/images/light-getting-started-developers.png) - - - - + + + + + +![Design](/homepage/images/homepage-design.png) + + + + + + +![Develop](/homepage/images/homepage-develop.png) + + + + + + +![Migrate](/homepage/images/homepage-migration.png) + + + + ### Other resources The component libraries give developers a collection of reusable components for building websites and user interfaces. - + - What are the benefits of migrating to v11 as a designer, developer, product - manager or as my product's customers? - - -## As a designer - -- Token names have been updated for easier application. Names are more logical - and easier to apply without always having to refer to a guide. -- Nothing visually has changed in any of the components, and no redesign work is - required. - -## As a developer - -- CSS grid provides easier implementation of layouts, support for sub-grid, and - other features that come along with this new technology. -- CSS custom properties for theming (light mode / dark mode). -- A 90% reduction in compile times for most projects with the update to Sass - architecture. -- Quality of life updates such as: - - Consistent component API across the board. - - Improvements to Sass structure for getting started and productive use - experiences. -- New components: - - Cover a wider variety of use-cases in your product with some of our new - components. - - Easily build our more accessible experiences with our accessibility - component primitives. - -## As a product manager? - -- Developers working with Carbon will see faster compile times: reduced by ~90% - and build times reduced by ~60%. - -## My product’s customers - -- Light/dark mode support. -- Faster load times due to smaller bundle sizes. diff --git a/src/pages/migrating/faq.mdx b/src/pages/migrating/faq.mdx index 90c3bba1ed4..8c32c98119f 100644 --- a/src/pages/migrating/faq.mdx +++ b/src/pages/migrating/faq.mdx @@ -53,7 +53,6 @@ description: - Accessibility primitives to help build more accessible experiences as early as possible to the development process. - Faster load times due to smaller bundle sizes. -- Faster time to develop new features - New components added that can be used to build off of instead of being newly developed - Accessibility primitives to help build more accessible experiences as early as diff --git a/src/pages/migrating/guide/design.mdx b/src/pages/migrating/guide/design.mdx index 702781f1dbd..6a36a60feba 100644 --- a/src/pages/migrating/guide/design.mdx +++ b/src/pages/migrating/guide/design.mdx @@ -81,10 +81,15 @@ See Carbon's usage guidance for more information. + + ![Example of toast notifications stacking.](images/05_toast_context_608.gif) +![Example of toast notifications stacking.](images/05_toast_context_608.png) + + diff --git a/src/pages/migrating/guide/images/05_toast_context_608.png b/src/pages/migrating/guide/images/05_toast_context_608.png new file mode 100644 index 00000000000..6442521b8d3 Binary files /dev/null and b/src/pages/migrating/guide/images/05_toast_context_608.png differ diff --git a/src/pages/patterns/forms-pattern/images/inline-error-message.png b/src/pages/patterns/forms-pattern/images/inline-error-message.png new file mode 100644 index 00000000000..03793a4c12d Binary files /dev/null and b/src/pages/patterns/forms-pattern/images/inline-error-message.png differ diff --git a/src/pages/patterns/forms-pattern/images/modal-error.gif b/src/pages/patterns/forms-pattern/images/modal-error.gif new file mode 100644 index 00000000000..be4e1148ce8 Binary files /dev/null and b/src/pages/patterns/forms-pattern/images/modal-error.gif differ diff --git a/src/pages/patterns/forms-pattern/images/modal-error.png b/src/pages/patterns/forms-pattern/images/modal-error.png new file mode 100644 index 00000000000..eb762462130 Binary files /dev/null and b/src/pages/patterns/forms-pattern/images/modal-error.png differ diff --git a/src/pages/patterns/forms-pattern/images/server-side.png b/src/pages/patterns/forms-pattern/images/server-side.png new file mode 100644 index 00000000000..9ccb8f5c0cc Binary files /dev/null and b/src/pages/patterns/forms-pattern/images/server-side.png differ diff --git a/src/pages/patterns/forms-pattern/images/text-input-error.gif b/src/pages/patterns/forms-pattern/images/text-input-error.gif new file mode 100644 index 00000000000..5ff64f47a1b Binary files /dev/null and b/src/pages/patterns/forms-pattern/images/text-input-error.gif differ diff --git a/src/pages/patterns/forms-pattern/images/text-input-error.png b/src/pages/patterns/forms-pattern/images/text-input-error.png new file mode 100644 index 00000000000..dc98e2323d3 Binary files /dev/null and b/src/pages/patterns/forms-pattern/images/text-input-error.png differ diff --git a/src/pages/patterns/forms-pattern/index.mdx b/src/pages/patterns/forms-pattern/index.mdx index f65f4ba5b3d..dedc601e8a9 100644 --- a/src/pages/patterns/forms-pattern/index.mdx +++ b/src/pages/patterns/forms-pattern/index.mdx @@ -590,9 +590,13 @@ Common user errors include: + -![Example of client-side error message](/images/inline-error-message.gif) +![Example of client-side error message](/images/text-input-error.gif) +![Example of client-side error message](/images/text-input-error.png) + + @@ -607,10 +611,15 @@ messaging wherever possible to help users make the fix. Inline error messages should disappear when the form criteria is met. + + + +![Example of server-side](/images/modal-error.gif) -![Example of server-side](/images/server_side.gif) +![Example of server-side](/images/modal-error.png) + diff --git a/src/pages/patterns/global-header/images/skip-to-main-content.png b/src/pages/patterns/global-header/images/skip-to-main-content.png new file mode 100644 index 00000000000..eccb5ea6fd6 Binary files /dev/null and b/src/pages/patterns/global-header/images/skip-to-main-content.png differ diff --git a/src/pages/patterns/global-header/index.mdx b/src/pages/patterns/global-header/index.mdx index 14b395f53c3..0346fc9b060 100644 --- a/src/pages/patterns/global-header/index.mdx +++ b/src/pages/patterns/global-header/index.mdx @@ -372,15 +372,20 @@ you navigation’s focusable controls. This lets users easily skip the navigatio region and begin interacting with the page’s main content area. - + + + ![hint text](images/skip-to-main-content.gif) +![hint text](images/skip-to-main-content.png) + + + The "Skip to main content link" is the first focusable element on the Carbon website. - diff --git a/src/pages/patterns/loading-pattern/images/inline-loading.gif b/src/pages/patterns/loading-pattern/images/inline-loading.gif new file mode 100644 index 00000000000..db2e94673ba Binary files /dev/null and b/src/pages/patterns/loading-pattern/images/inline-loading.gif differ diff --git a/src/pages/patterns/loading-pattern/images/inline-loading.png b/src/pages/patterns/loading-pattern/images/inline-loading.png index ab64210f6aa..2c8e5ddc388 100644 Binary files a/src/pages/patterns/loading-pattern/images/inline-loading.png and b/src/pages/patterns/loading-pattern/images/inline-loading.png differ diff --git a/src/pages/patterns/loading-pattern/index.mdx b/src/pages/patterns/loading-pattern/index.mdx index 50dc38713e9..0b9a4fa7d7c 100644 --- a/src/pages/patterns/loading-pattern/index.mdx +++ b/src/pages/patterns/loading-pattern/index.mdx @@ -112,11 +112,15 @@ indicates the system is processing the invite request. + -![Example of an inline loading indicator](/images/inline-loading-animated.gif) +![Example of an inline loading indicator](/images/inline-loading.gif) -Example of an inline loading indicator +![Example of an inline loading indicator](/images/inline-loading.png) + + +Example of an inline loading indicator diff --git a/src/pages/patterns/notification-pattern/images/4_toast-736.png b/src/pages/patterns/notification-pattern/images/4_toast-736.png new file mode 100644 index 00000000000..597e48a5785 Binary files /dev/null and b/src/pages/patterns/notification-pattern/images/4_toast-736.png differ diff --git a/src/pages/patterns/notification-pattern/index.mdx b/src/pages/patterns/notification-pattern/index.mdx index a54a9bf4a16..7fcff766313 100644 --- a/src/pages/patterns/notification-pattern/index.mdx +++ b/src/pages/patterns/notification-pattern/index.mdx @@ -245,12 +245,15 @@ small region of the screen so their messages should not exceed three lines. content area. + + ![Toast notification in a product](/images/4_toast_736.gif) -Low-contrast toast notifications +![Toast notification in a product](/images/4_toast-736.png) + diff --git a/src/pages/patterns/overflow-content/images/show-more.png b/src/pages/patterns/overflow-content/images/show-more.png new file mode 100644 index 00000000000..eade6400b6f Binary files /dev/null and b/src/pages/patterns/overflow-content/images/show-more.png differ diff --git a/src/pages/patterns/overflow-content/index.mdx b/src/pages/patterns/overflow-content/index.mdx index 9b089d83b3e..a56ee68ece7 100644 --- a/src/pages/patterns/overflow-content/index.mdx +++ b/src/pages/patterns/overflow-content/index.mdx @@ -184,11 +184,17 @@ cases where performance is a concern. See the [Loading](/components/loading/usage) section for additional details. + + ![Example of a Code Snippet utilizing the “Show more” Button.](images/show-more.gif) -Example of the “Show more” button in context. +![Example of a Code Snippet utilizing the “Show more” Button.](images/show-more.png) + + +Example of the “Show more” button in context. + diff --git a/src/pages/patterns/status-indicator-pattern/index.mdx b/src/pages/patterns/status-indicator-pattern/index.mdx index 8ae2de7e519..6e0cc3c6d43 100644 --- a/src/pages/patterns/status-indicator-pattern/index.mdx +++ b/src/pages/patterns/status-indicator-pattern/index.mdx @@ -592,7 +592,7 @@ limitations. WCAG 2.1 success criterion 2.2.3 (AAA) ## References - Nick Babich, - [4 Ways To Communicate the Visibility of System Status in UI](https://uxplanet.org/4-ways-to-communicate-the-visibility-of-system-status-in-ui-14ff2351c8e8s), + [4 Ways To Communicate the Visibility of System Status in UI](https://uxplanet.org/4-ways-to-communicate-the-visibility-of-system-status-in-ui-14ff2351c8e8), (UX Planet, 2020) - Aurora Harley, [Visibility of System Status (Usability Heuristic #1)](https://www.nngroup.com/articles/visibility-system-status/), diff --git a/src/pages/test/list-section.mdx b/src/pages/test/list-section.mdx deleted file mode 100644 index 31ea504dfed..00000000000 --- a/src/pages/test/list-section.mdx +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Principles -description: - IBM Design principles are carefully considered, uniquely unified, expertly - executed and positively progressive. Learn why to guide is to lead. ---- - - - -IBM Design principles provide clear criteria for the conception, craftsmanship -and creativity our brand demands and our clients deserve. They are for designers -and non-designers alike, anyone authoring or authorizing any form of design on -behalf of IBM. - - - - - - -## Carefully Considered - - - - -**Design is an exercise of decision-making; experience, judgement, -responsibility and timing.** These softer skills are difficult to distribute. -Before we decide to do anything, we must consider its usefulness and utility to -others. Then, we must determine how committed we are to enthusiastically explore -and progressively deliver the full potential of a design. - -- Is it IBM to do? Is it essential? Is it opinionated? -- Do we have the resources we need to fully realize a design’s impact and - intent? -- Have we removed everything gratuitous? -- Does an execution respect the time being asked for to experience it? - - - - - - - -## Uniquely Unified - - - - -**In order to guide, continuity and creativity must co-exist in design.** Both -of these qualities must be recognizable. Successful systems require both fixed -and fluid elements of expression. The elements that bind all experiences are -essential to providing a unified look, feel and tone. The innovative ways in -which we use these elements delivers distinction and uniqueness. - -- Are we delivering recognizable, repeatable, reusable solutions? -- Does solving one problem shorten the distance to another solution? -- If you covered up our logo or name, would you identify an execution as being - designed by IBM? -- Does one experience family well, reinforce and support another, side-by-side? - - - - - - - -## Expertly Executed - - - - -**Everything communicates, both the things we do and the things we don’t do.** -The care and craft we put into every experience is equal to any confidence or -consideration we should expect in return. Every execution of IBM should exude -expertise. This extends to the partners we choose to work with. We embrace the -best of the best. And we never limit the impact of our ideas to our own -abilities to deliver completely our design intent. - -- Can an experience be improved? If so, keep exploring. -- Are we working with the right talent, team or timeframe? -- Are we doing more with less? -- Have we left any detail overlooked? -- Can you feel the care and craft put into the experience? - - - - - - - -## Positively Progressive - - - - -**To guide is to lead.** We are a Company with a history of firsts, including -‘good design’. We are forward thinkers, futurists. We believe in and are -dedicated to advancing the world around us, positively, progressively. Every -design should present these qualities. - -- Think ahead. Is it additive or advancing? -- Does it communicate confidence and positivity? -- What is ingenious or innovative about the experience? -- Have we removed all friction or obstacles to understanding or usability? -- Does it render the previous permanently replaced? -- Does it give more than it takes? - - - diff --git a/src/styles/_overrides.scss b/src/styles/_overrides.scss index 5e4c05d2db5..efca5725f95 100644 --- a/src/styles/_overrides.scss +++ b/src/styles/_overrides.scss @@ -2,12 +2,6 @@ margin-top: 3rem; } -[class^='FourOhFour-module--container'], -[class^='FourOhFour-module--link'], -[class^='FourOhFour-module--link']:before { - color: $text-inverse !important; -} - // allow tooltips to be visible outside edge of table // table needs overflow at mobile to scroll .page-table__container { diff --git a/yarn.lock b/yarn.lock index 43b61794187..90224d06180 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3043,41 +3043,91 @@ __metadata: languageName: node linkType: hard -"@carbon/colors@npm:^11.20.0": - version: 11.20.1 - resolution: "@carbon/colors@npm:11.20.1" - checksum: 7897f1808d914e3e78f2b987ce50ee74c2fd963bb64ceec3542a7e11fe9a8c6eec96336884f3a2aaad293a6cb59a85bb4e6bf106e513ab0c53563893c50b04eb +"@carbon/colors@npm:^11.21.0": + version: 11.21.0 + resolution: "@carbon/colors@npm:11.21.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.2.1" + checksum: a623c03e2d76f8d75d5d503af1f8c6bddc5f8f2604204c94d6544cc44d12e208c3284ec2a54b45a4da494b3e0eeb2c4626027bbd583cb1cdf30fa276755abb08 languageName: node linkType: hard -"@carbon/elements@npm:^11.40.0": - version: 11.40.0 - resolution: "@carbon/elements@npm:11.40.0" +"@carbon/colors@npm:^11.23.0, @carbon/colors@npm:^11.23.1": + version: 11.23.1 + resolution: "@carbon/colors@npm:11.23.1" dependencies: - "@carbon/colors": "npm:^11.20.0" - "@carbon/grid": "npm:^11.21.0" - "@carbon/icons": "npm:^11.36.0" - "@carbon/layout": "npm:^11.20.0" - "@carbon/motion": "npm:^11.16.0" - "@carbon/themes": "npm:^11.32.0" - "@carbon/type": "npm:^11.25.0" - checksum: adbe1e39cfa7625be4a10dc13010f2326a5d00b0c82e11fef67e4bc4769d1b72c2b13c8f5f7e88665bf87c6c2bb8bcc6e4508497862eb39216167f284a6a4a00 + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 96b6d9b803a1c38491e4be448267e38b901a1bcc5975f26bc7a64b84dabc3e2ece80462882b328f0dff3aad0df8704a4459936f87f7202a206c24d30c6b760fa languageName: node linkType: hard -"@carbon/feature-flags@npm:^0.16.0": - version: 0.16.0 - resolution: "@carbon/feature-flags@npm:0.16.0" - checksum: 5e20d3625a14f5b4ae262428f2a914644ab29d1f2b3aa1fe16520e6bf1e2a618be15af127c3635093381073f2acdc732b4acb6f9e8f811e25e88e726f79f26af +"@carbon/elements@npm:^11.44.0": + version: 11.44.0 + resolution: "@carbon/elements@npm:11.44.0" + dependencies: + "@carbon/colors": "npm:^11.21.0" + "@carbon/grid": "npm:^11.22.0" + "@carbon/icons": "npm:^11.40.0" + "@carbon/layout": "npm:^11.21.0" + "@carbon/motion": "npm:^11.17.0" + "@carbon/themes": "npm:^11.34.0" + "@carbon/type": "npm:^11.26.0" + "@ibm/telemetry-js": "npm:^1.2.1" + checksum: 19a3885ab984ef443f7e561ed4577324a04435902edea853f8d933adf6390dc5b01dfdb50e88043cd873cfd5416d9bd563c3ba53609e89a33e89ad8ffb3b6f5a + languageName: node + linkType: hard + +"@carbon/elements@npm:^11.49.0": + version: 11.49.0 + resolution: "@carbon/elements@npm:11.49.0" + dependencies: + "@carbon/colors": "npm:^11.23.0" + "@carbon/grid": "npm:^11.24.0" + "@carbon/icons": "npm:^11.45.0" + "@carbon/layout": "npm:^11.23.0" + "@carbon/motion": "npm:^11.19.0" + "@carbon/themes": "npm:^11.37.0" + "@carbon/type": "npm:^11.28.0" + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 8673a348190771adb91b7576d67dd71daa4e84d9fbf8aa81a65d9999d159649ff504c3fb890ad744cc48e7f8fc1b087557d31627f6b470a7b880456b7d3644e9 languageName: node linkType: hard -"@carbon/grid@npm:^11.21.0, @carbon/grid@npm:^11.21.1": - version: 11.21.1 - resolution: "@carbon/grid@npm:11.21.1" +"@carbon/feature-flags@npm:^0.19.0": + version: 0.19.0 + resolution: "@carbon/feature-flags@npm:0.19.0" dependencies: - "@carbon/layout": "npm:^11.20.1" - checksum: 17e5f14bc94319c327028210d0b5e9236b47a18306571fcc8f47295b49fae4a49311769da432440a5e9956ec6ea1154c6e2d4d6f2b91ecb71228d7db5038fcf2 + "@ibm/telemetry-js": "npm:^1.2.1" + checksum: d88d8e858881f787b0e45da1b72a8dc57011267778d8ea7ceac43f6a2a9e5c51fb73d9205723bcce0cfe504698d7e9f2b3469443f34075eac6992e427af86715 + languageName: node + linkType: hard + +"@carbon/feature-flags@npm:^0.20.0": + version: 0.20.0 + resolution: "@carbon/feature-flags@npm:0.20.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 986d30c32d39827c0ae0da2c33674d83438ce3e9e85724b3a14db1b2fc19a2bb8266763931d37bcfb9ff718d3eee7cb945dd85922b6be45bf190f0f79fcd739a + languageName: node + linkType: hard + +"@carbon/grid@npm:^11.22.0": + version: 11.22.0 + resolution: "@carbon/grid@npm:11.22.0" + dependencies: + "@carbon/layout": "npm:^11.21.0" + "@ibm/telemetry-js": "npm:^1.2.1" + checksum: d1c0da9b9af67d57f55eb328f34213693ad7cb35af735c2ea1703c7eebfee9a9cc8d82f55b6a1b7bc118a0995ffbd34970d4b0d04528eb5d185913c65be1a60a + languageName: node + linkType: hard + +"@carbon/grid@npm:^11.24.0, @carbon/grid@npm:^11.24.1": + version: 11.24.1 + resolution: "@carbon/grid@npm:11.24.1" + dependencies: + "@carbon/layout": "npm:^11.23.1" + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 14bad9a94df8a0d4e06cb08706e58784d2c06593d9c256ea242559b6514e52438c451db751b68489b7d33529469fd2da539adf4f7ed0f4721050ca01401f557a languageName: node linkType: hard @@ -3088,10 +3138,21 @@ __metadata: languageName: node linkType: hard -"@carbon/icon-helpers@npm:^10.46.0": - version: 10.46.0 - resolution: "@carbon/icon-helpers@npm:10.46.0" - checksum: b6df75295471992fd5141971940af6859d551465dfe8f4048badf494bded2b6ae2793d89705a2b8d2512ae4e5db627741096fb3608aafc216a73ec977a11a40d +"@carbon/icon-helpers@npm:^10.47.0": + version: 10.47.0 + resolution: "@carbon/icon-helpers@npm:10.47.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.2.1" + checksum: 4ff57b2c506c2e6af5f95fa842539e0cb61f663ec9a72687bfd4e2c378b3cda6b4370fd437f3250e6dac37be08b4abbc7cb7b753449b52f9d01b94751a44ccdd + languageName: node + linkType: hard + +"@carbon/icon-helpers@npm:^10.49.0, @carbon/icon-helpers@npm:^10.49.1": + version: 10.49.1 + resolution: "@carbon/icon-helpers@npm:10.49.1" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 17a4d6927e4f23596856d24301db336a507f2be89021afeb63623937ff99ed2bb13e8e838ea61ccb29ff69f96c5f68ba7cc42b598a081d3d180760d29608a360 languageName: node linkType: hard @@ -3108,74 +3169,136 @@ __metadata: languageName: node linkType: hard -"@carbon/icons-react@npm:^11.36.0": - version: 11.36.0 - resolution: "@carbon/icons-react@npm:11.36.0" +"@carbon/icons-react@npm:^11.40.0": + version: 11.40.0 + resolution: "@carbon/icons-react@npm:11.40.0" dependencies: - "@carbon/icon-helpers": "npm:^10.46.0" - "@carbon/telemetry": "npm:0.1.0" + "@carbon/icon-helpers": "npm:^10.47.0" + "@ibm/telemetry-js": "npm:^1.2.1" prop-types: "npm:^15.7.2" peerDependencies: react: ">=16" - checksum: 2d2a6f03697e00a9ba84a418944870396d25b7ff0c89a2c8d1423443d8a64da9ab76725af253217706e665c49fe8542b0d3bb02a9a375fba357a5c4a4c086510 + checksum: 410518b7fba89f785a80843c2ec5640485ccb48aeffdd32b87a27c3b87d5d857c64c75dc4a86920386c7f159ad9e2dfe328ae8e6a8c7e4d4db88130ca018ab31 languageName: node linkType: hard -"@carbon/icons@npm:^11.36.0": - version: 11.36.0 - resolution: "@carbon/icons@npm:11.36.0" - checksum: 039d7cb44fd7025ef8d6f1dec709a8158a05c39f1b408910e23795734862715c5597fe0ae37b4db878edfb59aae5891cba40b084cdbb2d82faa5496100bb42dc +"@carbon/icons-react@npm:^11.45.0": + version: 11.45.0 + resolution: "@carbon/icons-react@npm:11.45.0" + dependencies: + "@carbon/icon-helpers": "npm:^10.49.0" + "@ibm/telemetry-js": "npm:^1.5.0" + prop-types: "npm:^15.7.2" + peerDependencies: + react: ">=16" + checksum: 0c5f3d673a4db933e1bacdb72aca7f2a761eec0b5e2bc82937679068eb2740e341d8a78aeacd88b18d9bef82aaac07b0191779faea2bb55cc4082935ffb24762 languageName: node linkType: hard -"@carbon/layout@npm:^11.20.0, @carbon/layout@npm:^11.20.1": - version: 11.20.1 - resolution: "@carbon/layout@npm:11.20.1" - checksum: e8ce29f2995c67c79a26ac65c73d1e2fadf2fb906fad64b55d8d0cc1c21aab6103deaf08519cbd972956fb289d048c73e424f101994745f3965fc31f53598752 +"@carbon/icons@npm:^11.40.0": + version: 11.40.0 + resolution: "@carbon/icons@npm:11.40.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.2.1" + checksum: 2a270499c316506af20742eb915b9f063d4679ea77af97003c8e1de0fb955da244bb65d5f5f128e5b478582e3f619321e331319075c07a4597ea4d60ab1c8dd0 languageName: node linkType: hard -"@carbon/motion@npm:^11.16.0": - version: 11.16.1 - resolution: "@carbon/motion@npm:11.16.1" - checksum: fd67aba9432def7b69a42b53414d51362591b01be2d1c79da9eff6608957ae109a6fa17355bb96dfe34d860328047b2e4cefa2b6814e8f735d9218cceefa9bce +"@carbon/icons@npm:^11.45.0": + version: 11.45.0 + resolution: "@carbon/icons@npm:11.45.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: fc78a319b2a1c780ff2efa93b2c8cd0ceaba68d875d61fc41c2024d9fe5a58e34fa1b7972fd8dbf3824496bfdf5159ebf6c5f6cb651713f3d05361a34bf6e3c8 languageName: node linkType: hard -"@carbon/pictograms-react@npm:^11.57.0": - version: 11.57.0 - resolution: "@carbon/pictograms-react@npm:11.57.0" +"@carbon/layout@npm:^11.21.0": + version: 11.21.0 + resolution: "@carbon/layout@npm:11.21.0" dependencies: - "@carbon/icon-helpers": "npm:^10.46.0" - "@carbon/telemetry": "npm:0.1.0" + "@ibm/telemetry-js": "npm:^1.2.1" + checksum: c00c013322940c812c4edafad5ad0876a93edd216be791f3e222263d252ccec45abd6ee5dab8a9e3ea7660019bc7ce6a2955ff39e16b85996128fb55c52a4ab6 + languageName: node + linkType: hard + +"@carbon/layout@npm:^11.23.0, @carbon/layout@npm:^11.23.1": + version: 11.23.1 + resolution: "@carbon/layout@npm:11.23.1" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 463ebc4eb0b5f85c68ea3640d71cc36cdfa7941d3cdc9dc6cf6ac3a558ae8904e12d5ed628a7967f931f3bbf167a72ded6afe6dfeebe5fedcc139cd90811a4e8 + languageName: node + linkType: hard + +"@carbon/motion@npm:^11.17.0": + version: 11.17.0 + resolution: "@carbon/motion@npm:11.17.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.2.1" + checksum: 7e159dad977d7846efcb8411d415d354255098feb945171ac5108d122120608c66d42771f3bb127d2b2ff21e0656b947ede2b77fac3d3d93e3152c081183e115 + languageName: node + linkType: hard + +"@carbon/motion@npm:^11.19.0": + version: 11.19.1 + resolution: "@carbon/motion@npm:11.19.1" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: f00ffae2f5076089ecc8de3e300b8b57bab7998cc82608d8a4ddaeafff35cab110bbf003a1c3e87b2e782af0af329b43b03a13c02192ce44443117eae1eda0be + languageName: node + linkType: hard + +"@carbon/pictograms-react@npm:^11.61.0": + version: 11.61.0 + resolution: "@carbon/pictograms-react@npm:11.61.0" + dependencies: + "@carbon/icon-helpers": "npm:^10.47.0" + "@ibm/telemetry-js": "npm:^1.2.1" prop-types: "npm:^15.7.2" peerDependencies: react: ">=16" - checksum: 20abe9a823bd1f9aadad36f2f4c1a00f4d8b5f3618592e3ab16098e4bea6a2be7bfa08aabc6da7908330097f4cc627c8e5c4e8945f8e3dedd0d723f36a156a53 + checksum: 44cacb27198f545ac38706f57bb33e573c7823df0225ec5423b7f76bf71415357615c0e52c130632fb01db8a4aecf99db293e03609253f049c7573f78cf75372 languageName: node linkType: hard -"@carbon/pictograms@npm:^12.31.0": - version: 12.31.0 - resolution: "@carbon/pictograms@npm:12.31.0" - checksum: 8a253c7394d4086e44e9d0ec0b5754be3fe4e7bd7eb022b7488e0799c4e9b9e2a96275350f5b38470bbd3612ae717414c5cc5a5e093062af6c1eed31fdf62821 +"@carbon/pictograms-react@npm:^11.63.1": + version: 11.63.1 + resolution: "@carbon/pictograms-react@npm:11.63.1" + dependencies: + "@carbon/icon-helpers": "npm:^10.49.1" + "@ibm/telemetry-js": "npm:^1.5.0" + prop-types: "npm:^15.7.2" + peerDependencies: + react: ">=16" + checksum: c38630c77c535191d0b3bb5bbcd2974c1b644c98d0d917cd25018019af599f24838b481fb872c1eb750d0d12def3413cf2850ed6fdf4801a30958d3eed7ed224 + languageName: node + linkType: hard + +"@carbon/pictograms@npm:^12.37.1": + version: 12.37.1 + resolution: "@carbon/pictograms@npm:12.37.1" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 9e8829a3d92d63de78e1a4cbfe0db3e0073eb6c4b6e9be8251f1314195dbd0e319d1dddd7fa1aa348014fc49004d7d28b34cc203d780638651ce9b267e37b21f languageName: node linkType: hard -"@carbon/react@npm:^1.51.0": - version: 1.51.0 - resolution: "@carbon/react@npm:1.51.0" +"@carbon/react@npm:^1.56.0": + version: 1.56.0 + resolution: "@carbon/react@npm:1.56.0" dependencies: "@babel/runtime": "npm:^7.18.3" - "@carbon/feature-flags": "npm:^0.16.0" - "@carbon/icons-react": "npm:^11.36.0" - "@carbon/layout": "npm:^11.20.0" - "@carbon/styles": "npm:^1.51.0" - "@ibm/telemetry-js": "npm:^1.2.0" + "@carbon/feature-flags": "npm:^0.19.0" + "@carbon/icons-react": "npm:^11.40.0" + "@carbon/layout": "npm:^11.21.0" + "@carbon/styles": "npm:^1.56.0" + "@floating-ui/react": "npm:^0.26.0" + "@ibm/telemetry-js": "npm:^1.4.0" classnames: "npm:2.5.1" copy-to-clipboard: "npm:^3.3.1" - downshift: "npm:8.3.1" - flatpickr: "npm:4.6.9" + downshift: "npm:8.5.0" + flatpickr: "npm:4.6.13" invariant: "npm:^2.2.3" lodash.debounce: "npm:^4.0.8" lodash.findlast: "npm:^4.5.0" @@ -3184,6 +3307,7 @@ __metadata: lodash.throttle: "npm:^4.1.1" prop-types: "npm:^15.7.2" react-is: "npm:^18.2.0" + tabbable: "npm:^6.2.0" use-resize-observer: "npm:^6.0.0" wicg-inert: "npm:^3.1.1" window-or-global: "npm:^1.0.1" @@ -3191,28 +3315,85 @@ __metadata: react: ^16.8.6 || ^17.0.1 || ^18.2.0 react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0 sass: ^1.33.0 - checksum: 3e4f195f08e270774c60795f3ade3eb151448a7a8d0b2659d39f2914d5f75e230d0bcb32ec4c46104fa7969201251abf8faed3ae4eb84f9353680b8fa499a219 + checksum: 9f70cb94082510a78435f97702898abe9cbad25b22bd8d7338c0dc213b035ab56c4fd35442d878f10f7f8371479dff1eb4272b9bfa109ee635d094f7d9dda87c languageName: node linkType: hard -"@carbon/styles@npm:^1.51.0": - version: 1.51.0 - resolution: "@carbon/styles@npm:1.51.0" +"@carbon/react@npm:^1.61.0": + version: 1.61.0 + resolution: "@carbon/react@npm:1.61.0" dependencies: - "@carbon/colors": "npm:^11.20.0" - "@carbon/feature-flags": "npm:^0.16.0" - "@carbon/grid": "npm:^11.21.0" - "@carbon/layout": "npm:^11.20.0" - "@carbon/motion": "npm:^11.16.0" - "@carbon/themes": "npm:^11.32.0" - "@carbon/type": "npm:^11.25.0" + "@babel/runtime": "npm:^7.18.3" + "@carbon/feature-flags": "npm:^0.20.0" + "@carbon/icons-react": "npm:^11.45.0" + "@carbon/layout": "npm:^11.23.0" + "@carbon/styles": "npm:^1.61.0" + "@floating-ui/react": "npm:^0.26.0" + "@ibm/telemetry-js": "npm:^1.5.0" + classnames: "npm:2.5.1" + copy-to-clipboard: "npm:^3.3.1" + downshift: "npm:8.5.0" + flatpickr: "npm:4.6.13" + invariant: "npm:^2.2.3" + lodash.debounce: "npm:^4.0.8" + lodash.findlast: "npm:^4.5.0" + lodash.isequal: "npm:^4.5.0" + lodash.omit: "npm:^4.5.0" + lodash.throttle: "npm:^4.1.1" + prop-types: "npm:^15.7.2" + react-is: "npm:^18.2.0" + tabbable: "npm:^6.2.0" + use-resize-observer: "npm:^6.0.0" + window-or-global: "npm:^1.0.1" + peerDependencies: + react: ^16.8.6 || ^17.0.1 || ^18.2.0 + react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0 + sass: ^1.33.0 + checksum: 3a8ad11c47664beb0f3a7a7acc09bef933eb9fa5cd35cfd5152dcd2643f3378008899d4c2ad5dc8d5169f88cafa2d12d7abb8161578f46d75c09fcf5881763e3 + languageName: node + linkType: hard + +"@carbon/styles@npm:^1.56.0": + version: 1.56.0 + resolution: "@carbon/styles@npm:1.56.0" + dependencies: + "@carbon/colors": "npm:^11.21.0" + "@carbon/feature-flags": "npm:^0.19.0" + "@carbon/grid": "npm:^11.22.0" + "@carbon/layout": "npm:^11.21.0" + "@carbon/motion": "npm:^11.17.0" + "@carbon/themes": "npm:^11.34.0" + "@carbon/type": "npm:^11.26.0" "@ibm/plex": "npm:6.0.0-next.6" + "@ibm/telemetry-js": "npm:^1.2.1" peerDependencies: sass: ^1.33.0 peerDependenciesMeta: sass: optional: true - checksum: db43fe035970090714af170ec32964a00d7de16484909a10d08d74b2fdfa8587908ce153b7e9d94e66df2bacfb8ebf1f152f83e463a795e16756d7dd885451c1 + checksum: 40c7d929b2aaacd5970eff43ab7abcf736cf3f8d97134681ae421565654b8841da2e10b8cc6a311cbe7a826bf5c5e9406d3c0c8b3441e4102be24bfaeec8f2d7 + languageName: node + linkType: hard + +"@carbon/styles@npm:^1.61.0": + version: 1.61.0 + resolution: "@carbon/styles@npm:1.61.0" + dependencies: + "@carbon/colors": "npm:^11.23.0" + "@carbon/feature-flags": "npm:^0.20.0" + "@carbon/grid": "npm:^11.24.0" + "@carbon/layout": "npm:^11.23.0" + "@carbon/motion": "npm:^11.19.0" + "@carbon/themes": "npm:^11.37.0" + "@carbon/type": "npm:^11.28.0" + "@ibm/plex": "npm:6.0.0-next.6" + "@ibm/telemetry-js": "npm:^1.5.0" + peerDependencies: + sass: ^1.33.0 + peerDependenciesMeta: + sass: + optional: true + checksum: 2088c7cf76afe8a5827a59e2d4322773c560bd49424de2373e5019986529dfb7747a2b6bc9390ee0180ae468a12cd3f979001c7946c2571abdb03b1ef6f2fbe8 languageName: node linkType: hard @@ -3245,25 +3426,51 @@ __metadata: languageName: node linkType: hard -"@carbon/themes@npm:^11.32.0": - version: 11.32.0 - resolution: "@carbon/themes@npm:11.32.0" +"@carbon/themes@npm:^11.34.0": + version: 11.34.0 + resolution: "@carbon/themes@npm:11.34.0" dependencies: - "@carbon/colors": "npm:^11.20.0" - "@carbon/layout": "npm:^11.20.0" - "@carbon/type": "npm:^11.25.0" + "@carbon/colors": "npm:^11.21.0" + "@carbon/layout": "npm:^11.21.0" + "@carbon/type": "npm:^11.26.0" + "@ibm/telemetry-js": "npm:^1.2.1" color: "npm:^4.0.0" - checksum: 4602e0e94e5137f0db3ebe439cea9daf3d2b2aa7bf874397112aa8ee5a46566fe9265bbddf116c631f85067486e651ce1118b4e5caa1a090e90cbb9b28a37d90 + checksum: 11eb301af303c467877ee0967826a8a9594d8b4f0c8764b418be4ac7b3dc1289f60059cf87bfecb7989164ca9a41a6be17303cead05676e2d51817a8b974ba5d + languageName: node + linkType: hard + +"@carbon/themes@npm:^11.37.0": + version: 11.37.1 + resolution: "@carbon/themes@npm:11.37.1" + dependencies: + "@carbon/colors": "npm:^11.23.1" + "@carbon/layout": "npm:^11.23.1" + "@carbon/type": "npm:^11.28.1" + "@ibm/telemetry-js": "npm:^1.5.0" + color: "npm:^4.0.0" + checksum: 83dd8813c533880afffd69996bc31bb18051beff4effaf57f39d1e288b7c3fc7224f6d291865e1653c213e43c222f7d0772e85a4980db8ead1cdb45fdf53043a + languageName: node + linkType: hard + +"@carbon/type@npm:^11.26.0": + version: 11.26.0 + resolution: "@carbon/type@npm:11.26.0" + dependencies: + "@carbon/grid": "npm:^11.22.0" + "@carbon/layout": "npm:^11.21.0" + "@ibm/telemetry-js": "npm:^1.2.1" + checksum: 96b50361251229dff750cbfb3c13bb008f7a58617a3e157d05b57abba209ab2b1af59ee9c3fe73882b86546fcac2774efceda8d521dc322defd1123fb0539045 languageName: node linkType: hard -"@carbon/type@npm:^11.25.0": - version: 11.25.1 - resolution: "@carbon/type@npm:11.25.1" +"@carbon/type@npm:^11.28.0, @carbon/type@npm:^11.28.1": + version: 11.28.1 + resolution: "@carbon/type@npm:11.28.1" dependencies: - "@carbon/grid": "npm:^11.21.1" - "@carbon/layout": "npm:^11.20.1" - checksum: 759d36dd4d3b28723a669d0c7d52c84df6e2b47e9f55a3d0d001dca2911073de41618bb1a5e7b2f509878e4259e7dfe9ae346edf0cbf9f9879adba9af9543e91 + "@carbon/grid": "npm:^11.24.1" + "@carbon/layout": "npm:^11.23.1" + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: b5446b26b99cb12a646145475dff42a175ad61dcd3a2bca7daa99ef3024ef48edc67752eb96c7d84a2ae33e1bf15ebd4b04512e61cdd70e2302ded0c2f08d19b languageName: node linkType: hard @@ -3362,6 +3569,58 @@ __metadata: languageName: node linkType: hard +"@floating-ui/core@npm:^1.0.0": + version: 1.6.0 + resolution: "@floating-ui/core@npm:1.6.0" + dependencies: + "@floating-ui/utils": "npm:^0.2.1" + checksum: 667a68036f7dd5ed19442c7792a6002ca02d1799221c4396691bbe0b6008b48f6ccad581225e81fa266bb91232f6c66838a5f825f554217e1ec886178b93381b + languageName: node + linkType: hard + +"@floating-ui/dom@npm:^1.6.1": + version: 1.6.3 + resolution: "@floating-ui/dom@npm:1.6.3" + dependencies: + "@floating-ui/core": "npm:^1.0.0" + "@floating-ui/utils": "npm:^0.2.0" + checksum: d6cac10877918ce5a8d1a24b21738d2eb130a0191043d7c0dd43bccac507844d3b4dc5d4107d3891d82f6007945ca8fb4207a1252506e91c37e211f0f73cf77e + languageName: node + linkType: hard + +"@floating-ui/react-dom@npm:^2.0.0": + version: 2.0.8 + resolution: "@floating-ui/react-dom@npm:2.0.8" + dependencies: + "@floating-ui/dom": "npm:^1.6.1" + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + checksum: 4d87451e2dcc54b4753a0d81181036e47821cfd0d4c23f7e9c31590c7c91fb15fb0a5a458969a5ddabd61601eca5875ebd4e40bff37cee31f373b8f1ccc64518 + languageName: node + linkType: hard + +"@floating-ui/react@npm:^0.26.0": + version: 0.26.12 + resolution: "@floating-ui/react@npm:0.26.12" + dependencies: + "@floating-ui/react-dom": "npm:^2.0.0" + "@floating-ui/utils": "npm:^0.2.0" + tabbable: "npm:^6.0.0" + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + checksum: f47e133b9fe5dd404886c4e69e760dc0d6ab30774de82b5547cba83d0cd6e7a3bb4c221587e115a3c0c466ac344578c3db78b5808b5acd70ae5d43d587de9fd1 + languageName: node + linkType: hard + +"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.1": + version: 0.2.1 + resolution: "@floating-ui/utils@npm:0.2.1" + checksum: ee77756712cf5b000c6bacf11992ffb364f3ea2d0d51cc45197a7e646a17aeb86ea4b192c0b42f3fbb29487aee918a565e84f710b8c3645827767f406a6b4cc9 + languageName: node + linkType: hard + "@gatsbyjs/parcel-namer-relative-to-cwd@npm:^1.10.0": version: 1.10.0 resolution: "@gatsbyjs/parcel-namer-relative-to-cwd@npm:1.10.0" @@ -3748,12 +4007,21 @@ __metadata: languageName: node linkType: hard -"@ibm/telemetry-js@npm:^1.2.0": - version: 1.2.1 - resolution: "@ibm/telemetry-js@npm:1.2.1" +"@ibm/telemetry-js@npm:^1.2.1, @ibm/telemetry-js@npm:^1.4.0": + version: 1.5.0 + resolution: "@ibm/telemetry-js@npm:1.5.0" + bin: + ibmtelemetry: dist/collect.js + checksum: 40c7ad6e34fb5f6756bfd086be08f6f038dcf7a56000689378f1201749811556300a2a4882eecda6178dcbf13f6fcc9045cd4db23d347aaafe7a15c36eaa358c + languageName: node + linkType: hard + +"@ibm/telemetry-js@npm:^1.5.0": + version: 1.5.2 + resolution: "@ibm/telemetry-js@npm:1.5.2" bin: ibmtelemetry: dist/collect.js - checksum: 15d7e8ff82042c96f3ea6599056e18ec7f38eb06cf16dced77c1222d9aa9a494a3b7ef457b9dc6770aa388b52d4c47a78d14972bb4e2a0895886a201f3e946fe + checksum: 176b17532222b143e7a83a9aea08ce71a1c5a26e047f2a4311db44df8d06af9929b31cfa806d8aa9df5d709d68390b9e099625625723e5a3416eebdee95e6ebe languageName: node linkType: hard @@ -7385,11 +7653,11 @@ __metadata: linkType: hard "braces@npm:^3.0.2, braces@npm:~3.0.2": - version: 3.0.2 - resolution: "braces@npm:3.0.2" + version: 3.0.3 + resolution: "braces@npm:3.0.3" dependencies: - fill-range: "npm:^7.0.1" - checksum: 321b4d675791479293264019156ca322163f02dc06e3c4cab33bb15cd43d80b51efef69b0930cfde3acd63d126ebca24cd0544fa6f261e093a0fb41ab9dda381 + fill-range: "npm:^7.1.1" + checksum: 7c6dfd30c338d2997ba77500539227b9d1f85e388a5f43220865201e407e076783d0881f2d297b9f80951b4c957fcf0b51c1d2d24227631643c3f7c284b0aa04 languageName: node linkType: hard @@ -7773,12 +8041,12 @@ __metadata: dependencies: "@babel/core": "npm:^7.15.8" "@carbon/charts-react": "npm:0.55.0" - "@carbon/elements": "npm:^11.40.0" - "@carbon/icons": "npm:^11.36.0" - "@carbon/icons-react": "npm:^11.36.0" - "@carbon/pictograms": "npm:^12.31.0" - "@carbon/pictograms-react": "npm:^11.57.0" - "@carbon/react": "npm:^1.51.0" + "@carbon/elements": "npm:^11.49.0" + "@carbon/icons": "npm:^11.45.0" + "@carbon/icons-react": "npm:^11.45.0" + "@carbon/pictograms": "npm:^12.37.1" + "@carbon/pictograms-react": "npm:^11.63.1" + "@carbon/react": "npm:^1.61.0" "@loadable/babel-plugin": "npm:^5.12.0" "@loadable/component": "npm:^5.15.2" "@loadable/webpack-plugin": "npm:^5.15.2" @@ -7811,7 +8079,7 @@ __metadata: gatsby-plugin-sitemap: "npm:^5.9.0" gatsby-remark-images: "npm:^6.9.0" gatsby-source-filesystem: "npm:^4.9.0" - gatsby-theme-carbon: "npm:^3.4.13" + gatsby-theme-carbon: "npm:^3.4.19" gatsby-transformer-sharp: "npm:^4.9.0" html-loader: "npm:^3.1.0" husky: "npm:^4.2.3" @@ -10125,9 +10393,9 @@ __metadata: languageName: node linkType: hard -"downshift@npm:8.3.1": - version: 8.3.1 - resolution: "downshift@npm:8.3.1" +"downshift@npm:8.5.0": + version: 8.5.0 + resolution: "downshift@npm:8.5.0" dependencies: "@babel/runtime": "npm:^7.22.15" compute-scroll-into-view: "npm:^3.0.3" @@ -10136,7 +10404,7 @@ __metadata: tslib: "npm:^2.6.2" peerDependencies: react: ">=16.12.0" - checksum: 5ffb56bf17e2101115ccf94136815e80ce907df9efbed89fd93400769c557c7cdb6b6a751f6454ab9862b37cd8f5effd0326d08fb330701ec4355df83c695210 + checksum: f572affe0884d6fb6523352fcb230db42875b557d972a74d15ef8a1b72702733bb5f329911d2810f9880e4b8ba1c6b6e10eb4bf6d8160ab4975c1e65c42c6da2 languageName: node linkType: hard @@ -11455,9 +11723,9 @@ __metadata: linkType: hard "fast-loops@npm:^1.1.3": - version: 1.1.3 - resolution: "fast-loops@npm:1.1.3" - checksum: ba71c001704c44a617053ed34b1a8c0d2ed9723022eb7b93c98299d9862f93213609b32c9daec7d606625ab318769d11da8bb06e9ddd9c28e3bda1249fb6e36d + version: 1.1.4 + resolution: "fast-loops@npm:1.1.4" + checksum: 25e8a608fccc0d84c1d037efa715ab1e6f21576e1070931b3ed966657204c47ed2b1cba16e5c46ddde2d62aba0b4100d86616d995318b7367fa0a902a78ed885 languageName: node linkType: hard @@ -11625,12 +11893,12 @@ __metadata: languageName: node linkType: hard -"fill-range@npm:^7.0.1": - version: 7.0.1 - resolution: "fill-range@npm:7.0.1" +"fill-range@npm:^7.1.1": + version: 7.1.1 + resolution: "fill-range@npm:7.1.1" dependencies: to-regex-range: "npm:^5.0.1" - checksum: 7cdad7d426ffbaadf45aeb5d15ec675bbd77f7597ad5399e3d2766987ed20bda24d5fac64b3ee79d93276f5865608bb22344a26b9b1ae6c4d00bd94bf611623f + checksum: b75b691bbe065472f38824f694c2f7449d7f5004aa950426a2c28f0306c60db9b880c0b0e4ed819997ffb882d1da02cfcfc819bddc94d71627f5269682edf018 languageName: node linkType: hard @@ -11741,10 +12009,10 @@ __metadata: languageName: node linkType: hard -"flatpickr@npm:4.6.9": - version: 4.6.9 - resolution: "flatpickr@npm:4.6.9" - checksum: 9301fbd14ebfe550b532119d2bf1f208bb057faf50ddc1cef8019371061f9d4d86492673ea4df60bc1b3d755494a7d08e63903b514a3fcf2215356c8676816d3 +"flatpickr@npm:4.6.13": + version: 4.6.13 + resolution: "flatpickr@npm:4.6.13" + checksum: 0e027e72a2ce1716840a8c0bf9094f48d2665dc3f3024bf9604810c5bd7dd94aa830b133c5b5cfc0c330fc88939f33b54c8714515957f9d194c3a3bb7f75a1e2 languageName: node linkType: hard @@ -12735,16 +13003,16 @@ __metadata: languageName: node linkType: hard -"gatsby-theme-carbon@npm:^3.4.13": - version: 3.4.13 - resolution: "gatsby-theme-carbon@npm:3.4.13" +"gatsby-theme-carbon@npm:^3.4.19": + version: 3.4.19 + resolution: "gatsby-theme-carbon@npm:3.4.19" dependencies: "@babel/core": "npm:^7.23.9" - "@carbon/elements": "npm:^11.40.0" - "@carbon/grid": "npm:^11.21.1" - "@carbon/pictograms-react": "npm:^11.57.0" - "@carbon/react": "npm:^1.51.0" - "@carbon/themes": "npm:^11.32.0" + "@carbon/elements": "npm:^11.44.0" + "@carbon/grid": "npm:^11.22.0" + "@carbon/pictograms-react": "npm:^11.61.0" + "@carbon/react": "npm:^1.56.0" + "@carbon/themes": "npm:^11.34.0" "@mdx-js/mdx": "npm:^1.6.22" "@mdx-js/react": "npm:^1.6.22" "@reach/router": "npm:^1.3.4" @@ -12786,7 +13054,7 @@ __metadata: gatsby: ^4.21.1 react: ^17.0.2 react-dom: ^17.0.2 - checksum: 9d379e46e771522b34177fbc5cadf78bdafd642c7a52a0d82cf4472f77e2a7aacb5e8612ba0a4cfda5a7e9cdbe0ace0f0a4145ba331b16b0442d7350b043cbc8 + checksum: 7dfa9712b3534ee9ad720d9a5616c1b2ef673906a79a596669e6befa2cd17428df575e568d5db5c071cacb665cfce643eef9545914c8538ba0ed1969077931a2 languageName: node linkType: hard @@ -21373,7 +21641,7 @@ __metadata: languageName: node linkType: hard -"tabbable@npm:^6.2.0": +"tabbable@npm:^6.0.0, tabbable@npm:^6.2.0": version: 6.2.0 resolution: "tabbable@npm:6.2.0" checksum: ced8b38f05f2de62cd46836d77c2646c42b8c9713f5bd265daf0e78ff5ac73d3ba48a7ca45f348bafeef29b23da7187c72250742d37627883ef89cbd7fa76898 @@ -21460,8 +21728,8 @@ __metadata: linkType: hard "tar@npm:^6.1.11, tar@npm:^6.1.2": - version: 6.2.0 - resolution: "tar@npm:6.2.0" + version: 6.2.1 + resolution: "tar@npm:6.2.1" dependencies: chownr: "npm:^2.0.0" fs-minipass: "npm:^2.0.0" @@ -21469,7 +21737,7 @@ __metadata: minizlib: "npm:^2.1.1" mkdirp: "npm:^1.0.3" yallist: "npm:^4.0.0" - checksum: 02ca064a1a6b4521fef88c07d389ac0936730091f8c02d30ea60d472e0378768e870769ab9e986d87807bfee5654359cf29ff4372746cc65e30cbddc352660d8 + checksum: a5eca3eb50bc11552d453488344e6507156b9193efd7635e98e867fab275d527af53d8866e2370cd09dfe74378a18111622ace35af6a608e5223a7d27fe99537 languageName: node linkType: hard