Skip to content

Commit

Permalink
fix: multi button and button updated because of wrong secondarySubtle…
Browse files Browse the repository at this point in the history 
… border color
  • Loading branch information
@MEsteves22
MEsteves22 committed Apr 26, 2023
1 parent 8d9c5cb commit 3ee1564
Show file tree
Hide file tree
Showing 7 changed files with 50 additions and 18 deletions.
6 changes: 4 additions & 2 deletions packages/core/src/components/Button/Button.styles.ts
View file
Expand Up @@ -148,12 +148,14 @@ export const StyledButton = styled(
: theme.button.secondaryBackgroundColor,
border: $disabled
? `1px solid ${theme.colors.atmo4}`
: `1px solid ${theme.colors.atmo4}`,
: `1px solid ${theme.button.secondarySubtleBorderColor}`,
"&:hover": {
backgroundColor: $disabled
? theme.colors.atmo3
: theme.button.hoverColor,
border: `1px solid ${theme.colors.atmo4}`,
border: $disabled
? `1px solid ${theme.colors.atmo4}`
: `1px solid ${theme.button.secondarySubtleBorderColor}`,
},
"&:focus-visible": {
backgroundColor: $disabled
Expand Down
28 changes: 14 additions & 14 deletions packages/core/src/components/Controls/__snapshots__/Controls.test.tsx.snap
View file
Expand Up @@ -135,7 +135,7 @@ exports[`<HvControls> > sample snapshot testing > Controls 1`] = `
<button
aria-label="Select card view"
aria-pressed="true"
class="button selected e17vrbb40 HvButton-root css-kr5uhi-StyledButton-StyledButton e138pvrm0"
class="button selected e17vrbb40 HvButton-root css-1r64zzf-StyledButton-StyledButton e138pvrm0"
id="card"
label="Select card view"
>
Expand Down Expand Up @@ -169,7 +169,7 @@ exports[`<HvControls> > sample snapshot testing > Controls 1`] = `
<button
aria-label="Select list view"
aria-pressed="false"
class="button e17vrbb40 HvButton-root css-kr5uhi-StyledButton-StyledButton e138pvrm0"
class="button e17vrbb40 HvButton-root css-1r64zzf-StyledButton-StyledButton e138pvrm0"
id="list"
label="Select list view"
>
Expand Down Expand Up @@ -749,7 +749,7 @@ exports[`<HvControls> > sample snapshot testing > Controls Controlled 1`] = `
<button
aria-label="Select card view"
aria-pressed="true"
class="button selected e17vrbb40 HvButton-root css-kr5uhi-StyledButton-StyledButton e138pvrm0"
class="button selected e17vrbb40 HvButton-root css-1r64zzf-StyledButton-StyledButton e138pvrm0"
id="card"
label="Select card view"
>
Expand Down Expand Up @@ -783,7 +783,7 @@ exports[`<HvControls> > sample snapshot testing > Controls Controlled 1`] = `
<button
aria-label="Select list view"
aria-pressed="false"
class="button e17vrbb40 HvButton-root css-kr5uhi-StyledButton-StyledButton e138pvrm0"
class="button e17vrbb40 HvButton-root css-1r64zzf-StyledButton-StyledButton e138pvrm0"
id="list"
label="Select list view"
>
Expand Down Expand Up @@ -1189,7 +1189,7 @@ exports[`<HvControls> > sample snapshot testing > Custom Controls 1`] = `
<button
aria-controls="CustomControlsCardsId"
aria-pressed="true"
class="button selected e17vrbb40 HvButton-root css-wfrnbr-StyledButton-StyledButton e138pvrm0"
class="button selected e17vrbb40 HvButton-root css-oem8rz-StyledButton-StyledButton e138pvrm0"
id="all"
>
<div
Expand All @@ -1205,7 +1205,7 @@ exports[`<HvControls> > sample snapshot testing > Custom Controls 1`] = `
<button
aria-controls="CustomControlsCardsId"
aria-pressed="false"
class="button e17vrbb40 HvButton-root css-wfrnbr-StyledButton-StyledButton e138pvrm0"
class="button e17vrbb40 HvButton-root css-oem8rz-StyledButton-StyledButton e138pvrm0"
id="critical"
>
<div
Expand All @@ -1221,7 +1221,7 @@ exports[`<HvControls> > sample snapshot testing > Custom Controls 1`] = `
<button
aria-controls="CustomControlsCardsId"
aria-pressed="false"
class="button e17vrbb40 HvButton-root css-wfrnbr-StyledButton-StyledButton e138pvrm0"
class="button e17vrbb40 HvButton-root css-oem8rz-StyledButton-StyledButton e138pvrm0"
id="major"
>
<div
Expand All @@ -1237,7 +1237,7 @@ exports[`<HvControls> > sample snapshot testing > Custom Controls 1`] = `
<button
aria-controls="CustomControlsCardsId"
aria-pressed="false"
class="button e17vrbb40 HvButton-root css-wfrnbr-StyledButton-StyledButton e138pvrm0"
class="button e17vrbb40 HvButton-root css-oem8rz-StyledButton-StyledButton e138pvrm0"
id="average"
>
<div
Expand All @@ -1253,7 +1253,7 @@ exports[`<HvControls> > sample snapshot testing > Custom Controls 1`] = `
<button
aria-controls="CustomControlsCardsId"
aria-pressed="false"
class="button e17vrbb40 HvButton-root css-wfrnbr-StyledButton-StyledButton e138pvrm0"
class="button e17vrbb40 HvButton-root css-oem8rz-StyledButton-StyledButton e138pvrm0"
id="minor"
>
<div
Expand Down Expand Up @@ -2058,7 +2058,7 @@ exports[`<HvControls> > sample snapshot testing > Mixed Controls 1`] = `
<button
aria-controls="mixedControlsCardsId"
aria-pressed="true"
class="button selected e17vrbb40 HvButton-root css-wfrnbr-StyledButton-StyledButton e138pvrm0"
class="button selected e17vrbb40 HvButton-root css-oem8rz-StyledButton-StyledButton e138pvrm0"
id="all"
>
<div
Expand All @@ -2074,7 +2074,7 @@ exports[`<HvControls> > sample snapshot testing > Mixed Controls 1`] = `
<button
aria-controls="mixedControlsCardsId"
aria-pressed="false"
class="button e17vrbb40 HvButton-root css-wfrnbr-StyledButton-StyledButton e138pvrm0"
class="button e17vrbb40 HvButton-root css-oem8rz-StyledButton-StyledButton e138pvrm0"
id="critical"
>
<div
Expand All @@ -2090,7 +2090,7 @@ exports[`<HvControls> > sample snapshot testing > Mixed Controls 1`] = `
<button
aria-controls="mixedControlsCardsId"
aria-pressed="false"
class="button e17vrbb40 HvButton-root css-wfrnbr-StyledButton-StyledButton e138pvrm0"
class="button e17vrbb40 HvButton-root css-oem8rz-StyledButton-StyledButton e138pvrm0"
id="major"
>
<div
Expand All @@ -2106,7 +2106,7 @@ exports[`<HvControls> > sample snapshot testing > Mixed Controls 1`] = `
<button
aria-controls="mixedControlsCardsId"
aria-pressed="false"
class="button e17vrbb40 HvButton-root css-wfrnbr-StyledButton-StyledButton e138pvrm0"
class="button e17vrbb40 HvButton-root css-oem8rz-StyledButton-StyledButton e138pvrm0"
id="average"
>
<div
Expand All @@ -2122,7 +2122,7 @@ exports[`<HvControls> > sample snapshot testing > Mixed Controls 1`] = `
<button
aria-controls="mixedControlsCardsId"
aria-pressed="false"
class="button e17vrbb40 HvButton-root css-wfrnbr-StyledButton-StyledButton e138pvrm0"
class="button e17vrbb40 HvButton-root css-oem8rz-StyledButton-StyledButton e138pvrm0"
id="minor"
>
<div
Expand Down
18 changes: 16 additions & 2 deletions packages/core/src/components/MultiButton/MultiButton.styles.tsx
View file
Expand Up @@ -50,13 +50,16 @@ export const StyledRoot = styled(
borderTop: `solid 1px ${theme.colors.atmo4}`,
borderTopLeftRadius: "2px",
borderTopRightRadius: "2px",
"&:disabled:hover": {
borderTop: `solid 1px ${theme.colors.atmo4}`,
},
},
"&:last-child": {
borderBottom: `solid 1px ${theme.colors.atmo4}`,
borderBottomLeftRadius: "2px",
borderBottomRightRadius: "2px",
"&:disabled:hover": {
borderBottom: `solid 1px ${theme.colors.atmo4} !important`,
borderBottom: `solid 1px ${theme.colors.atmo4}`,
},
},
"&:not(:first-of-type)": {
Expand Down Expand Up @@ -108,6 +111,14 @@ export const StyledButton = (Element) =>
borderLeft: "solid 1px transparent",
borderRight: "solid 1px transparent",
borderRadius: 0,
backgroundColor: theme.colors.atmo2,
":disabled": { backgroundColor: theme.multiButton.disabledBackgroundColor },
":hover": {
borderTop: `solid 1px ${theme.colors.atmo4}`,
borderBottom: `solid 1px ${theme.colors.atmo4}`,
borderLeft: "solid 1px transparent",
borderRight: "solid 1px transparent",
},
...(theme.typography.body as CSSProperties),
"&:active": {
backgroundColor: `${theme.colors.atmo3}`,
Expand All @@ -127,13 +138,16 @@ export const StyledButton = (Element) =>
borderLeft: `solid 1px ${theme.colors.atmo4}`,
borderTopLeftRadius: theme.radii.base,
borderBottomLeftRadius: theme.radii.base,
"&:disabled:hover": {
borderLeft: `solid 1px ${theme.colors.atmo4}`,
},
},
"&:last-child": {
borderRight: `solid 1px ${theme.colors.atmo4}`,
borderTopRightRadius: theme.radii.base,
borderBottomRightRadius: theme.radii.base,
"&:disabled:hover": {
borderRight: `solid 1px ${theme.colors.atmo4} !important`,
borderRight: `solid 1px ${theme.colors.atmo4}`,
},
},
"&:not(:first-of-type)": {
Expand Down
4 changes: 4 additions & 0 deletions packages/styles/src/theme.ts
View file
Expand Up @@ -36,6 +36,7 @@ const componentsSpec: DeepString<HvThemeComponents> = {
semanticColorDisabled: "string",
hoverColor: "string",
secondaryBackgroundColor: "string",
secondarySubtleBorderColor: "string",
},
header: {
color: "string",
Expand Down Expand Up @@ -280,6 +281,9 @@ const componentsSpec: DeepString<HvThemeComponents> = {
rightPanelShadow: "string",
partialCounterFontWeight: "string",
},
multiButton: {
disabledBackgroundColor: "string",
},
};

const typographyProps: DeepString<HvThemeTypographyProps> = {
Expand Down
4 changes: 4 additions & 0 deletions packages/styles/src/themes/ds3.ts
View file
Expand Up @@ -252,6 +252,7 @@ const ds3 = makeTheme((theme: HvTheme) => ({
semanticColorDisabled: "rgba(251, 252, 252, 0.1)",
hoverColor: theme.colors.atmo3,
secondaryBackgroundColor: theme.colors.atmo1,
secondarySubtleBorderColor: theme.colors.atmo4,
},
header: {
color: theme.colors.secondary,
Expand Down Expand Up @@ -496,6 +497,9 @@ const ds3 = makeTheme((theme: HvTheme) => ({
rightPanelShadow: `inset 8px 0 8px -6px ${theme.colors.shad1}`,
partialCounterFontWeight: theme.fontWeights.bold,
},
multiButton: {
disabledBackgroundColor: theme.colors.atmo2,
},
}));

export default ds3;
4 changes: 4 additions & 0 deletions packages/styles/src/themes/ds5.ts
View file
Expand Up @@ -195,6 +195,7 @@ const ds5 = makeTheme((theme: HvTheme) => ({
semanticColorDisabled: "rgba(251, 252, 252, 0.1)",
hoverColor: theme.colors.primary_20,
secondaryBackgroundColor: "transparent",
secondarySubtleBorderColor: theme.colors.secondary,
},
header: {
color: theme.colors.secondary,
Expand Down Expand Up @@ -439,6 +440,9 @@ const ds5 = makeTheme((theme: HvTheme) => ({
rightPanelShadow: "none",
partialCounterFontWeight: theme.fontWeights.normal,
},
multiButton: {
disabledBackgroundColor: theme.colors.atmo3,
},
}));

export default ds5;
4 changes: 4 additions & 0 deletions packages/styles/src/types.ts
View file
Expand Up @@ -43,6 +43,7 @@ export type HvThemeComponents = {
semanticColorDisabled: string;
hoverColor: string;
secondaryBackgroundColor: string;
secondarySubtleBorderColor: string;
};
header: {
color: string;
Expand Down Expand Up @@ -287,6 +288,9 @@ export type HvThemeComponents = {
rightPanelShadow: string;
partialCounterFontWeight: string;
};
multiButton: {
disabledBackgroundColor: string;
};
};

// Theme typography
Expand Down

0 comments on commit 3ee1564

Please sign in to comment.