From 65ff2c1b1a18259231ba06da6a5dc6971977672e Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Mon, 29 Jul 2019 15:34:27 -0500 Subject: [PATCH 1/4] chore: add dep and config --- .eslintrc | 1 + .prettierrc | 7 +++++++ package.json | 8 +++++++- src/gatsby-theme-carbon/templates/Homepage.js | 18 ++++++++++-------- yarn.lock | 17 +++++++++++++++++ 5 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 .eslintrc create mode 100644 .prettierrc diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 000000000000..371a2909840f --- /dev/null +++ b/.eslintrc @@ -0,0 +1 @@ +{ "extends": ["eslint-config-carbon"] } diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000000..3a8beba2fd15 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "jsxBracketSameLine": true, + "printWidth": 80, + "singleQuote": true, + "trailingComma": "es5", + "proseWrap": "preserve" +} diff --git a/package.json b/package.json index a29d48d520d8..1608db6efb2d 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,9 @@ "scripts": { "dev": "gatsby develop", "dev:clean": "gatsby clean && gatsby develop", - "clean": "gatsby clean" + "clean": "gatsby clean", + "lint:js": "eslint src", + "format": "prettier --write 'src/**/*.{js,json,css,scss,md,mdx,yaml}'" }, "dependencies": { "gatsby": "^2.13.41", @@ -15,5 +17,9 @@ "markdown-it": "^9.0.1", "react": "^16.8.6", "react-dom": "^16.8.6" + }, + "devDependencies": { + "eslint-config-carbon": "^1.0.2", + "prettier": "^1.18.2" } } diff --git a/src/gatsby-theme-carbon/templates/Homepage.js b/src/gatsby-theme-carbon/templates/Homepage.js index 823a3d6892dc..9d22dca4f84c 100644 --- a/src/gatsby-theme-carbon/templates/Homepage.js +++ b/src/gatsby-theme-carbon/templates/Homepage.js @@ -5,25 +5,27 @@ import { calloutLink } from './Homepage.module.scss'; import Carbon from '../../images/carbon.jpg'; -const FirstLeftText = () =>

Carbon Design -System

; +const FirstLeftText = () =>

Carbon Design System

; const FirstRightText = () => (

- Carbon is IBM’s open-source design system for products and experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors. + Carbon is IBM’s open-source design system for products and + experiences. With the IBM Design Language as its foundation, the system + consists of working code, design tools and resources, human interface + guidelines, and a vibrant community of contributors.

); -const SecondLeftText = () =>

Wondering how -to contribute?

; +const SecondLeftText = () =>

Wondering how to contribute?

