diff --git a/package.json b/package.json index 7fdca621..8908666d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@rolemodel/optics", - "version": "2.1.5", + "version": "2.2.0", "packageManager": "yarn@4.8.1", "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.", "main": "dist/css/optics.css", diff --git a/src/components/form.css b/src/components/form.css index a5b12508..9c941029 100644 --- a/src/components/form.css +++ b/src/components/form.css @@ -259,7 +259,8 @@ textarea.form-control:not([type='radio'], [type='checkbox']) { .form-label, .form-error, .form-hint, - .form-control:not([type='radio'], [type='checkbox']) { + .form-control:not([type='radio'], [type='checkbox']), + .segmented-control { grid-column: 1 / 3; } /* stylelint-enable no-descending-specificity */ diff --git a/src/components/index.css b/src/components/index.css index 58d63e1b..ca8ddd0a 100644 --- a/src/components/index.css +++ b/src/components/index.css @@ -14,6 +14,7 @@ @import 'modal'; @import 'navbar'; @import 'pagination'; +@import 'segmented-control'; @import 'sidebar'; @import 'side_panel'; @import 'spinner'; diff --git a/src/components/segmented-control.css b/src/components/segmented-control.css new file mode 100644 index 00000000..751caad7 --- /dev/null +++ b/src/components/segmented-control.css @@ -0,0 +1,135 @@ +.segmented-control { + --op-input-inner-focus: 0 0 0 var(--op-border-width-large); + --op-input-focus-primary: + var(--op-input-inner-focus) var(--op-color-primary-plus-two), + var(--op-input-outer-focus) var(--op-color-primary-plus-five); + + /* Public API (customizable component options) */ + --_op-segmented-control-height-small: var(--op-input-height-small); + --_op-segmented-control-height-medium: var(--op-input-height-medium); + --_op-segmented-control-height-large: var(--op-input-height-large); + + --_op-segmented-control-font-small: var(--op-font-x-small); + --_op-segmented-control-font-medium: var(--op-font-small); + --_op-segmented-control-font-large: var(--op-font-small); + + --_op-segmented-control-label-padding-small: var(--op-space-x-small); + --_op-segmented-control-label-padding-medium: var(--op-space-small); + --_op-segmented-control-label-padding-large: var(--op-space-small); + + --_op-segmented-control-label-gap-small: var(--op-space-3x-small); + --_op-segmented-control-label-gap-medium: var(--op-space-2x-small); + --_op-segmented-control-label-gap-large: var(--op-space-2x-small); + + --_op-segmented-control-color-icon-default: var(--op-color-neutral-on-plus-eight-alt); + --_op-segmented-control-color-icon-active: light-dark( + var(--op-color-primary-plus-four), + var(--op-color-primary-minus-six) + ); + + /* Private API (component option defaults) */ + --__op-segmented-control-height: var(--_op-segmented-control-height-large); + --__op-segmented-control-font-size: var(--_op-segmented-control-font-large); + --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large); + --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large); + --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-default); + + position: relative; + display: grid; + width: fit-content; + height: var(--__op-segmented-control-height); + padding: var(--op-space-2x-small); + border-radius: var(--op-radius-medium); + background-color: var(--op-color-neutral-plus-eight); + box-shadow: var(--op-border-all) var(--op-color-border); + color: var(--op-color-neutral-on-plus-eight); + font-size: var(--__op-segmented-control-font-size); + gap: var(--op-space-2x-small); + grid-auto-flow: column; + + &.segmented-control--full-width { + width: 100%; + } + + .icon { + color: var(--__op-segmented-control-color-icon); + } + + .segmented-control__input { + position: absolute; + overflow: hidden; + width: 1px; + height: 1px; + padding: 0; + border-width: 0; + margin: -1px; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + + /* Selected Option */ + &:checked + .segmented-control__label { + --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-active); + + background-color: var(--op-color-primary-plus-one); + color: var(--op-color-primary-on-plus-one); + } + + &:focus-visible { + + .segmented-control__label { + box-shadow: var(--op-input-focus-primary); + } + } + } + + .segmented-control__label { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: var(--op-radius-small); + gap: var(--__op-segmented-control-label-gap); + padding-inline: var(--__op-segmented-control-label-padding); + white-space: nowrap; + + &:hover { + background-color: var(--op-color-neutral-plus-five); + color: var(--op-color-neutral-on-plus-five); + } + } + + /* Size Modifiers */ + &.segmented-control--small { + --__op-segmented-control-height: var(--_op-segmented-control-height-small); + --__op-segmented-control-font-size: var(--_op-segmented-control-font-small); + --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-small); + --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-small); + + .icon { + --__op-icon-font-size: var(--_op-icon-font-size-small); + --__op-icon-optical-size: var(--_op-icon-optical-size-small); + } + } + + &.segmented-control--medium { + --__op-segmented-control-height: var(--_op-segmented-control-height-medium); + --__op-segmented-control-font-size: var(--_op-segmented-control-font-medium); + --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-medium); + --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-medium); + + .icon { + --__op-icon-font-size: var(--_op-icon-font-size-medium); + --__op-icon-optical-size: var(--_op-icon-optical-size-medium); + } + } + + &.segmented-control--large { + --__op-segmented-control-height: var(--_op-segmented-control-height-large); + --__op-segmented-control-font-size: var(--_op-segmented-control-font-large); + --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large); + --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large); + + .icon { + --__op-icon-font-size: var(--_op-icon-font-size-medium); + --__op-icon-optical-size: var(--_op-icon-optical-size-medium); + } + } +} diff --git a/src/stories/Components/Avatar/Avatar.js b/src/stories/Components/Avatar/Avatar.js index fb075309..b47e0267 100644 --- a/src/stories/Components/Avatar/Avatar.js +++ b/src/stories/Components/Avatar/Avatar.js @@ -6,7 +6,7 @@ export const createAvatar = ({ }) => { const element = document.createElement(useLink ? 'a' : 'div') - element.href = '/?path=/docs/content-components-avatar--docs' + element.href = '/?path=/docs/components-avatar--docs' element.className = `avatar avatar--${size}` const image = document.createElement('img') diff --git a/src/stories/Components/Badge/Badge.mdx b/src/stories/Components/Badge/Badge.mdx index 91d07268..040eb557 100644 --- a/src/stories/Components/Badge/Badge.mdx +++ b/src/stories/Components/Badge/Badge.mdx @@ -13,7 +13,7 @@ import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js' }} > -The Badge component is similar to the Tag component, however it has a different semantic purpose. Badge is intended to be used for notification and information where Tag is intended to be used for interaction and input. See [Tag](?path=/docs/content-components-tag--docs) for details on its usage. +The Badge component is similar to the Tag component, however it has a different semantic purpose. Badge is intended to be used for notification and information where Tag is intended to be used for interaction and input. See [Tag](?path=/docs/components-tag--docs) for details on its usage. ## Playground diff --git a/src/stories/Components/Breadcrumbs/Breadcrumbs.mdx b/src/stories/Components/Breadcrumbs/Breadcrumbs.mdx index 5be96931..3b62a2ed 100644 --- a/src/stories/Components/Breadcrumbs/Breadcrumbs.mdx +++ b/src/stories/Components/Breadcrumbs/Breadcrumbs.mdx @@ -52,7 +52,7 @@ Breadcrumbs can be used as a standalone component, however, it does have a few d ### Separator -`.breadcrumbs__separator` is used to separate the links in the breadcrumbs. It is a div that anything can be put within, however typically would be used with an [Icon](?path=/docs/visual-components-icon--docs). +`.breadcrumbs__separator` is used to separate the links in the breadcrumbs. It is a div that anything can be put within, however typically would be used with an [Icon](?path=/docs/components-icon--docs). diff --git a/src/stories/Components/ButtonGroup/ButtonGroup.mdx b/src/stories/Components/ButtonGroup/ButtonGroup.mdx index 73bdc33d..05617c3d 100644 --- a/src/stories/Components/ButtonGroup/ButtonGroup.mdx +++ b/src/stories/Components/ButtonGroup/ButtonGroup.mdx @@ -12,7 +12,9 @@ import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js' }} > -`.btn-group` is a class that can be added on a container around a collection of buttons. It provides grouping styles for any button conbination and variation that exists in the [Button Component](?path=/docs/navigation-components-button--docs) +`.btn-group` is a class that can be added on a container around a collection of buttons. It provides grouping styles for any button conbination and variation that exists in the [Button Component](?path=/docs/components-button--docs) + +Button Group is similar to the Segmented Control component, however it has a different semantic purpose. Button Group is intended to be used for grouping related actions or navigational buttons where Segmented Control is intended to be used for form option selection and submission. See [Segmented Control](?path=/docs/components-segmented-control--docs) for details on its usage. ## Playground diff --git a/src/stories/Components/ContentHeader/ContentHeader.mdx b/src/stories/Components/ContentHeader/ContentHeader.mdx index 918903c5..24828a96 100644 --- a/src/stories/Components/ContentHeader/ContentHeader.mdx +++ b/src/stories/Components/ContentHeader/ContentHeader.mdx @@ -88,7 +88,7 @@ This example demonstrates a content header with minimal customization achieving The content header classes are structured using the [BEM methodology](https://getbem.com/naming). -This allows us to define core styles on a main [block](https://getbem.com/naming/#block) class, and use [modifiers](https://getbem.com/naming/#modifier) to encapsulate variant styles. You can modify all content header behavior by overriding the `.content-header` placeholder selector and setting any properties: +This allows us to define core styles on a main [block](https://getbem.com/naming/#block) class, and use [modifiers](https://getbem.com/naming/#modifier) to encapsulate variant styles. You can modify all content header behavior by overriding the `.content-header` class and setting any properties: ```css .content-header { diff --git a/src/stories/Components/Form/Form.mdx b/src/stories/Components/Form/Form.mdx index a3851e9c..81ebe2f9 100644 --- a/src/stories/Components/Form/Form.mdx +++ b/src/stories/Components/Form/Form.mdx @@ -183,9 +183,7 @@ The form classes are structured using the [BEM methodology](https://getbem.com/n This allows multiple classes to share the same behavior. -Form Controls use multiple placeholder selectors to style all types of controls. - -`.form-control` is the placeholder selector that is used to style all form controls. +`.form-control` is the class that is used to style all form controls. `.form-control:not([type='radio'], [type='checkbox'])` is the selector that is used to style form controls based on the input like color, date, text, number, etc. diff --git a/src/stories/Components/Navbar/Navbar.mdx b/src/stories/Components/Navbar/Navbar.mdx index b3b679fc..cde157c9 100644 --- a/src/stories/Components/Navbar/Navbar.mdx +++ b/src/stories/Components/Navbar/Navbar.mdx @@ -20,7 +20,7 @@ For instructions on how to integrate a navbar into your applications layout, see `.navbar` is the main component that everything is contained within. -Any [Button](?path=/docs/navigation-components-button--docs#default) style can be used for the links. +Any [Button](?path=/docs/components-button--docs#default) style can be used for the links. ## Playground diff --git a/src/stories/Components/Pagination/Pagination.mdx b/src/stories/Components/Pagination/Pagination.mdx index 2ef17174..fa9a75a1 100644 --- a/src/stories/Components/Pagination/Pagination.mdx +++ b/src/stories/Components/Pagination/Pagination.mdx @@ -16,7 +16,7 @@ import { createAlert } from '../Alert/Alert.js' Pagination is used to navigate through a series of pages, typically when dealing with tabular data. A few classes are used in combination with the button component to achieve this. -An example of using this component with the Table component can be found in [Table With Pagination](?path=/docs/content-components-table--docs#with-pagination). +An example of using this component with the Table component can be found in [Table With Pagination](?path=/docs/components-table--docs#with-pagination). ## Note on Implementation @@ -51,7 +51,7 @@ Pagination can be used as a standalone component, however, it does have a few de ### Default -`.pagination` Is the main class. It can be placed on a `nav` element and wraps a collection of [buttons](?path=/docs/navigation-components-button--docs) to create a pagination component. +`.pagination` Is the main class. It can be placed on a `nav` element and wraps a collection of [buttons](?path=/docs/components-button--docs) to create a pagination component. The buttons within can use any of the button classes, but form a default look, use the `.btn .btn--no-border .btn--small` classes. diff --git a/src/stories/Components/SegmentedControl/SegmentedControl.js b/src/stories/Components/SegmentedControl/SegmentedControl.js new file mode 100644 index 00000000..3cc6c266 --- /dev/null +++ b/src/stories/Components/SegmentedControl/SegmentedControl.js @@ -0,0 +1,68 @@ +import { createIcon } from '../Icon/Icon.js' + +const createOptionInput = (index) => { + const element = document.createElement('input') + element.className = 'segmented-control__input' + element.type = 'radio' + element.id = `option-${index}` + element.value = `value ${index}` + element.name = 'example-segmented-control' + + return element +} + +const createOptionLabel = (index, showPrefixIcon, showSuffixIcon) => { + const element = document.createElement('label') + element.className = 'segmented-control__label' + element.setAttribute('for', `option-${index}`) + element.innerHTML += '\n' + + if (showPrefixIcon) { + element.innerHTML += ' ' + element.appendChild(createIcon({ name: 'bolt' })) + element.innerHTML += '\n' + } + + element.innerHTML += ` Option ${index} \n ` + + if (showSuffixIcon) { + element.innerHTML += ' ' + element.appendChild(createIcon({ name: 'info' })) + element.innerHTML += '\n ' + } + + return element +} + +export const createSegmentedControl = ({ + size = 'large', + fullWidth = false, + showPrefixIcon = false, + showSuffixIcon = false, + options = 3, +}) => { + const element = document.createElement('div') + element.role = 'radiogroup' + + element.className = [ + 'segmented-control', + size === 'large' ? '' : `segmented-control--${size}`, + fullWidth ? 'segmented-control--full-width' : '', + ] + .filter(Boolean) + .join(' ') + + for (let i = 1; i <= options; i++) { + const input = createOptionInput(i) + const label = createOptionLabel(i, showPrefixIcon, showSuffixIcon) + + element.innerHTML += '\n ' + element.appendChild(input) + element.innerHTML += '\n ' + element.appendChild(label) + } + + element.innerHTML += '\n' + + return element +} diff --git a/src/stories/Components/SegmentedControl/SegmentedControl.mdx b/src/stories/Components/SegmentedControl/SegmentedControl.mdx new file mode 100644 index 00000000..60e0fbd9 --- /dev/null +++ b/src/stories/Components/SegmentedControl/SegmentedControl.mdx @@ -0,0 +1,176 @@ +import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks' +import * as SegmentedControlStories from './SegmentedControl.stories' +import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js' + +import { createAlert } from '../Alert/Alert.js' + + + +{/* TODO: Add generator for SimpleForm */} + +# Segmented Control + +
+ +Segmented Control classes can be used to create a stylized radio select group. + +Segmented Control component is similar to the Button Group component, however it has a different semantic purpose. Segmented Control is intended to be used for form option selection and submission where Button Group is intended to be used for grouping related actions or navigational buttons. See [Button Group](?path=/docs/components-buttongroup--docs) for details on its usage. + +## Note on Implementation + +This is just a styling pattern that builds on standard radio inputs and labels. Your project may need some tooling to generate this easily. + +A commonly used tool for Ruby on Rails projects is [SimpleForm](https://github.com/heartcombo/simple_form). It allows you to build forms with pre-made 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 segmented control input that can be used with SimpleForm with Optics classes applied. + +## Playground + + + + +### Selective Imports + +SegmentedControl can be used as a standalone component, however, it does have a few dependencies. To see a full dependency list, see [Dependency Graph](?path=/docs/overview-selective-imports--docs#dependencies) + +```css +/* Depends on */ +@import '@rolemodel/optics/dist/css/core/fonts'; +@import '@rolemodel/optics/dist/css/core/tokens'; +@import '@rolemodel/optics/dist/css/core/base'; +@import '@rolemodel/optics/dist/css/components/icon'; + +/* Component */ +@import '@rolemodel/optics/dist/css/components/segmented-control'; +``` + +## Variations + +### Default + +`.segmented-control` Provides styled radio select group. + + + +### Input + +`.segmented-control__input` can be used on the radio inputs. + +### Label + +`.segmented-control__label` can be used on the radio labels. + +The [Icon](?path=/docs/components-icon--docs) component can be used within the label as a prefix or suffix and will follow the sizing appropriately. + + + +### Size + +`.segmented-control--small`, `.segmented-control--medium`, `.segmented-control--large` (with large being the default) modify the size of any other segmented control class by changing the font, padding, and height to be smaller or larger. + + + +### Full Width + +`.segmented-control--full-width` can be used to make the segmented control take up the full width of its container. + + + +## SegmentedControl API + +Styles are built on css variables scoped to the segmented control. + +Here are the variables that can be customized. + +{/* prettier-ignore-start */} +```css +/* Some global tokens are overridden within this component */ +--op-input-inner-focus +--op-input-focus-primary + +/* Public API (customizable component options) */ +--_op-segmented-control-height-small +--_op-segmented-control-height-medium +--_op-segmented-control-height-large + +--_op-segmented-control-font-small +--_op-segmented-control-font-medium +--_op-segmented-control-font-large + +--_op-segmented-control-label-padding-small +--_op-segmented-control-label-padding-medium +--_op-segmented-control-label-padding-large + +--_op-segmented-control-label-gap-small +--_op-segmented-control-label-gap-medium +--_op-segmented-control-label-gap-large + +--_op-segmented-control-color-icon-default +--_op-segmented-control-color-icon-active +``` +{/* prettier-ignore-end */} + +## Customizing Segmented Control styles + +
+ +The segmented control classes are structured using the [BEM methodology](https://getbem.com/naming). + +This allows us to define core styles on a main [block](https://getbem.com/naming/#block) class, and use [modifiers](https://getbem.com/naming/#modifier) to encapsulate variant styles. You can modify all segmented control behavior by overriding the `.segmented-control` class and setting any properties: + +```css +.segmented-control { + color: red; +} +``` + +If you need to override the behavior of a particular segmented control modifier, you can open the respective class and set or change properties + +```css +.segmented-control--small { + color: red; +} +``` + +## New Segmented Control Variations + +
+ +Your application may need a variation. To add one, just follow this template. Note the double hyphen, indicating that this is a [modifier](https://getbem.com/naming/#modifier): + +```css +.segmented-control--{name} { + background-color: white; + color: purple; + + &.segmented-control--small { + color: red; + } + + &.segmented-control--medium { + color: green; + } + + &.segmented-control--large { + color: blue; + } +} +``` diff --git a/src/stories/Components/SegmentedControl/SegmentedControl.stories.js b/src/stories/Components/SegmentedControl/SegmentedControl.stories.js new file mode 100644 index 00000000..ee61776f --- /dev/null +++ b/src/stories/Components/SegmentedControl/SegmentedControl.stories.js @@ -0,0 +1,58 @@ +import { createSegmentedControl } from './SegmentedControl.js' + +export default { + title: 'Components/Segmented Control', + render: ({ size, ...args }) => { + return createSegmentedControl({ size, ...args }) + }, + argTypes: { + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + }, + options: { control: 'number' }, + fullWidth: { + control: 'boolean', + }, + showPrefixIcon: { + control: 'boolean', + description: 'This is not a class. It just provides an example of using icons within the options', + }, + showSuffixIcon: { + control: 'boolean', + description: 'This is not a class. It just provides an example of using icons within the options', + }, + }, + parameters: { + layout: 'padded', + }, +} + +export const Default = { + args: { + showPrefixIcon: false, + showSuffixIcon: false, + options: 3, + size: 'medium', + }, +} + +export const Size = { + args: { + label: 'Small', + size: 'small', + }, +} + +export const FullWidth = { + args: { + label: 'Full Width', + fullWidth: true, + }, +} + +export const WithIcons = { + args: { + showSuffixIcon: true, + }, +} diff --git a/src/stories/Components/Sidebar/Sidebar.mdx b/src/stories/Components/Sidebar/Sidebar.mdx index 3d5ea9d9..06c59726 100644 --- a/src/stories/Components/Sidebar/Sidebar.mdx +++ b/src/stories/Components/Sidebar/Sidebar.mdx @@ -25,7 +25,7 @@ For instructions on how to integrate a sidebar into your applications layout, se
...
``` -Any [Button](?path=/docs/navigation-components-button--docs#default) style can be used for the links. +Any [Button](?path=/docs/components-button--docs#default) style can be used for the links. - Drawer will use the normal button style, but left aligned - Compact will use the `.icon-with-label` style diff --git a/src/stories/Components/Switch/Switch.mdx b/src/stories/Components/Switch/Switch.mdx index a2cc33a5..0417fe65 100644 --- a/src/stories/Components/Switch/Switch.mdx +++ b/src/stories/Components/Switch/Switch.mdx @@ -17,9 +17,9 @@ Switch classes can be used to create a stylized checkbox or boolean input. ## Note on Implementation -This is just a styling pattern and does not implement the form submission functionality. That is up to the projects needs. +This is just a styling pattern that builds on standard checkbox inputs. Your project may need some tooling to generate this easily. -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. +A commonly used tool for Ruby on Rails projects is [SimpleForm](https://github.com/heartcombo/simple_form). It allows you to build forms with pre-made 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 SimpleForm with Optics classes applied. diff --git a/src/stories/Components/Tab/Tab.js b/src/stories/Components/Tab/Tab.js index 4d228aa9..9323dc9e 100644 --- a/src/stories/Components/Tab/Tab.js +++ b/src/stories/Components/Tab/Tab.js @@ -4,7 +4,7 @@ export const createTab = ({ size = 'large', activeTab = 'USA', disabledTab = 'Ca const createTabItem = (item) => { const link = document.createElement('a') - link.href = '/?path=/docs/navigation-components-tab--docs' + link.href = '/?path=/docs/components-tab--docs' link.className = [ 'tab', diff --git a/src/stories/Components/Table/Table.mdx b/src/stories/Components/Table/Table.mdx index bff9442b..e868e47f 100644 --- a/src/stories/Components/Table/Table.mdx +++ b/src/stories/Components/Table/Table.mdx @@ -99,7 +99,7 @@ These are best used in conjunction with a wrapping container fixed table height, ### With Pagination -The [Pagination](?path=/docs/navigation-components-pagination--docs) component can be used with the table to provide a way to navigate through a large dataset. +The [Pagination](?path=/docs/components-pagination--docs) component can be used with the table to provide a way to navigate through a large dataset. Here is an example of using it in the table footer. diff --git a/src/stories/Components/Tag/Tag.mdx b/src/stories/Components/Tag/Tag.mdx index 307913bf..17061001 100644 --- a/src/stories/Components/Tag/Tag.mdx +++ b/src/stories/Components/Tag/Tag.mdx @@ -13,7 +13,7 @@ import { createAlert } from '../Alert/Alert.js' }} > -The tag component can be applied to an element with a button within it. The Tag component is similar to the Badge component, however it has a different semantic purpose. Tag is intended to be used for interaction and input where Badge is intended to be used for Notification and Information. See [Badge](?path=/docs/content-components-badge--docs) for details on its usage. +The tag component can be applied to an element with a button within it. The Tag component is similar to the Badge component, however it has a different semantic purpose. Tag is intended to be used for interaction and input where Badge is intended to be used for Notification and Information. See [Badge](?path=/docs/components-badge--docs) for details on its usage. The tag will typically have a button within it. The button can be used to remove the tag from the UI. For Example, managing catgories or metadata tags on a data record. @@ -88,7 +88,7 @@ Tag can be used as a standalone component, however, it does have a few dependenc The tag classes are structured using the [BEM methodology](https://getbem.com/naming). -This allows us to define core styles on a main [block](https://getbem.com/naming/#block) class, and use [modifiers](https://getbem.com/naming/#modifier) to encapsulate variant styles. You can modify all tag behavior by overriding the `.tag` placeholder selector and setting any properties: +This allows us to define core styles on a main [block](https://getbem.com/naming/#block) class, and use [modifiers](https://getbem.com/naming/#modifier) to encapsulate variant styles. You can modify all tag behavior by overriding the `.tag` class and setting any properties: ```css .tag { diff --git a/src/stories/Components/Tooltip/Tooltip.mdx b/src/stories/Components/Tooltip/Tooltip.mdx index cf67e183..a8cf5950 100644 --- a/src/stories/Components/Tooltip/Tooltip.mdx +++ b/src/stories/Components/Tooltip/Tooltip.mdx @@ -48,7 +48,7 @@ Tooltip can be used as a standalone component, however, it does have a few depen ## Note on usage with Button -There are cases when you might want to put a tooltip on a disabled [Button](?path=/docs/navigation-components-button--docs). Unfortunately due to the implementation of button which prioritizes simpler and easier to customize code, the hover is blocked which causes the tooltip to not show up. +There are cases when you might want to put a tooltip on a disabled [Button](?path=/docs/components-button--docs). Unfortunately due to the implementation of button which prioritizes simpler and easier to customize code, the hover is blocked which causes the tooltip to not show up. The workaround for this is to wrap your disabled button in a span and put the tooltip on the span instead. diff --git a/src/stories/Overview/Addons.mdx b/src/stories/Overview/Addons.mdx index 16b2fd2e..af66741f 100644 --- a/src/stories/Overview/Addons.mdx +++ b/src/stories/Overview/Addons.mdx @@ -35,7 +35,7 @@ Optics supports alternative icon libraries. It currently supports These can be imported alongside the base design system to provide additional icon options. -For more information on how to use these icons, see the [Icon Component](?path=/docs/visual-components-icon--docs). +For more information on how to use these icons, see the [Icon Component](?path=/docs/components-icon--docs). ```css @import '@rolemodel/optics'; diff --git a/src/stories/Recipes/Layout/Layout.mdx b/src/stories/Recipes/Layout/Layout.mdx index 393a4606..e3f5e09c 100644 --- a/src/stories/Recipes/Layout/Layout.mdx +++ b/src/stories/Recipes/Layout/Layout.mdx @@ -99,7 +99,7 @@ If you need a fullscreen spinner, use a layout like this: ## With Sidebar -For instructions on the sidebar itself, see [Sidebar Component](?path=/docs/navigation-components-sidebar--default-drawer) +For instructions on the sidebar itself, see [Sidebar Component](?path=/docs/components-sidebar--default-drawer) A layout with a sidebar looks like the following: @@ -136,7 +136,7 @@ A layout with a sidebar looks like the following: ## With Navbar -For instructions on the navbar itself, see [Navbar Component](?path=/docs/navigation-components-navbar--default-navbar) +For instructions on the navbar itself, see [Navbar Component](?path=/docs/components-navbar--default-navbar) A layout with a navbar looks like the following: @@ -165,7 +165,7 @@ A layout with a navbar looks like the following: ## Sidebar with Navbar and Side Panel -For instructions on the side panel itself, see [Side Panel Component](?path=/docs/content-components-sidepanel--docs) +For instructions on the side panel itself, see [Side Panel Component](?path=/docs/components-sidepanel--docs) A layout with a side panel looks like the following: diff --git a/src/stories/Tokens/Shadow.mdx b/src/stories/Tokens/Shadow.mdx index be0cf8f6..a2760c6c 100644 --- a/src/stories/Tokens/Shadow.mdx +++ b/src/stories/Tokens/Shadow.mdx @@ -12,7 +12,7 @@ import { createSourceCodeLink } from '../helpers/sourceCodeLink.js' }} > -Shadow tokens can be used to create an elevation effect on any element. There are also [Card classes](?path=/docs/content-components-card--docs#shadow) to create an elevated card effect. +Shadow tokens can be used to create an elevation effect on any element. There are also [Card classes](?path=/docs/components-card--docs#shadow) to create an elevated card effect. ## Usage diff --git a/tools/generate-graph.dot b/tools/generate-graph.dot index f8a7583e..35fd542f 100755 --- a/tools/generate-graph.dot +++ b/tools/generate-graph.dot @@ -5,48 +5,43 @@ digraph dependencies { node [shape = box;]; "Fonts, Tokens, Base"; - "Accordion" -> "Fonts, Tokens, Base"; - "Accordion" -> "Icon"; - - "Alert" -> "Fonts, Tokens, Base"; - "Alert" -> "Icon"; - - "Badge" -> "Fonts, Tokens, Base"; - "Badge" -> "Icon"; - - "Button" -> "Fonts, Tokens, Base"; - "Button" -> "Icon"; - - "Tag" -> "Fonts, Tokens, Base"; - "Tag" -> "Icon"; - - "Button Group" -> "Fonts, Tokens, Base"; - "Button Group" -> "Button"; - - "Sidebar" -> "Fonts, Tokens, Base"; - "Sidebar" -> "Button"; - - "Navbar" -> "Fonts, Tokens, Base"; - "Navbar" -> "Button"; - - "Pagination" -> "Button"; - "Pagination" -> "Form"; - "Pagination" -> "Fonts, Tokens, Base"; - - "Avatar" -> "Fonts, Tokens, Base"; - "Breadcrumbs" -> "Fonts, Tokens, Base"; - "Card" -> "Fonts, Tokens, Base"; - "Content-Header" -> "Fonts, Tokens, Base"; - "Confirm Dialog" -> "Fonts, Tokens, Base"; - "Divider" -> "Fonts, Tokens, Base"; - "Form" -> "Fonts, Tokens, Base"; - "Icon" -> "Fonts, Tokens, Base"; - "Modal" -> "Fonts, Tokens, Base"; - "Side Panel" -> "Fonts, Tokens, Base"; - "Spinner" -> "Fonts, Tokens, Base"; - "Switch" -> "Fonts, Tokens, Base"; - "Tab" -> "Fonts, Tokens, Base"; - "Table" -> "Fonts, Tokens, Base"; - "Text Pair" -> "Fonts, Tokens, Base"; - "Tooltip" -> "Fonts, Tokens, Base"; + "Fonts, Tokens, Base" -> "Accordion"; + "Fonts, Tokens, Base" -> "Alert"; + "Fonts, Tokens, Base" -> "Avatar"; + "Fonts, Tokens, Base" -> "Badge"; + "Fonts, Tokens, Base" -> "Breadcrumbs"; + "Fonts, Tokens, Base" -> "Button"; + "Fonts, Tokens, Base" -> "Button Group"; + "Fonts, Tokens, Base" -> "Card"; + "Fonts, Tokens, Base" -> "Content-Header"; + "Fonts, Tokens, Base" -> "Confirm Dialog"; + "Fonts, Tokens, Base" -> "Divider"; + "Fonts, Tokens, Base" -> "Form"; + "Fonts, Tokens, Base" -> "Icon"; + "Fonts, Tokens, Base" -> "Modal"; + "Fonts, Tokens, Base" -> "Navbar"; + "Fonts, Tokens, Base" -> "Pagination"; + "Fonts, Tokens, Base" -> "Segmented Control"; + "Fonts, Tokens, Base" -> "Sidebar"; + "Fonts, Tokens, Base" -> "Side Panel"; + "Fonts, Tokens, Base" -> "Spinner"; + "Fonts, Tokens, Base" -> "Switch"; + "Fonts, Tokens, Base" -> "Tab"; + "Fonts, Tokens, Base" -> "Table"; + "Fonts, Tokens, Base" -> "Tag"; + "Fonts, Tokens, Base" -> "Text Pair"; + "Fonts, Tokens, Base" -> "Tooltip"; + + "Icon" -> "Accordion"; + "Icon" -> "Alert"; + "Icon" -> "Badge"; + "Icon" -> "Button"; + "Icon" -> "Tag"; + + "Button" -> "Button Group"; + "Button" -> "Sidebar"; + "Button" -> "Navbar"; + "Button" -> "Pagination"; + + "Form" -> "Pagination"; } diff --git a/tools/templates/component/??name??(pascalCase).mdx b/tools/templates/component/??name??(pascalCase).mdx index 20e05d48..44eb3237 100644 --- a/tools/templates/component/??name??(pascalCase).mdx +++ b/tools/templates/component/??name??(pascalCase).mdx @@ -1,5 +1,6 @@ import { Meta, Story, Canvas, Controls } from '@storybook/blocks' import * as ??name??(pascalCase)Stories from './??name??(pascalCase).stories' +import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js' import { createAlert } from '../Alert/Alert.js' @@ -7,6 +8,12 @@ import { createAlert } from '../Alert/Alert.js' # ??name??(pascalCase) +
+ Brief overview description of how to use ??name??(pascalCase) classes ## Playground @@ -67,7 +74,7 @@ Here are the variables that can be customized. The ??name??(lowerCase) classes are structured using the [BEM methodology](https://getbem.com/naming). -This allows us to define core styles on a main [block](https://getbem.com/naming/#block) class, and use [modifiers](https://getbem.com/naming/#modifier) to encapsulate variant styles. You can modify all ??name??(lowerCase) behavior by overriding the `.??name??(lowerCase)` placeholder selector and setting any properties: +This allows us to define core styles on a main [block](https://getbem.com/naming/#block) class, and use [modifiers](https://getbem.com/naming/#modifier) to encapsulate variant styles. You can modify all ??name??(lowerCase) behavior by overriding the `.??name??(lowerCase)` class and setting any properties: ```css .??name??(lowerCase) { @@ -96,6 +103,7 @@ Your application may need a variation. To add one, just follow this template. No ```css .??name??(lowerCase)--{name} { - @extend %??name??(lowerCase)-global; + background-color: + color: } ```