Allow pt-disabled colors in label, select and input-group, and update documentation #448
Conversation
|
this is not really a "fix" since you're implementing a new modifier. |
|
easy way to test: tick the "Inline" switch in Popover example.
|
| const className = classNames( | ||
| Classes.CONTROL, | ||
| typeClassName, | ||
| this.props.className, |
There was a problem hiding this comment.
this.props.className should always come last in classNames() so user classes take precedence.
| Classes.CONTROL, | ||
| typeClassName, | ||
| this.props.className, | ||
| {[Classes.DISABLED]: this.props.disabled}); |
There was a problem hiding this comment.
spaces inside braces. { [key]: val }
| @@ -169,7 +174,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary" | |||
| </label> | |||
|
|
|||
| :checked - Checked | |||
| :disabled - Disabled | |||
| :disabled - Disabled. This should be used with a <code>.pt-disabled</code> modifier (not shown below). | |||
There was a problem hiding this comment.
this doesn't explain how to use it. say something about "add .pt-disabled to .pt-control element to change text color," and for all the similar notes below.
| @@ -51,7 +51,7 @@ Markup: | |||
| <button class="pt-button pt-minimal pt-intent-primary pt-icon-arrow-right" {{:modifier}}></button> | |||
| </div> | |||
|
|
|||
| :disabled - Disabled input. Must be added separately to the <code><input></code> and <code><button></code>. | |||
| :disabled - Disabled input. Must be added separately to the <code><input></code> and <code><button></code>. Should be used with a <code>.pt-disabled</code> modifier (not shown below). | |||
There was a problem hiding this comment.
"Also add .pt-disabled to .pt-input-group for icon coloring."
| @@ -76,7 +76,7 @@ Markup: | |||
| <input class="pt-input" {{:modifier}} type="search" placeholder="Search input" dir="auto" /> | |||
| </div> | |||
|
|
|||
| :disabled - Disabled | |||
| :disabled - Disabled. This should be used with a <code>.pt-disabled</code> modifier (not shown below). | |||
There was a problem hiding this comment.
this shouldn't be necessary. disabled attribute is sufficient for .pt-input
There was a problem hiding this comment.
This example includes an icon - reworded to be more obvious.
| @@ -28,7 +28,7 @@ Markup: | |||
| </select> | |||
| </div> | |||
|
|
|||
| :disabled - Disabled | |||
| :disabled - Disabled. This should be used with a <code>.pt-disabled</code> modifier (not shown below). | |||
There was a problem hiding this comment.
"Add .pt-disabled to .pt-select for icon coloring."
leebyp
changed the title
|
updated PR title, PR description and documentation changes |
| Classes.CONTROL, | ||
| typeClassName, | ||
| { [Classes.DISABLED]: this.props.disabled }, | ||
| this.props.className); |
There was a problem hiding this comment.
close paren should be on its own line, dedented back to original.
function(
args
);
| @@ -343,7 +348,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary" | |||
| </label> | |||
|
|
|||
| :checked - Selected | |||
| :disabled - Disabled | |||
| :disabled - Disabled. Add <code>.pt-disabled</code> to <code>.pt-control</code> to change text color (not shown below). | |||
There was a problem hiding this comment.
"Also add..." to indicate that some additional action is suggested?
|
Updated the |
Fixes #402
Checklist
Changes proposed in this pull request:
.pt-disabled..pt-disabled..pt-disabled.:disabledto include.pt-disabledusage.