diff --git a/website/docs/components/breadcrumb/index.md b/website/docs/components/breadcrumb/index.md index e1c9d8f726e..8fd1333695b 100644 --- a/website/docs/components/breadcrumb/index.md +++ b/website/docs/components/breadcrumb/index.md @@ -33,6 +33,7 @@ navigation:
@include "partials/specifications/anatomy.md" @include "partials/specifications/states.md" + @include "partials/specifications/spacing.md"
diff --git a/website/docs/components/breadcrumb/partials/specifications/spacing.md b/website/docs/components/breadcrumb/partials/specifications/spacing.md new file mode 100644 index 00000000000..4c8fb3ca55a --- /dev/null +++ b/website/docs/components/breadcrumb/partials/specifications/spacing.md @@ -0,0 +1,5 @@ +## Spacing + +The gap between the breadcrumb and dropdown menu when opened is 4px. + +![](/assets/components/breadcrumb/breadcrumb-truncated-dropdown-spacing.png) \ No newline at end of file diff --git a/website/docs/components/card/partials/guidelines/guidelines.md b/website/docs/components/card/partials/guidelines/guidelines.md index 98ec8315ee7..10fea31c837 100644 --- a/website/docs/components/card/partials/guidelines/guidelines.md +++ b/website/docs/components/card/partials/guidelines/guidelines.md @@ -53,4 +53,4 @@ We recommend the following spacing options for cards: - 16px all around - 24px all around - 16px top/bottom; 24px left/right -- 24px top/bottom; 16px left/right +- 24px top/bottom; 16px left/right \ No newline at end of file diff --git a/website/docs/components/form/layout/index.md b/website/docs/components/form/layout/index.md index d60e66a417b..1e148f88870 100644 --- a/website/docs/components/form/layout/index.md +++ b/website/docs/components/form/layout/index.md @@ -39,6 +39,7 @@ status:
@include "partials/specifications/anatomy.md" + @include "partials/specifications/spacing.md"
diff --git a/website/docs/components/form/layout/partials/guidelines/guidelines.md b/website/docs/components/form/layout/partials/guidelines/guidelines.md index 7f668970f5e..eaf3a579e00 100644 --- a/website/docs/components/form/layout/partials/guidelines/guidelines.md +++ b/website/docs/components/form/layout/partials/guidelines/guidelines.md @@ -12,19 +12,6 @@ ![The anatomy of the Form layout, indicating the header, sections, separator, and actions](/assets/components/form/layout/form-anatomy.png) -## Spacing - -Spacing in forms is based on a decreasing scale on an 8px grid. From largest to smallest, the spacing structure is: - -- The Form Header, Sections, Separators, and Footer are 32px apart. -- Stacked inputs are 24px apart. -- Side by side inputs within a Section Multi Field Group are 16px apart. -- Text elements within the Form Header and Form Section Headers are 8px apart. - -![Representation of the various spacing sizes between Form layout components](/assets/components/form/layout/form-layout-spacing.png) - -Visit the [Form Patterns](/patterns/form-patterns) guidelines for additional details on spacing in forms. - ## Form The Form component serves as the container for all Form layout components and form content. It establishes the spacing between the Form Header, Sections, Separators, and Form Footer. diff --git a/website/docs/components/form/layout/partials/specifications/spacing.md b/website/docs/components/form/layout/partials/specifications/spacing.md new file mode 100644 index 00000000000..8ef70d36718 --- /dev/null +++ b/website/docs/components/form/layout/partials/specifications/spacing.md @@ -0,0 +1,12 @@ +## Spacing + +Spacing in forms is based on a decreasing scale on an 8px grid. From largest to smallest, the spacing structure is: + +- The Form Header, Sections, Separators, and Footer are 32px apart. +- Stacked inputs are 24px apart. +- Side by side inputs within a Section Multi Field Group are 16px apart. +- Text elements within the Form Header and Form Section Headers are 8px apart. + +![Representation of the various spacing sizes between Form layout components](/assets/components/form/layout/form-layout-spacing.png) + +Visit the [Form Patterns](/patterns/form-patterns) guidelines for additional details on spacing in forms. \ No newline at end of file diff --git a/website/docs/components/rich-tooltip/index.md b/website/docs/components/rich-tooltip/index.md index 039db39fd57..3b78e301066 100644 --- a/website/docs/components/rich-tooltip/index.md +++ b/website/docs/components/rich-tooltip/index.md @@ -34,6 +34,7 @@ navigation:
@include "partials/specifications/anatomy.md" + @include "partials/specifications/spacing.md"
diff --git a/website/docs/components/rich-tooltip/partials/guidelines/guidelines.md b/website/docs/components/rich-tooltip/partials/guidelines/guidelines.md index 49f959930a7..01c7806269e 100644 --- a/website/docs/components/rich-tooltip/partials/guidelines/guidelines.md +++ b/website/docs/components/rich-tooltip/partials/guidelines/guidelines.md @@ -44,19 +44,6 @@ The Rich Tooltip supports collision detection, meaning the `placement` property ![Example of collision detection in the Rich Tooltip](/assets/components/rich-tooltip/rich-tooltip-collision-detection.png) -## Offset - -The default recommended distance between the toggle and the Rich Tooltip pointer is 4px. - -![Default spacing for the Rich Tooltip](/assets/components/rich-tooltip/rich-tooltip-offset-spacing.png) - -!!! Dont - -Don’t add extra offset if the Rich Tooltip would block important information, appear disconnected from the element it is meant to provide information for, or cause confusion for the user. - -![Example of adjusting the offset of the Rich Tooltip](/assets/components/rich-tooltip/rich-tooltip-offset-dont.png) -!!! - ## Interaction The Rich Tooltip supports two interaction methods: a `On hover / On focus` ("soft") interaction and a `On click` interaction. Which one to use depends on: diff --git a/website/docs/components/rich-tooltip/partials/specifications/spacing.md b/website/docs/components/rich-tooltip/partials/specifications/spacing.md new file mode 100644 index 00000000000..a41d2df36a1 --- /dev/null +++ b/website/docs/components/rich-tooltip/partials/specifications/spacing.md @@ -0,0 +1,12 @@ +## Spacing + +The default recommended distance between the toggle and the Rich Tooltip pointer is 4px. + +![Default spacing for the Rich Tooltip](/assets/components/rich-tooltip/rich-tooltip-offset-spacing.png) + +!!! Dont + +Don’t add extra offset if the Rich Tooltip would block important information, appear disconnected from the element it is meant to provide information for, or cause confusion for the user. + +![Example of adjusting the offset of the Rich Tooltip](/assets/components/rich-tooltip/rich-tooltip-offset-dont.png) +!!! \ No newline at end of file diff --git a/website/docs/components/tooltip/index.md b/website/docs/components/tooltip/index.md index 7d09ce82152..ad330950127 100644 --- a/website/docs/components/tooltip/index.md +++ b/website/docs/components/tooltip/index.md @@ -36,6 +36,7 @@ navigation:
@include "partials/specifications/anatomy.md" @include "partials/specifications/states.md" + @include "partials/specifications/spacing.md"
diff --git a/website/docs/components/tooltip/partials/guidelines/guidelines.md b/website/docs/components/tooltip/partials/guidelines/guidelines.md index 3da2a47d06a..addec8c62d4 100644 --- a/website/docs/components/tooltip/partials/guidelines/guidelines.md +++ b/website/docs/components/tooltip/partials/guidelines/guidelines.md @@ -36,31 +36,6 @@ The most common options are: `top`, `bottom`, `left`, `right`. The tooltip supports additional placement options: `top-start`, `top-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end`, `right-start`, `right-end`. -## Offset - -!!! Info - - In some cases, adding an offset may be necessary to adjust the position of the tooltip. Changing the default offset should be done sparingly and only when it’s necessary to make sure that the tooltip does not obscure or cover the trigger or other important information. -!!! - -The default and recommended distance between the trigger and the tooltip’s pointer is 4px. - -![Default offset of the tooltip](/assets/components/tooltip/tooltip-spacing.png) - -!!! Do - -Adjust the offset when the tooltip needs to be positioned in a way that it doesn’t obstruct the view of the UI element or information it is associated with. - -![Tooltip with adjusted offset](/assets/components/tooltip/tooltip-offset-do.png) -!!! - -!!! Dont - -Don’t add extra offset if the tooltip would block important information, appear disjointed from the element it is meant to provide information for, or cause confusion for the user. - -![Tooltip with adjusted offset](/assets/components/tooltip/tooltip-offset-dont.png) -!!! - ## Content The tooltip should contain text only. Basic text formatting, such as bold and italic, is supported. diff --git a/website/docs/components/tooltip/partials/specifications/spacing.md b/website/docs/components/tooltip/partials/specifications/spacing.md new file mode 100644 index 00000000000..2a9be389382 --- /dev/null +++ b/website/docs/components/tooltip/partials/specifications/spacing.md @@ -0,0 +1,24 @@ +## Spacing + +!!! Info + + In some cases, adding an offset may be necessary to adjust the position of the tooltip. Changing the default offset should be done sparingly and only when it’s necessary to make sure that the tooltip does not obscure or cover the trigger or other important information. +!!! + +The default and recommended distance between the trigger and the tooltip’s pointer is 4px. + +![Default offset of the tooltip](/assets/components/tooltip/tooltip-spacing.png) + +!!! Do + +Adjust the offset when the tooltip needs to be positioned in a way that it doesn’t obstruct the view of the UI element or information it is associated with. + +![Tooltip with adjusted offset](/assets/components/tooltip/tooltip-offset-do.png) +!!! + +!!! Dont + +Don’t add extra offset if the tooltip would block important information, appear disjointed from the element it is meant to provide information for, or cause confusion for the user. + +![Tooltip with adjusted offset](/assets/components/tooltip/tooltip-offset-dont.png) +!!! \ No newline at end of file diff --git a/website/public/assets/components/breadcrumb/breadcrumb-truncated-dropdown-spacing.png b/website/public/assets/components/breadcrumb/breadcrumb-truncated-dropdown-spacing.png new file mode 100644 index 00000000000..94a320fa51d Binary files /dev/null and b/website/public/assets/components/breadcrumb/breadcrumb-truncated-dropdown-spacing.png differ diff --git a/website/public/assets/components/breadcrumb/breadcrumb-truncated-dropdown.png b/website/public/assets/components/breadcrumb/breadcrumb-truncated-dropdown.png index ec1df739209..1d5a9ec0dc7 100644 Binary files a/website/public/assets/components/breadcrumb/breadcrumb-truncated-dropdown.png and b/website/public/assets/components/breadcrumb/breadcrumb-truncated-dropdown.png differ diff --git a/website/public/assets/components/form/layout/divider-spacing-do.png b/website/public/assets/components/form/layout/divider-spacing-do.png index 0be5158c399..357cb241b78 100644 Binary files a/website/public/assets/components/form/layout/divider-spacing-do.png and b/website/public/assets/components/form/layout/divider-spacing-do.png differ