From bf839d03ef28c0ff3fd99042d3a10d4aaa82d6b5 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Wed, 30 May 2018 10:14:09 -0500 Subject: [PATCH] fix(docs): Update Component docs (#815) * chore: Remove button docs ref glyphs * fix(docs): Update component docs --- src/components/button/README.md | 13 +------------ src/components/button/_button.scss | 4 ++++ src/components/checkbox/README.md | 7 +++---- src/components/checkbox/checkbox.hbs | 22 +++++++++++----------- src/components/code-snippet/README.md | 7 ++++--- src/components/dropdown/README.md | 1 + src/components/modal/README.md | 10 ++++++++++ src/components/search/README.md | 12 ++++++++++++ src/components/select/README.md | 11 +++++++++++ 9 files changed, 57 insertions(+), 30 deletions(-) diff --git a/src/components/button/README.md b/src/components/button/README.md index 1608daf1c858..9f4a0de37e64 100644 --- a/src/components/button/README.md +++ b/src/components/button/README.md @@ -18,6 +18,7 @@ Use these modifiers with `.bx--btn` class. |---------------------|-----------------------------------------------| | .bx--btn--primary | Selector for applying primary button styles | | .bx--btn--secondary | Selector for applying secondary button styles | +| .bx--btn--tertiary | Selector for applying tertiary button styles | | .bx--btn--danger | Selector for applying danger button styles | | .bx--btn--sm | Selector for applying small button styles | @@ -39,15 +40,3 @@ You can also include `` for better accessibility to describe what the but </svg> </button> ``` - -Be aware that only `--glyph` icons should be used with buttons. -Here's an example using `carbon-icons.svg`. - -```html -<button class="bx--btn bx--btn--secondary" type="button"> - Secondary - <svg class="bx--btn__icon"> - <use xlink:href="/carbon-icons/carbon-icons.svg#add--glyph"></use> - </svg> -</button> -``` diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index e9861c4389e2..12939390501d 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -123,6 +123,10 @@ color: $inverse-01; } + &:active { + color: $support-01; + } + &:hover:disabled, &:focus:disabled { color: $support-01; diff --git a/src/components/checkbox/README.md b/src/components/checkbox/README.md index fb650e08d19c..336a2f048e90 100644 --- a/src/components/checkbox/README.md +++ b/src/components/checkbox/README.md @@ -9,10 +9,9 @@ #### Options -| Option | Default Selector | Description | -|---------------------|------------------------------------------------|--------------------------------------------------------------------| -| selectorInit | .bx--checkbox | The CSS selector to find checkbox - | +| Option | Default Selector | Description | +|---------------------|------------------------------------------------|--| +| selectorInit | .bx--checkbox | The CSS selector to find checkbox | ### FAQ diff --git a/src/components/checkbox/checkbox.hbs b/src/components/checkbox/checkbox.hbs index ffd3be5faebe..f8222e7f7d95 100644 --- a/src/components/checkbox/checkbox.hbs +++ b/src/components/checkbox/checkbox.hbs @@ -5,16 +5,16 @@ <input id="bx--checkbox-new" class="bx--checkbox" type="checkbox" value="new" name="checkbox" checked> <label for="bx--checkbox-new" class="bx--checkbox-label">Checkbox</label> </div> - <!-- input + label disabled --> - <div class="bx--form-item bx--checkbox-wrapper"> - <input id="bx--checkbox-disabled" class="bx--checkbox" type="checkbox" value="new" name="checkbox" disabled> - <label for="bx--checkbox-disabled" class="bx--checkbox-label">Disabled checkbox</label> - </div> <!-- input + label indeterminate --> <div class="bx--form-item bx--checkbox-wrapper"> <input id="bx--checkbox-ind" class="bx--checkbox" type="checkbox" value="new" name="checkbox" aria-checked="mixed"> <label for="bx--checkbox-ind" class="bx--checkbox-label">Indeterminate checkbox</label> </div> + <!-- input + label disabled --> + <div class="bx--form-item bx--checkbox-wrapper"> + <input id="bx--checkbox-disabled" class="bx--checkbox" type="checkbox" value="new" name="checkbox" disabled> + <label for="bx--checkbox-disabled" class="bx--checkbox-label">Disabled checkbox</label> + </div> </fieldset> <fieldset class="bx--fieldset"> <legend class="bx--label">Checkbox (input > label)</legend> @@ -27,16 +27,16 @@ </div> <!-- label > input --> <div class="bx--form-item bx--checkbox-wrapper"> - <label for="bx--checkbox-new2" class="bx--checkbox-label"> - <input id="bx--checkbox-new2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" disabled> - Disabled checkbox + <label for="bx--checkbox-ind2" class="bx--checkbox-label" data-contained-checkbox-state="mixed"> + <input id="bx--checkbox-ind2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" aria-checked="mixed"> + Indeterminate checkbox </label> </div> <!-- label > input --> <div class="bx--form-item bx--checkbox-wrapper"> - <label for="bx--checkbox-ind2" class="bx--checkbox-label" data-contained-checkbox-state="mixed"> - <input id="bx--checkbox-ind2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" aria-checked="mixed"> - Indeterminate checkbox + <label for="bx--checkbox-new2" class="bx--checkbox-label"> + <input id="bx--checkbox-new2" class="bx--checkbox" type="checkbox" value="yellow" name="checkbox" disabled> + Disabled checkbox </label> </div> </fieldset> \ No newline at end of file diff --git a/src/components/code-snippet/README.md b/src/components/code-snippet/README.md index df4a6407152d..f4f39a2a525b 100644 --- a/src/components/code-snippet/README.md +++ b/src/components/code-snippet/README.md @@ -15,6 +15,7 @@ Use these modifiers with `.bx--snippet` class. | Selector | Description | |----------------------------------|------------------------------------| -| .bx--snippet--single | Styles for multiple lines of code | -| .bx--snippet--multi | Styles for single lines of code | -| .bx--snippet--inline | Styles for code inline inside text | \ No newline at end of file +| .bx--snippet--single | Selector for multiple lines of code | +| .bx--snippet--multi | Selector for single lines of code | +| .bx--snippet--inline | Selector for inline code inside text | +| .bx--snippet--light | Selector for inline code inside text with a light background. Can only be used with .bx--snippet-inline selector | \ No newline at end of file diff --git a/src/components/dropdown/README.md b/src/components/dropdown/README.md index 37792f9da06d..31b11a9245db 100644 --- a/src/components/dropdown/README.md +++ b/src/components/dropdown/README.md @@ -8,6 +8,7 @@ Use these modifiers with `.bx--dropdown` class. |-------------------------|-------------------------------------------------------| | .bx--dropdown--selected | Applies specific styles for a selected dropdown item. | | .bx--dropdown--open | Applies specific styles when the dropdown is opened | +| .bx--dropdown--up | Applies style to have the dropdown slide up instead of down | ### JavaScript diff --git a/src/components/modal/README.md b/src/components/modal/README.md index ffaffdb4b3de..1c0dcffcd2fe 100644 --- a/src/components/modal/README.md +++ b/src/components/modal/README.md @@ -1,3 +1,13 @@ +### SCSS + +#### Modifiers + +Use these modifiers with `.bx--modal` class. + +| Name | Description | +|-------------------------|-------------------------------------------------------| +| .bx--modal--danger | Selector for applying danger modal styles | + ### JavaScript #### Public Methods diff --git a/src/components/search/README.md b/src/components/search/README.md index a86767c2651d..020de51566a7 100644 --- a/src/components/search/README.md +++ b/src/components/search/README.md @@ -1,3 +1,15 @@ +### SCSS + +#### Modifiers + +Use these modifiers with `.bx--search` class. + +| Name | Description | +|--------------------|----------------------------------------------| +| .bx--search--sm | Selector for applying small search styles | +| .bx--search--lg | Selector for applying standard search styles | +| .bx--search--light | Selector for applying light search styles | + ### JavaScript #### Public Methods diff --git a/src/components/select/README.md b/src/components/select/README.md index e04c7f8bb189..56d1f5bb78e3 100644 --- a/src/components/select/README.md +++ b/src/components/select/README.md @@ -1,3 +1,14 @@ +### SCSS + +#### Modifiers + +Use these modifiers with `.bx--select` class. + +| Name | Description | +|----------------------|----------------------------------------------| +| .bx--select--inline | Selector for applying inline select styles | +| .bx--select--light | Selector for applying light select styles | + #### Inline Select width The width of the inline select box should be the width of the default placeholder text + 16px/1rem of padding.