From a25937e73c45fdfc58a15e0961f61004696bf34b Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 4 Feb 2025 11:37:09 -0500 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=F0=9F=90=9B=20LargeButton=20outline?= =?UTF-8?q?=20issue=20for=20primary=20type?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit LargeButton outline issue for primary type BREAKING CHANGE: 🧨 N ✅ Closes: N --- components/src/atoms/buttons/LargeButton.tsx | 32 +++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/components/src/atoms/buttons/LargeButton.tsx b/components/src/atoms/buttons/LargeButton.tsx index cea665221fe..1cf3c5671a3 100644 --- a/components/src/atoms/buttons/LargeButton.tsx +++ b/components/src/atoms/buttons/LargeButton.tsx @@ -192,7 +192,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { &:active { background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType] - .activeBackgroundColor}; + .activeBackgroundColor}; ${activeColorFor(buttonType)}; } &:active #btn-icon { @@ -202,11 +202,13 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { &:hover { color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].hoverColor}; background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType] - .hoverBackgroundColor}; + .hoverBackgroundColor}; border: ${buttonType === 'stroke' - ? `2px solid ${COLORS.blue55}` - : `${computedBorderStyle()}`}; + ? `2px solid ${COLORS.blue55}` + : buttonType === 'primary' + ? `4px solid ${COLORS.blue55}` + : computedBorderStyle()}; } &:focus-visible { @@ -216,14 +218,14 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { &:disabled { color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor}; background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType] - .disabledBackgroundColor}; + .disabledBackgroundColor}; border: 4px solid ${COLORS.grey35}; } &[aria-disabled='true'] { color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor}; background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType] - .disabledBackgroundColor}; + .disabledBackgroundColor}; border: 4px solid ${COLORS.grey35}; } @@ -239,13 +241,13 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { &:active { background-color: ${computedDisabled - ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor - : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor}; + ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor + : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor}; ${!computedDisabled && activeColorFor(buttonType)}; outline: 4px solid ${computedDisabled - ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor - : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor}; + ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor + : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor}; } &:active #btn-icon { @@ -254,14 +256,14 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { &:focus-visible { background-color: ${computedDisabled - ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor - : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleBackgroundColor}; + ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor + : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleBackgroundColor}; ${!computedDisabled && activeColorFor(buttonType)}; padding: calc(${SPACING.spacing24} + ${SPACING.spacing2}); border: ${computedBorderStyle()}; outline: ${computedDisabled - ? 'none' - : `3px solid + ? 'none' + : `3px solid ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleOutlineColor}`}; background-clip: padding-box; box-shadow: none; @@ -270,7 +272,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { &:disabled { color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor}; background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType] - .disabledBackgroundColor}; + .disabledBackgroundColor}; } } ` From 5ff58374589e27d6220d9207a20157f67b333b69 Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 4 Feb 2025 13:08:26 -0500 Subject: [PATCH 2/2] Update LargeButton.tsx --- components/src/atoms/buttons/LargeButton.tsx | 30 ++++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/components/src/atoms/buttons/LargeButton.tsx b/components/src/atoms/buttons/LargeButton.tsx index 1cf3c5671a3..cccf1c0fd09 100644 --- a/components/src/atoms/buttons/LargeButton.tsx +++ b/components/src/atoms/buttons/LargeButton.tsx @@ -192,7 +192,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { &:active { background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType] - .activeBackgroundColor}; + .activeBackgroundColor}; ${activeColorFor(buttonType)}; } &:active #btn-icon { @@ -202,11 +202,11 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { &:hover { color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].hoverColor}; background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType] - .hoverBackgroundColor}; + .hoverBackgroundColor}; border: ${buttonType === 'stroke' - ? `2px solid ${COLORS.blue55}` - : buttonType === 'primary' + ? `2px solid ${COLORS.blue55}` + : buttonType === 'primary' ? `4px solid ${COLORS.blue55}` : computedBorderStyle()}; } @@ -218,14 +218,14 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { &:disabled { color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor}; background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType] - .disabledBackgroundColor}; + .disabledBackgroundColor}; border: 4px solid ${COLORS.grey35}; } &[aria-disabled='true'] { color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor}; background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType] - .disabledBackgroundColor}; + .disabledBackgroundColor}; border: 4px solid ${COLORS.grey35}; } @@ -241,13 +241,13 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { &:active { background-color: ${computedDisabled - ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor - : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor}; + ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor + : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor}; ${!computedDisabled && activeColorFor(buttonType)}; outline: 4px solid ${computedDisabled - ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor - : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor}; + ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor + : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].activeBackgroundColor}; } &:active #btn-icon { @@ -256,14 +256,14 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { &:focus-visible { background-color: ${computedDisabled - ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor - : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleBackgroundColor}; + ? LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledBackgroundColor + : LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleBackgroundColor}; ${!computedDisabled && activeColorFor(buttonType)}; padding: calc(${SPACING.spacing24} + ${SPACING.spacing2}); border: ${computedBorderStyle()}; outline: ${computedDisabled - ? 'none' - : `3px solid + ? 'none' + : `3px solid ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].focusVisibleOutlineColor}`}; background-clip: padding-box; box-shadow: none; @@ -272,7 +272,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { &:disabled { color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor}; background-color: ${LARGE_BUTTON_PROPS_BY_TYPE[buttonType] - .disabledBackgroundColor}; + .disabledBackgroundColor}; } } `