Skip to content

Azure Theme 8.0: Tag Button variant for DefaultButton and PrimaryButton #27186

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

Merged
khmakoto merged 12 commits into from
Apr 27, 2023
Merged

Azure Theme 8.0: Tag Button variant for DefaultButton and PrimaryButton #27186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ea63326
tag button for default and primary button
Jacqueline-ms Mar 13, 2023
e273f4e
Create @fluentui-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json
Jacqueline-ms Mar 27, 2023
10bbfa9
Merge branch 'master' into jackieg/azuretheme-tagbutton
Jacqueline-ms Mar 28, 2023
46e99cc
Merge branch 'master' into jackieg/azuretheme-tagbutton
Jacqueline-ms Apr 24, 2023
f027ad0
Merge branch 'master' into jackieg/azuretheme-tagbutton
Jacqueline-ms Apr 24, 2023
0ad2da5
Merge branch 'master' into jackieg/azuretheme-tagbutton
Jacqueline-ms Apr 24, 2023
3277995
Merge branch 'master' into jackieg/azuretheme-tagbutton
Jacqueline-ms Apr 25, 2023
5b072fc
Merge branch 'master' into jackieg/azuretheme-tagbutton
Jacqueline-ms Apr 26, 2023
7c6e9fb
Merge branch 'master' into jackieg/azuretheme-tagbutton
Jacqueline-ms Apr 26, 2023
76299e0
Merge branch 'master' into jackieg/azuretheme-tagbutton
Jacqueline-ms Apr 27, 2023
f42a3dd
Updating change files.
khmakoto Apr 27, 2023
854faa7
Merge branch 'master' into jackieg/azuretheme-tagbutton
khmakoto Apr 27, 2023
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-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Copy link
Collaborator

@fabricteam fabricteam Apr 27, 2023

Choose a reason for hiding this comment

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

🕵 fluentuiv8 Open the Visual Regressions report to inspect the 2 screenshots

✅ There was 0 screenshots added, 2 screenshots removed, 1045 screenshots unchanged, 0 screenshots with different dimensions and 0 screenshots with visible difference.

unknown 2 screenshots
Image Name Diff(in Pixels) Image Type
Pivot - Overflow.Tabs - RTL.Narrow - Last tab selected.chromium.png 0 Removed
Pivot - Overflow.Tabs - RTL.Narrow - Overflow menu.chromium.png 0 Removed

"type": "minor",
"comment": "feat: Adding Azure Theme Tag Button variant for primary and default buttons",
"packageName": "@fluentui/azure-themes",
"email": "[email protected]",
"dependentChangeType": "patch"
}
72 changes: 72 additions & 0 deletions packages/azure-themes/src/azure/AzureColors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@ import { IAzureSemanticColors } from './IAzureSemanticColors';

