From e4976e1201955222cd17d7378e275abcc6a4a2a5 Mon Sep 17 00:00:00 2001 From: Parker Roth <154391879+yawnybear@users.noreply.github.com> Date: Thu, 21 Nov 2024 13:55:20 -0500 Subject: [PATCH] RMD-358 optics documentation fixes (GH-239) (#239) * fix typos in documentation * change to tokens, change language used in documentation * change to documentation * change from PopperJS to Floating UI * move line 449 to line 450 --- src/core/tokens/dark_mode_tokens.scss | 3 +++ src/stories/Components/Accordion/Accordion.mdx | 6 +++--- src/stories/Components/Alert/Alert.mdx | 18 +++++++++--------- src/stories/Components/Avatar/Avatar.mdx | 8 ++++---- src/stories/Components/Badge/Badge.mdx | 4 ++-- .../Components/Breadcrumbs/Breadcrumbs.mdx | 6 +++--- src/stories/Components/Button/Button.mdx | 6 +++--- .../Components/ButtonGroup/ButtonGroup.mdx | 4 ++-- src/stories/Components/Card/Card.mdx | 2 +- .../Components/ConfirmDialog/ConfirmDialog.mdx | 6 +++--- src/stories/Components/Divider/Divider.mdx | 10 +++++----- src/stories/Components/Form/Form.mdx | 12 ++++++------ src/stories/Components/Icon/Icon.mdx | 2 +- src/stories/Components/Modal/Modal.mdx | 10 +++++----- src/stories/Components/Navbar/Navbar.mdx | 4 ++-- .../Components/Pagination/Pagination.mdx | 2 +- src/stories/Components/SidePanel/SidePanel.mdx | 14 +++++++------- src/stories/Components/Sidebar/Sidebar.mdx | 6 +++--- src/stories/Components/Spinner/Spinner.mdx | 8 ++++---- src/stories/Components/Switch/Switch.mdx | 8 ++++---- src/stories/Components/Tab/Tab.mdx | 4 ++-- src/stories/Components/Table/Table.mdx | 14 +++++++------- src/stories/Components/Tag/Tag.mdx | 6 +++--- src/stories/Components/TextPair/TextPair.mdx | 10 +++++----- src/stories/Components/Tooltip/Tooltip.mdx | 8 ++++---- src/stories/Overview/ScaleOverriding.mdx | 2 +- .../Recipes/CustomSidebar/CustomSidebar.mdx | 2 +- src/stories/Tokens/Typography/FontWeight.mdx | 2 +- 28 files changed, 95 insertions(+), 92 deletions(-) diff --git a/src/core/tokens/dark_mode_tokens.scss b/src/core/tokens/dark_mode_tokens.scss index 732eb128..cf16f0a9 100644 --- a/src/core/tokens/dark_mode_tokens.scss +++ b/src/core/tokens/dark_mode_tokens.scss @@ -447,6 +447,9 @@ } @mixin encoded-images { + /** + * @tokens Encoded Images + */ --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg=='); } diff --git a/src/stories/Components/Accordion/Accordion.mdx b/src/stories/Components/Accordion/Accordion.mdx index c9775f7c..5c270e63 100644 --- a/src/stories/Components/Accordion/Accordion.mdx +++ b/src/stories/Components/Accordion/Accordion.mdx @@ -60,9 +60,9 @@ Additional content can be included within the `summary` element in any order. An ## Accordion API -Styles are built on css variables scoped to the accordion. +Styles are built on CSS variables scoped to the accordion. -Here are the variables that can be customized. +Here are the variables that can be customized: {/* prettier-ignore-start */} ```css @@ -81,7 +81,7 @@ Here are the variables that can be customized. }} > -The accordion classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The accordion classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple classes to share the same behavior. You can modify all accordion behavior by overriding the `%accordion-global` placeholder selector and setting any properties: diff --git a/src/stories/Components/Alert/Alert.mdx b/src/stories/Components/Alert/Alert.mdx index 76b60977..ec8683a1 100644 --- a/src/stories/Components/Alert/Alert.mdx +++ b/src/stories/Components/Alert/Alert.mdx @@ -41,13 +41,13 @@ Alert can be used as a standalone component, however, it does have a few depende ### Warning -`.alert-warning` Provides a warning styled message +`.alert-warning` Provides a warning styled message. ### Danger -`.alert-danger` Provides a danger styled message +`.alert-danger` Provides a danger styled message. `.alert-alert` is an alias for `.alert-danger`. Since RoleModel commonly uses [Rails](https://rubyonrails.org/) to develop projects, adding this alias allows this to be used for flash messages without having to change the default in rails. [Devise](https://github.com/heartcombo/devise) is also commonly used and cannot easily be configured away from this. @@ -55,13 +55,13 @@ Alert can be used as a standalone component, however, it does have a few depende ### Info -`.alert-info` Provides an info styled message +`.alert-info` Provides an info styled message. ### Notice -`.alert-notice` Provides a notice styled message +`.alert-notice` Provides a notice styled message. @@ -79,19 +79,19 @@ Alert can be used as a standalone component, however, it does have a few depende ### No Icon -The icon is optional +The icon is optional. ### No Title -The title is optional +The title is optional. ### Dismissible -If your application needs to allow dismissing these alerts, you can add a second icon/button after the messages section and add functionality via JS +If your application needs to allow dismissing these alerts, you can add a second icon/button after the messages section and add functionality via JS. @@ -131,7 +131,7 @@ icon, title, and the final (dismissible close) icon are all optional. }} > -The alert classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The alert classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple alert classes to share the same behavior. You can modify all alerts behavior by overriding the `%alert-global` placeholder selector and setting any properties: @@ -141,7 +141,7 @@ This allows multiple alert classes to share the same behavior. You can modify al } ``` -If you need to override the behavior of a particular alert style, you can open the respective class and set or change properties +If you need to override the behavior of a particular alert style, you can open the respective class and set or change properties. ```css // This will only affect the warning alert, but not danger, info, or notice. diff --git a/src/stories/Components/Avatar/Avatar.mdx b/src/stories/Components/Avatar/Avatar.mdx index d5016be5..81c8250e 100644 --- a/src/stories/Components/Avatar/Avatar.mdx +++ b/src/stories/Components/Avatar/Avatar.mdx @@ -13,7 +13,7 @@ import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js' }} > -Avatar classes can be used on `a` or `div` html elements with an `img` within it.They provide consistent and composable styling for application avatars or profile pictures. +Avatar classes can be used on `a` or `div` html elements with an `img` within it. They provide consistent and composable styling for application avatars or profile pictures. When using on an `a` element, the avatar will support a hover and focus state. When using on a `div` element, the avatar will not support a hover or focus state. @@ -67,9 +67,9 @@ The avatar classes can be used either on an `a` or `div` element that wraps an ` ## Avatar API -The size and border styles are built on css variables scoped to the avatar. +The size and border styles are built on CSS variables scoped to the avatar. -Here are the variables that can be customized. +Here are the variables that can be customized: {/* prettier-ignore-start */} ```css @@ -96,7 +96,7 @@ Here are the variables that can be customized. }} > -The avatar classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The avatar classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple classes to share the same behavior. You can modify all avatar behavior by overriding the `%avatar-global` placeholder selector and setting any properties: diff --git a/src/stories/Components/Badge/Badge.mdx b/src/stories/Components/Badge/Badge.mdx index c095d0a6..f57a974c 100644 --- a/src/stories/Components/Badge/Badge.mdx +++ b/src/stories/Components/Badge/Badge.mdx @@ -84,7 +84,7 @@ Badge can be used as a standalone component, however, it does have a few depende -## Customizing badge styles +## Customizing Badge styles
-The badge classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The badge classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple badge classes to share the same behavior. You can modify all badges behavior by overriding the `%badge-global` placeholder selector and setting any properties: diff --git a/src/stories/Components/Breadcrumbs/Breadcrumbs.mdx b/src/stories/Components/Breadcrumbs/Breadcrumbs.mdx index 1b515da0..bbc11896 100644 --- a/src/stories/Components/Breadcrumbs/Breadcrumbs.mdx +++ b/src/stories/Components/Breadcrumbs/Breadcrumbs.mdx @@ -57,9 +57,9 @@ Breadcrumbs can be used as a standalone component, however, it does have a few d ## Breadcrumb API -Styles are built on css variables scoped to the breadcrumbs. +Styles are built on CSS variables scoped to the breadcrumbs. -Here are the variables that can be customized. +Here are the variables that can be customized: {/* prettier-ignore-start */} ```css @@ -79,7 +79,7 @@ Here are the variables that can be customized. }} > -The breadcrumbs classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The breadcrumbs classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple classes to share the same behavior. You can modify all breadcrumbs behavior by overriding the `%breadcrumbs-global` placeholder selector and setting any properties: diff --git a/src/stories/Components/Button/Button.mdx b/src/stories/Components/Button/Button.mdx index dd9ec353..6e651e44 100644 --- a/src/stories/Components/Button/Button.mdx +++ b/src/stories/Components/Button/Button.mdx @@ -63,9 +63,9 @@ Note: `.btn-delete` also works for backwards compatibility, but `.btn-destructiv ### No Border -`.btn--no-border` This is a modifier which can be used with all button classes except destructive. It provides a button with no border, but the same sizing and adapts it's color to all the btn variations. +`.btn--no-border` This is a modifier which can be used with all button classes except destructive and warning. It provides a button with no border, but the same sizing and adapts it's color to all the btn variations. -Note: `.btn-destructive` and `.btn-warning` do not support the `.btn--no-border` modifier. Borderless warning or destructive buttons is not considered a good pattern and can easily lead to confusion so it has been disabled. +Note: `.btn-destructive` and `.btn-warning` do not support the `.btn--no-border` modifier. Borderless warning or destructive buttons are not considered a good pattern and can easily lead to confusion so are not available. @@ -149,7 +149,7 @@ Here are the variables and states used }} > -The button classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The button classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple button classes to share the same behavior. You can modify all buttons behavior by overriding the `%btn-global` placeholder selector and setting any properties: diff --git a/src/stories/Components/ButtonGroup/ButtonGroup.mdx b/src/stories/Components/ButtonGroup/ButtonGroup.mdx index 7e23a4c1..08180ac0 100644 --- a/src/stories/Components/ButtonGroup/ButtonGroup.mdx +++ b/src/stories/Components/ButtonGroup/ButtonGroup.mdx @@ -80,9 +80,9 @@ Button Group can be used as a standalone component, however, it does have a few ## Button Group API -Styles are built on css variables scoped to the button group. +Styles are built on CSS variables scoped to the button group. -Here are the variables that can be customized. +Here are the variables that can be customized: {/* prettier-ignore-start */} ```css diff --git a/src/stories/Components/Card/Card.mdx b/src/stories/Components/Card/Card.mdx index 4289865a..9b1893e1 100644 --- a/src/stories/Components/Card/Card.mdx +++ b/src/stories/Components/Card/Card.mdx @@ -77,7 +77,7 @@ Card can be used as a standalone component, however, it does have a few dependen }} > -The card classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The card classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple card classes to share the same behavior. You can modify all cards behavior by overriding the `%card-global` placeholder selector and setting any properties: diff --git a/src/stories/Components/ConfirmDialog/ConfirmDialog.mdx b/src/stories/Components/ConfirmDialog/ConfirmDialog.mdx index 7fea8766..d6f3d097 100644 --- a/src/stories/Components/ConfirmDialog/ConfirmDialog.mdx +++ b/src/stories/Components/ConfirmDialog/ConfirmDialog.mdx @@ -48,9 +48,9 @@ Confirm Dialog can be used as a standalone component, however, it does have a fe ## Confirm Dialog API -Styles are built on css variables scoped to the confirm dialog. +Styles are built on CSS variables scoped to the confirm dialog. -Here are the variables that can be customized. +Here are the variables that can be customized: {/* prettier-ignore-start */} ```css @@ -69,7 +69,7 @@ Here are the variables that can be customized. }} > -The classes are built on [sass placeholder selectors](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The classes are built on [SASS placeholder selectors](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows classes to share the same behavior. You can modify all dialogs behavior by overriding the `%confirm-dialog-wrapper-global` and `%confirm-dialog-global` placeholder selectors and setting any properties: diff --git a/src/stories/Components/Divider/Divider.mdx b/src/stories/Components/Divider/Divider.mdx index df445184..4795eee5 100644 --- a/src/stories/Components/Divider/Divider.mdx +++ b/src/stories/Components/Divider/Divider.mdx @@ -37,13 +37,13 @@ Divider can be used as a standalone component, however, it does have a few depen ### Default -`.divider` Provides a basic horizontal divider +`.divider` Provides a basic horizontal divider. ### Vertical -`.divider-vertical` Provides a basic vertical divider +`.divider-vertical` Provides a basic vertical divider. @@ -61,9 +61,9 @@ Divider can be used as a standalone component, however, it does have a few depen ## Divider API -The size and spacing styles are built on css variables scoped to the divider. +The size and spacing styles are built on CSS variables scoped to the divider. -Here are the variables that can be customized. +Here are the variables that can be customized: {/* prettier-ignore-start */} ```css @@ -88,7 +88,7 @@ Here are the variables that can be customized. }} > -The divider classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The divider classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple classes to share the same behavior. You can modify all divider behavior by overriding the `%divider-global` placeholder selector and setting any properties: diff --git a/src/stories/Components/Form/Form.mdx b/src/stories/Components/Form/Form.mdx index ff91aae8..bb6b5303 100644 --- a/src/stories/Components/Form/Form.mdx +++ b/src/stories/Components/Form/Form.mdx @@ -18,7 +18,7 @@ import { createAlert } from '../Alert/Alert.js' }} > -Form classes can be used on a variety of `inputs` or `select` html elements. +Form classes can be used on a variety of `inputs` or `select` HTML elements. They provide consistent and composable styling that should address most applications basic needs. ## Playground @@ -49,7 +49,7 @@ Form Controls can be used as standalone components, however, they do have a few ### Input -`.form-control` Provides basic input styles. This can be used on `input` html elements. It works across a variety of types such as `text`, `number`, `password`, `email`, `phone`, `color`, `radio`, and, `checkbox` +`.form-control` Provides basic input styles. This can be used on `input` HTML elements. It works across a variety of types such as `text`, `number`, `password`, `email`, `phone`, `color`, `radio`, and `checkbox`. @@ -67,7 +67,7 @@ Form Controls can be used as standalone components, however, they do have a few ### Textarea -`textarea.form-control` Provides basic text area styles. This can be used on `textarea` html elements. +`textarea.form-control` Provides basic text area styles. This can be used on `textarea` HTML elements. @@ -81,7 +81,7 @@ Form Controls can be used as standalone components, however, they do have a few ### Color -`` Provides basic color input styles. This can be used on `input` html elements with a type of `color`. +`` Provides basic color input styles. This can be used on `input` HTML elements with a type of `color`. @@ -143,7 +143,7 @@ See [MDN's documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/:inde ## Form API -Styles are built on css variables scoped to the form elements. +Styles are built on CSS variables scoped to the form elements. Here are the variables that can be customized. @@ -178,7 +178,7 @@ Here are the variables that can be customized. }} > -The form classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The form classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple classes to share the same behavior. diff --git a/src/stories/Components/Icon/Icon.mdx b/src/stories/Components/Icon/Icon.mdx index 8d9586d6..8a830c8c 100644 --- a/src/stories/Components/Icon/Icon.mdx +++ b/src/stories/Components/Icon/Icon.mdx @@ -36,7 +36,7 @@ Icon can be used as a standalone component, however, it does have a few dependen ### Default -To use an icon, put an element (usually a `span`) with the class of `.material-symbols-outlined` and inner text of whatever icon you which to use I.E. `settings` onto the page. +To use an icon, put an element (usually a `span`) with the class of `.material-symbols-outlined` and inner text of whatever icon you wish to use I.E. `settings` onto the page. ```html settings diff --git a/src/stories/Components/Modal/Modal.mdx b/src/stories/Components/Modal/Modal.mdx index f5ded23e..307ce5ba 100644 --- a/src/stories/Components/Modal/Modal.mdx +++ b/src/stories/Components/Modal/Modal.mdx @@ -13,7 +13,7 @@ import { createAlert } from '../Alert/Alert.js' }} > -The Modal classes can be used for styling a custom modal. This can be used alongside the rails configuration and javascript implemented by [RoleModel Rails Modal](https://github.com/RoleModel/rolemodel_rails/tree/master/lib/generators/rolemodel/modals) +The Modal classes can be used for styling a custom modal. This can be used alongside the Rails configuration and Javascript implemented by [RoleModel Rails Modal](https://github.com/RoleModel/rolemodel_rails/tree/master/lib/generators/rolemodel/modals) ## Selective Imports @@ -70,7 +70,7 @@ The modal styles will still work using the HTML dialog element. Simply add the ` ``` -You can then use javascript to open the dialog: +You can then use Javascript to open the dialog: ```javascript const dialog = document.getElementById('my-dialog') @@ -133,9 +133,9 @@ cancelButton.addEventListener('click', () => { ## Modal API -Styles are built on css variables scoped to the modal. +Styles are built on CSS variables scoped to the modal. -Here are the variables that can be customized. +Here are the variables that can be customized: {/* prettier-ignore-start */} ```css @@ -163,7 +163,7 @@ Here are the variables that can be customized. }} > -The classes are built on [sass placeholder selectors](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The classes are built on [SASS placeholder selectors](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows classes to share the same behavior. You can modify all dialogs behavior by overriding the `%modal-wrapper-global` and `%confirm-dialog-global` placeholder selectors and setting any properties: diff --git a/src/stories/Components/Navbar/Navbar.mdx b/src/stories/Components/Navbar/Navbar.mdx index 7e3578ac..5b0235ac 100644 --- a/src/stories/Components/Navbar/Navbar.mdx +++ b/src/stories/Components/Navbar/Navbar.mdx @@ -76,7 +76,7 @@ The brand is not required and the navbar content will adjust itself accordingly. ## Navbar API -Color and hover styles are built on css variables scoped to the navbar. +Color and hover styles are built on CSS variables scoped to the navbar. Here are the variables that can be customized. @@ -109,7 +109,7 @@ Here are the variables that can be customized. }} > -The navbar classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The navbar classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple classes to share the same behavior. You can modify all navbar behavior by overriding the `%navbar-global` placeholder selector and setting any properties: diff --git a/src/stories/Components/Pagination/Pagination.mdx b/src/stories/Components/Pagination/Pagination.mdx index fffc916a..79183393 100644 --- a/src/stories/Components/Pagination/Pagination.mdx +++ b/src/stories/Components/Pagination/Pagination.mdx @@ -80,7 +80,7 @@ Another common pattern is to allow users to change how many items are shown per }} > -The pagination classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The pagination classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple classes to share the same behavior. You can modify all pagination behavior by overriding the `%pagination-global` placeholder selector and setting any properties: diff --git a/src/stories/Components/SidePanel/SidePanel.mdx b/src/stories/Components/SidePanel/SidePanel.mdx index a000e938..c74aa87c 100644 --- a/src/stories/Components/SidePanel/SidePanel.mdx +++ b/src/stories/Components/SidePanel/SidePanel.mdx @@ -54,7 +54,7 @@ Side Panel can be used as a standalone component, however, it does have a few de `.side-panel` provides the basic shell for your sidebar. -`.side-panel__header`, `.side-panel__body`, and `.side-panel__footer` are used to denote areas of the panel with body taking up as much heigh as available and adding a scrollbar for any content overflow. +`.side-panel__header`, `.side-panel__body`, and `.side-panel__footer` are used to denote areas of the panel with body taking up as much height as available and adding a scrollbar for any content overflow. @@ -116,9 +116,9 @@ One of the benefits is that each section supports the padding classes so individ ## SidePanel API -Styles are built on css variables scoped to the sidepanel. +Styles are built on CSS variables scoped to the SidePanel. -Here are the variables that can be customized. +Here are the variables that can be customized: {/* prettier-ignore-start */} ```css @@ -136,14 +136,14 @@ Here are the variables that can be customized. dangerouslySetInnerHTML={{ __html: createAlert({ title: 'Important!', - description: 'These patterns represent how to customize the style of the sidepanel for your project.', + description: 'These patterns represent how to customize the style of the SidePanel for your project.', }).outerHTML, }} > -The sidepanel classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The SidePanel classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) -This allows multiple classes to share the same behavior. You can modify all sidepanel behavior by overriding the `%side-panel-global` placeholder selector and setting any properties: +This allows multiple classes to share the same behavior. You can modify all SidePanel behavior by overriding the `%side-panel-global` placeholder selector and setting any properties: ```css %side-panel-global { @@ -163,7 +163,7 @@ This allows multiple classes to share the same behavior. You can modify all side }} > -Your application may need a custom sidepanel. To add one, just follow this template: +Your application may need a custom SidePanel. To add one, just follow this template: ```css .sidepanel-{name} { diff --git a/src/stories/Components/Sidebar/Sidebar.mdx b/src/stories/Components/Sidebar/Sidebar.mdx index 3ef6b15f..b8fab7a3 100644 --- a/src/stories/Components/Sidebar/Sidebar.mdx +++ b/src/stories/Components/Sidebar/Sidebar.mdx @@ -123,9 +123,9 @@ The brand is not required and the sidebar content will adjust itself accordingly ## Sidebar API -Color and hover styles are built on css variables scoped to the sidebar. +Color and hover styles are built on CSS variables scoped to the sidebar. -Here are the variables used +Here are the variables used: ```css // Public API @@ -163,7 +163,7 @@ Here are the variables used }} > -The sidebar classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The sidebar classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple sidebar classes to share the same behavior. You can modify all sidebar behavior by overriding the `%sidebar-global` placeholder selector and setting any properties: diff --git a/src/stories/Components/Spinner/Spinner.mdx b/src/stories/Components/Spinner/Spinner.mdx index 70998028..a20fa51e 100644 --- a/src/stories/Components/Spinner/Spinner.mdx +++ b/src/stories/Components/Spinner/Spinner.mdx @@ -71,9 +71,9 @@ Use `.spinner.spinner--large` to create a large spinner. ## Spinner API -Styles are built on css variables scoped to the spinner. +Styles are built on CSS variables scoped to the spinner. -Here are the variables that can be customized. +Here are the variables that can be customized: {/* prettier-ignore-start */} ```css @@ -103,7 +103,7 @@ Here are the variables that can be customized. }} > -The spinner classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The spinner classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple classes to share the same behavior. You can modify all spinner behavior by overriding the `%spinner-global` placeholder selector and setting any properties: @@ -112,7 +112,7 @@ This allows multiple classes to share the same behavior. You can modify all spin } ``` -If you need to override the behavior of a particular spinner style, you can open the respective class and set or change properties +If you need to override the behavior of a particular spinner style, you can open the respective class and set or change properties: ```css .spinner { diff --git a/src/stories/Components/Switch/Switch.mdx b/src/stories/Components/Switch/Switch.mdx index 30adaabc..922df93d 100644 --- a/src/stories/Components/Switch/Switch.mdx +++ b/src/stories/Components/Switch/Switch.mdx @@ -21,7 +21,7 @@ This is just a styling pattern and does not implement the form submission functi A commonly used tool for Ruby on Rails projects is [SimpleForm](https://github.com/heartcombo/simple_form). It allows you to build forms with premade inputs and allows you to make custom input types. -[RoleModel Rails SimpleForm Generator](https://github.com/RoleModel/rolemodel_rails/tree/master/lib/generators/rolemodel/simple_form) provides a generator to install a custom switch input that can be used with simple form with Optics classes applied. +[RoleModel Rails SimpleForm Generator](https://github.com/RoleModel/rolemodel_rails/tree/master/lib/generators/rolemodel/simple_form) provides a generator to install a custom switch input that can be used with SimpleForm with Optics classes applied. ## Playground @@ -63,9 +63,9 @@ Switch can be used as a standalone component, however, it does have a few depend ## Switch API -The size styles are built on css variables scoped to the switch. +The size styles are built on CSS variables scoped to the switch. -Here are the variables that can be customized. +Here are the variables that can be customized: {/* prettier-ignore-start */} ```css @@ -89,7 +89,7 @@ Here are the variables that can be customized. }} > -The switch classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The switch classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple classes to share the same behavior. You can modify all switch behavior by overriding the `%switch-global` placeholder selector and setting any properties: diff --git a/src/stories/Components/Tab/Tab.mdx b/src/stories/Components/Tab/Tab.mdx index 5f00b01d..397e5cf4 100644 --- a/src/stories/Components/Tab/Tab.mdx +++ b/src/stories/Components/Tab/Tab.mdx @@ -53,9 +53,9 @@ A tab supports `.tab--small` or `.tab--large` with large being the default. ## Tab API -Styles are built on css variables scoped to the tab. +Styles are built on CSS variables scoped to the tab. -Here are the variables that can be customized. +Here are the variables that can be customized: {/* prettier-ignore-start */} ```css diff --git a/src/stories/Components/Table/Table.mdx b/src/stories/Components/Table/Table.mdx index 280661db..6ac69865 100644 --- a/src/stories/Components/Table/Table.mdx +++ b/src/stories/Components/Table/Table.mdx @@ -37,19 +37,19 @@ Table can be used as a standalone component, however, it does have a few depende ### Default -`.table` Provides a default style to a table element +`.table` Provides a default style to a table element. ### Primary -`.table-primary` Provides a table with a primary colored header. +`.table-primary` Provides a Primary table. This uses the primary color in the header. ### Danger -`.table-danger` Provides a table with a danger colored header. +`.table-danger` Provides a Danger table. This uses the danger alert color in the header. @@ -69,7 +69,7 @@ Table can be used as a standalone component, however, it does have a few depende ### Striping -`.table--even-striped`, `.table--odd-striped` color every (odd or even) other row with a light color. The color matches the default, primary, or danger. +`.table--even-striped`, `.table--odd-striped` color every other (odd or even) row with a light color on the neutral scale. @@ -106,9 +106,9 @@ Here is an example of using it in the table footer. ## Table API -Padding table styles are built on css variables scoped to the table. +Padding table styles are built on CSS variables scoped to the table. -Here are the variables used +Here are the variables used: ```css // Variable API @@ -128,7 +128,7 @@ Here are the variables used }} > -The table classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The table classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple table classes to share the same behavior. You can modify all tables behavior by overriding the `%table-global` placeholder selector and setting any proprerties: diff --git a/src/stories/Components/Tag/Tag.mdx b/src/stories/Components/Tag/Tag.mdx index 67d656f2..bd25d95c 100644 --- a/src/stories/Components/Tag/Tag.mdx +++ b/src/stories/Components/Tag/Tag.mdx @@ -40,13 +40,13 @@ Tag can be used as a standalone component, however, it does have a few dependenc ### Readonly -`.tag-readonly` Provides a readonly tag. This is useful for displaying tags that cannot be removed. +`.tag-readonly` Provides a Readonly tag. This is useful for displaying tags that cannot be removed. ### Primary -`.tag-primary` Provides a primary colored tag. +`.tag-primary` Provides a Primary tag. This uses the primary color. @@ -85,7 +85,7 @@ Tag can be used as a standalone component, however, it does have a few dependenc }} > -The tag classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The tag classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple classes to share the same behavior. You can modify all tag behavior by overriding the `%tag-global` placeholder selector and setting any properties: diff --git a/src/stories/Components/TextPair/TextPair.mdx b/src/stories/Components/TextPair/TextPair.mdx index 2ecaa18d..7c2ea38b 100644 --- a/src/stories/Components/TextPair/TextPair.mdx +++ b/src/stories/Components/TextPair/TextPair.mdx @@ -13,7 +13,7 @@ import { createAlert } from '../Alert/Alert.js' }} > -The text pair component is used to display a title and subtitle together. It can also be used to group other elements within it, though should generally be reserved for text. +The Text Pair component is used to display a title and subtitle together. It can also be used to group other elements within it, though should generally be reserved for text. ## Playground @@ -63,7 +63,7 @@ Description of subtitle size example ## Text Pair API -Styles are built on css variables scoped to the text pair. +Styles are built on CSS variables scoped to the Text Pair. Here are the variables that can be customized. @@ -81,12 +81,12 @@ Here are the variables that can be customized. dangerouslySetInnerHTML={{ __html: createAlert({ title: 'Important!', - description: 'These patterns represent how to customize the style of the text pair for your project.', + description: 'These patterns represent how to customize the style of the Text Pair for your project.', }).outerHTML, }} > -The text pair classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The Text Pair classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple classes to share the same behavior. You can modify all textpair behavior by overriding the `%text-pair-global` placeholder selector and setting any properties: @@ -107,7 +107,7 @@ This allows multiple classes to share the same behavior. You can modify all text }} > -Your application may need a custom text pair. To add one, just follow this template: +Your application may need a custom Text Pair. To add one, just follow this template: ```css .text-pair-{name} { diff --git a/src/stories/Components/Tooltip/Tooltip.mdx b/src/stories/Components/Tooltip/Tooltip.mdx index 3e359cdd..97614050 100644 --- a/src/stories/Components/Tooltip/Tooltip.mdx +++ b/src/stories/Components/Tooltip/Tooltip.mdx @@ -23,7 +23,7 @@ Tooltips are build using data attributes on any element. Setting these will show This is a simple CSS only implementation of tooltips. As such, they will not automatically handle overflow clipping or container edge detection. You will need to handle that yourself or use a package. Here are some commonly used JavaScript packages that can address those issues: -- [PopperJS](https://popper.js.org/) +- [Floating UI](https://floating-ui.com) - [Shoelace Tooltip](https://shoelace.style/components/tooltip) - [TippyJS](https://atomiks.github.io/tippyjs/) @@ -104,9 +104,9 @@ Tooltips have a maximum width and will wrap text if it is too long. ## Tooltip API -Styles are built on css variables scoped to the tooltip. +Styles are built on CSS variables scoped to the tooltip. -Here are the variables that can be customized. +Here are the variables that can be customized: {/* prettier-ignore-start */} ```css @@ -132,7 +132,7 @@ Here are the variables that can be customized. }} > -The tooltip classes are built on a [sass placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) +The tooltip classes are built on a [SASS placeholder selector](https://sass-lang.com/documentation/style-rules/placeholder-selectors) This allows multiple classes to share the same behavior. You can modify all tooltip behavior by overriding the `%toltip-global` placeholder selector and setting any properties: diff --git a/src/stories/Overview/ScaleOverriding.mdx b/src/stories/Overview/ScaleOverriding.mdx index 34f01bef..9960fd58 100644 --- a/src/stories/Overview/ScaleOverriding.mdx +++ b/src/stories/Overview/ScaleOverriding.mdx @@ -8,7 +8,7 @@ There are multiple scales in Optics. Unit Scales exist to allow adjusting font a ## Unit Scale Overriding -A Unit Scale is defined for both font sizes and spacing variables. All values are multiplied by their respective units which default as `1rem` (equivelant to `10px`) +A Unit Scale is defined for both font sizes and spacing variables. All values are multiplied by their respective units which default as `1rem` (equivalent to `10px`) If you want to change the font or spacing scale globally, or within the context of a specific component, you can't just set the `--op-space-scale-unit` because the CSS variables for the scale are already computed and won't be re-computed when you set the scale unit. You can force it to re-compute by redefining the scale. This is why each set of tokens is defined in a scss mixin. `card--condensed` is a great example of how to do this. diff --git a/src/stories/Recipes/CustomSidebar/CustomSidebar.mdx b/src/stories/Recipes/CustomSidebar/CustomSidebar.mdx index 7ddf8087..a54169a6 100644 --- a/src/stories/Recipes/CustomSidebar/CustomSidebar.mdx +++ b/src/stories/Recipes/CustomSidebar/CustomSidebar.mdx @@ -17,7 +17,7 @@ import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js' }} > -Your app may want to customize the sidebar to change the look and feel. Here are a few examples to help you get started +Your app may want to customize the sidebar to change the look and feel. Here are a few examples to help you get started: ## Playground diff --git a/src/stories/Tokens/Typography/FontWeight.mdx b/src/stories/Tokens/Typography/FontWeight.mdx index bdcc3ac4..14613661 100644 --- a/src/stories/Tokens/Typography/FontWeight.mdx +++ b/src/stories/Tokens/Typography/FontWeight.mdx @@ -7,7 +7,7 @@ import { DesignTokenDocBlock } from 'storybook-design-token' Font Weight tokens can be used to change the font weight of text. -**Note** When using a [custom font](?path=/docs/tokens-typography-font-family--docs#custom-font), some of these weights may use the closes available weight since not all fonts support all font weights. +**Note** When using a [custom font](?path=/docs/tokens-typography-font-family--docs#custom-font), some of these weights may use the closest available weight since not all fonts support all font weights. ## Usage