fix(docs): Update Component docs (#815)

* chore: Remove button docs ref glyphs * fix(docs): Update component docs
carbon-design-system · May 30, 2018 · 6d7c0c1 · 6d7c0c1
1 parent 5cd0c48
commit 6d7c0c1
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 30 deletions.
diff --git 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 `<title>` 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
@@ -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
@@ -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
@@ -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>
diff --git 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  |
+| .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  |
diff --git 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
@@ -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
@@ -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
@@ -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.