From 5827deab0dac37cc3d94055ec9a8dbe7e7c27611 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Wed, 7 Aug 2019 15:58:04 -0500 Subject: [PATCH 1/7] feat: update component images --- src/components/ComponentCode/ComponentCode.js | 2 +- .../ComponentOverview/ComponentOverview.js | 11 +++- src/pages/components/accordion/style.mdx | 6 ++ src/pages/components/accordion/usage.mdx | 6 ++ src/pages/components/breadcrumb/style.mdx | 20 +++++++ src/pages/components/breadcrumb/usage.mdx | 6 ++ src/pages/components/button/style.mdx | 20 +++++++ src/pages/components/button/usage.mdx | 16 +++++ src/pages/components/checkbox/style.mdx | 12 ++++ src/pages/components/checkbox/usage.mdx | 8 +++ src/pages/components/code-snippet/style.mdx | 25 +++++++- src/pages/components/code-snippet/usage.mdx | 6 ++ .../components/content-switcher/style.mdx | 8 +++ .../components/content-switcher/usage.mdx | 6 ++ src/pages/components/data-table/style.mdx | 12 ++++ src/pages/components/data-table/usage.mdx | 60 +++++++++++++++++++ src/pages/components/date-picker/style.mdx | 34 +++++++++++ src/pages/components/date-picker/usage.mdx | 16 +++++ src/styles/_images.scss | 25 ++++++++ 19 files changed, 293 insertions(+), 6 deletions(-) diff --git a/src/components/ComponentCode/ComponentCode.js b/src/components/ComponentCode/ComponentCode.js index 1f77b1ef227..e8261373bec 100644 --- a/src/components/ComponentCode/ComponentCode.js +++ b/src/components/ComponentCode/ComponentCode.js @@ -39,7 +39,7 @@ export default class ComponentCode extends React.Component { return (
-
+
+ ![Structure and spacing measurements for accordion](images/test1.png) + +
+ +Structure and spacing measurements for accordion | px / rem diff --git a/src/pages/components/accordion/usage.mdx b/src/pages/components/accordion/usage.mdx index adf4f3174be..66f93a30a7c 100755 --- a/src/pages/components/accordion/usage.mdx +++ b/src/pages/components/accordion/usage.mdx @@ -13,4 +13,10 @@ 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 ef3b30228f0..eb903e66216 100755 --- a/src/pages/components/breadcrumb/style.mdx +++ b/src/pages/components/breadcrumb/style.mdx @@ -19,8 +19,14 @@ 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) +
+ +Breadcrumb typography treatment example + ## Structure The on-click dropdown should follow the [overflow menu](/components/overflow-menu) specs for sizing, padding, and interaction. @@ -29,8 +35,14 @@ 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) +
+ +Structure and spacing measurements for breadcrumb | px / rem + ## 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. @@ -54,4 +66,12 @@ 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) + +
+ + + Recommended structure and spacing measurements for breadcrumb | px / rem + diff --git a/src/pages/components/breadcrumb/usage.mdx b/src/pages/components/breadcrumb/usage.mdx index 8af3b6dd6cf..0593f90b5d8 100755 --- a/src/pages/components/breadcrumb/usage.mdx +++ b/src/pages/components/breadcrumb/usage.mdx @@ -11,8 +11,14 @@ 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 c341ea1a611..cc566b90763 100755 --- a/src/pages/components/button/style.mdx +++ b/src/pages/components/button/style.mdx @@ -75,8 +75,14 @@ tabs: ['Code', 'Usage', 'Style'] | `:disabled` | background-color | `$disabled-02` | | `:disabled` | text color | `$disabled-03` | +
+ ![Example of a normal primary button](images/button-style-1.png) +
+ +Primary, secondary, and ghost button state examples + ## Typography Button text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. @@ -101,10 +107,24 @@ A button cannot have any element or text within 16 pixels / 1 rem of its borders | `.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 measurements for small and regular primary button | px / rem + + +
+ ![Structure for a primary button](images/button-style-14.png) +
+ +Spacing measurements for various button types | px / rem + ### Recommended The following specs are not built into any of the button components but are recommended by design as the proper distance between buttons. diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx index 7c9ed83b32d..0f2424c03f4 100755 --- a/src/pages/components/button/usage.mdx +++ b/src/pages/components/button/usage.mdx @@ -51,10 +51,26 @@ 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) +Glyph usage in Buttons + + + + ## 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) + +Danger button set + + + diff --git a/src/pages/components/checkbox/style.mdx b/src/pages/components/checkbox/style.mdx index b3dec19f92a..0edea506ba1 100755 --- a/src/pages/components/checkbox/style.mdx +++ b/src/pages/components/checkbox/style.mdx @@ -22,8 +22,14 @@ tabs: ['Code', 'Usage', 'Style'] | `:disabled` | text color | `$disabled-02` | | `:disabled` | border | `$disabled-02` | +
+ ![Disabled and normal checkbox states](images/checkbox-style-1.png) +
+ +Disabled and normal checkbox states + ## 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. @@ -43,4 +49,10 @@ Checkbox headings and labels should be sentence case, with only the first word i | `.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) + +
+ +Structure and spacing measurements for checkbox | px / rem diff --git a/src/pages/components/checkbox/usage.mdx b/src/pages/components/checkbox/usage.mdx index f02526e17ad..b21869a9cdf 100755 --- a/src/pages/components/checkbox/usage.mdx +++ b/src/pages/components/checkbox/usage.mdx @@ -28,8 +28,16 @@ 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) + + + +By default, checkboxes are unchecked. + ## 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 5e4a7a54c88..a459709a051 100755 --- a/src/pages/components/code-snippet/style.mdx +++ b/src/pages/components/code-snippet/style.mdx @@ -45,11 +45,16 @@ Carbon has defined a set of accessible syntax colors. View an incontext [example | `.bx--snippet--single` | padding-right | 48 / 3 | `$spacing-09` | | `.bx--snippet--single` | padding-left | 16 / 1 | `$spacing-05` | - +
![](images/code-snippet-style-1.png) +
+ + + Structure and spacing measurements for code snippet | px / rem + + ### Multi-line code snippet | Class | Property | px / rem | Spacing token | @@ -63,8 +68,16 @@ Carbon has defined a set of accessible syntax colors. View an incontext [example | `.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) +
+ + + Structure and spacing measurements for multi-line snippet | px / rem + + ### Inline code snippet | Class | Property | px / rem | Spacing token | @@ -74,4 +87,12 @@ Carbon has defined a set of accessible syntax colors. View an incontext [example | `.bx--snippet--inline` | border-radius | 2 | - | | `.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) + +
+ + + Structure and spacing measurements for inline code snippet | px / rem + diff --git a/src/pages/components/code-snippet/usage.mdx b/src/pages/components/code-snippet/usage.mdx index de7d4536fc4..fe060c8432d 100644 --- a/src/pages/components/code-snippet/usage.mdx +++ b/src/pages/components/code-snippet/usage.mdx @@ -19,4 +19,10 @@ Terminal commands are often longer strings and should only appear on one line. A 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 7d6ac497c52..22595488cb2 100755 --- a/src/pages/components/content-switcher/style.mdx +++ b/src/pages/components/content-switcher/style.mdx @@ -46,4 +46,12 @@ Content switchers must have at least two options for the user to choose from. Ea | `: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) + +
+ + + Structure and spacing measurements for content switcher | px / rem + diff --git a/src/pages/components/content-switcher/usage.mdx b/src/pages/components/content-switcher/usage.mdx index f6421056762..6bad3c59461 100755 --- a/src/pages/components/content-switcher/usage.mdx +++ b/src/pages/components/content-switcher/usage.mdx @@ -22,4 +22,10 @@ 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 e15c6d8c659..02d68291d90 100755 --- a/src/pages/components/data-table/style.mdx +++ b/src/pages/components/data-table/style.mdx @@ -40,8 +40,14 @@ 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) +
+ +Data table with various row styling + - ## Size Loading spinners may be scaled down if the loading experience is contextual to a certain item on the page. + + + ![Small loader](images/loading-usage-2.png) + + + diff --git a/src/pages/components/modal/style.mdx b/src/pages/components/modal/style.mdx index 87f2aeb7948..8696cd2ef9f 100755 --- a/src/pages/components/modal/style.mdx +++ b/src/pages/components/modal/style.mdx @@ -42,14 +42,38 @@ Modal titles and labels should be set in sentence case. Keep all titles and labe | `.bx--btn--primary` | width | 50% | – | | `.bx--btn--secondary` | width | 50% | – | +
+ ![Structure and spacing measurements for passive modal](images/modal-style-1.png) +
+ + + +
+ ![Structure and spacing measurements for transactional modal elements](images/modal-style-2.png) +
+ + + +
+ ![Structure and spacing measurements for input modal elements](images/modal-style-4.png) +
+ + + ### Mobile Modals should be full screen on mobile. +
+ ![Modal on mobile](images/modal-style-3.png) + +
+ + diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx index 49df14947eb..e05509fab3f 100755 --- a/src/pages/components/modal/usage.mdx +++ b/src/pages/components/modal/usage.mdx @@ -41,28 +41,58 @@ A modal should have minimal body content. Components that may be used in modals The footer area of a modal typically contains either one or two [buttons](/components/button). Do not include three buttons in the footer of your modal. If you need to include a “help” or other non-primary action, include it as a link in the modal's body. + + + ![Example of modal with one button.](images/modal-usage-4a.png) + + + + + + ![Example of modal with two buttons.](images/modal-usage-4b.png) + + + ## Variations ### Transactional modal Transactional modals are used to validate user decisions or to gain secondary confirmation from the user. Typically, the modal requests either a 'yes' or 'no' response. + + + ![transactional modal](images/modal-usage-1.png) + + + ### Input modal Modals used in this case include input areas that the user may interact with. These may include but are not limited to forms, dropdowns, selectors, and links. + + + ![input modal](images/modal-usage-2.png) + + + ### Passive modal The passive modal is a style of notification. Passive modals are highly disruptive to a user experience, and should only be used if a user must address something immediately. Passive modal notifications are persistent on-screen. Users must either engage with or dismiss the notification. + + + ![Passive modal](images/modal-usage-3.png) + + + diff --git a/src/pages/components/notification/style.mdx b/src/pages/components/notification/style.mdx index 8f0e9977269..ddf03036251 100755 --- a/src/pages/components/notification/style.mdx +++ b/src/pages/components/notification/style.mdx @@ -47,8 +47,14 @@ Notification text should be set in sentence case with only the first word capita | `.bx--inline-notification__close-button` | height, width | 48 / 3 | – | | `close-icon` | margin-top, margin-right | 16 / 1 | `$spacing-05` | +
+ ![Structure and spacing for a toast notification](images/notification-style-1.png) +
+ + + ### Inline notification The width of an _inline notification_ will vary based on content or layout. @@ -63,4 +69,10 @@ The width of an _inline notification_ will vary based on content or layout. | `.bx--inline-notification__close-button` | height, width | 48 / 3 | – | | `close-icon` | icon size | 16 x 16 | – | +
+ ![Structure and spacing for an inline notification](images/notification-style-2.png) + +
+ + diff --git a/src/pages/components/notification/usage.mdx b/src/pages/components/notification/usage.mdx index 1d2f25143e0..67afb8090d4 100755 --- a/src/pages/components/notification/usage.mdx +++ b/src/pages/components/notification/usage.mdx @@ -25,8 +25,14 @@ We recommend that toast notifications automatically disappear after five seconds Icons may provide additional clarity. Icons should be placed to the left of a title. These glyphs (16x16) can be found in the [iconography](/guidelines/iconography/library) library. + + + ![The three icon states](images/notification-usage-1.png) + + + ## Variations | Notification type | Purpose | @@ -40,10 +46,22 @@ Icons may provide additional clarity. Icons should be placed to the left of a ti Toast notifications slide in and out a page from the top-right corner. Actionable notifications do not appear on mobile screen widths. + + + ![Toast notification example](images/notification-usage-2.png) + + + #### Inline notifications Inline notifications appear near its related item. In [forms](/components/form), we recommend placing the inline notification at the bottom of the form, right before the submission buttons. Depending on the context of the page, inline notifications can appear above the content as well. + + + ![Form example with inline notification](images/notification-usage-3.png) + + + diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx index b74a7b167d8..5953a9d35ef 100755 --- a/src/pages/components/number-input/style.mdx +++ b/src/pages/components/number-input/style.mdx @@ -16,8 +16,14 @@ Inputs come in two different colors. The default input color is `$field-01` and | `.bx--number` | border-bottom | `$ui-04` | | `.bx--number__controls` | svg color | `$icon-01` | +
+ ![Number input example](images/number-input-style-2.png) +
+ + + ### Interactive states | Class | Property | Color token | @@ -61,4 +67,10 @@ The height of a number input is always the same. The width however, varies based | `.bx--number__controls` | padding-left, padding-right | 16 / 1 | `$spacing-05` | | `.bx--number` | border-bottom | 1px | – | +
+ ![Structure and spacing for number input](images/number-input-style-1.png) + +
+ + diff --git a/src/pages/components/number-input/usage.mdx b/src/pages/components/number-input/usage.mdx index b910134831e..b3b72bdb635 100755 --- a/src/pages/components/number-input/usage.mdx +++ b/src/pages/components/number-input/usage.mdx @@ -16,4 +16,10 @@ _Number inputs_ are similar to text inputs, but contain controls used to increas - Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) for the label. - See further guidance for using number labels within [forms](/components/form/usage). + + + ![number input example](images/number-input-usage-1.png) + + + diff --git a/src/pages/components/overflow-menu/style.mdx b/src/pages/components/overflow-menu/style.mdx index faebfadddd1..c4a8868ef37 100755 --- a/src/pages/components/overflow-menu/style.mdx +++ b/src/pages/components/overflow-menu/style.mdx @@ -25,8 +25,14 @@ tabs: ['Code', 'Usage', 'Style'] | `option--danger:hover` | background-color | `$hover-danger` | | `option:disabled` | text color | `$disabled-02` | +
+ ![Overflow menu text hover example](images/overflow-menu-style-1.png) +
+ + + ## Typography Overflow menu text should be set in set in sentence case with the first letter of the first word capitalized. @@ -46,4 +52,10 @@ The height of an overflow menu is determined by the amount of content in the men | `.bx--overflow-menu-options` | height | 32 / 2 | – | | `.bx--overflow-menu-options__option--danger` | border-top | 1px | – | +
+ ![Structure and spacing measurements for an overflow menu](images/overflow-menu-style-3.png) + +
+ + diff --git a/src/pages/components/overflow-menu/usage.mdx b/src/pages/components/overflow-menu/usage.mdx index a2ac8d6d68c..c96a9f1c0be 100755 --- a/src/pages/components/overflow-menu/usage.mdx +++ b/src/pages/components/overflow-menu/usage.mdx @@ -13,14 +13,32 @@ _Overflow menu_ is used when additional options are available to the user and th The text within an overflow menu should be direct so users can quickly decide on an action. Actions that could cause a significant change to the user's data (delete app, delete service, etc.) are separated by a horizontal rule and live below the primary set of actions. + + + ![An overflow menu with a significant action](images/overflow-menu-usage-1.png) ![An overflow menu with a significant action](images/overflow-menu-usage-1.png) + + + #### Positioning Depending on where the Overflow Menu appears within the UI, the caret or arrow may be left or right aligned so the Overflow Menu is clearly visible. + + + ![Overflow menu right aligned](images/overflow-menu-usage-2.png) + + + + + + ![overflow menu left aligned](images/overflow-menu-usage-3.png) + + + diff --git a/src/pages/components/pagination/style.mdx b/src/pages/components/pagination/style.mdx index cf419d41d3d..c869b0bb512 100755 --- a/src/pages/components/pagination/style.mdx +++ b/src/pages/components/pagination/style.mdx @@ -33,4 +33,10 @@ The Pagination bar is most commonly used in data tables. The width can vary depe | `.bx--pagination__button` | height, width | 16 / 1 | – | | `arrow` | icon size | 20 x 20px | – | +
+ ![Structure and spacing for pagination](images/pagination-style-1.png) + +
+ + diff --git a/src/pages/components/pagination/usage.mdx b/src/pages/components/pagination/usage.mdx index 57f89e10cf6..ac269cff4e0 100755 --- a/src/pages/components/pagination/usage.mdx +++ b/src/pages/components/pagination/usage.mdx @@ -19,12 +19,30 @@ Clearly identify which page the user is on by displaying the current page number _Previous_ and _next_ chevrons or links are the most useful way for the user to move forward or backward through pages of data. Provide an [inline select](/components/select) in which users can choose the page they wish to navigate to. + + + ![Example of pagination controls on data table](images/pagination-usage-1.png) + + + + + + ![Example of pagination controls on data table](images/pagination-usage-1.png) + + + #### Items per page Use an inline select within the pagination bar so the user can change the amount of data displayed per page. + + + ![Example of items per page on data table](images/pagination-usage-2.png) + + + diff --git a/src/pages/components/progress-indicator/style.mdx b/src/pages/components/progress-indicator/style.mdx index b0eee5240c5..dbcd7257efd 100755 --- a/src/pages/components/progress-indicator/style.mdx +++ b/src/pages/components/progress-indicator/style.mdx @@ -24,8 +24,14 @@ All steps that have been completed are indicated by an outlined circle with a ch | `.bx--progress-label:hover` | text color | `$link-01` | | `.bx--progress__warning` | fill | `$support-01` | +
+ ![Examples of current, completed, and future steps for progress indicator](images/progress-indicator-style-1.png) +
+ + + ## Typography Labels should be one to two words only, with a limit of 16 characters total per label. All labels should be set in sentence case. @@ -46,8 +52,14 @@ The checkmark icon can be found in the [iconography](/style/iconography/library) | `.bx--progress-step svg` | margin-top, margin-right | 16 / 1 | `$spacing-05` | | `.bx--progress-label` | margin-top | 16 / 1 | `$spacing-05` | +
+ ![Structure and spacing for progress indicator](images/progress-indicator-style-2.png) +
+ + + ### Recommended The following specs are not built into the progress indicator component but are recommended by design as the proper amount between progress indicator elements. @@ -56,4 +68,10 @@ The following specs are not built into the progress indicator component but are | --------------- | -------- | -------- | ------------- | | `.bx--progress` | margin | 16 / 1 | `$spacing-05` | +
+ ![Structure and spacing for progress indicator](images/progress-indicator-style-3.png) + +
+ + diff --git a/src/pages/components/progress-indicator/usage.mdx b/src/pages/components/progress-indicator/usage.mdx index 38a240b7118..df8e01cbf87 100755 --- a/src/pages/components/progress-indicator/usage.mdx +++ b/src/pages/components/progress-indicator/usage.mdx @@ -23,4 +23,10 @@ Keeping the user informed of where they currently are within the process or task Use validation to confirm that a previous step has been completed. If the user cannot proceed onto another step without first completing a task, use an [Inline Notification](/experimental/notification) to inform them. + + + ![Example of the progress indicator in a payment UI](images/progress-indicator-usage-1.png) + + + diff --git a/src/pages/components/radio-button/style.mdx b/src/pages/components/radio-button/style.mdx index 37509c578f6..49d08eb51c1 100755 --- a/src/pages/components/radio-button/style.mdx +++ b/src/pages/components/radio-button/style.mdx @@ -42,8 +42,14 @@ _Radio button_ labels and headings should be set in sentence case, with only the | `.bx--radio-button__appearance` | margin-right | 8 / 0.5 | `$spacing-03` | | `.bx--radio-button__appearance` | margin-bottom | 8 / 0.5 | `$spacing-03` | +
+ ![Structure and spacing measurements for a radio button](images/radio-button-style-1.png) +
+ + + ### Recommended The following specs are not built into the radio button component but are recommended by design as the proper amount of space around a grouping of or in between stacked radio buttons. @@ -53,4 +59,10 @@ The following specs are not built into the radio button component but are recomm | Horizontal alignment | margin-right | 16 / 1 | `$spacing-05` | | Vertical alignment | margin-bottom | 8 / 0.5 | `$spacing-03` | +
+ ![Structure and spacing measurements for a radio button](images/radio-button-style-2.png) + +
+ + diff --git a/src/pages/components/search/style.mdx b/src/pages/components/search/style.mdx index 724788c072c..fd996681cfe 100755 --- a/src/pages/components/search/style.mdx +++ b/src/pages/components/search/style.mdx @@ -16,8 +16,14 @@ Inputs come in two different colors. The default input color is `$field-01` and | `.bx--search-input::placeholder` | text color | `$text-03` | | `.bx--search-magnifier` | fill | `$icon-01` | +
+ ![Example of Search using $field-01](images/search-style-4.png) +
+ + + ### Interactive colors | Class | Property | Color token | @@ -27,8 +33,14 @@ Inputs come in two different colors. The default input color is `$field-01` and | `.bx--search-input:disabled` | text color | `$disabled-02` | | `.bx--search-magnifier:disabled` | fill | `$disabled-02` | +
+ ![Enabled, focus, and disabled search states](images/search-style-1.png) +
+ + + ## Typography Search text should be set in sentence case, with only the first letter of the first word capitalized. @@ -50,6 +62,18 @@ The width of the search field should appropriately fit the design and layout of | `.bx--search--lg` | padding-left, padding-right | 48 / 3 | `$spacing-09` | | `.bx--search--sm` | padding-left, padding-right | 32 / 2 | `$spacing-07` | +
+ ![Structure and spacing measurements for regular search](images/search-style-2.png) +
+ + + +
+ ![Structure and spacing measurements for small search](images/search-style-3.png) + +
+ + diff --git a/src/pages/components/search/usage.mdx b/src/pages/components/search/usage.mdx index 8f72af5d8cd..386bcd6f32d 100755 --- a/src/pages/components/search/usage.mdx +++ b/src/pages/components/search/usage.mdx @@ -16,8 +16,14 @@ Search enables users to specify a word or a phrase to find relevant pieces of co ## Format + + + ![Search at the top of the data table](images/search-usage-1.png) + + + ### Search fields Set the user's context for the search with helpful placeholder text within the search field (search documents), that pertains to the page or section the search box is in. Search in the global header should just say search. diff --git a/src/pages/components/select/style.mdx b/src/pages/components/select/style.mdx index 425f7fc9ef3..fecd83086ae 100755 --- a/src/pages/components/select/style.mdx +++ b/src/pages/components/select/style.mdx @@ -17,8 +17,14 @@ Inputs come in two different colors. The default input color is `$field-01` and | `.bx--select--inline` | text color | `$icon-01` | | `.bx--select__arrow` | fill | `$icon-01` | +
+ ![Default and new selection state examples for Select](images/select-style-1.png) +
+ + + ### Interaction states | Class | Property | Color token | @@ -37,8 +43,14 @@ Inputs come in two different colors. The default input color is `$field-01` and **Disabled:** Disabled state has a `.not-allowed` cursor hover. +
+ ![Open, disabled, and more information/help state examples for Select](images/select-style-3.png) +
+ + + ## Typography Select text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Select text should be three words or less. @@ -63,8 +75,14 @@ Select text should be set in sentence case, with only the first word in a phrase | `.bx--select-input` | border-bottom | 1px | – | | `.bx--select-input:focus` | border | 2px | – | +
+ ![Structure and spacing measurements for select](images/select-style-2.png) +
+ + + ### Small Select | Class | Property | px / rem | Spacing token | @@ -73,8 +91,14 @@ Select text should be set in sentence case, with only the first word in a phrase | `.bx--select-input` | padding-left | 8 / 0.5 | `$spacing-03` | | `.bx--select__arrow` | padding-left, padding-right | 8 / 0.5 | `$spacing-03` | +
+ ![Structure and spacing measurements for small select](images/select-style-4.png) +
+ + + ### Inline select | Class | Property | px / rem | Spacing token | @@ -83,4 +107,10 @@ Select text should be set in sentence case, with only the first word in a phrase | `.bx--select-input` | padding-left | 8 / 0.5 | `$spacing-03` | | `.bx--select__arrow` | padding-left, padding-right | 8 / 0.5 | `$spacing-03` | +
+ ![Structure and spacing measurements for Inline Select](images/select-style-6.png) + +
+ + diff --git a/src/pages/components/select/usage.mdx b/src/pages/components/select/usage.mdx index c9142907a56..a46ba78e995 100755 --- a/src/pages/components/select/usage.mdx +++ b/src/pages/components/select/usage.mdx @@ -19,14 +19,26 @@ _Select_ is a type of input that is used in forms, where a user is submitting da _Small selects_ are commonly used in [data tables](/components/data-table). When using a small select for a number selection, the increments in the select should be 10, 25, 50 and 100. The maximum amount of items a user can see per page is 100. + + + ![Example of a small select](images/select-usage-3.png) + + + #### Inline select Inline select is useful when you have multiple select fields within a form. Inline selects have less visual weight on a page because they are borderless. + + + ![Example of a small select](images/select-usage-4.png) + + + ## General guidelines ### Labels @@ -37,8 +49,14 @@ Labels are essential to the usability of forms. Do not place a label inside a _s Real-time validation helps to streamline the process and keep data clean when the user is filling out forms. For full guidelines, refer to the [forms](/components/form) usage page. + + + ![Example of a small select](images/select-usage-1.png) + + + ### Order The order of the select list should be based on the frequency of use. If applicable, the list should be in increasing order relative to the content. In cases of forms, alternative orders such as alphabetical may be more fitting. A horizontal rule can be used to group similar items together. diff --git a/src/pages/components/slider/style.mdx b/src/pages/components/slider/style.mdx index 24752608b90..a274e5b3433 100755 --- a/src/pages/components/slider/style.mdx +++ b/src/pages/components/slider/style.mdx @@ -46,8 +46,12 @@ The width of a slider varies based on page content and layout. | `.bx--slider__track` | margin-left, margin-right | 8 / 0.5 | `$spacing-03` | | `.bx--slider__range-label:last-of-type` | margin-right | 16 / 1 | `$spacing-05` | +
+ ![Structure and spacing measurements for slider](images/slider-style-1.png) +
+ ### Recommended The following specs are not built into the slider component but are recommended by design as the proper sizing for the slider tracking line. diff --git a/src/pages/components/slider/usage.mdx b/src/pages/components/slider/usage.mdx index f4cbefc1755..8801e6a06be 100755 --- a/src/pages/components/slider/usage.mdx +++ b/src/pages/components/slider/usage.mdx @@ -9,10 +9,22 @@ _Sliders_ provide a visual indication of adjustable content, where the user can The slider in its basic form should be accompanied by a label and a number input that doubles as a display for the slider's current value. The basic slider does **not** include discrete values, as the slider represents a percentage of 0-100. In this case it is not necessary for a user to choose a specific value, but instead generally increase or decrease an input. For example, the user increases the slider amount and the volume of the music gets louder. The more complex versions should be used for selecting a specific value within a value range. + + + ![Example of volume slider](images/slider-usage-1.png) + + + + + + ![Example of volume slider](images/slider-usage-1.png) + + + ## Interaction Users can choose a numerical value by: @@ -24,8 +36,14 @@ Users can choose a numerical value by: - ↑ ↓ ← → changes the value by one step size increment. _Example: Pressing `→` changes the inputted value from 59 to 60, increasing the value by 1 unit._ - `Shift` + ↑ ↓ ← → changes the value by 10 step size increments. _Example: Typing_ `Shift` + → _changes the value from 60 to 70, increasing the inputted value by 10 units._ + + + ![slider interaction](images/slider-usage-animation-1.gif) + + + ## Best practices - The slider label should indicate what value the slider is changing. diff --git a/src/pages/components/structured-list/style.mdx b/src/pages/components/structured-list/style.mdx index 2eea041fb5a..e7843f0b9d5 100644 --- a/src/pages/components/structured-list/style.mdx +++ b/src/pages/components/structured-list/style.mdx @@ -45,6 +45,18 @@ Structured list headers should be set in title case, while all other text is set | `.bx--structured-list-td` | padding-left, padding-right | 16 / 1 | `$spacing-05` | | `.bx--structured-list-svg` | height, width | 16 / 1 | – | +
+ ![Spacing and measurements for Structured List](images/structured-list-style-1.png) +
+ + + +
+ ![Spacing and measurements for structured list with selection](images/structured-list-style-2.png) + +
+ + diff --git a/src/pages/components/structured-list/usage.mdx b/src/pages/components/structured-list/usage.mdx index 6309bce89fa..837c08240b4 100755 --- a/src/pages/components/structured-list/usage.mdx +++ b/src/pages/components/structured-list/usage.mdx @@ -16,8 +16,14 @@ _Structured lists_ group content that is similar or related, such as terms and d - A maximum of one paragraph of text is recommended per row. - Nesting items is not recommended, as structured lists are used to present simple data. If you have additional content that needs to be shown, consider using a [data table](/components/data-table), which supports nesting items. + + + ![Structured list to present definitions.](images/structured-list-usage-2.png) + + + ## Interaction Structured lists can be single-select if a user is choosing between a set of options. diff --git a/src/pages/components/tabs/style.mdx b/src/pages/components/tabs/style.mdx index 3f2fa0e05de..991a708bcef 100755 --- a/src/pages/components/tabs/style.mdx +++ b/src/pages/components/tabs/style.mdx @@ -38,4 +38,10 @@ Tab label should be set in sentence case, and should not exceed three words. | `.bx--tabs__nav-link` | padding-top, padding-bottom | 8 / 0.5 | `$spacing-03` | | `bx--tabs__nav-item` | margin-left | 2px | `$spacing-01` | +
+ ![Structure and spacing measurements for tabs](images/tab-style-1.png) + +
+ + diff --git a/src/pages/components/tabs/usage.mdx b/src/pages/components/tabs/usage.mdx index 59781ea0520..e136cdf8b25 100755 --- a/src/pages/components/tabs/usage.mdx +++ b/src/pages/components/tabs/usage.mdx @@ -21,4 +21,10 @@ A maximum of six tabs may be displayed. This is to maintain an uncluttered UI an Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other. + + + ![An example of tabs being used.](images/tab-usage-1.png) + + + diff --git a/src/pages/components/tag/style.mdx b/src/pages/components/tag/style.mdx index 81aef4f5eea..ead17e240ed 100755 --- a/src/pages/components/tag/style.mdx +++ b/src/pages/components/tag/style.mdx @@ -26,4 +26,10 @@ All tags have the same height. However, the width of tags varies based on the am | `.bx--tag` | margin | 8 / 0.5 | `$spacing-03` | | `.bx--tag` | padding-left, padding-right | 8 / 0.5 | `$spacing-03` | +
+ ![Structure and spacing measurementst](images/tag-style-1.png) + +
+ + diff --git a/src/pages/components/tag/usage.mdx b/src/pages/components/tag/usage.mdx index b2ea7f7ae9b..b52f627493f 100755 --- a/src/pages/components/tag/usage.mdx +++ b/src/pages/components/tag/usage.mdx @@ -11,8 +11,20 @@ Multiple or single tags can be used to categorize items. Use tags when content is mapped to multiple categories, and the user needs a way to differentiate between them. + + + ![Example of tags in a data table.](images/tag-usage-2.png) + + + Tags can also be used as a method of filtering data, to show only items within that particular category. + + + ![Example of tags in search.](images/tag-usage-1.png) + + + diff --git a/src/pages/components/text-input/style.mdx b/src/pages/components/text-input/style.mdx index 79357453607..4e9dbcd86ab 100755 --- a/src/pages/components/text-input/style.mdx +++ b/src/pages/components/text-input/style.mdx @@ -17,8 +17,14 @@ Inputs come in two different colors. The default input color is `$field-01` and | `.bx--text-input--light` | background-color | `$field-02` | | `.bx--text-input` | border-bottom | `$ui-04` | +
+ ![Default and user input states for text input in both field colors](images/text-input-style-1.png) +
+ + + ### Interactive states | Class | Property | Color token | @@ -49,6 +55,18 @@ Text input labels and placeholder text should be set in sentence case, with only | `.bx--text-input` | border-bottom | 1px | – | | `.bx--text-input:focus` | border | 2px | – | +
+ ![Structure and spacing measurements for text input](images/text-input-style-2.png) +
+ + + +
+ ![Active, help, error or disabled states for text input](images/text-input-style-3.png) + +
+ + diff --git a/src/pages/components/text-input/usage.mdx b/src/pages/components/text-input/usage.mdx index 9e9b23809ba..256d0df3f84 100755 --- a/src/pages/components/text-input/usage.mdx +++ b/src/pages/components/text-input/usage.mdx @@ -13,8 +13,14 @@ tabs: ['Code', 'Usage', 'Style'] + + + ![An example of a text input.](images/text-input-header-usage.png) + + + ## General guidance There instances, sometimes in the same form, where you need users to enter both short and long form content. Allow the size of the text input box to reflect the length of the content you expect the user to enter. @@ -34,16 +40,28 @@ Where possible, add programmatic assistance. Detect and pre-fill inputs to reduc Real time validation helps to streamline the process and keep data clean when the user is filling out forms. For full guidelines, refer to the [forms](/components/form/usage) usage page. + + + ![Validation text example](images/text-input-usage-2.png) + + + ### Character count Text fields and text areas may have a character limit and counter. Use the character limit and counter to let users know how long their entry can be before they begin typing. While useful for data collection, character count is not an intuitive way to communicate content length to users. Character count allows a user to understand an input error if they surpass the character limit. + + + ![An example of a text area.](images/text-area-usage-1.png) + + + ## Content ### Labels @@ -60,10 +78,22 @@ Effective form labeling helps users understand what information to enter into a Placeholder text provides hints or examples of what to enter. Placeholder text disappears after the user begins entering data into the input and should not contain crucial information. Use sentence-style capitalization, and in most cases, write the text as a direct statement without punctuation. + + + ![Placeholder text example](images/text-input-usage-1.png) + + + ### Help text Help text is pertinent information that assists the user in completing a field. Help text is always available when the input is focused and appears underneath the label. Use sentence-style capitalization, and in most cases, write the text as full sentences with punctuation. + + + ![Help text example](images/text-input-usage-3.png) + + + diff --git a/src/pages/components/tile/style.mdx b/src/pages/components/tile/style.mdx index 236159fdb17..a840ad04374 100644 --- a/src/pages/components/tile/style.mdx +++ b/src/pages/components/tile/style.mdx @@ -23,8 +23,14 @@ tabs: ['Code', 'Usage', 'Style'] | `.bx--tile` | min-width | 128 / 8 | – | | `.bx--tile` | padding (minimum) | 16 / 1 | `$spacing-05` | +
+ ![Structure and spacing measurements for tile](images/tile-style-2.png) +
+ + + ### Proportions for grid | Percentage | XL 1600-1200 | L 1200-992 | M 992-768 | S 768-576 | XS 576-0 | diff --git a/src/pages/components/tile/usage.mdx b/src/pages/components/tile/usage.mdx index 70a36efc409..ebf2ff80790 100755 --- a/src/pages/components/tile/usage.mdx +++ b/src/pages/components/tile/usage.mdx @@ -19,22 +19,46 @@ _All of the images below represent examples of types of content that could be pr Read-only tiles are used to display information to the user, such as features or services offered. Read-only tiles are often seen on marketing pages to promote content. These tiles can have internal calls-to-action (CTAs), such as a [button](/components/button) or a [link](/components/link). + + + ![Example image of read-only tiles.](images/tile-usage-1.png) + + + ### Clickable Clickable tiles can be used as navigational items, where the entire tile is a clickable state, which redirects the user to a new page. Clickable tiles cannot contain separate internal CTAs. + + + ![Example image of clickable tiles.](images/tile-usage-2.png) + + + ### Selectable Selectable tiles work like a [radio button](/components/radio-button), where the entire tile is a click target. Selectable tiles may contain internal CTAs (like links to docs) if the internal CTA is given its own click target. Selectable tiles work well for presenting options to a user in a structured manner, such as a set of pricing plans. + + + ![Example image of selectable tiles.](images/tile-usage-3.png) + + + ### Expandable Expandable tiles are helpful for hiding/showing larger amounts of content to a user. They can only be stacked in a single column, and cannot live in a row or horizontal grid. When expanded, tiles push content down the page. Expandable tiles may contain internal CTAs (like links to docs) if the internal CTA is given its own click target. + + + ![Example image of expandable tiles.](images/tile-usage-4.png) + + + diff --git a/src/pages/components/toggle/style.mdx b/src/pages/components/toggle/style.mdx index 5bb3a50859a..6637ea246b3 100755 --- a/src/pages/components/toggle/style.mdx +++ b/src/pages/components/toggle/style.mdx @@ -16,8 +16,14 @@ tabs: ['Code', 'Usage', 'Style'] | `.bx--toggle:checked` | background-color | `$support-02` | | `.bx--toggle__check` | fill | `$support-02` | +
+ ![Inactive, inactive hover, and active states for a toggle](images/toggle-style-1.png) +
+ + + ### Interactive states | Class | Property | Color token | @@ -49,8 +55,14 @@ Toggle labels should be set in sentence case, with only the first word in a phra | `.bx--toggle__label` | margin-top, margin-bottom | 16 / 1 | `$spacing-05` | | `.bx--toggle__text--left` | margin-left | 8 / 0.5 | `$spacing-03` | +
+ ![Structure and spacing measurements for toggle](images/toggle-style-2.png) +
+ + + ### Small toggle | Class | Property | px / rem | Spacing token | @@ -60,4 +72,10 @@ Toggle labels should be set in sentence case, with only the first word in a phra | `.bx--toggle--small +`
`.bx--toggle__appearance:after` | height, width | 10 / 0.625 | – | | `.bx--toggle--small` | margin-top, margin-bottom | 16 / 1 | `$spacing-05` | +
+ ![Structure and spacing measurements for small toggle](images/toggle-style-3.png) + +
+ + diff --git a/src/pages/components/toggle/usage.mdx b/src/pages/components/toggle/usage.mdx index d83a2ebc48c..ee37685cebe 100755 --- a/src/pages/components/toggle/usage.mdx +++ b/src/pages/components/toggle/usage.mdx @@ -7,8 +7,14 @@ tabs: ['Code', 'Usage', 'Style'] _Toggle_ is a control that is used to quickly switch between two possible states. Toggles are only used for these binary actions that occur immediately after the user “flips” the toggle switch. They are commonly used for “on/off” switches. + + + ![Example image of on and off toggles.](images/toggle-usage-1.png) + + + #### Heading A heading may accompany a toggle to further clarify on the action the toggle will perform. @@ -25,4 +31,10 @@ Use adjectives rather than verbs to describe labels and the state of the object Small toggles are more compact in size, therefore they can be used in use cases such as [data tables](/components/data-table/code). + + + ![Example image of small toggles within a data table.](images/toggle-usage-2.png) + + + diff --git a/src/pages/components/tooltip/style.mdx b/src/pages/components/tooltip/style.mdx index 052fccc5a76..c98ffea5e85 100755 --- a/src/pages/components/tooltip/style.mdx +++ b/src/pages/components/tooltip/style.mdx @@ -15,8 +15,14 @@ tabs: ['Code', 'Usage', 'Style'] | `.bx--tooltip__caret` | background-color | `$inverse-02` | | `p` | text color | `$inverse-01` | +
+ ![Closed and open states for a tooltip](images/tooltip-style-1.png) +
+ + + ### Icon tooltip | Class | Property | Color token | @@ -57,8 +63,14 @@ All tooltip types have a varying height based on the amount of content they cont | `.bx--tooltip--shown` | padding | 16 / 1 | `$spacing-05` | | `.bx--tooltip` | margin-top | 8 / 0.5 | `$spacing-03` | +
+ ![Structure and spacing measurements for an interactive tooltip](images/tooltip-style-2.png) +
+ + + ### Definition tooltip | Class | Property | px / rem | Spacing token | @@ -69,8 +81,14 @@ All tooltip types have a varying height based on the amount of content they cont | `.bx--tooltip__trigger` | border-bottom | 1px | – | | `.bx--tooltip__caret` | margin-top | 4px | `$spacing-02` | +
+ ![Structure and spacing measurements for a definition tooltip](images/tooltip-style-3.png) +
+ + + ### Icon tooltip | Class | Property | px / rem | Spacing token | @@ -80,10 +98,22 @@ All tooltip types have a varying height based on the amount of content they cont | `.bx--tooltip--icon__top:before`
`.bx--tooltip--icon__bottom:before` | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` | | `.bx--tooltip__caret` | margin-top | 8 / 0.5 | `$spacing-03` | +
+ ![Structure and spacing measurements for an icon tooltip](images/tooltip-style-4.png) +
+ + + ### Placement Tooltips should be placed below the tooltip icon unless it is within the height of the tooltip box plus 16px / 1rem of the bottom of the page. In that instance, the tooltip should appear above the icon or defined word. On mobile, tooltips can only appear below the tooltip icon. +
+ ![Placement examples for a tooltip](images/tooltip-style-5.png) + +
+ + diff --git a/src/pages/components/tooltip/usage.mdx b/src/pages/components/tooltip/usage.mdx index 1d7f5d98a84..a49c5ac0102 100755 --- a/src/pages/components/tooltip/usage.mdx +++ b/src/pages/components/tooltip/usage.mdx @@ -13,12 +13,30 @@ Icon tooltips and interactive tooltips may be positioned **top**, **bottom**, ** Note that left and right positioning is not available for [definition tooltip](#definition-tooltip). This ensures the tooltip does not obstruct important information to the left or right of the trigger word. + + + ![Tooltip positiion top.](images/tooltip-usage-1-top.png) + + + + + + ![Tooltip position left and right.](images/tooltip-usage-1-left-right.png) + + + + + + ![Tooltip position bottom.](images/tooltip-usage-1-bottom.png) + + + ## Variants Tooltips provide additional, contextual information. Each variant achieves this for different design needs. @@ -27,8 +45,14 @@ Tooltips provide additional, contextual information. Each variant achieves this An icon tooltip is used to clarify the action or name of an interactive icon button. + + + ![Example image of an icon tooltip.](images/tooltip-usage-1.png) + + + #### Guidance: - The tooltip content should only contain one or two words. @@ -41,8 +65,14 @@ An icon tooltip is used to clarify the action or name of an interactive icon but The definition tooltip provides additional help or defines an item or term. It may be used on the label of a UI element, or on a word embedded in a paragraph. + + + ![Definition tooltip used to define a word within a paragraph.](images/definition_tooltip_image.png) + + + #### Guidance: - Should contain brief, read-only text @@ -57,8 +87,14 @@ The definition tooltip provides additional help or defines an item or term. It m Interactive tooltips may contain rich text and other interactive elements like buttons or links. In general, hiding interactive content in a tooltip is discouraged. Interactive tooltips are best used for onboarding experiences and product tours. + + + ![Example of an interactive tooltip in a product walk through.](images/tooltip-usage-3-v2.png) + + + #### Guidance: - If a user may need to visit an external resource, like while using a form, include a link in your interactive tooltip From 845880c99738fffd3d68399b24564a0c985260e3 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Fri, 9 Aug 2019 10:39:35 -0500 Subject: [PATCH 4/7] chore: add all image captions to component pages --- .../components/UI-shell-header/style.mdx | 43 ++++++++++++++++--- .../components/UI-shell-header/usage.mdx | 16 ++++++- .../components/UI-shell-left-panel/style.mdx | 20 +++++++++ .../components/UI-shell-left-panel/usage.mdx | 16 +++++++ .../components/UI-shell-right-panel/style.mdx | 12 ++++++ .../components/UI-shell-right-panel/usage.mdx | 13 ++++++ src/pages/components/dropdown/style.mdx | 26 ++++++++--- src/pages/components/file-uploader/style.mdx | 4 +- src/pages/components/form/style.mdx | 11 +++-- src/pages/components/inline-loading/style.mdx | 10 ++--- src/pages/components/link/style.mdx | 4 +- src/pages/components/list/style.mdx | 5 ++- src/pages/components/loading/style.mdx | 6 ++- src/pages/components/modal/style.mdx | 14 ++++-- src/pages/components/notification/style.mdx | 8 +++- src/pages/components/number-input/style.mdx | 6 ++- src/pages/components/overflow-menu/style.mdx | 4 +- src/pages/components/pagination/style.mdx | 2 +- .../components/progress-indicator/style.mdx | 13 ++++-- src/pages/components/radio-button/style.mdx | 8 +++- src/pages/components/search/style.mdx | 12 ++++-- src/pages/components/select/style.mdx | 15 ++++--- .../components/structured-list/style.mdx | 6 ++- src/pages/components/tabs/style.mdx | 2 +- src/pages/components/tag/style.mdx | 2 +- src/pages/components/text-input/style.mdx | 11 +++-- src/pages/components/tile/style.mdx | 2 +- src/pages/components/toggle/style.mdx | 10 +++-- src/pages/components/tooltip/style.mdx | 16 ++++--- 29 files changed, 247 insertions(+), 70 deletions(-) diff --git a/src/pages/components/UI-shell-header/style.mdx b/src/pages/components/UI-shell-header/style.mdx index 71cd42ce63d..7f11ad684e9 100644 --- a/src/pages/components/UI-shell-header/style.mdx +++ b/src/pages/components/UI-shell-header/style.mdx @@ -26,8 +26,16 @@ _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-trigger interactive states + + + + ### Menu-item | Class | Property | Color value | @@ -42,8 +50,16 @@ _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 interactive states + + + + ### Sub-menu | Class | Property | Color value | @@ -58,6 +74,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti ![Sub-menu interactive states](images/header-style-7.png) + + ### Action | Class | Property | Color value | @@ -69,8 +87,16 @@ _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) +Header action interactive states + + + + ## Typography Menu labels and text should be set in sentence case. @@ -81,13 +107,6 @@ Menu labels and text should be set in sentence case. | `.bx--header__name--prefix` | 14 / 0.875 | SemiBold / 600 | `$heading-01` | | `.bx--header__menu-item` | 14 / 0.875 | Regular / 400 | `$body-short-01` | - - ## Structure The header should span the full width of the browser window. The header can either stay sticky to the top of the browser or scroll away. @@ -106,10 +125,20 @@ The header should span the full width of the browser window. The header can eith ![ui shell header spec](images/header-style-2.png) + + Structure and spacing measurements for UI shell header | px | rem + + ![ui shell header submenu spec](images/header-style-3.png) + + Structure and spacing measurements for header submenu | px | rem + + ### 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) + +Responsive behavior for UI shell header diff --git a/src/pages/components/UI-shell-header/usage.mdx b/src/pages/components/UI-shell-header/usage.mdx index bd9e39f36b2..f4a49e1ee64 100644 --- a/src/pages/components/UI-shell-header/usage.mdx +++ b/src/pages/components/UI-shell-header/usage.mdx @@ -16,6 +16,8 @@ tabs: ['Code', 'Usage', 'Style'] ![UI shell header](images/zones-platform.png) +UI shell header + ## Resources @@ -40,13 +42,17 @@ The UI shell is made up of three components: The header, the [left panel](/compo ![UI shell components.](images/shell-usage-1.png) +UI shell components + 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) +![Primary header](images/header-usage-2.png) + +Primary header ### Header elements @@ -101,8 +107,14 @@ 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. | @@ -119,3 +131,5 @@ 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) + +Header responsive behavior diff --git a/src/pages/components/UI-shell-left-panel/style.mdx b/src/pages/components/UI-shell-left-panel/style.mdx index e3553edb1d5..8e863fc81ee 100644 --- a/src/pages/components/UI-shell-left-panel/style.mdx +++ b/src/pages/components/UI-shell-left-panel/style.mdx @@ -16,8 +16,16 @@ _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) +UI shell side-nav example. + + + + ### Link | Class | Property | Color value | @@ -33,6 +41,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti ![Link states](images/left-nav-style-4.png) +Link states + ### Sub-menu | Class | Property | Color value | @@ -53,6 +63,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti ![Sub-menu states](images/left-nav-style-4.png) +Sub-menu states + ### Icon | Class | Property | Color value | @@ -97,8 +109,16 @@ The panel spans the full height of the browser and is fixed to the left edge of ![ui shell side-nav](images/left-nav-style-2.png) + + Structure and spacing measurements for the side-nav | px | rem. + + ![ui shell side-nav with icons](images/left-nav-style-3.png) + + Structure and spacing measurements for side-nav with icons | px | rem. + + diff --git a/src/pages/components/UI-shell-left-panel/usage.mdx b/src/pages/components/UI-shell-left-panel/usage.mdx index e265c3506a3..de28d7e6f8e 100644 --- a/src/pages/components/UI-shell-left-panel/usage.mdx +++ b/src/pages/components/UI-shell-left-panel/usage.mdx @@ -35,14 +35,30 @@ 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) +UI shell components + + + + ## 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) +Left panel with nested sub-menus. + + + + ## 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 4b61cfb7fec..26ff4c8944c 100644 --- a/src/pages/components/UI-shell-right-panel/style.mdx +++ b/src/pages/components/UI-shell-right-panel/style.mdx @@ -13,8 +13,16 @@ _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) +UI shell switcher example + + + + ### Context switcher | Class | Property | Color value | @@ -48,3 +56,7 @@ The panel spans the full height of the browser and is fixed to the right edge of | `.bx--header__action` | svg | 20 / 1.25 | – | ![UI shell right panel example.](images/right-panel-style-2.png) + + + Structure and spacing measurements for right panel | px | rem. + diff --git a/src/pages/components/UI-shell-right-panel/usage.mdx b/src/pages/components/UI-shell-right-panel/usage.mdx index 4f78f814e5a..e7ac7bb6e6c 100644 --- a/src/pages/components/UI-shell-right-panel/usage.mdx +++ b/src/pages/components/UI-shell-right-panel/usage.mdx @@ -35,8 +35,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) +UI shell components + + + + ## 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. @@ -45,6 +53,11 @@ Note that the switcher also lives in a right panel. ![Header panel and switcher.](images/right-panel-usage-1.png) + + The right panel configured as an empty header panel (left) and a switcher + (right). + + #### 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/dropdown/style.mdx b/src/pages/components/dropdown/style.mdx index e3eb6da7888..eb5de31e5d1 100644 --- a/src/pages/components/dropdown/style.mdx +++ b/src/pages/components/dropdown/style.mdx @@ -28,7 +28,7 @@ Inputs come in two different colors. The default input color is `$field-01` and
- +Example of a closed and opened dropdown ### Interactive states @@ -81,7 +81,7 @@ Dropdowns have two states, open and closed. An open and closed dropdown should b
- +Structure and spacing measurements for dropdown | px / rem ## Multi-select dropdown @@ -95,8 +95,16 @@ Dropdowns have two states, open and closed. An open and closed dropdown should b | `.bx--list-box__selection--multi` | height | 24 / 1.5 | – | | `.bx--list-box__selection--multi` | margin-right | 16 / 1 | `$spacing-05` | +
+ ![Structure and spacing for a multi-select dropdown](images/dropdown-style-3.png) +
+ + + Structure and spacing measurements for a multi-select dropdown | px / rem + + ## Inline dropdown | Class | Property | px / rem | Spacing token | @@ -113,14 +121,20 @@ Dropdowns have two states, open and closed. An open and closed dropdown should b - +Structure and spacing for inline dropdown | px / rem ### Inline dropdown states Inline select has two different states; one for mouse hover and one for keyboard focus. +
+ ![Hover and focus states for inline dropdown](images/dropdown-style-6.png) +
+ +Hover and focus states for inline dropdown + ## Filtering Filtering can be used with dropdown and multi-select dropdown but not inline dropdown. @@ -139,7 +153,7 @@ Filtering can be used with dropdown and multi-select dropdown but not inline dro - +Spacing for multi-select dropdown with filtering | px / rem
@@ -147,4 +161,6 @@ Filtering can be used with dropdown and multi-select dropdown but not inline dro
- + + Interaction states for multi-select dropdown with filtering | px / rem + diff --git a/src/pages/components/file-uploader/style.mdx b/src/pages/components/file-uploader/style.mdx index ee6805ad6f8..c3bafc79a65 100644 --- a/src/pages/components/file-uploader/style.mdx +++ b/src/pages/components/file-uploader/style.mdx @@ -48,7 +48,9 @@ The width of an uploaded file varies based on the content and layout of a design - + + Structure and spacing measurements for file uploader | px / rem + ### Recommended diff --git a/src/pages/components/form/style.mdx b/src/pages/components/form/style.mdx index 7f63429cb23..72fc2882cca 100644 --- a/src/pages/components/form/style.mdx +++ b/src/pages/components/form/style.mdx @@ -15,7 +15,10 @@ Refer to the [text input](/components/text-input), [dropdown](/components/dropdo - + + Example of light fields with $field-02 (left) and the default version with + $field-01 (right) + ## Typography @@ -53,7 +56,9 @@ All icons can be found on the [iconography](/guidelines/iconography/library) lib - + + Structure and spacing measurements for a double column form | px / rem +
@@ -61,4 +66,4 @@ All icons can be found on the [iconography](/guidelines/iconography/library) lib
- +Structure and spacing measurements diff --git a/src/pages/components/inline-loading/style.mdx b/src/pages/components/inline-loading/style.mdx index 86d3079f935..3f747081c66 100644 --- a/src/pages/components/inline-loading/style.mdx +++ b/src/pages/components/inline-loading/style.mdx @@ -32,23 +32,21 @@ Button text should be set in sentence case, with only the first word in a phrase - -
![Inline loading states](images/inline-loading-style-2.png)
- -
![Inline loading spinner in context example](images/inline-loading-style-3.png)
- + + Structure measurements for small and large loading spinner | px / rem + ### Placement @@ -60,4 +58,4 @@ The inline loading component should appear during any user action loading. If bu - +Example of a inline loading in product context diff --git a/src/pages/components/link/style.mdx b/src/pages/components/link/style.mdx index d94843e59fb..f72eaa31a81 100755 --- a/src/pages/components/link/style.mdx +++ b/src/pages/components/link/style.mdx @@ -25,7 +25,7 @@ tabs: ['Code', 'Usage', 'Style'] - +Normal, hover, disabled link states ## Typography @@ -51,4 +51,4 @@ Links can be grouped horizontally or vertically and must be underlined. The foll - +Structure and spacing measurements for Link | px / rem diff --git a/src/pages/components/list/style.mdx b/src/pages/components/list/style.mdx index 4002993742a..41d307cbb6a 100755 --- a/src/pages/components/list/style.mdx +++ b/src/pages/components/list/style.mdx @@ -36,4 +36,7 @@ Level 1 unordered list points are bulleted while Level 2 points are marked with - + + Structure and spacing measurements for an ordered and an unordered list | px / + rem + diff --git a/src/pages/components/loading/style.mdx b/src/pages/components/loading/style.mdx index 8cbd6d8b65c..a5e8c656188 100755 --- a/src/pages/components/loading/style.mdx +++ b/src/pages/components/loading/style.mdx @@ -24,7 +24,9 @@ tabs: ['Code', 'Usage', 'Style'] - + + Structure measurements for small and large loading spinner | px / rem + ### Placement @@ -36,4 +38,4 @@ The large loading spinner should appear centered over a page or content that it - +Example of a large loading spinner in product context diff --git a/src/pages/components/modal/style.mdx b/src/pages/components/modal/style.mdx index 8696cd2ef9f..bd87f8b7d3f 100755 --- a/src/pages/components/modal/style.mdx +++ b/src/pages/components/modal/style.mdx @@ -48,7 +48,9 @@ Modal titles and labels should be set in sentence case. Keep all titles and labe - + + Structure and spacing measurements for a passive modal | px / rem +
@@ -56,7 +58,9 @@ Modal titles and labels should be set in sentence case. Keep all titles and labe
- + + Structure and spacing measurements for a transactional modal | px / rem +
@@ -64,7 +68,9 @@ Modal titles and labels should be set in sentence case. Keep all titles and labe
- + + Structure and spacing measurements for a input modal | px / rem + ### Mobile @@ -76,4 +82,4 @@ Modals should be full screen on mobile. - +Example of a modal on a mobile screen diff --git a/src/pages/components/notification/style.mdx b/src/pages/components/notification/style.mdx index ddf03036251..5844884600d 100755 --- a/src/pages/components/notification/style.mdx +++ b/src/pages/components/notification/style.mdx @@ -53,7 +53,9 @@ Notification text should be set in sentence case with only the first word capita - + + Structure and spacing measurements for a toast notification | px / rem + ### Inline notification @@ -75,4 +77,6 @@ The width of an _inline notification_ will vary based on content or layout. - + + Structure and spacing measurements for a inline notification | px / rem + diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx index 5953a9d35ef..cdb766d62ab 100755 --- a/src/pages/components/number-input/style.mdx +++ b/src/pages/components/number-input/style.mdx @@ -22,7 +22,7 @@ Inputs come in two different colors. The default input color is `$field-01` and - +Number input example ### Interactive states @@ -73,4 +73,6 @@ The height of a number input is always the same. The width however, varies based - + + Structure and spacing measurements for a number input | px / rem + diff --git a/src/pages/components/overflow-menu/style.mdx b/src/pages/components/overflow-menu/style.mdx index c4a8868ef37..61af8f74486 100755 --- a/src/pages/components/overflow-menu/style.mdx +++ b/src/pages/components/overflow-menu/style.mdx @@ -31,7 +31,7 @@ tabs: ['Code', 'Usage', 'Style'] - +Text and warning hover examples for overflow menu ## Typography @@ -57,5 +57,3 @@ The height of an overflow menu is determined by the amount of content in the men ![Structure and spacing measurements for an overflow menu](images/overflow-menu-style-3.png) - - diff --git a/src/pages/components/pagination/style.mdx b/src/pages/components/pagination/style.mdx index c869b0bb512..89670d09d4b 100755 --- a/src/pages/components/pagination/style.mdx +++ b/src/pages/components/pagination/style.mdx @@ -39,4 +39,4 @@ The Pagination bar is most commonly used in data tables. The width can vary depe - +Structure and spacing measurements for Pagination | px / rem diff --git a/src/pages/components/progress-indicator/style.mdx b/src/pages/components/progress-indicator/style.mdx index dbcd7257efd..dca6857421a 100755 --- a/src/pages/components/progress-indicator/style.mdx +++ b/src/pages/components/progress-indicator/style.mdx @@ -30,7 +30,9 @@ All steps that have been completed are indicated by an outlined circle with a ch - + + Examples of current, completed, and future steps for progress indicator + ## Typography @@ -58,7 +60,9 @@ The checkmark icon can be found in the [iconography](/style/iconography/library) - + + Structure and spacing measurements for progress indicator | px / rem + ### Recommended @@ -74,4 +78,7 @@ The following specs are not built into the progress indicator component but are - + + Recommended structure and spacing measurements for progress indicator | px / + rem + diff --git a/src/pages/components/radio-button/style.mdx b/src/pages/components/radio-button/style.mdx index 49d08eb51c1..32197ce5b1d 100755 --- a/src/pages/components/radio-button/style.mdx +++ b/src/pages/components/radio-button/style.mdx @@ -48,7 +48,9 @@ _Radio button_ labels and headings should be set in sentence case, with only the - + + Structure and spacing measurements for radio button | px | rem + ### Recommended @@ -65,4 +67,6 @@ The following specs are not built into the radio button component but are recomm - + + Structure and spacing measurements for radio button | px | rem + diff --git a/src/pages/components/search/style.mdx b/src/pages/components/search/style.mdx index fd996681cfe..03f28fffd33 100755 --- a/src/pages/components/search/style.mdx +++ b/src/pages/components/search/style.mdx @@ -22,7 +22,7 @@ Inputs come in two different colors. The default input color is `$field-01` and - +Example of Search using $field-01 ### Interactive colors @@ -39,7 +39,7 @@ Inputs come in two different colors. The default input color is `$field-01` and - +Examples of enabled, focus, and disabled search states ## Typography @@ -68,7 +68,9 @@ The width of the search field should appropriately fit the design and layout of - + + Structure and spacing measurements for large search | px | rem +
@@ -76,4 +78,6 @@ The width of the search field should appropriately fit the design and layout of
- + + Structure and spacing measurements for small search | px | rem + diff --git a/src/pages/components/select/style.mdx b/src/pages/components/select/style.mdx index fecd83086ae..602a623bb99 100755 --- a/src/pages/components/select/style.mdx +++ b/src/pages/components/select/style.mdx @@ -23,7 +23,7 @@ Inputs come in two different colors. The default input color is `$field-01` and - +Examples of default and new selection select states ### Interaction states @@ -49,7 +49,7 @@ Inputs come in two different colors. The default input color is `$field-01` and - +Examples of open, disabled, and help select states ## Typography @@ -81,7 +81,7 @@ Select text should be set in sentence case, with only the first word in a phrase - +Structure and spacing measurements for select | px / rem ### Small Select @@ -97,7 +97,10 @@ Select text should be set in sentence case, with only the first word in a phrase - + + Structure and spacing measurements for small select | px / rem & examples of + open and disabled small select states + ### Inline select @@ -113,4 +116,6 @@ Select text should be set in sentence case, with only the first word in a phrase - + + Structure and spacing measurements for inline select (focused) | px / rem + diff --git a/src/pages/components/structured-list/style.mdx b/src/pages/components/structured-list/style.mdx index e7843f0b9d5..57df8b1d419 100644 --- a/src/pages/components/structured-list/style.mdx +++ b/src/pages/components/structured-list/style.mdx @@ -51,7 +51,7 @@ Structured list headers should be set in title case, while all other text is set - +Spacing and measurements for structured list | px / rem
@@ -59,4 +59,6 @@ Structured list headers should be set in title case, while all other text is set
- + + Spacing and measurements for structured list with selection | px / rem + diff --git a/src/pages/components/tabs/style.mdx b/src/pages/components/tabs/style.mdx index 991a708bcef..fa59b7748ae 100755 --- a/src/pages/components/tabs/style.mdx +++ b/src/pages/components/tabs/style.mdx @@ -44,4 +44,4 @@ Tab label should be set in sentence case, and should not exceed three words. - +Structure and spacing measurements for tile | px / rem diff --git a/src/pages/components/tag/style.mdx b/src/pages/components/tag/style.mdx index ead17e240ed..08e2d8fd802 100755 --- a/src/pages/components/tag/style.mdx +++ b/src/pages/components/tag/style.mdx @@ -32,4 +32,4 @@ All tags have the same height. However, the width of tags varies based on the am - +Structure and spacing measurements for a tag | px / rem diff --git a/src/pages/components/text-input/style.mdx b/src/pages/components/text-input/style.mdx index 4e9dbcd86ab..1b2a58ac8b1 100755 --- a/src/pages/components/text-input/style.mdx +++ b/src/pages/components/text-input/style.mdx @@ -23,7 +23,10 @@ Inputs come in two different colors. The default input color is `$field-01` and - + + Examples of default and user-input states for text input in both $field-02 + (left) and $field-01 (right) + ### Interactive states @@ -61,7 +64,7 @@ Text input labels and placeholder text should be set in sentence case, with only - +Structure and spacing measurements for text input | px / rem
@@ -69,4 +72,6 @@ Text input labels and placeholder text should be set in sentence case, with only
- + + Examples of active, help, error and disabled text input states + diff --git a/src/pages/components/tile/style.mdx b/src/pages/components/tile/style.mdx index a840ad04374..135f413df2f 100644 --- a/src/pages/components/tile/style.mdx +++ b/src/pages/components/tile/style.mdx @@ -29,7 +29,7 @@ tabs: ['Code', 'Usage', 'Style'] - +Structure and spacing measurements for tile | px / rem ### Proportions for grid diff --git a/src/pages/components/toggle/style.mdx b/src/pages/components/toggle/style.mdx index 6637ea246b3..58cca8170a8 100755 --- a/src/pages/components/toggle/style.mdx +++ b/src/pages/components/toggle/style.mdx @@ -22,7 +22,9 @@ tabs: ['Code', 'Usage', 'Style'] - + + Examples of inactive, inactive hover, and active states for a toggle + ### Interactive states @@ -61,7 +63,7 @@ Toggle labels should be set in sentence case, with only the first word in a phra - +Structure and spacing measurements for toggle | px / rem ### Small toggle @@ -78,4 +80,6 @@ Toggle labels should be set in sentence case, with only the first word in a phra - + + Structure and spacing measurements for small toggle | px / rem + diff --git a/src/pages/components/tooltip/style.mdx b/src/pages/components/tooltip/style.mdx index c98ffea5e85..f171f7a0b00 100755 --- a/src/pages/components/tooltip/style.mdx +++ b/src/pages/components/tooltip/style.mdx @@ -21,7 +21,7 @@ tabs: ['Code', 'Usage', 'Style'] - +Example of closed and open states for a tooltip ### Icon tooltip @@ -69,7 +69,9 @@ All tooltip types have a varying height based on the amount of content they cont - + + Structure and spacing measurements for an interactive tooltip | px / rem + ### Definition tooltip @@ -87,7 +89,9 @@ All tooltip types have a varying height based on the amount of content they cont - + + Structure and spacing measurements for a definition tooltip | px / rem + ### Icon tooltip @@ -104,7 +108,9 @@ All tooltip types have a varying height based on the amount of content they cont - + + Structure and spacing measurements for an icon tooltip | px / rem + ### Placement @@ -116,4 +122,4 @@ Tooltips should be placed below the tooltip icon unless it is within the height - +Placement examples for a tooltip From 66fceab573edc46d61c81b12394a52812df7dd35 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Fri, 9 Aug 2019 10:40:28 -0500 Subject: [PATCH 5/7] chore: typo --- src/pages/components/UI-shell-right-panel/style.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/components/UI-shell-right-panel/style.mdx b/src/pages/components/UI-shell-right-panel/style.mdx index 26ff4c8944c..c8c26a9a3cf 100644 --- a/src/pages/components/UI-shell-right-panel/style.mdx +++ b/src/pages/components/UI-shell-right-panel/style.mdx @@ -20,8 +20,8 @@ _Note: The UI Shell does not currently use the Carbon theme tokens; theming opti UI shell switcher example - + ### Context switcher From 9b2c41e71259ccf5d7e5b5da20a51a38ef0fa13d Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Fri, 9 Aug 2019 10:42:31 -0500 Subject: [PATCH 6/7] chore: update shell link --- src/components/ComponentOverview/ComponentOverview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ComponentOverview/ComponentOverview.js b/src/components/ComponentOverview/ComponentOverview.js index 0999eb348a3..401fb0c9ebc 100644 --- a/src/components/ComponentOverview/ComponentOverview.js +++ b/src/components/ComponentOverview/ComponentOverview.js @@ -11,7 +11,7 @@ class ComponentOverview extends React.Component { if (component === 'Multiselect') { componentUrl = '/components/dropdown/code'; } else if (component === 'UI shell') { - componentUrl = '/experimental/ui-shell/cpde'; + componentUrl = '/components/UI-shell-header/code'; } else { componentUrl = `/components/${component .toLowerCase() From 15147dbfc406a6fdcd493b2b51c5e3d2c490763b Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Fri, 9 Aug 2019 10:55:32 -0500 Subject: [PATCH 7/7] fix: add component styles --- src/gatsby-theme-carbon/styles/_global.scss | 46 ++++++++ src/styles/_overrides.scss | 116 ++++++++++++++++++++ src/styles/index.scss | 1 + 3 files changed, 163 insertions(+) create mode 100644 src/gatsby-theme-carbon/styles/_global.scss create mode 100644 src/styles/_overrides.scss diff --git a/src/gatsby-theme-carbon/styles/_global.scss b/src/gatsby-theme-carbon/styles/_global.scss new file mode 100644 index 00000000000..9d30e39d583 --- /dev/null +++ b/src/gatsby-theme-carbon/styles/_global.scss @@ -0,0 +1,46 @@ +//--------------------------------------- +// Carbon components +//--------------------------------------- +@import '~carbon-components/scss/components/button/button'; +@import '~carbon-components/scss/components/copy-button/copy-button'; +@import '~carbon-components/scss/components/file-uploader/file-uploader'; +@import '~carbon-components/scss/components/checkbox/checkbox'; +@import '~carbon-components/scss/components/combo-box/combo-box'; +@import '~carbon-components/scss/components/radio-button/radio-button'; +@import '~carbon-components/scss/components/toggle/toggle'; +@import '~carbon-components/scss/components/search/search'; +@import '~carbon-components/scss/components/select/select'; +@import '~carbon-components/scss/components/text-input/text-input'; +@import '~carbon-components/scss/components/text-area/text-area'; +@import '~carbon-components/scss/components/number-input/number-input'; +@import '~carbon-components/scss/components/form/form'; +@import '~carbon-components/scss/components/link/link'; +@import '~carbon-components/scss/components/list-box/list-box'; +@import '~carbon-components/scss/components/list/list'; +@import '~carbon-components/scss/components/data-table/data-table'; +@import '~carbon-components/scss/components/structured-list/structured-list'; +@import '~carbon-components/scss/components/code-snippet/code-snippet'; +@import '~carbon-components/scss/components/overflow-menu/overflow-menu'; +@import '~carbon-components/scss/components/content-switcher/content-switcher'; +@import '~carbon-components/scss/components/date-picker/date-picker'; +@import '~carbon-components/scss/components/dropdown/dropdown'; +@import '~carbon-components/scss/components/loading/loading'; +@import '~carbon-components/scss/components/modal/modal'; +@import '~carbon-components/scss/components/multi-select/multi-select'; +@import '~carbon-components/scss/components/notification/inline-notification'; +@import '~carbon-components/scss/components/notification/toast-notification'; +@import '~carbon-components/scss/components/tooltip/tooltip'; +@import '~carbon-components/scss/components/tabs/tabs'; +@import '~carbon-components/scss/components/tag/tag'; +@import '~carbon-components/scss/components/pagination/pagination'; +@import '~carbon-components/scss/components/accordion/accordion'; +@import '~carbon-components/scss/components/progress-indicator/progress-indicator'; +@import '~carbon-components/scss/components/breadcrumb/breadcrumb'; +@import '~carbon-components/scss/components/toolbar/toolbar'; +@import '~carbon-components/scss/components/time-picker/time-picker'; +@import '~carbon-components/scss/components/slider/slider'; +@import '~carbon-components/scss/components/tile/tile'; +@import '~carbon-components/scss/components/skeleton/skeleton'; +@import '~carbon-components/scss/components/inline-loading/inline-loading'; +@import '~carbon-components/scss/components/pagination-nav/pagination-nav'; +@import '~carbon-components/scss/components/ui-shell/ui-shell'; diff --git a/src/styles/_overrides.scss b/src/styles/_overrides.scss new file mode 100644 index 00000000000..0125e477bc6 --- /dev/null +++ b/src/styles/_overrides.scss @@ -0,0 +1,116 @@ +//--------------------------------------- +// Breadcrumb +//--------------------------------------- +.page-content .bx--breadcrumb .bx--link { + font-size: 0.875rem; +} + +//--------------------------------------- +// Link +//--------------------------------------- + +.component-example .bx--link { + font-size: 0.875rem; +} + +//--------------------------------------- +// Button +//--------------------------------------- + +.component-example .button .bx--btn { + margin: $spacing-03; +} + +//--------------------------------------- +// Notification +//--------------------------------------- + +.component-example__live.component-example__live--notification + .component-example__live--rendered + > div { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.component-example .bx--inline-notification { + display: inline-flex; +} + +//--------------------------------------- +// Loading +//--------------------------------------- + +.component-example .loading .bx--loading-overlay { + position: absolute; +} + +//--------------------------------------- +// Date Picker +//--------------------------------------- + +// TODO + +//--------------------------------------- +// Form +//--------------------------------------- + +.component-example__live .bx--form-item, +.component-example .bx--form-item { + margin-bottom: $spacing-07; +} + +.component-example .bx--form-item.bx--checkbox-wrapper { + margin-bottom: $spacing-03; +} + +//--------------------------------------- +// Tabs +//--------------------------------------- + +.component-example__live--tabs .bx--tabs__nav { + position: static; +} + +.component-example__live .tabs .bx--tabs + div { + margin-top: $spacing-07; +} + +//--------------------------------------- +// Tile +//--------------------------------------- + +.component-example__live--tile .bx--grid { + outline: 1px dashed #97c1ff; +} + +.component-example__live--tile .bx--tile-container .bx--col { + background: none; + margin-bottom: $spacing-05; +} + +//--------------------------------------- +// Date picker +//--------------------------------------- + +.component-example .flatpickr-calendar { + margin-left: -1rem; + margin-top: -1rem; +} + +//--------------------------------------- +// Tooltip +//--------------------------------------- + +.component-example__live .bx--tooltip { + margin-left: -1rem; + margin-top: -0.5rem; +} + +//--------------------------------------- +// Modal +//--------------------------------------- + +.component-example__live.component-example__live--modal .bx--modal { + z-index: 10000; +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 3317f62c35c..479e872f623 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,7 @@ @import 'images'; @import 'homepage'; +@import 'overrides'; @import 'src/components/CodeExample/code-example.scss'; @import 'src/components/ColorBlock/color-block.scss';