Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(docs): Update Component docs #815

Merged
merged 4 commits into from
May 30, 2018
Merged

fix(docs): Update Component docs #815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9b35f75
chore: Remove button docs ref glyphs
alisonjoseph May 29, 2018
c25e1e2
fix(docs): Update component docs
alisonjoseph May 29, 2018
4c47f53
Merge branch 'v9' into component-docs
alisonjoseph May 29, 2018
abfce73
Merge branch 'v9' into component-docs
alisonjoseph May 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 1 addition & 12 deletions src/components/button/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |

Expand All @@ -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>
```
4 changes: 4 additions & 0 deletions src/components/button/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
color: $inverse-01;
}

&:active {
color: $support-01;
}

&:hover:disabled,
&:focus:disabled {
color: $support-01;
Expand Down
7 changes: 3 additions & 4 deletions src/components/checkbox/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
22 changes: 11 additions & 11 deletions src/components/checkbox/checkbox.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
7 changes: 4 additions & 3 deletions src/components/code-snippet/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
1 change: 1 addition & 0 deletions src/components/dropdown/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
10 changes: 10 additions & 0 deletions src/components/modal/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
12 changes: 12 additions & 0 deletions src/components/search/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
11 changes: 11 additions & 0 deletions src/components/select/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand Down