export namespace BaseColors {
export const BLUE_F0F6FF = '#F0F6FF';
export const BLUE_B3D7F2 = '#b3d7f2';
export const BLUE_CCE1FF = '#cce1ff';
export const BLUE_CCE4F6 = '#cce4f6';
export const BLUE_C7E0F4 = '#C7E0F4';
export const BLUE_DEECF9 = '#deecf9';
export const BLUE_E6F2FB = '#e6f2fb';
export const BLUE_0000CD = '#0000cd';
export const BLUE_00245B = '#00245B';
export const BLUE_00E8E8 = '#00e8e8';
Expand Down Expand Up @@ -115,6 +118,7 @@ export namespace BaseColors {
export const GRAY_808080_070 = 'rgba(128, 128, 128, .70)';
export const BLUE_55B3FF_010 = 'rgba(85, 179, 255, .10)';
export const BLUE_55B3FF_020 = 'rgba(85, 179, 255, .20)';
export const BLUE_55B3FF_040 = 'rgba(85, 179, 255, .4)';

// Extended Palette Colors (not in Azure spec)
export const GRAY_FFFFFF_050 = 'rgba(255,255,255,.5)'; // overlay light
Expand Down Expand Up @@ -318,6 +322,23 @@ export const DarkSemanticColors: IAzureSemanticColors = {
primary: BaseColors.GRAY_808080,
secondary: BaseColors.GRAY_404040,
},
tagButton: {
rest: {
text: BaseColors.WHITE,
background: BaseColors.BLUE_55B3FF_040,
border: BaseColors.TRANSPARENT,
},
hover: {
text: BaseColors.WHITE,
background: BaseColors.BLUE_55B3FF_040,
border: BaseColors.GRAY_808080_070,
},
pressed: {
text: BaseColors.WHITE,
background: BaseColors.BLUE_55B3FF_040,
border: BaseColors.BLUE_4894FE,
},
},
toggle: {
disabled: {
backrgound: BaseColors.GRAY_484644,
Expand Down Expand Up @@ -581,6 +602,23 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = {
primary: BaseColors.GRAY_808080,
secondary: BaseColors.GRAY_404040,
},
tagButton: {
rest: {
text: BaseColors.WHITE,
background: BaseColors.BLUE_55B3FF_040,
border: BaseColors.TRANSPARENT,
},
hover: {
text: BaseColors.WHITE,
background: BaseColors.BLUE_55B3FF_040,
border: BaseColors.WHITE,
},
pressed: {
text: BaseColors.WHITE,
background: BaseColors.BLUE_55B3FF_040,
border: BaseColors.BLUE_4894FE,
},
},
toggle: {
disabled: {
backrgound: BaseColors.GRAY_484644,
Expand Down Expand Up @@ -844,6 +882,23 @@ export const LightSemanticColors: IAzureSemanticColors = {
primary: BaseColors.GRAY_F7F7F7,
secondary: BaseColors.GRAY_DFDFDF,
},
tagButton: {
rest: {
text: BaseColors.BLACK,
background: BaseColors.BLUE_E6F2FB,
border: BaseColors.BLUE_E6F2FB,
},
hover: {
text: BaseColors.BLACK,
background: BaseColors.BLUE_CCE4F6,
border: BaseColors.BLUE_CCE4F6,
},
pressed: {
text: BaseColors.BLACK,
background: BaseColors.BLUE_B3D7F2,
border: BaseColors.BLUE_015CDA,
},
},
toggle: {
disabled: {
backrgound: BaseColors.WHITE,
Expand Down Expand Up @@ -1107,6 +1162,23 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = {
primary: BaseColors.GRAY_F7F7F7,
secondary: BaseColors.GRAY_DFDFDF,
},
tagButton: {
rest: {
text: BaseColors.BLACK,
background: BaseColors.BLUE_E6F2FB,
border: BaseColors.BLUE_E6F2FB,
},
hover: {
text: BaseColors.BLACK,
background: BaseColors.BLUE_CCE4F6,
border: BaseColors.BLUE_CCE4F6,
},
pressed: {
text: BaseColors.BLACK,
background: BaseColors.BLUE_B3D7F2,
border: BaseColors.BLUE_015CDA,
},
},
toggle: {
disabled: {
backrgound: BaseColors.WHITE,
Expand Down
8 changes: 8 additions & 0 deletions packages/azure-themes/src/azure/AzureThemeDark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,19 @@ const darkExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
buttonBackgroundDisabled: DarkSemanticColors.disabledButton.background,
buttonBackgroundHovered: DarkSemanticColors.secondaryButton.hover.background,
buttonBackgroundPressed: DarkSemanticColors.secondaryButton.pressed.background,
ButtonBackgroundTag: DarkSemanticColors.tagButton.rest.background,
ButtonBackgroundTagHovered: DarkSemanticColors.tagButton.hover.background,
ButtonBackgroundTagPressed: DarkSemanticColors.tagButton.pressed.background,
ButtonBackgroundTagText: DarkSemanticColors.tagButton.rest.text,
ButtonBackgroundTagTextHovered: DarkSemanticColors.tagButton.hover.text,
ButtonBorderDanger: DarkSemanticColors.dangerButton.rest.border,
ButtonBorderDangerHovered: DarkSemanticColors.dangerButton.hover.border,
ButtonBorderDangerPressed: DarkSemanticColors.dangerButton.pressed.border,
ButtonBorderDisabled: DarkSemanticColors.disabledButton.background,
ButtonBorderFocus: DarkSemanticColors.secondaryButton.focus.border,
ButtonBorderTag: DarkSemanticColors.tagButton.rest.border,
ButtonBorderTagHovered: DarkSemanticColors.tagButton.hover.border,
ButtonBorderTagPressed: DarkSemanticColors.tagButton.pressed.border,
buttonText: DarkSemanticColors.secondaryButton.rest.text,
buttonTextChecked: DarkSemanticColors.secondaryButton.pressed.text,
buttonTextCheckedHovered: DarkSemanticColors.secondaryButton.hover.border,
Expand Down
8 changes: 8 additions & 0 deletions packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,19 @@ const highContrastDarkExtendedSemanticColors: Partial<IExtendedSemanticColors> =
buttonBackgroundDisabled: HighContrastDarkSemanticColors.primaryButton.disabled.background,
buttonBackgroundHovered: HighContrastDarkSemanticColors.secondaryButton.hover.background,
buttonBackgroundPressed: HighContrastDarkSemanticColors.secondaryButton.pressed.background,
ButtonBackgroundTag: HighContrastDarkSemanticColors.tagButton.rest.background,
ButtonBackgroundTagHovered: HighContrastDarkSemanticColors.tagButton.hover.background,
ButtonBackgroundTagPressed: HighContrastDarkSemanticColors.tagButton.pressed.background,
ButtonBackgroundTagText: HighContrastDarkSemanticColors.tagButton.rest.text,
ButtonBackgroundTagTextHovered: HighContrastDarkSemanticColors.tagButton.hover.text,
ButtonBorderDanger: HighContrastDarkSemanticColors.dangerButton.rest.border,
ButtonBorderDangerHovered: HighContrastDarkSemanticColors.dangerButton.hover.border,
ButtonBorderDangerPressed: HighContrastDarkSemanticColors.dangerButton.pressed.border,
ButtonBorderDisabled: HighContrastDarkSemanticColors.disabledButton.background,
ButtonBorderFocus: HighContrastDarkSemanticColors.secondaryButton.focus.border,
ButtonBorderTag: HighContrastDarkSemanticColors.tagButton.rest.border,
ButtonBorderTagHovered: HighContrastDarkSemanticColors.tagButton.hover.border,
ButtonBorderTagPressed: HighContrastDarkSemanticColors.tagButton.pressed.border,
buttonText: HighContrastDarkSemanticColors.secondaryButton.rest.text,
buttonTextChecked: HighContrastDarkSemanticColors.secondaryButton.pressed.text,
buttonTextCheckedHovered: HighContrastDarkSemanticColors.secondaryButton.hover.border,
Expand Down
8 changes: 8 additions & 0 deletions packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,19 @@ const highContrastLightExtendedSemanticColors: Partial<IExtendedSemanticColors>
buttonBackgroundDisabled: HighContrastLightSemanticColors.disabledButton.background,
buttonBackgroundHovered: HighContrastLightSemanticColors.secondaryButton.hover.background,
buttonBackgroundPressed: HighContrastLightSemanticColors.secondaryButton.pressed.background,
ButtonBackgroundTag: HighContrastLightSemanticColors.tagButton.rest.background,
ButtonBackgroundTagHovered: HighContrastLightSemanticColors.tagButton.hover.background,
ButtonBackgroundTagPressed: HighContrastLightSemanticColors.tagButton.pressed.background,
ButtonBackgroundTagText: HighContrastLightSemanticColors.tagButton.rest.text,
ButtonBackgroundTagTextHovered: HighContrastLightSemanticColors.tagButton.hover.text,
ButtonBorderDanger: HighContrastLightSemanticColors.dangerButton.rest.border,
ButtonBorderDangerHovered: HighContrastLightSemanticColors.dangerButton.hover.border,
ButtonBorderDangerPressed: HighContrastLightSemanticColors.dangerButton.pressed.border,
ButtonBorderDisabled: HighContrastLightSemanticColors.disabledButton.text,
ButtonBorderFocus: HighContrastLightSemanticColors.secondaryButton.focus.border,
ButtonBorderTag: HighContrastLightSemanticColors.tagButton.rest.border,
ButtonBorderTagHovered: HighContrastLightSemanticColors.tagButton.hover.border,
ButtonBorderTagPressed: HighContrastLightSemanticColors.tagButton.pressed.border,
buttonText: HighContrastLightSemanticColors.secondaryButton.rest.text,
buttonTextChecked: HighContrastLightSemanticColors.secondaryButton.pressed.text,
buttonTextCheckedHovered: HighContrastLightSemanticColors.secondaryButton.hover.border,
Expand Down
8 changes: 8 additions & 0 deletions packages/azure-themes/src/azure/AzureThemeLight.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,19 @@ const lightExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
buttonBackgroundDisabled: LightSemanticColors.disabledButton.background,
buttonBackgroundHovered: LightSemanticColors.secondaryButton.hover.background,
buttonBackgroundPressed: LightSemanticColors.secondaryButton.pressed.background,
ButtonBackgroundTag: LightSemanticColors.tagButton.rest.background,
ButtonBackgroundTagHovered: LightSemanticColors.tagButton.hover.background,
ButtonBackgroundTagPressed: LightSemanticColors.tagButton.pressed.background,
ButtonBackgroundTagText: LightSemanticColors.tagButton.rest.text,
ButtonBackgroundTagTextHovered: LightSemanticColors.tagButton.hover.text,
ButtonBorderDanger: LightSemanticColors.dangerButton.rest.border,
ButtonBorderDangerHovered: LightSemanticColors.dangerButton.hover.border,
ButtonBorderDangerPressed: LightSemanticColors.dangerButton.pressed.border,
ButtonBorderDisabled: LightSemanticColors.disabledButton.background,
ButtonBorderFocus: LightSemanticColors.secondaryButton.focus.border,
ButtonBorderTag: LightSemanticColors.tagButton.rest.border,
ButtonBorderTagHovered: LightSemanticColors.tagButton.hover.border,
ButtonBorderTagPressed: LightSemanticColors.tagButton.pressed.border,
buttonText: LightSemanticColors.secondaryButton.rest.text,
buttonTextChecked: LightSemanticColors.secondaryButton.pressed.text,
buttonTextCheckedHovered: LightSemanticColors.secondaryButton.hover.border,
Expand Down
17 changes: 17 additions & 0 deletions packages/azure-themes/src/azure/IAzureSemanticColors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,23 @@ export interface IAzureSemanticColors {
primary: string;
secondary: string;
};
tagButton: {
rest: {
text: string;
background: string;
border: string;
};
hover: {
text: string;
background: string;
border: string;
};
pressed: {
text: string;
background: string;
border: string;
};
};
toggle: {
disabled: {
backrgound: string;
Expand Down
8 changes: 8 additions & 0 deletions packages/azure-themes/src/azure/IExtendedSemanticColors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ export interface IExtendedSemanticColors extends ISemanticColors {
buttonBackgroundPressed: string;
ButtonBorderDisabled: string;
ButtonBorderFocus: string;
ButtonBorderTag: string;
ButtonBorderTagHovered: string;
ButtonBorderTagPressed: string;
buttonText: string;
buttonTextChecked: string;
buttonTextCheckedHovered: string;
Expand Down Expand Up @@ -109,6 +112,11 @@ export interface IExtendedSemanticColors extends ISemanticColors {
primaryButtonBackgroundDisabled: string;
primaryButtonBackgroundHovered: string;
primaryButtonBackgroundPressed: string;
ButtonBackgroundTag: string;
ButtonBackgroundTagHovered: string;
ButtonBackgroundTagPressed: string;
ButtonBackgroundTagText: string;
ButtonBackgroundTagTextHovered: string;
ButtonBorderDanger: string;
ButtonBorderDangerHovered: string;
ButtonBorderDangerPressed: string;
Expand Down
29 changes: 28 additions & 1 deletion packages/azure-themes/src/azure/styles/DefaultButton.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ export const DefaultButtonStyles = (theme: ITheme): Partial<IButtonStyles> => {
height: StyleConstants.inputControlHeight,
padding: '0px 16px',
border: `${StyleConstants.borderWidth} solid ${semanticColors.inputBorder}`,
// danger button
selectors: {
// danger button
'&.danger': {
outlineColor: extendedSemanticColors.ButtonBackgroundDanger,
borderColor: extendedSemanticColors.ButtonBorderDanger,
Expand All @@ -41,6 +41,33 @@ export const DefaultButtonStyles = (theme: ITheme): Partial<IButtonStyles> => {
},
},
},
// tag button
'&.tag': {
outlineColor: extendedSemanticColors.ButtonBackgroundTag,
borderColor: `${extendedSemanticColors.ButtonBorderTag} !important`,
backgroundColor: extendedSemanticColors.ButtonBackgroundTag,
color: extendedSemanticColors.ButtonBackgroundTagText,
selectors: {
':hover': {
outlineColor: extendedSemanticColors.ButtonBackgroundTagHovered,
borderColor: `${extendedSemanticColors.ButtonBorderTagHovered} !important`,
backgroundColor: extendedSemanticColors.ButtonBackgroundTagHovered,
color: extendedSemanticColors.ButtonBackgroundTagTextHovered,
},
':active': {
outlineColor: extendedSemanticColors.ButtonBackgroundTagPressed,
borderColor: extendedSemanticColors.ButtonBorderTagPressed,
backgroundColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`,
color: extendedSemanticColors.ButtonBackgroundTagTextHovered,
},
':focus': {
outlineColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`,
borderColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`,
backgroundColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`,
color: `${extendedSemanticColors.ButtonBackgroundTagTextHovered} !important`,
},
},
},
// standard button
'&.is-expanded': {
color: semanticColors.buttonTextHovered,
Expand Down
28 changes: 28 additions & 0 deletions packages/azure-themes/src/azure/styles/PrimaryButton.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export const PrimaryButtonStyles = (theme: ITheme): Partial<IButtonStyles> => {
padding: StyleConstants.buttonPadding,
border: `${StyleConstants.borderWidth} solid ${semanticColors.primaryButtonBorder}`,
selectors: {
// danger button
'&.danger': {
outlineColor: extendedSemanticColors.ButtonBackgroundDanger,
borderColor: `${extendedSemanticColors.ButtonBorderDanger} !important`,
Expand All @@ -39,6 +40,33 @@ export const PrimaryButtonStyles = (theme: ITheme): Partial<IButtonStyles> => {
},
},
},
// tag button
'&.tag': {
outlineColor: extendedSemanticColors.ButtonBackgroundTag,
borderColor: `${extendedSemanticColors.ButtonBorderTag} !important`,
backgroundColor: extendedSemanticColors.ButtonBackgroundTag,
color: extendedSemanticColors.ButtonBackgroundTagText,
selectors: {
':hover': {
outlineColor: extendedSemanticColors.ButtonBackgroundTagHovered,
borderColor: `${extendedSemanticColors.ButtonBorderTagHovered} !important`,
backgroundColor: extendedSemanticColors.ButtonBackgroundTagHovered,
color: extendedSemanticColors.ButtonBackgroundTagTextHovered,
},
':active': {
outlineColor: extendedSemanticColors.ButtonBackgroundTagPressed,
borderColor: extendedSemanticColors.ButtonBorderTagPressed,
backgroundColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`,
color: extendedSemanticColors.ButtonBackgroundTagTextHovered,
},
':focus': {
outlineColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`,
borderColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`,
backgroundColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`,
color: `${extendedSemanticColors.ButtonBackgroundTagTextHovered} !important`,
},
},
},
},
},
rootFocused: {
Expand Down
4 changes: 4 additions & 0 deletions packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ const Example = () => (
<Label>Danger buttons (both primary and default)</Label>
<DefaultButton className="danger" text="danger defaultbutton" />
<PrimaryButton className="danger" text="danger primarybutton" />

<Label>Tag buttons (both primary and default)</Label>
<DefaultButton className="tag" text="tag defaultbutton" />
<PrimaryButton className="tag" text="tag primarybutton" />
<Label>Disabled Buttons</Label>
<DefaultButton disabled text="DefaultButton disabled" />
<PrimaryButton disabled text="PrimaryButton disabled" />
Expand Down