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

[v4] [core] fix(AnchorButton): warning button colors #5021

Merged
merged 3 commits into from
Nov 11, 2021
Merged

[v4] [core] fix(AnchorButton): warning button colors #5021

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
15bd1bb
[v4] [core] fix(AnchorButton): warning disabled button colors
adidahiya Nov 11, 2021
7042098
fix lint
adidahiya Nov 11, 2021
2098b82
more styling tweaks
adidahiya Nov 11, 2021
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
39 changes: 27 additions & 12 deletions packages/core/src/blueprint.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,33 +151,48 @@ $tree-intent-icon-colors-modern: (
// Contrast for buttons
.#{$ns}-button {
// Use dark text for warning intent
&.#{$ns}-intent-warning:not([class*="#{$ns}-minimal"]) {
&:not(:disabled) {
background: $orange5;
color: $pt-text-color;
&.#{$ns}-intent-warning {
background: $orange5;
color: $pt-text-color;

.#{$ns}-icon>svg:not([fill]) {
color: rgba($dark-gray1, 0.7);
}
.#{$ns}-icon > svg {
fill: rgba($dark-gray1, 0.7);
}

&:not(.#{$ns}-disabled):not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
&:hover {
background: $orange4;
color: $pt-text-color;
}

&:active {
&:active,
&.#{$ns}-active {
background: $orange3;
color: $pt-text-color;
}
}

&:disabled {
color: $pt-text-color-disabled;
&:disabled,
&.#{$ns}-disabled {
background: rgba($orange3, 0.5);
color: rgba($dark-gray1, 0.35);

.#{$ns}-dark & {
color: $pt-dark-text-color-disabled;
color: rgba($dark-gray1, 0.6);
}
}
}

&.#{$ns}-minimal,
&.#{$ns}-outlined {
background: none;

.#{$ns}-dark & {
.#{$ns}-icon > svg {
fill: $orange5;
}
}
}
}

&.#{$ns}-minimal {
@mixin pt-button-minimal-intent-modern($active-text-color) {
Expand Down
6 changes: 5 additions & 1 deletion packages/docs-app/src/examples/core-examples/buttonsExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@
import * as React from "react";

import { AnchorButton, Button, Code, H5, Intent, Switch } from "@blueprintjs/core";
import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-theme";
import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";

import { IntentSelect } from "./common/intentSelect";
import { Size, SizeSelect } from "./common/sizeSelect";

export interface IButtonsExampleState {
Expand Down Expand Up @@ -60,6 +61,8 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE

private handleSizeChange = (size: Size) => this.setState({ size });

private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));

private wiggleTimeoutId: number;

public componentWillUnmount() {
Expand All @@ -78,6 +81,7 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
<Switch label="Minimal" checked={this.state.minimal} onChange={this.handleMinimalChange} />
<Switch label="Outlined" checked={this.state.outlined} onChange={this.handleOutlinedChange} />
<SizeSelect size={this.state.size} onChange={this.handleSizeChange} />
<IntentSelect intent={this.state.intent} onChange={this.handleIntentChange} />
<H5>Example</H5>
<Switch label="Icons only" checked={this.state.iconOnly} onChange={this.handleIconOnlyChange} />
</>
Expand Down