From 29d82736a7cec4452d548878937274a3c1049d90 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 18 Mar 2022 15:58:25 -0400 Subject: [PATCH] update docs --- docs/assets/plugins/code-block/code-block.css | 16 ++--- docs/components/input.md | 56 ++++++++-------- docs/components/progress-bar.md | 28 ++++---- docs/components/range.md | 66 +++++++++---------- docs/components/textarea.md | 56 ++++++++-------- 5 files changed, 111 insertions(+), 111 deletions(-) diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css index 72b5a5cb..ce93ac5d 100644 --- a/docs/assets/plugins/code-block/code-block.css +++ b/docs/assets/plugins/code-block/code-block.css @@ -39,7 +39,7 @@ bottom: 0; width: 1.75rem; font-size: 20px; - color: var(--sl-color-neutral-700); + color: var(--sl-color-neutral-600); background-color: var(--sl-color-neutral-0); border-left: solid 1px var(--sl-color-neutral-200); border-top-right-radius: 3px; @@ -91,7 +91,7 @@ font-size: 0.7rem; font-weight: 500; text-transform: uppercase; - color: var(--sl-color-neutral-700); + color: var(--sl-color-neutral-600); padding: 0 1rem; cursor: pointer; } @@ -110,7 +110,7 @@ .code-block__button--selected { font-weight: 700; - color: var(--sl-color-primary-700); + color: var(--sl-color-primary-600); } .code-block__button--codepen { @@ -132,13 +132,13 @@ box-shadow: 0 0 0 1px var(--sl-color-primary-400); border-right-color: transparent; background-color: var(--sl-color-primary-50); - color: var(--sl-color-primary-700); + color: var(--sl-color-primary-600); z-index: 1; } .code-block__button:focus-visible { outline: none; - color: var(--sl-color-primary-700); + color: var(--sl-color-primary-600); border-color: var(--sl-color-primary-400); border-right-color: transparent; background-color: var(--sl-color-primary-50); @@ -153,7 +153,7 @@ align-items: center; justify-content: center; width: 100%; - color: var(--sl-color-neutral-700); + color: var(--sl-color-neutral-600); cursor: pointer; -webkit-appearance: none; } @@ -185,7 +185,7 @@ .markdown-section .docsify-copy-code-button.copied { animation: pulse 0.75s; - --pulse-color: var(--sl-color-neutral-700); + --pulse-color: var(--sl-color-neutral-600); } @keyframes pulse { @@ -214,7 +214,7 @@ } .markdown-section .docsify-copy-code-button:active { - background-color: var(--sl-color-neutral-700); + background-color: var(--sl-color-neutral-600); transform: scale(0.92); } diff --git a/docs/components/input.md b/docs/components/input.md index 75619eba..0c132632 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -18,6 +18,34 @@ const App = () => ; ## Examples +### Labels + +Use the `label` attribute to give the input an accessible label. For labels that contain HTML, use the `label` slot instead. + +```html preview + +``` + +```jsx react +import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ; +``` + +### Help Text + +Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. + +```html preview + +``` + +```jsx react +import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ; +``` + ### Placeholders Use the `placeholder` attribute to add a placeholder. @@ -234,32 +262,4 @@ const App = () => ( ); ``` -### Labels - -Use the `label` attribute to give the input an accessible label. For labels that contain HTML, use the `label` slot instead. - -```html preview - -``` - -```jsx react -import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ; -``` - -### Help Text - -Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. - -```html preview - -``` - -```jsx react -import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ; -``` - [component-metadata:sl-input] diff --git a/docs/components/progress-bar.md b/docs/components/progress-bar.md index 7d94339d..b8732a82 100644 --- a/docs/components/progress-bar.md +++ b/docs/components/progress-bar.md @@ -16,20 +16,6 @@ const App = () => ; ## Examples -### Custom Height - -Use the `--height` custom property to set the progress bar's height. - -```html preview - -``` - -```jsx react -import { SlProgressBar } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ; -``` - ### Labels Use the `label` attribute to label the progress bar and tell assistive devices how to announce it. @@ -44,6 +30,20 @@ import { SlProgressBar } from '@shoelace-style/shoelace/dist/react'; const App = () => ; ``` +### Custom Height + +Use the `--height` custom property to set the progress bar's height. + +```html preview + +``` + +```jsx react +import { SlProgressBar } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ; +``` + ### Showing Values Use the default slot to show a value. diff --git a/docs/components/range.md b/docs/components/range.md index da6b0a3a..dfbe056d 100644 --- a/docs/components/range.md +++ b/docs/components/range.md @@ -18,6 +18,39 @@ const App = () => ; ## Examples +### Labels + +Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead. + +```html preview + +``` + +```jsx react +import { SlRange } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ; +``` + +### Help Text + +Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. + +```html preview + +``` + +```jsx react +import { SlRange } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ; +``` + ### Min, Max, and Step Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing. @@ -119,37 +152,4 @@ import { SlRange } from '@shoelace-style/shoelace/dist/react'; const App = () => `Total - ${value}%`} />; ``` -### Labels - -Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead. - -```html preview - -``` - -```jsx react -import { SlRange } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ; -``` - -### Help Text - -Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. - -```html preview - -``` - -```jsx react -import { SlRange } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ; -``` - [component-metadata:sl-range] diff --git a/docs/components/textarea.md b/docs/components/textarea.md index 9d37c915..5b4c80a0 100644 --- a/docs/components/textarea.md +++ b/docs/components/textarea.md @@ -18,6 +18,34 @@ const App = () => ; ## Examples +### Labels + +Use the `label` attribute to give the textarea an accessible label. For labels that contain HTML, use the `label` slot instead. + +```html preview + +``` + +```jsx react +import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ; +``` + +### Help Text + +Add descriptive help text to a textarea with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. + +```html preview + +``` + +```jsx react +import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ; +``` + ### Rows Use the `rows` attribute to change the number of text rows that get shown. @@ -100,34 +128,6 @@ const App = () => ( ); ``` -### Labels - -Use the `label` attribute to give the textarea an accessible label. For labels that contain HTML, use the `label` slot instead. - -```html preview - -``` - -```jsx react -import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ; -``` - -### Help Text - -Add descriptive help text to a textarea with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. - -```html preview - -``` - -```jsx react -import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ; -``` - ### Prevent Resizing By default, textareas can be resized vertically by the user. To prevent resizing, set the `resize` attribute to `none`.