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: moved disabled style into the button styles file #18195

Merged
merged 4 commits into from
May 14, 2021
Merged

fix: moved disabled style into the button styles file #18195

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
d9fa017
moved disabled style into button styles
khamudom May 14, 2021
25de3a0
update high contrast styles
khamudom May 14, 2021
4cab120
Change files
khamudom May 14, 2021
05ff7ca
updated commit message
khamudom May 14, 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
7 changes: 7 additions & 0 deletions change/@fluentui-web-components-33ee01f8-ba19-4b46-80cc-ec22b85b7483.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "moved disabled styles from pattern styles to button styles",
"packageName": "@fluentui/web-components",
"email": "khamu@microsoft.com",
"dependentChangeType": "patch"
}
136 changes: 132 additions & 4 deletions packages/web-components/src/button/button.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,146 @@
import { css } from '@microsoft/fast-element';
import { disabledCursor, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
import { SystemColors } from '@microsoft/fast-web-utilities';
import {
AccentButtonStyles,
accentFillRestBehavior,
accentForegroundRestBehavior,
BaseButtonStyles,
LightweightButtonStyles,
neutralFillRestBehavior,
neutralFillStealthRestBehavior,
neutralOutlineRestBehavior,
OutlineButtonStyles,
StealthButtonStyles,
} from '../styles/';
import { appearanceBehavior } from '../utilities/behaviors';

export const ButtonStyles = css`
:host([disabled]),
:host([disabled]:hover),
:host([disabled]:active) {
opacity: var(--disabled-opacity);
background-color: ${neutralFillRestBehavior.var};
cursor: ${disabledCursor};
}

${BaseButtonStyles}
`.withBehaviors(
appearanceBehavior('accent', AccentButtonStyles),
appearanceBehavior('lightweight', LightweightButtonStyles),
appearanceBehavior('outline', OutlineButtonStyles),
appearanceBehavior('stealth', StealthButtonStyles),
forcedColorsStylesheetBehavior(
css`
:host([disabled]),
:host([disabled]:hover),
:host([disabled]:active),
:host([disabled]) .control,
:host([disabled]) .control:hover,
:host([appearance='neutral'][disabled]:hover) .control {
forced-color-adjust: none;
background-color: ${SystemColors.ButtonFace};
border-color: ${SystemColors.GrayText};
color: ${SystemColors.GrayText};
opacity: 1;
}
`,
),
appearanceBehavior(
'accent',
css`
:host([appearance='accent'][disabled]),
:host([appearance='accent'][disabled]:hover),
:host([appearance='accent'][disabled]:active) {
background: ${accentFillRestBehavior.var};
}

${AccentButtonStyles}
`.withBehaviors(
forcedColorsStylesheetBehavior(
css`
:host([appearance='accent'][disabled]) .control,
:host([appearance='accent'][disabled]) .control:hover {
background: ${SystemColors.ButtonFace};
border-color: ${SystemColors.GrayText};
color: ${SystemColors.GrayText};
}
`,
),
),
),
appearanceBehavior(
'lightweight',
css`
:host([appearance='lightweight'][disabled]:hover),
:host([appearance='lightweight'][disabled]:active) {
background-color: transparent;
color: ${accentForegroundRestBehavior.var};
}

:host([appearance='lightweight'][disabled]) .content::before,
:host([appearance='lightweight'][disabled]:hover) .content::before,
:host([appearance='lightweight'][disabled]:active) .content::before {
background: transparent;
}

${LightweightButtonStyles}
`.withBehaviors(
forcedColorsStylesheetBehavior(
css`
:host([appearance='lightweight'][disabled]) .control {
forced-color-adjust: none;
color: ${SystemColors.GrayText};
}

:host([appearance='lightweight'][disabled]) .control:hover .content::before {
background: none;
}
`,
),
),
),
appearanceBehavior(
'outline',
css`
:host([appearance='outline'][disabled]:hover),
:host([appearance='outline'][disabled]:active) {
background: transparent;
border-color: ${neutralOutlineRestBehavior.var};
}

${OutlineButtonStyles}
`.withBehaviors(
forcedColorsStylesheetBehavior(
css`
:host([appearance='outline'][disabled]) .control {
border-color: ${SystemColors.GrayText};
}
`,
),
),
),
appearanceBehavior(
'stealth',
css`
:host([appearance='stealth'][disabled]),
:host([appearance='stealth'][disabled]:hover),
:host([appearance='stealth'][disabled]:active) {
background: ${neutralFillStealthRestBehavior.var};
}

${StealthButtonStyles}
`.withBehaviors(
forcedColorsStylesheetBehavior(
css`
:host([appearance='stealth'][disabled]),
:host([appearance='stealth'][disabled]:hover) {
background: ${SystemColors.ButtonFace};
}

:host([appearance='stealth'][disabled]) .control {
background: ${SystemColors.ButtonFace};
border-color: transparent;
color: ${SystemColors.GrayText};
}
`,
),
),
),
);
65 changes: 3 additions & 62 deletions packages/web-components/src/styles/patterns/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { css, ElementStyles } from '@microsoft/fast-element';
import { SystemColors } from '@microsoft/fast-web-utilities';
import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
import { heightNumber } from '../size';
import {
accentFillActiveBehavior,
Expand Down Expand Up @@ -90,12 +90,6 @@ export const BaseButtonStyles: ElementStyles = css`
border: 0;
}

:host([disabled]) {
opacity: var(--disabled-opacity);
background-color: ${neutralFillRestBehavior.var};
cursor: ${disabledCursor};
}

.start,
.end {
display: flex;
Expand Down Expand Up @@ -155,16 +149,6 @@ export const BaseButtonStyles: ElementStyles = css`
border-color: ${SystemColors.ButtonText};
}

:host([disabled]),
:host([disabled]) .control {
forced-color-adjust: none;
background-color: ${SystemColors.ButtonFace};
border-color: ${SystemColors.GrayText};
color: ${SystemColors.GrayText};
cursor: ${disabledCursor};
opacity: 1;
}

:host([href]) .control {
border-color: ${SystemColors.LinkText};
color: ${SystemColors.LinkText};
Expand Down Expand Up @@ -205,10 +189,6 @@ export const AccentButtonStyles = css`
:host([appearance="accent"]) .control:${focusVisible} {
box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${neutralFocusInnerAccentBehavior.var}, 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${neutralFocusBehavior.var}
}

:host([appearance="accent"][disabled]) {
background: ${accentFillRestBehavior.var};
}
`.withBehaviors(
accentFillRestBehavior,
accentForegroundCutRestBehavior,
Expand All @@ -234,13 +214,6 @@ export const AccentButtonStyles = css`
box-shadow: 0 0 0 2px ${SystemColors.HighlightText} inset;
}

:host([appearance="accent"][disabled]) .control,
:host([appearance="accent"][disabled]) .control:hover {
background: ${SystemColors.ButtonFace};
border-color: ${SystemColors.GrayText};
color: ${SystemColors.GrayText};
}

:host([appearance="accent"][href]) .control{
background: ${SystemColors.LinkText};
color: ${SystemColors.HighlightText};
Expand Down Expand Up @@ -367,10 +340,6 @@ export const LightweightButtonStyles = css`
background: ${neutralForegroundRestBehavior.var};
height: calc(var(--focus-outline-width) * 1px);
}

:host([appearance="lightweight"][disabled]) .content::before {
background: transparent;
}
`.withBehaviors(
accentForegroundRestBehavior,
accentForegroundHoverBehavior,
Expand All @@ -393,15 +362,6 @@ export const LightweightButtonStyles = css`
background: ${SystemColors.Highlight};
}

:host([appearance="lightweight"][disabled]) .control {
forced-color-adjust: none;
color: ${SystemColors.GrayText};
}

:host([appearance="lightweight"][disabled]) .control:hover .content::before {
background: none;
}

:host([appearance="lightweight"][href]) .control:hover,
:host([appearance="lightweight"][href]) .control:${focusVisible} {
background: ${SystemColors.ButtonFace};
Expand Down Expand Up @@ -442,10 +402,6 @@ export const OutlineButtonStyles = css`
box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${neutralFocusBehavior.var};
border-color: ${neutralFocusBehavior.var};
}

:host([appearance="outline"][disabled]) {
border-color: ${neutralOutlineRestBehavior.var};
}
`.withBehaviors(
neutralOutlineRestBehavior,
neutralOutlineHoverBehavior,
Expand All @@ -456,9 +412,8 @@ export const OutlineButtonStyles = css`
:host([appearance='outline']) {
border-color: ${SystemColors.ButtonText};
}

:host([appearance='outline'][disabled]) .control {
border-color: ${SystemColors.GrayText};
:host([appearance='outline'][href]) {
border-color: ${SystemColors.LinkText};
}
`,
),
Expand All @@ -479,10 +434,6 @@ export const StealthButtonStyles = css`
:host([appearance='stealth']:active) {
background: ${neutralFillStealthActiveBehavior.var};
}

:host([appearance='stealth'][disabled]) {
background: ${neutralFillStealthRestBehavior.var};
}
`.withBehaviors(
neutralFillStealthRestBehavior,
neutralFillStealthHoverBehavior,
Expand Down Expand Up @@ -512,16 +463,6 @@ export const StealthButtonStyles = css`
fill: currentcolor;
}

:host([appearance="stealth"][disabled]) {
background: ${SystemColors.ButtonFace};
}

:host([appearance="stealth"][disabled]) .control {
background: ${SystemColors.ButtonFace};
border-color: transparent;
color: ${SystemColors.GrayText};
}

:host([appearance="stealth"][href]) .control {
color: ${SystemColors.LinkText};
}
Expand Down