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

Allow pt-disabled colors in label, select and input-group, and update documentation #448

Merged
merged 4 commits into from
Jan 12, 2017
Merged

Allow pt-disabled colors in label, select and input-group, and update documentation #448

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7585254
Fix label and select colors when disabled, and update pt-disabled doc…
leebyp Jan 11, 2017
04c9791
reword documentation and cleanup
leebyp Jan 11, 2017
a0369be
more rewording and cleanup
leebyp Jan 11, 2017
5370dc7
update disabled labels docs
leebyp Jan 12, 2017
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
3 changes: 3 additions & 0 deletions packages/core/src/common/classes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ export const COLLAPSIBLE_LIST = "pt-collapse-list";
export const CONTEXT_MENU = "pt-context-menu";
export const CONTEXT_MENU_POPOVER_TARGET = "pt-context-menu-popover-target";

export const CONTROL = "pt-control";
export const CONTROL_INDICATOR = "pt-control-indicator";

export const DIALOG = "pt-dialog";
export const DIALOG_BODY = "pt-dialog-body";
export const DIALOG_CLOSE_BUTTON = "pt-dialog-close-button";
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/components/forms/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,4 +205,8 @@ $input-focus-box-shadow: inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !
color: $pt-icon-color;
content: $pt-icon-caret-down;
pointer-events: none;

&.pt-disabled {
color: $pt-icon-color-disabled;
}
}
11 changes: 8 additions & 3 deletions packages/core/src/components/forms/_controls.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
text-transform: none;
line-height: $control-indicator-size;

&.pt-disabled {
cursor: not-allowed;
color: $pt-text-color-disabled;
}

&.pt-inline {
display: inline-block;
margin-right: $pt-grid-size * 2;
Expand Down Expand Up @@ -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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

:indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
<code>input.indeterminate = true</code>.
.pt-align-right - Right-aligned indicator
Expand Down Expand Up @@ -252,7 +257,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
</label>

:checked - Selected
:disabled - Disabled
:disabled - Disabled. This should be used with a <code>.pt-disabled</code> modifier (not shown below).
.pt-align-right - Right-aligned indicator
.pt-large - Large

Expand Down Expand Up @@ -343,7 +348,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
</label>

:checked - Selected
:disabled - Disabled
:disabled - Disabled. This should be used with a <code>.pt-disabled</code> modifier (not shown below).
.pt-align-right - Right-aligned indicator
.pt-large - Large

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/forms/_input-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>&#60;input&#62;</code> and <code>&#60;button&#62;</code>.
:disabled - Disabled input. Must be added separately to the <code>&#60;input&#62;</code> and <code>&#60;button&#62;</code>. Should be used with a <code>.pt-disabled</code> modifier (not shown below).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Also add .pt-disabled to .pt-input-group for icon coloring."

.pt-round - Rounded caps. Button will also be rounded.
.pt-large - Large group. Children will adjust size accordingly.
.pt-intent-primary - Primary intent. (All 4 intents are supported.)
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/forms/_input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this shouldn't be necessary. disabled attribute is sufficient for .pt-input

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This example includes an icon - reworded to be more obvious.

.pt-large - Large

Styleguide components.forms.input.search
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/forms/_select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Add .pt-disabled to .pt-select for icon coloring."

.pt-large - Large
.pt-fill - Expand to fill parent container

Expand Down
10 changes: 8 additions & 2 deletions packages/core/src/components/forms/controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
import * as classNames from "classnames";
import * as React from "react";

import * as Classes from "../../common/classes";
import { IProps, removeNonHTMLProps } from "../../common/props";
import { safeInvoke } from "../../common/utils";

Expand Down Expand Up @@ -39,10 +40,15 @@ export class Control<P extends IControlProps> extends React.Component<React.HTML
// generates control markup for given input type.
// optional inputRef in case the component needs reference for itself (don't forget to invoke the prop!).
protected renderControl(type: "checkbox" | "radio", typeClassName: string, inputRef = this.props.inputRef) {
const className = classNames(
Classes.CONTROL,
typeClassName,
this.props.className,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.props.className should always come last in classNames() so user classes take precedence.

{[Classes.DISABLED]: this.props.disabled});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

spaces inside braces. { [key]: val }

return (
<label className={classNames("pt-control", typeClassName, this.props.className)} style={this.props.style}>
<label className={className} style={this.props.style}>
<input {...removeNonHTMLProps(this.props, ["children"], true)} ref={inputRef} type={type} />
<span className="pt-control-indicator" />
<span className={Classes.CONTROL_INDICATOR} />
{this.props.label}
{this.props.children}
</label>
Expand Down