; const SecondRightText = () => (

- We welcome all feedback, designs, or ideas in order to produce the best possible experience for our users. If you’re interested in contributing, check out our contributing guidelines to get started. + We welcome all feedback, designs, or ideas in order to produce the best + possible experience for our users. If you’re interested in contributing, + check out our contributing guidelines to get started. + href="https://www.carbondesignsystem.com/contributions/overview/"> Start contributing →

diff --git a/yarn.lock b/yarn.lock index bcf761b8c3fc..589acece2b30 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4684,6 +4684,18 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1 resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= +eslint-config-carbon-base@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/eslint-config-carbon-base/-/eslint-config-carbon-base-1.0.1.tgz#3cc3a930202889be4d2bf6bb223eea7c3dda389a" + integrity sha1-PMOpMCAoib5NK/a7Ij7qfD3aOJo= + +eslint-config-carbon@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/eslint-config-carbon/-/eslint-config-carbon-1.0.2.tgz#4af1cefb679d4c88bb1bff5159d692d903d55df2" + integrity sha1-SvHO+2edTIi7G/9RWdaS2QPVXfI= + dependencies: + eslint-config-carbon-base "^1.0.0" + eslint-config-react-app@^3.0.0: version "3.0.8" resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-3.0.8.tgz#6f606828ba30bafee7d744c41cd07a3fea8f3035" @@ -10343,6 +10355,11 @@ prepend-http@^2.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= +prettier@^1.18.2: + version "1.18.2" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea" + integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw== + pretty-bytes@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9" From c5b833780e71e3ef005833a55ff573e4c34dade9 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Mon, 29 Jul 2019 15:34:36 -0500 Subject: [PATCH 2/4] chore: run prettier --- .../components/UI-shell-header/style.mdx | 32 ---- .../components/UI-shell-header/usage.mdx | 20 --- .../components/UI-shell-left-panel/style.mdx | 20 --- .../components/UI-shell-left-panel/usage.mdx | 8 - .../components/UI-shell-right-panel/style.mdx | 8 - .../components/UI-shell-right-panel/usage.mdx | 8 - src/pages/components/accordion/style.mdx | 46 +++-- src/pages/components/accordion/usage.mdx | 4 - src/pages/components/breadcrumb/style.mdx | 22 +-- src/pages/components/breadcrumb/usage.mdx | 4 - src/pages/components/button/style.mdx | 158 ++++++++---------- src/pages/components/button/usage.mdx | 8 - src/pages/components/checkbox/style.mdx | 57 +++---- src/pages/components/checkbox/usage.mdx | 4 - src/pages/components/code-snippet/style.mdx | 79 ++++----- src/pages/components/code-snippet/usage.mdx | 5 - .../components/content-switcher/style.mdx | 49 +++--- .../components/content-switcher/usage.mdx | 7 +- src/pages/components/data-table/style.mdx | 108 ++++++------ src/pages/components/data-table/usage.mdx | 41 ----- src/pages/components/date-picker/style.mdx | 138 +++++++-------- src/pages/components/date-picker/usage.mdx | 8 - src/pages/components/dropdown/style.mdx | 152 +++++++---------- src/pages/components/dropdown/usage.mdx | 16 -- src/pages/components/file-uploader/style.mdx | 38 ++--- src/pages/components/file-uploader/usage.mdx | 12 -- src/pages/components/form/style.mdx | 40 ++--- src/pages/components/form/usage.mdx | 20 --- src/pages/components/inline-loading/style.mdx | 34 +--- src/pages/components/inline-loading/usage.mdx | 12 -- src/pages/components/link/style.mdx | 8 - src/pages/components/link/usage.mdx | 6 +- src/pages/components/list/style.mdx | 4 - src/pages/components/list/usage.mdx | 9 +- src/pages/components/loading/style.mdx | 27 +-- src/pages/components/loading/usage.mdx | 7 +- src/pages/components/modal/style.mdx | 16 -- src/pages/components/modal/usage.mdx | 24 +-- src/pages/components/notification/style.mdx | 8 - src/pages/components/notification/usage.mdx | 26 +-- src/pages/components/number-input/style.mdx | 67 ++++---- src/pages/components/number-input/usage.mdx | 7 +- src/pages/components/overflow-menu/style.mdx | 53 +++--- src/pages/components/overflow-menu/usage.mdx | 20 +-- src/pages/components/pagination/style.mdx | 32 ++-- src/pages/components/pagination/usage.mdx | 14 +- .../components/progress-indicator/style.mdx | 59 +++---- .../components/progress-indicator/usage.mdx | 6 +- src/pages/components/radio-button/style.mdx | 51 +++--- src/pages/components/radio-button/usage.mdx | 3 +- src/pages/components/search/style.mdx | 32 +--- src/pages/components/search/usage.mdx | 10 +- src/pages/components/select/style.mdx | 102 +++++------ src/pages/components/select/usage.mdx | 12 -- src/pages/components/slider/style.mdx | 41 ++--- src/pages/components/slider/usage.mdx | 16 +- .../components/structured-list/style.mdx | 67 ++++---- .../components/structured-list/usage.mdx | 10 +- src/pages/components/tabs/style.mdx | 48 +++--- src/pages/components/tabs/usage.mdx | 8 +- src/pages/components/tag/style.mdx | 24 ++- src/pages/components/tag/usage.mdx | 13 +- src/pages/components/text-input/style.mdx | 40 ++--- src/pages/components/text-input/usage.mdx | 22 --- src/pages/components/tile/style.mdx | 33 ++-- src/pages/components/tile/usage.mdx | 19 +-- src/pages/components/toggle/style.mdx | 84 ++++------ src/pages/components/toggle/usage.mdx | 12 +- src/pages/components/tooltip/style.mdx | 79 ++++----- src/pages/components/tooltip/usage.mdx | 50 ++---- src/pages/contributions/component/index.mdx | 23 ++- src/pages/contributions/documentation.mdx | 22 +-- src/pages/contributions/pattern.mdx | 38 ++--- src/pages/experimental/about/overview.mdx | 11 +- src/pages/experimental/about/usage.mdx | 4 +- src/pages/experimental/chatbot/content.mdx | 10 +- src/pages/experimental/chatbot/overview.mdx | 33 ++-- src/pages/experimental/chatbot/usage.mdx | 64 ++----- .../experimental/export-pattern/index.mdx | 29 +--- .../experimental/navigation-pattern/index.mdx | 64 +++---- src/pages/getting-started/about-carbon.mdx | 20 ++- src/pages/getting-started/designers/index.mdx | 39 ++--- .../getting-started/developers/angular.mdx | 4 - .../getting-started/developers/react.mdx | 2 +- .../getting-started/developers/vanilla.mdx | 2 +- src/pages/guidelines/accessibility/color.mdx | 11 -- .../guidelines/accessibility/overview.mdx | 5 +- src/pages/guidelines/content/general.mdx | 4 +- src/pages/guidelines/content/glossary.mdx | 3 +- .../guidelines/iconography/contribute.mdx | 4 - src/pages/guidelines/iconography/usage.mdx | 12 -- src/pages/guidelines/layout/index.mdx | 43 +---- src/pages/guidelines/motion/choreography.mdx | 12 +- src/pages/guidelines/motion/resources.mdx | 16 +- src/pages/guidelines/spacing/index.mdx | 8 - src/pages/help/faq/index.mdx | 20 ++- src/pages/patterns/common-actions/index.mdx | 49 ------ src/pages/patterns/disabled-states/index.mdx | 17 -- src/pages/patterns/filtering/index.mdx | 30 ---- src/pages/patterns/loading/index.mdx | 20 --- src/pages/patterns/overflow-content/index.mdx | 62 +++---- src/pages/patterns/overview.mdx | 15 +- src/pages/resources/index.mdx | 1 - src/pages/tutorial/react-step-2/index.mdx | 20 --- src/pages/tutorial/react-step-3/index.mdx | 4 +- src/pages/tutorial/react-step-4/index.mdx | 12 -- src/pages/tutorial/wrapping-up/index.mdx | 8 - .../updates/release-information/changelog.mdx | 30 +--- .../release-information/highlights.mdx | 2 +- .../release-information/known-issues.mdx | 2 +- src/pages/updates/whats-new/index.mdx | 26 +-- 111 files changed, 963 insertions(+), 2165 deletions(-) diff --git a/src/pages/components/UI-shell-header/style.mdx b/src/pages/components/UI-shell-header/style.mdx index a8c505ad22ec..71cd42ce63d6 100644 --- a/src/pages/components/UI-shell-header/style.mdx +++ b/src/pages/components/UI-shell-header/style.mdx @@ -15,12 +15,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti | `.bx--header__menu-trigger` | fill | Gray 10 | | `.bx--header__nav::before` | border | Gray 80 | - - ![ui shell header](images/header-style-1.png) - - ### Menu-trigger | Class | Property | Color value | @@ -30,12 +26,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti | `.bx--header__menu-trigger:focus` | border | White | | `.bx--header__menu-trigger:active` | background color | Gray 80 | - - ![Menu trigger interactive states](images/header-style-5.png) - - ### Menu-item | Class | Property | Color value | @@ -50,12 +42,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti | `.bx--header__menu-item:active` | text color | Gray 10 | | `.bx--header__menu-item:active` | svg | Gray 10 | - - ![Menu item interactive states](images/header-style-6.png) - - ### Sub-menu | Class | Property | Color value | @@ -68,12 +56,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti | `.bx--header__submenu:active` | background color | Gray 70 | | `.bx--header__submenu:active` | text color | Gray 10 | - - ![Sub-menu interactive states](images/header-style-7.png) - - ### Action | Class | Property | Color value | @@ -85,12 +69,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti | `.bx--header__action:active` | background color | Gray 80 | | `.bx--header__action:active` | fill | Gray 10 | - - ![Header action interactive states](images/header-style-8.png) - - ## Typography Menu labels and text should be set in sentence case. @@ -124,24 +104,12 @@ The header should span the full width of the browser window. The header can eith | `.bx--header__submenu` | padding-left, padding right | 16 / 1 | `$spacing-05` | | `.bx--header__action` | height, width | 48 / 3 | – | - - ![ui shell header spec](images/header-style-2.png) - - - - ![ui shell header submenu spec](images/header-style-3.png) - - ### Responsive behavior In smaller broswer windows, `menu items` in the header should collapse into the left side nav menu. Items that were once in the header should stack at the top of the side nav panel if other items were already present in the panel. - - ![responsive behavior example](images/header-style-4.png) - - diff --git a/src/pages/components/UI-shell-header/usage.mdx b/src/pages/components/UI-shell-header/usage.mdx index 747e3fa18a03..a06699b170fd 100644 --- a/src/pages/components/UI-shell-header/usage.mdx +++ b/src/pages/components/UI-shell-header/usage.mdx @@ -14,12 +14,8 @@ tabs: ['Code', 'Usage', 'Style'] - - ![UI shell header](images/zones-platform.png) - - ## Resources @@ -45,24 +41,16 @@ The UI shell is made up of three components: The header, the [left panel](/compo | Left panel | An optional panel that is used for a product's navigation. | | Right panel | An optional panel that shows additional system level actions or content associated with a system icon in the header. | - - ![UI shell components.](images/shell-usage-1.png) - - For each UI shell component, left-to-right translates to product-to-global. The left side of the header contains items relevant at the product level. Moving to the right along the header, the functions become more global. Elements in the middle of the header should represent system-level controls. Elements on the right side of the header, such as the switcher, are the most global in their scope and span multiple products. ## Anatomy The header spans the full width of the viewport and is the topmost element in the browser window. Header elements are persistent throughout the product experience. - - ![UI shell system zone.](images/header-usage-2.png) - - ### Header elements #### Hamburger menu @@ -116,12 +104,8 @@ Icons are not a required element of the header and a product may choose to use a The example below shows a header with a switcher, three core icons, a product icon, and search. - - ![icon placement.](images/header-usage-4.png) - - | Icon | Position | | | ------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Search | Left | Search should always be positioned as the furthest left icon. This is to allow for a expanding search field that does not disrupt other icon positions. | @@ -137,8 +121,4 @@ As a header scales down to fit smaller screen sizes, header links and menus shou If your UI includes a left panel, the header links should be added above the left panel items, pushing them down accordingly. - - ![An example of the header responding to different screen sizes.](images/header-usage-3.png) - - diff --git a/src/pages/components/UI-shell-left-panel/style.mdx b/src/pages/components/UI-shell-left-panel/style.mdx index 793b1e468eb9..e3553edb1d54 100644 --- a/src/pages/components/UI-shell-left-panel/style.mdx +++ b/src/pages/components/UI-shell-left-panel/style.mdx @@ -16,12 +16,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti | `.bx--side-nav__menu-item` | text color | Gray 70 | | `.bx--side-nav__icon` | fill | Gray 70 | - - ![UI shell side-nav example.](images/left-nav-style-1.png) - - ### Link | Class | Property | Color value | @@ -35,12 +31,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti | `.bx--side-nav__link--current` | text color | Gray 100 | | `:before` | background color | Blue 60 | - - ![Link states](images/left-nav-style-4.png) - - ### Sub-menu | Class | Property | Color value | @@ -59,12 +51,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti | `.bx--side-nav__menu-item--current` | text color | Gray 100 | | `:before` | background color | Blue 60 | - - ![Sub-menu states](images/left-nav-style-4.png) - - ### Icon | Class | Property | Color value | @@ -107,18 +95,10 @@ The panel spans the full height of the browser and is fixed to the left edge of | `:before` | width | 4 / 0.25 | – | | `.bx--side-nav__icon` | size | 16 / 1 | – | - - ![ui shell side-nav](images/left-nav-style-2.png) - - - - ![ui shell side-nav with icons](images/left-nav-style-3.png) - - diff --git a/src/pages/components/UI-shell-left-panel/usage.mdx b/src/pages/components/UI-shell-left-panel/usage.mdx index d7e5dbc9dfa7..f72a7a82d6b4 100644 --- a/src/pages/components/UI-shell-left-panel/usage.mdx +++ b/src/pages/components/UI-shell-left-panel/usage.mdx @@ -38,22 +38,14 @@ The UI shell is made up of three components: The [header](/components/UI-shell-h | Left panel | An optional panel that is used for a product's navigation. | | Right panel | An optional panel that shows additional system level actions or content associated with a system icon in the header. | - - ![UI shell components.](images/shell-usage-1.png) - - ## Anatomy The left panel contains secondary navigation and is positioned below the header and fixed to the left. Both links and sub-menus can be used in the side-nav and may be mixed together. - - ![Left panel with nested sub-menus.](images/left-panel-usage-1.png) - - ## Behavior Use the left panel if there are more than five secondary navigation items, or if you expect a user to switch between secondary items frequently. Sub-menus are denoted with a chevron and expand when clicked, pushing the other items down in the panel. To collapse the sub-menu, the user must again click the menu header in the left panel. diff --git a/src/pages/components/UI-shell-right-panel/style.mdx b/src/pages/components/UI-shell-right-panel/style.mdx index e06bd7df2c71..4b61cfb7fec7 100644 --- a/src/pages/components/UI-shell-right-panel/style.mdx +++ b/src/pages/components/UI-shell-right-panel/style.mdx @@ -13,12 +13,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti | `.bx--header-panel` | border-left | Gray 80 | | `.bx--header__action--active` | border-left, border-right | Gray 80 | - - ![UI shell right panel example.](images/right-panel-style-1.png) - - ### Context switcher | Class | Property | Color value | @@ -51,8 +47,4 @@ The panel spans the full height of the browser and is fixed to the right edge of | `.bx--header__action` | height, width | 48 / 8 | – | | `.bx--header__action` | svg | 20 / 1.25 | – | - - ![UI shell right panel example.](images/right-panel-style-2.png) - - diff --git a/src/pages/components/UI-shell-right-panel/usage.mdx b/src/pages/components/UI-shell-right-panel/usage.mdx index 0833a8a42577..9089a7e99fc9 100644 --- a/src/pages/components/UI-shell-right-panel/usage.mdx +++ b/src/pages/components/UI-shell-right-panel/usage.mdx @@ -38,24 +38,16 @@ The UI shell is made up of three components: The [header](/components/UI-shell-h | Left panel | An optional panel that is used for a product's navigation. | | Right panel | An optional panel that shows additional system level actions or content associated with a system icon in the header. | - - ![UI shell components.](images/shell-usage-1.png) - - ## Anatomy The right panel is invoked by icons on the right side of the header, and remains anchored to that icon. Right panels have a consistent width, span the full height of the viewport, and are flush to the right edge of the viewport. Note that the switcher also lives in a right panel. - - ![Header panel and switcher.](images/right-panel-usage-1.png) - - #### Switcher item A switcher item is anything that changes what product, offering, or property occupies the UI shell. Consider moments in a product when you switch from a calendar to a mailbox, from Kubernetes to Catalog. These items belong in the switcher. diff --git a/src/pages/components/accordion/style.mdx b/src/pages/components/accordion/style.mdx index 156c396bca80..34e826848284 100755 --- a/src/pages/components/accordion/style.mdx +++ b/src/pages/components/accordion/style.mdx @@ -5,40 +5,36 @@ tabs: ['Code', 'Usage', 'Style'] ## Color -| Class | Property | Color token | -| ----------------------------- | ---------- | ---------------- | -| `.bx--accordion__title` | color | `$text-01` | -| `.bx--accordion__content` | color | `$text-01` | -| `.bx--accordion__arrow` | fill | `$icon-01 ` | -| `.bx--accordion__item` | border-top | `$ui-03` | +| Class | Property | Color token | +| ------------------------- | ---------- | ----------- | +| `.bx--accordion__title` | color | `$text-01` | +| `.bx--accordion__content` | color | `$text-01` | +| `.bx--accordion__arrow` | fill | `$icon-01` | +| `.bx--accordion__item` | border-top | `$ui-03` | ## Typography All accordion labels are set in sentence case and should not exceed three words. Set body text appropriately based on content. -| Class | Font-size (px/rem) | Font-weight | Type token | -| ------------------------- | ------------------ | ------------ | --------------- | -| `.bx--accordion__title` | 14 / 0.875 | Regular / 400 | `$body-long-01`| -| `.bx--accordion__content` | 14 / 0.875 | Regular / 400 | `$body-long-01`| +| Class | Font-size (px/rem) | Font-weight | Type token | +| ------------------------- | ------------------ | ------------- | --------------- | +| `.bx--accordion__title` | 14 / 0.875 | Regular / 400 | `$body-long-01` | +| `.bx--accordion__content` | 14 / 0.875 | Regular / 400 | `$body-long-01` | ## Structure There is no limit to the height of an open row, however, follow the other padding specs below. The width of an accordion varies based on the content, layout, and page design. The chevron icon can be found on the [iconography](/guidelines/iconography/library) library page. Avoid having any text within 16px / 1rem of the accordion's sides. Additionally, include padding between labels, body copy, and separation lines to provide breathing room between elements. -| Class | Property | px/rem | Spacing token | -| ------------------------------ | -------------------------- | ---------- | ------------- | -| `.bx--accordion__heading` | height | 32 / 2 | – | -| `.bx--accordion__item` | border-top | 1 | – | -| `.bx--accordion__arrow` | size | 16 / 1 | – | -| `.bx--accordion__arrow` | padding-right | 16 / 1 | `$spacing-05` | -| `.bx--accordion__title` | margin-left | 16 / 1 | `$spacing-05` | -| `.bx--accordion__content` | padding-right | 25% | – | -| `.bx--accordion__content` | padding-top | 8 / 0.5 | `$spacing-03` | -| `.bx--accordion__content` | padding-left | 16 / 1 | `$spacing-05` | -| `.bx--accordion__item--active` | padding-bottom | 24 / 1.5 | `$spacing-06` | - - +| Class | Property | px/rem | Spacing token | +| ------------------------------ | -------------- | -------- | ------------- | +| `.bx--accordion__heading` | height | 32 / 2 | – | +| `.bx--accordion__item` | border-top | 1 | – | +| `.bx--accordion__arrow` | size | 16 / 1 | – | +| `.bx--accordion__arrow` | padding-right | 16 / 1 | `$spacing-05` | +| `.bx--accordion__title` | margin-left | 16 / 1 | `$spacing-05` | +| `.bx--accordion__content` | padding-right | 25% | – | +| `.bx--accordion__content` | padding-top | 8 / 0.5 | `$spacing-03` | +| `.bx--accordion__content` | padding-left | 16 / 1 | `$spacing-05` | +| `.bx--accordion__item--active` | padding-bottom | 24 / 1.5 | `$spacing-06` | ![Structure and spacing measurements for accordion](images/test1.png) - - diff --git a/src/pages/components/accordion/usage.mdx b/src/pages/components/accordion/usage.mdx index 61912b48ba32..adf4f3174be9 100755 --- a/src/pages/components/accordion/usage.mdx +++ b/src/pages/components/accordion/usage.mdx @@ -13,8 +13,4 @@ The Carbon accordion allows for multiple sections to be expanded simultaneously. A chevron is used to indicate the "expand/collapse" action, though the entire header area is clickable for the same action. - - ![accordion example](images/accordion-usage-1.png) - - diff --git a/src/pages/components/breadcrumb/style.mdx b/src/pages/components/breadcrumb/style.mdx index b4972873074a..ef3b30228f07 100755 --- a/src/pages/components/breadcrumb/style.mdx +++ b/src/pages/components/breadcrumb/style.mdx @@ -5,11 +5,11 @@ tabs: ['Code', 'Usage', 'Style'] ## Color -| Class | Property | Color token | -| ----------------------------- | -------- | -------------------- | -| `.bx--link` | color | `$link-01` | -| `.bx--link:hover` | color | `$hover-primary-text`| -| `.bx--breadcrumb-item::after` | color | `$text-01` | +| Class | Property | Color token | +| ----------------------------- | -------- | --------------------- | +| `.bx--link` | color | `$link-01` | +| `.bx--link:hover` | color | `$hover-primary-text` | +| `.bx--breadcrumb-item::after` | color | `$text-01` | ## Typography @@ -19,12 +19,8 @@ When a user hovers overs a breadcrumb, the breadcrumb title should be underlined | ----------- | ------------------ | ------------- | ---------------- | | `.bx--link` | 14 / 0.875 | Regular / 400 | `$body-short-01` | - - ![Breadcrumb typography treatment example](images/breadcrumb-style-1.png) - - ## Structure The on-click dropdown should follow the [overflow menu](/components/overflow-menu) specs for sizing, padding, and interaction. @@ -33,12 +29,8 @@ The on-click dropdown should follow the [overflow menu](/components/overflow-men | ---------------------- | ----------- | ------- | ------------- | | `.bx--breadcrumb-item` | margin-left | 8 / 0.5 | `$spacing-03` | - - ![Truncated breadcrumb dropdown example](images/breadcrumb-style-2.png) - - ## Recommended Truncated breadcrumbs are not currently built into the breadcrumb component. The following colors from the [overflow menu](/overflow/style) are recommended for the overflow breadcrumb list. @@ -62,8 +54,4 @@ Truncated breadcrumbs are not currently built into the breadcrumb component. The | ---------------------------- | -------- | -------- | ------------- | | `.bx--overflow-menu-options` | height | 32 / 2 | – | - - ![Truncated breadcrumb dropdown example](images/breadcrumb-style-3.png) - - diff --git a/src/pages/components/breadcrumb/usage.mdx b/src/pages/components/breadcrumb/usage.mdx index 3f4c0aaeb9ac..8af3b6dd6cf4 100755 --- a/src/pages/components/breadcrumb/usage.mdx +++ b/src/pages/components/breadcrumb/usage.mdx @@ -11,12 +11,8 @@ Breadcrumbs are very effective in products and experiences that have a large amo Breadcrumbs' space-efficient design and high utility make them an easy choice for most designers. - - ![multiple tiers of breadcrumb](images/breadcrumb-usage-1.png) - - ## Variations | Breadcrumb type | Purpose | diff --git a/src/pages/components/button/style.mdx b/src/pages/components/button/style.mdx index d3fe4da48a1f..c341ea1a611f 100755 --- a/src/pages/components/button/style.mdx +++ b/src/pages/components/button/style.mdx @@ -1,5 +1,4 @@ --- - title: Button tabs: ['Code', 'Usage', 'Style'] --- @@ -8,122 +7,109 @@ tabs: ['Code', 'Usage', 'Style'] ### Primary button -| Class | Property | Color token | -| -------------------------------------------------------------- | ------------------------ | ----------------- | -| `.bx--btn--primary` | text color | `$text-04` | -| `.bx--btn__icon` | svg | `$icon-03 ` | -| `.bx--btn--primary` | background-color | `$interactive-01` | -| `:hover` | background-color | `$hover-primary` | -| `:active` | background-color | `$active-primary` | -| `:focus` | border | `$focus` | -| `:disabled` | background-color | `$disabled-02` | -| `:disabled` | text color | `$disabled-03` | +| Class | Property | Color token | +| ------------------- | ---------------- | ----------------- | +| `.bx--btn--primary` | text color | `$text-04` | +| `.bx--btn__icon` | svg | `$icon-03` | +| `.bx--btn--primary` | background-color | `$interactive-01` | +| `:hover` | background-color | `$hover-primary` | +| `:active` | background-color | `$active-primary` | +| `:focus` | border | `$focus` | +| `:disabled` | background-color | `$disabled-02` | +| `:disabled` | text color | `$disabled-03` | ### Secondary button -| Class | Property | Color token | -| -------------------------------------------------------------- | ------------------------ | ------------------- | -| `.bx--btn--secondary` | text color | `$text-04` | -| `.bx--btn__icon` | svg | `$icon-03` | -| `.bx--btn--secondary` | background-color | `$interactive-02` | -| `.bx--btn--secondary` | border | `$interactive-02` | -| `:hover` | background-color | `$hover-secondary` | -| `:active` | background-color | `$active-secondary` | -| `:focus` | border | `$focus` | -| `:disabled` | background-color | `$disabled-02` | -| `:disabled` | text color | `$disabled-03` | +| Class | Property | Color token | +| --------------------- | ---------------- | ------------------- | +| `.bx--btn--secondary` | text color | `$text-04` | +| `.bx--btn__icon` | svg | `$icon-03` | +| `.bx--btn--secondary` | background-color | `$interactive-02` | +| `.bx--btn--secondary` | border | `$interactive-02` | +| `:hover` | background-color | `$hover-secondary` | +| `:active` | background-color | `$active-secondary` | +| `:focus` | border | `$focus` | +| `:disabled` | background-color | `$disabled-02` | +| `:disabled` | text color | `$disabled-03` | ### Tertiary button -| Class | Property | Color token | -| -------------------------------------------------------------- | ------------------------ | ------------------ | -| `.bx--btn--tertiary` | text color | `$interactive-03` | -| `.bx--btn__icon` | svg | `$interactive-03` | -| `.bx--btn--tertiary` | background-color | `transparent` | -| `.bx--btn--tertiary` | border | `$interactive-03` | -| `:hover` | text color | `$text-04` | -| `:hover` | svg | `$icon-03` | -| `:hover` | background-color | `$hover-tertiary` | -| `:active` | background-color | `$active-tertiary` | -| `:focus` | border | `$focus` | -| `:disabled` | background-color | `$disabled-02` | -| `:disabled` | text color | `$disabled-03` | +| Class | Property | Color token | +| -------------------- | ---------------- | ------------------ | +| `.bx--btn--tertiary` | text color | `$interactive-03` | +| `.bx--btn__icon` | svg | `$interactive-03` | +| `.bx--btn--tertiary` | background-color | `transparent` | +| `.bx--btn--tertiary` | border | `$interactive-03` | +| `:hover` | text color | `$text-04` | +| `:hover` | svg | `$icon-03` | +| `:hover` | background-color | `$hover-tertiary` | +| `:active` | background-color | `$active-tertiary` | +| `:focus` | border | `$focus` | +| `:disabled` | background-color | `$disabled-02` | +| `:disabled` | text color | `$disabled-03` | ### Ghost button -| Class | Property | Color token | -| -------------------------------------------------------------- | ------------------------ | ---------------- | -| `.bx--btn--ghost` | text color | `$link-01` | -| `.bx--btn__icon` | svg | `$link-01` | -| `.bx--btn--ghost` | background-color | – | -| `:hover` | text color | `$hover-primary-text` | -| `:hover` | svg | `$hover-primary-text` | -| `:hover` | background-color | `$hover-ui` | -| `:active` | background-color | `$active-ui` | -| `:focus` | border | `$focus` | -| `:disabled` | text color | `$disabled-03` | +| Class | Property | Color token | +| ----------------- | ---------------- | --------------------- | +| `.bx--btn--ghost` | text color | `$link-01` | +| `.bx--btn__icon` | svg | `$link-01` | +| `.bx--btn--ghost` | background-color | – | +| `:hover` | text color | `$hover-primary-text` | +| `:hover` | svg | `$hover-primary-text` | +| `:hover` | background-color | `$hover-ui` | +| `:active` | background-color | `$active-ui` | +| `:focus` | border | `$focus` | +| `:disabled` | text color | `$disabled-03` | ### Danger button -| Class | Property | Color token | -| -------------------------------------------------------------- | ------------------------ | ------------------ | -| `.bx--btn--danger--primar` | text color | `$text-04` | -| `.bx--btn__icon` | svg | `$icon-03` | -| `.bx--btn--danger--primary` | background-color | `$support-01` | -| `:hover` | background-color | `$hover-danger` | -| `:active` | background-color | `$active-danger` | -| `:focus` | border | `$focus` | -| `:disabled` | background-color | `$disabled-02` | -| `:disabled` | text color | `$disabled-03` | - - - +| Class | Property | Color token | +| --------------------------- | ---------------- | ---------------- | +| `.bx--btn--danger--primar` | text color | `$text-04` | +| `.bx--btn__icon` | svg | `$icon-03` | +| `.bx--btn--danger--primary` | background-color | `$support-01` | +| `:hover` | background-color | `$hover-danger` | +| `:active` | background-color | `$active-danger` | +| `:focus` | border | `$focus` | +| `:disabled` | background-color | `$disabled-02` | +| `:disabled` | text color | `$disabled-03` | ![Example of a normal primary button](images/button-style-1.png) - - ## Typography Button text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. -| Class | Font-size (px/rem) | Font-weight | Type style | -| ---------- | ------------------ | --------------- | ---------------- | +| Class | Font-size (px/rem) | Font-weight | Type style | +| ---------- | ------------------ | ------------- | ---------------- | | `.bx--btn` | 14 / 0.875 | Regular / 400 | `$body-short-01` | ## Structure A button cannot have any element or text within 16 pixels / 1 rem of its borders. For button groups, the primary button is positioned on the outside of the set, while the secondary button is positioned inside. For a button with a glyph, the space between the button label and the glyph must be greater than or equal to 16 pixels / 1 rem. This is to accommodate for instances where two or more buttons with glyphs appear together. -| Class | Property | px / rem | Spacing token | -| -------------------------------- | --------------------------- | -------- | --------------- | -| `.bx--btn--primary` | height | 48 / 3 | – | -| `.bx--btn--sm` | height | 32 / 2 | – | -| `.bx--btn__icon` | size | 16 x 16 | – | -| `.bx--btn` | padding-left | 16 / 1 | `$spacing-05` | -| `.bx--btn` | padding-right | 64 / 1 | – | -| `.bx--btn--sm` | padding-left | 16 / 1 | `$spacing-05` | -| `.bx--btn--sm` | padding-right | 64 / 4 | – | -| `.bx--btn__icon` | margin-left, margin-right | 16 / 1 | `$spacing-05` | -| `.bx--btn--ghost` | padding-left, padding-right | 16 / 2 | `$spacing-05` | - - +| Class | Property | px / rem | Spacing token | +| ------------------- | --------------------------- | -------- | ------------- | +| `.bx--btn--primary` | height | 48 / 3 | – | +| `.bx--btn--sm` | height | 32 / 2 | – | +| `.bx--btn__icon` | size | 16 x 16 | – | +| `.bx--btn` | padding-left | 16 / 1 | `$spacing-05` | +| `.bx--btn` | padding-right | 64 / 1 | – | +| `.bx--btn--sm` | padding-left | 16 / 1 | `$spacing-05` | +| `.bx--btn--sm` | padding-right | 64 / 4 | – | +| `.bx--btn__icon` | margin-left, margin-right | 16 / 1 | `$spacing-05` | +| `.bx--btn--ghost` | padding-left, padding-right | 16 / 2 | `$spacing-05` | ![Structure for a primary button](images/button-style-7.png) - - - - ![Structure for a primary button](images/button-style-14.png) - - ### Recommended The following specs are not built into any of the button components but are recommended by design as the proper distance between buttons. -| Attribute | Property | px / rem | Spacing token | -| ---------------- | ------------------------- | ---------- | ------------- | -| External: button | margin | 1px | - | -| Button pairings | margin-left, margin-right | 0 | – | +| Attribute | Property | px / rem | Spacing token | +| ---------------- | ------------------------- | -------- | ------------- | +| External: button | margin | 1px | - | +| Button pairings | margin-left, margin-right | 0 | – | diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx index 75890a11c1b7..7c9ed83b32d8 100755 --- a/src/pages/components/button/usage.mdx +++ b/src/pages/components/button/usage.mdx @@ -51,18 +51,10 @@ For consistency, see [labels and idioms](/guidelines/content/glossary) for the a - Glyphs must be the same color value as the text within a button. - Ghost buttons require a glyph icon. - - ![button with glyph](images/button-usage-1.png) - - ## Danger button usage Danger buttons have a different visual style to inform users of potentially destructive actions they are about to take. If using the danger button as a standalone, we recommend styling it as a **secondary button**. Within a set, the danger button should be styled as a **primary button.** - - ![danger button set in modal](images/button-usage-2.png) - - diff --git a/src/pages/components/checkbox/style.mdx b/src/pages/components/checkbox/style.mdx index a4644fbf6f57..b3dec19f92a7 100755 --- a/src/pages/components/checkbox/style.mdx +++ b/src/pages/components/checkbox/style.mdx @@ -1,55 +1,46 @@ --- - title: Checkbox tabs: ['Code', 'Usage', 'Style'] --- ## Color -| Class | Property | Color token | -| ----------------------------- | ---------------- | ----------- | -| `.bx--label` | text color | `$text-02 ` | -| `.bx--checkbox-label` | text color | `$text-01` | -| `.bx--checkbox` | border | `$ui-05` | -| `.bx--checkbox:unchecked` | background-color | transparent | -| `.bx--checkbox:checked` | background-color | `$ui-05` | -| `.bx--checkbox:checked` | checkmark | `$inverse-01` | +| Class | Property | Color token | +| ------------------------- | ---------------- | ------------- | +| `.bx--label` | text color | `$text-02` | +| `.bx--checkbox-label` | text color | `$text-01` | +| `.bx--checkbox` | border | `$ui-05` | +| `.bx--checkbox:unchecked` | background-color | transparent | +| `.bx--checkbox:checked` | background-color | `$ui-05` | +| `.bx--checkbox:checked` | checkmark | `$inverse-01` | ### Interactive states -| State | Property | Color token | -| ----------------------------- | ---------------- | ----------- | -| `:focus` | border | `$focus ` | -| `:disabled` | text color | `$disabled-02` | -| `:disabled` | border | `$disabled-02` | - - +| State | Property | Color token | +| ----------- | ---------- | -------------- | +| `:focus` | border | `$focus` | +| `:disabled` | text color | `$disabled-02` | +| `:disabled` | border | `$disabled-02` | ![Disabled and normal checkbox states](images/checkbox-style-1.png) - - ## Typography Checkbox headings and labels should be sentence case, with only the first word in a phrase and any proper nouns capitalized. Checkbox headings and labels should not exceed three words. -| Class | Font-size (px/rem) | Font-weight | Type token | -| --------------------- | ------------------ | -------------- | ---------------- | -| `.bx--label` | 12 / 0.75 | Regular / 400 | `$label-01` | -| `.bx--checkbox-label` | 14 / 0.875 | Regualr / 400 | `$body-short-01` | +| Class | Font-size (px/rem) | Font-weight | Type token | +| --------------------- | ------------------ | ------------- | ---------------- | +| `.bx--label` | 12 / 0.75 | Regular / 400 | `$label-01` | +| `.bx--checkbox-label` | 14 / 0.875 | Regualr / 400 | `$body-short-01` | ## Structure -| Class | Property | px / rem | Spacing token | -| ------------------------------------- | -------------- | --------- | ------------- | -| `.bx--checkbox` | height & width | 16px | – | -| `.bx--checkbox` | border | 1px | – | -| `.bx--label` | margin-bottom | 8 / 0.5 | `$spacing-03` | -| `.bx--checkbox-label` | padding-left | 8 / 0.5 | `$spacing-03` | -| `.bx--form-item.bx--checkbox-wrapper` | margin-bottom | 8 / 0.5 | `$spacing-03` | - - +| Class | Property | px / rem | Spacing token | +| ------------------------------------- | -------------- | -------- | ------------- | +| `.bx--checkbox` | height & width | 16px | – | +| `.bx--checkbox` | border | 1px | – | +| `.bx--label` | margin-bottom | 8 / 0.5 | `$spacing-03` | +| `.bx--checkbox-label` | padding-left | 8 / 0.5 | `$spacing-03` | +| `.bx--form-item.bx--checkbox-wrapper` | margin-bottom | 8 / 0.5 | `$spacing-03` | ![Structure and spacing measurements for checkbox](images/checkbox-style-3.png) - - diff --git a/src/pages/components/checkbox/usage.mdx b/src/pages/components/checkbox/usage.mdx index 8084891131e2..f02526e17ad8 100755 --- a/src/pages/components/checkbox/usage.mdx +++ b/src/pages/components/checkbox/usage.mdx @@ -28,12 +28,8 @@ Users should be able to select the checkbox by clicking on the box directly or b The default view of a set of checkboxes is having no option selected. - - ![The default state for checkboxes is unchecked.](images/checkbox-usage-1.png) - - ## Related components #### Checkbox vs. radio button diff --git a/src/pages/components/code-snippet/style.mdx b/src/pages/components/code-snippet/style.mdx index ba707b34f13b..5e4a7a54c88c 100755 --- a/src/pages/components/code-snippet/style.mdx +++ b/src/pages/components/code-snippet/style.mdx @@ -1,5 +1,4 @@ --- - title: Code snippet tabs: ['Code', 'Usage', 'Style'] --- @@ -8,21 +7,21 @@ tabs: ['Code', 'Usage', 'Style'] ### Single & multi-line -| Class | Property | Color token | -| ---------------------------- | ---------------- | ------------ | -| `.bx--snippet` | background | `$field-01` | -| `.bx--snippet__icon` | color | `$icon-01` | -| `.bx--snippet-button:hover` | background-color | `$hover-ui ` | -| `.bx--snippet--light` | background-color | `$field-02` | -| `.bx--snippet--light:hover` | background-color | `$hover-ui` | +| Class | Property | Color token | +| --------------------------- | ---------------- | ----------- | +| `.bx--snippet` | background | `$field-01` | +| `.bx--snippet__icon` | color | `$icon-01` | +| `.bx--snippet-button:hover` | background-color | `$hover-ui` | +| `.bx--snippet--light` | background-color | `$field-02` | +| `.bx--snippet--light:hover` | background-color | `$hover-ui` | ### Inline snippet -| Class | Property | Color token | -| ---------------------------- | ---------------- | ---------- | -| `.bx--snippet--inline` | background-color | `$field-01` | -| `.bx--snippet--inline` | color | `$text-02 ` | -| `.bx--snippet--inline:hover` | background-color | `$hover-ui` | +| Class | Property | Color token | +| ---------------------------- | ---------------- | ----------- | +| `.bx--snippet--inline` | background-color | `$field-01` | +| `.bx--snippet--inline` | color | `$text-02` | +| `.bx--snippet--inline:hover` | background-color | `$hover-ui` | ### Syntax colors @@ -30,50 +29,42 @@ Carbon has defined a set of accessible syntax colors. View an incontext [example ## Typography -| Class | Font-size (px/rem) | Font-weight | Type token | -| --------------------------- | --------------------- | ------------- | ----------- | -| `.bx--snippet.code` | 12 / 0.75 | Regular / 400 | `$code-01 ` | -| `.bx--snippet--inline.code` | 12 / 0.75 | Regular / 400 | `$code-01 ` | +| Class | Font-size (px/rem) | Font-weight | Type token | +| --------------------------- | ------------------ | ------------- | ---------- | +| `.bx--snippet.code` | 12 / 0.75 | Regular / 400 | `$code-01` | +| `.bx--snippet--inline.code` | 12 / 0.75 | Regular / 400 | `$code-01` | ## Structure ### Single line -| Class | Property | px / rem | Spacing token | -| ---------------------- | ------------- | ---------- | ------------- | -| `.bx--snippet--single` | height | 40 / 3 | – | -| `.bx--snippet--single` | max-width | 768 / 48 | – | -| `.bx--snippet--single` | padding-right | 48 / 3 | `$spacing-09` | -| `.bx--snippet--single` | padding-left | 16 / 1 | `$spacing-05` | +| Class | Property | px / rem | Spacing token | +| ---------------------- | ------------- | -------- | ------------- | +| `.bx--snippet--single` | height | 40 / 3 | – | +| `.bx--snippet--single` | max-width | 768 / 48 | – | +| `.bx--snippet--single` | padding-right | 48 / 3 | `$spacing-09` | +| `.bx--snippet--single` | padding-left | 16 / 1 | `$spacing-05` | - - ![](images/code-snippet-style-1.png) - - ### Multi-line code snippet -| Class | Property | px / rem | Spacing token | -| -------------------------------------------- | --------------------------- | --------------------------------- | ------------- | -| `.bx--snippet--multi` | min-height | 288 / 18 | – | -| `.bx--snippet--multi` | max-height | Varies based on content | – | -| `.bx--snippet--multi` | max-width | 768 / 48 | – | -| `.bx--snippet-container` | padding-top, padding-bottom | 16 / 1 | `$spacing-05` | -| `.bx--snippet-container` | padding-right | 48 / 3 | `$spacing-09` | -| `.bx--snippet-container` | padding-left | 16 / 1 | `$spacing-05` | -| `.bx--snippet__icon` | height, width | 16px | – | -| `.bx--snippet-button` | height, width | 32 / 2 | – | - - +| Class | Property | px / rem | Spacing token | +| ------------------------ | --------------------------- | ----------------------- | ------------- | +| `.bx--snippet--multi` | min-height | 288 / 18 | – | +| `.bx--snippet--multi` | max-height | Varies based on content | – | +| `.bx--snippet--multi` | max-width | 768 / 48 | – | +| `.bx--snippet-container` | padding-top, padding-bottom | 16 / 1 | `$spacing-05` | +| `.bx--snippet-container` | padding-right | 48 / 3 | `$spacing-09` | +| `.bx--snippet-container` | padding-left | 16 / 1 | `$spacing-05` | +| `.bx--snippet__icon` | height, width | 16px | – | +| `.bx--snippet-button` | height, width | 32 / 2 | – | ![Structure and spacing measurements for multi-line snippet](images/code-snippet-style-2.png) - - ### Inline code snippet | Class | Property | px / rem | Spacing token | @@ -81,10 +72,6 @@ Carbon has defined a set of accessible syntax colors. View an incontext [example | `.bx--snippet--inline` | height | 16 / 1 | – | | `.bx--snippet--inline` | width | Varies based on content | – | | `.bx--snippet--inline` | border-radius | 2 | - | -| `.bx--snippet--inline code` | padding-right, padding-left | 8 / 0.5 | $spacing-03 | - - +| `.bx--snippet--inline code` | padding-right, padding-left | 8 / 0.5 | \$spacing-03 | ![Structure and spacing measurements for inline snippet](images/code-snippet-style-3.png) - - diff --git a/src/pages/components/code-snippet/usage.mdx b/src/pages/components/code-snippet/usage.mdx index c0c35d072e7a..de7d4536fc43 100644 --- a/src/pages/components/code-snippet/usage.mdx +++ b/src/pages/components/code-snippet/usage.mdx @@ -15,13 +15,8 @@ If there are more than nine lines of code, apply vertical scrolling to the code Terminal commands are often longer strings and should only appear on one line. Apply horizontal scrolling to maintain the set width of the box for those longer strings. - ## Interaction Code snippets are accompanied by a **copy icon**, which allows users to copy the provided code to their clipboard. The copy icon must be accompanied by a confirmation that states the successful action of copying an item to the users clipboard. - - ![code snippet example](images/code-snippet-usage-1.png) - - diff --git a/src/pages/components/content-switcher/style.mdx b/src/pages/components/content-switcher/style.mdx index 47b784f933f9..7d6ac497c522 100755 --- a/src/pages/components/content-switcher/style.mdx +++ b/src/pages/components/content-switcher/style.mdx @@ -5,28 +5,27 @@ tabs: ['Code', 'Usage', 'Style'] ## Color -Content switchers have two main states: `selected` and `unselected`. By default, content switcher buttons are unselected with the selected state using a high contrast color. - -| Class | Property | Color token | -| ---------------------------------------------------------------- | ------------------------- | -------------- | -| `.bx--content-switcher-btn` | background-color | `$ui-01` | -| `.bx--content-switcher-btn` | text color | `$text-02` | -| `--selected` | background-color | `$ui-05 ` | -| `--selected` | text color | `$text-04 ` | -| `:after` | divider | `$ui-03` | - +Content switchers have two main states: `selected` and `unselected`. By default, content switcher buttons are unselected with the selected state using a high contrast color. +| Class | Property | Color token | +| --------------------------- | ---------------- | ----------- | +| `.bx--content-switcher-btn` | background-color | `$ui-01` | +| `.bx--content-switcher-btn` | text color | `$text-02` | +| `--selected` | background-color | `$ui-05` | +| `--selected` | text color | `$text-04` | +| `:after` | divider | `$ui-03` | ### Interactive states + Hover states only apply to `unselected` buttons. -| State | Property | Color token | -| ---------------------------------------------------------------- | ------------------------- | -------------- | -| `:hover` | background-color | `$hover-ui` | -| `:hover` | text color | `$text-01` | -| `:focus` | border | `$focus ` | -| `:disabled` | background-color | `$disabled-01` | -| `:disabled` | text color | `$disabled-02` | +| State | Property | Color token | +| ----------- | ---------------- | -------------- | +| `:hover` | background-color | `$hover-ui` | +| `:hover` | text color | `$text-01` | +| `:focus` | border | `$focus` | +| `:disabled` | background-color | `$disabled-01` | +| `:disabled` | text color | `$disabled-02` | ## Typography @@ -40,15 +39,11 @@ Content switcher text should be set in sentence case, with only the first word i Content switchers must have at least two options for the user to choose from. Each container that makes up the content switcher is equal in size. The width of a container is determined by the length of the longest container option text plus the 16 px / 1rem on both sides of the text. -| Class | Property | px / rem | Spacing token | -| ------------------------------------- | --------------------------------------- | -------- | ------------- | -| `.bx--content-switcher` | height | 40 / 2.5 | – | -| `.bx--content-switcher` | corner radius | 4px | – | -| `:after` | divider | 1px | – | -| `.bx--content-switcher-btn` | padding-left, padding-right | 16 / 1 | `$spacing-05` | - - +| Class | Property | px / rem | Spacing token | +| --------------------------- | --------------------------- | -------- | ------------- | +| `.bx--content-switcher` | height | 40 / 2.5 | – | +| `.bx--content-switcher` | corner radius | 4px | – | +| `:after` | divider | 1px | – | +| `.bx--content-switcher-btn` | padding-left, padding-right | 16 / 1 | `$spacing-05` | ![Content switcher structure and spacing measurements](images/content-switcher-style-1.png) - - diff --git a/src/pages/components/content-switcher/usage.mdx b/src/pages/components/content-switcher/usage.mdx index dd3151ec9423..f64210567626 100755 --- a/src/pages/components/content-switcher/usage.mdx +++ b/src/pages/components/content-switcher/usage.mdx @@ -1,7 +1,8 @@ --- title: Content switcher -tabs: ['Code', 'Usage','Style'] +tabs: ['Code', 'Usage', 'Style'] --- + ## General guidance _Content switcher_ manipulates the content shown following an exclusive or “either/or” pattern. @@ -21,8 +22,4 @@ Based on usage, there should be a default selection. The default selection is al The content switcher is used for large groups of content, as opposed to the [toggle](/components/toggle) which is meant for a “yes/no” or “on/off” binary decision. - - ![content switcher example](images/content-switcher-usage-1.png) - - diff --git a/src/pages/components/data-table/style.mdx b/src/pages/components/data-table/style.mdx index 3480e2e5b878..e15c6d8c6598 100755 --- a/src/pages/components/data-table/style.mdx +++ b/src/pages/components/data-table/style.mdx @@ -5,32 +5,32 @@ tabs: ['Code', 'Usage', 'Style'] ## Color -| Class | Property | Color token | -| --------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------- | -| `.bx--data-table-header` | background-color | `$ui-01` | -| `.bx--data-table-header` | text color | `$text-01` | -| `.bx--data-table thead` | background-color | `$ui-03` | -| `.bx--table-header-label` | text color | `$text-01` | -| `.bx--data-table tbody` | background-color | `$ui-01` | -| `.bx--data-table td` | text color | `$text-02` | -| `.bx--data-table--zebra` | background-color | – | -| `.bx--expandable-row-v2` | background-color | `$ui-01` | -| `.bx--table-sort-v2__icon`
`.bx--table-expand-v2__svg`
`.bx--overflow-menu__icon` | fill | `$icon-01` | -| `.bx--batch-actions--active` | background-color | `$interactive-01` | -| `.bx--batch-summary__para` | background-color | `$text-04` | -| `.bx--batch-actions .bx--btn` | text-color | `$text-04` | +| Class | Property | Color token | +| --------------------------------------------------------------------------------------------- | ---------------- | ----------------- | +| `.bx--data-table-header` | background-color | `$ui-01` | +| `.bx--data-table-header` | text color | `$text-01` | +| `.bx--data-table thead` | background-color | `$ui-03` | +| `.bx--table-header-label` | text color | `$text-01` | +| `.bx--data-table tbody` | background-color | `$ui-01` | +| `.bx--data-table td` | text color | `$text-02` | +| `.bx--data-table--zebra` | background-color | – | +| `.bx--expandable-row-v2` | background-color | `$ui-01` | +| `.bx--table-sort-v2__icon`
`.bx--table-expand-v2__svg`
`.bx--overflow-menu__icon` | fill | `$icon-01` | +| `.bx--batch-actions--active` | background-color | `$interactive-01` | +| `.bx--batch-summary__para` | background-color | `$text-04` | +| `.bx--batch-actions .bx--btn` | text-color | `$text-04` | ### Interactive states -| Class | Property | Color token | -| -------------------------------------------------------------------| ------------------------------------- | ------------------- | -| `.bx--data-table tr:hover td` | background-color | `$hover-row` | -| `.bx--data-table td:hover` | text color | `$text-01` | -| `.bx--data-table td:focus` | border | `$focus` | -| `.bx--data-table--selected` | background-color | `$selected-ui` | -| `.bx--data-table--selected td` | text color | `$text-01` | -| `.bx--data-table--selected:hover` | background-color | `$hover-selected-ui`| -| `.bx--batch-actions .bx--btn:hover` | background color | `$hover-primary` | +| Class | Property | Color token | +| ----------------------------------- | ---------------- | -------------------- | +| `.bx--data-table tr:hover td` | background-color | `$hover-row` | +| `.bx--data-table td:hover` | text color | `$text-01` | +| `.bx--data-table td:focus` | border | `$focus` | +| `.bx--data-table--selected` | background-color | `$selected-ui` | +| `.bx--data-table--selected td` | text color | `$text-01` | +| `.bx--data-table--selected:hover` | background-color | `$hover-selected-ui` | +| `.bx--batch-actions .bx--btn:hover` | background color | `$hover-primary` | ### Style options @@ -40,12 +40,8 @@ Specific styling on the data table component can be toggled on/off based on user If zebra striping is turned off, you must have row dividers. - - ![Data table: row styling](images/data-table-style-1.png) - -