From 300e5e9636ad7cf8bc30c1d5585601f5e6e20a05 Mon Sep 17 00:00:00 2001 From: Nandor_Czegledi Date: Thu, 18 Jun 2026 09:34:19 +0200 Subject: [PATCH] fix(ui-buttons): fix buttons disabled style and color --- .../ui-buttons/src/BaseButton/v2/index.tsx | 5 +- .../ui-buttons/src/BaseButton/v2/styles.ts | 130 ++++++++++-------- pnpm-lock.yaml | 43 ++++-- 3 files changed, 104 insertions(+), 74 deletions(-) diff --git a/packages/ui-buttons/src/BaseButton/v2/index.tsx b/packages/ui-buttons/src/BaseButton/v2/index.tsx index 162cf32c71..f0a43aabe8 100644 --- a/packages/ui-buttons/src/BaseButton/v2/index.tsx +++ b/packages/ui-buttons/src/BaseButton/v2/index.tsx @@ -228,7 +228,10 @@ class BaseButton extends Component { const { hasOnlyIconVisible } = this const iconSize = buttonSizeToIconSize[size!] - const iconColor = buttonColorToIconColor[color!] + const iconColor = + this.isDisabled && color === 'ai-secondary' + ? 'inherit' + : buttonColorToIconColor[color!] const wrappedIcon = ( {renderIconWithProps(renderIcon, iconSize, iconColor)} diff --git a/packages/ui-buttons/src/BaseButton/v2/styles.ts b/packages/ui-buttons/src/BaseButton/v2/styles.ts index f83075e6e6..760da8f4ca 100644 --- a/packages/ui-buttons/src/BaseButton/v2/styles.ts +++ b/packages/ui-buttons/src/BaseButton/v2/styles.ts @@ -269,7 +269,9 @@ const generateStyle = ( boxShadow: componentTheme.secondaryGhostHoverBoxShadow }, disabled: { - background: 'transparent' + background: 'transparent', + borderColor: componentTheme.secondaryDisabledBorderColor, + color: componentTheme.secondaryDisabledTextColor } }, @@ -425,70 +427,76 @@ const generateStyle = ( } return { - baseButton: isEnabled - ? { - label: 'baseButton', - appearance: 'none', - textDecoration: 'none' /* for links styled as buttons */, - touchAction: 'manipulation', - // This sets the focus ring's border radius displayed by the `View` - borderRadius: - size === 'condensedSmall' || size === 'condensedMedium' - ? componentTheme.borderRadiusSm - : componentTheme.borderRadius, - ...shapeVariants[shape!], - // Prevents vertical stretching in flex parents with fixed height - // Avoids background/focus ring distortion - height: 'fit-content', + baseButton: { + ...(isEnabled + ? { + label: 'baseButton', + appearance: 'none', + textDecoration: 'none' /* for links styled as buttons */, + touchAction: 'manipulation', + // This sets the focus ring's border radius displayed by the `View` + borderRadius: + size === 'condensedSmall' || size === 'condensedMedium' + ? componentTheme.borderRadiusSm + : componentTheme.borderRadius, + ...shapeVariants[shape!], + // Prevents vertical stretching in flex parents with fixed height + // Avoids background/focus ring distortion + height: 'fit-content', - '&::-moz-focus-inner': { - border: '0' /* removes default dotted focus outline in Firefox */ - }, - '*': { - pointerEvents: - 'none' /* Ensures that button or link is always the event target */ - }, - '&:focus': { - textDecoration: 'none' - }, - '&:hover > [class$=-baseButton__content]': - colorVariants[color!].hover, - '&:active > [class$=-baseButton__content]': - colorVariants[color!].active, + '&::-moz-focus-inner': { + border: '0' /* removes default dotted focus outline in Firefox */ + }, + '*': { + pointerEvents: + 'none' /* Ensures that button or link is always the event target */ + }, + '&:focus': { + textDecoration: 'none' + }, + '&:hover > [class$=-baseButton__content]': + colorVariants[color!].hover, + '&:active > [class$=-baseButton__content]': + colorVariants[color!].active + } + : // When not enabled (disabled/readonly) skip all interactive styles (hover/active/focus) + { + textDecoration: 'none', + label: 'baseButton', + appearance: 'none' + }), - //TODO not the greatest solution. Must be stronger than the same &&& enforcement of - ...(color === 'ai-secondary' - ? { - '&&&&&&&&&&': { - padding: componentTheme.borderWidth, - ...(shape !== 'circle' - ? { - borderRadius: `calc(${componentTheme.borderRadius} + ${componentTheme.borderWidth})` - } - : { borderRadius: componentTheme.borderRadiusFull }), - '&::before': { - content: '""', - position: 'absolute', - inset: '0', - borderRadius: 'inherit', - padding: componentTheme.borderWidth, - background: `linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%)`, - WebkitMask: - 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', - WebkitMaskComposite: 'xor', - mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', - maskComposite: 'exclude', - pointerEvents: 'none' + //TODO not the greatest solution. Must be stronger than the same &&& enforcement of + // The ai-secondary border must render in both enabled and disabled states. + ...(color === 'ai-secondary' + ? { + '&&&&&&&&&&': { + padding: componentTheme.borderWidth, + ...(shape !== 'circle' + ? { + borderRadius: `calc(${componentTheme.borderRadius} + ${componentTheme.borderWidth})` } - } + : { borderRadius: componentTheme.borderRadiusFull }), + '&::before': { + content: '""', + position: 'absolute', + inset: '0', + borderRadius: 'inherit', + padding: componentTheme.borderWidth, + background: isDisabled + ? componentTheme.aiSecondaryDisabledBorderColor + : `linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%)`, + WebkitMask: + 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', + WebkitMaskComposite: 'xor', + mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', + maskComposite: 'exclude', + pointerEvents: 'none' } - : {}) - } - : { - textDecoration: 'none', - label: 'baseButton', - appearance: 'none' - }, + } + } + : {}) + }, content: { label: 'baseButton__content', opacity: componentTheme.opacityBase, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9d9e7e1a79..01dc33e134 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7874,6 +7874,11 @@ packages: engines: {node: '>=0.4.0'} hasBin: true + acorn@8.17.0: + resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==} + engines: {node: '>=0.4.0'} + hasBin: true + add-stream@1.0.0: resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==} @@ -9205,8 +9210,8 @@ packages: resolution: {integrity: sha512-otxSQPw4lkOZWkHpB3zaEQs6gWYEsmX4xQF68ElXC/TWvGxGMSGOvoNbaLXm6/cS/fSfHtsEdw90y20PCd+sCA==} engines: {node: '>=10.13.0'} - enhanced-resolve@5.22.2: - resolution: {integrity: sha512-0rxICaFZ7NQho/sHely2bvOPRP0Eu2B0NZ9zM54YvRvWMn7jfz3DmnOZDR9LlXDdDcqntAVc6Hfy4gr/tdH/Ag==} + enhanced-resolve@5.24.0: + resolution: {integrity: sha512-SkE2t82KlkkxQRVMVLAGKxLfORGQfrkx5dkj+vlgXRVNEdPc4eZcR+J/Fvj8C+yKSFH5L0q3NFlyufOVQnCcYQ==} engines: {node: '>=10.13.0'} enquirer@2.3.6: @@ -13465,6 +13470,10 @@ packages: resolution: {integrity: sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==} engines: {node: '>=10.13.0'} + watchpack@2.5.2: + resolution: {integrity: sha512-6i/00NBjP4yGPs+caKSyRfpTF/8Torsu0MOW3mMzIbhgISFder8i7xbqgHlLMwJrdiN8ndBV3UA1/AfzPSr+jg==} + engines: {node: '>=10.13.0'} + wbuf@1.7.3: resolution: {integrity: sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==} @@ -16824,6 +16833,10 @@ snapshots: dependencies: acorn: 8.16.0 + acorn-import-phases@1.0.4(acorn@8.17.0): + dependencies: + acorn: 8.17.0 + acorn-jsx@5.3.2(acorn@8.16.0): dependencies: acorn: 8.16.0 @@ -16834,6 +16847,8 @@ snapshots: acorn@8.16.0: {} + acorn@8.17.0: {} + add-stream@1.0.0: {} agent-base@4.3.0: @@ -18328,7 +18343,7 @@ snapshots: graceful-fs: 4.2.11 tapable: 2.3.3 - enhanced-resolve@5.22.2: + enhanced-resolve@5.24.0: dependencies: graceful-fs: 4.2.11 tapable: 2.3.3 @@ -22942,7 +22957,7 @@ snapshots: terser@5.48.0: dependencies: '@jridgewell/source-map': 0.3.11 - acorn: 8.16.0 + acorn: 8.17.0 commander: 2.20.3 source-map-support: 0.5.21 @@ -23409,6 +23424,10 @@ snapshots: glob-to-regexp: 0.4.1 graceful-fs: 4.2.11 + watchpack@2.5.2: + dependencies: + graceful-fs: 4.2.11 + wbuf@1.7.3: dependencies: minimalistic-assert: 1.0.1 @@ -23549,11 +23568,11 @@ snapshots: '@webassemblyjs/ast': 1.14.1 '@webassemblyjs/wasm-edit': 1.14.1 '@webassemblyjs/wasm-parser': 1.14.1 - acorn: 8.16.0 - acorn-import-phases: 1.0.4(acorn@8.16.0) + acorn: 8.17.0 + acorn-import-phases: 1.0.4(acorn@8.17.0) browserslist: 4.28.2 chrome-trace-event: 1.0.4 - enhanced-resolve: 5.22.2 + enhanced-resolve: 5.24.0 es-module-lexer: 2.1.0 eslint-scope: 5.1.1 events: 3.3.0 @@ -23565,7 +23584,7 @@ snapshots: schema-utils: 4.3.3 tapable: 2.3.3 terser-webpack-plugin: 5.6.1(esbuild@0.28.0)(webpack@5.107.2(esbuild@0.28.0)) - watchpack: 2.5.1 + watchpack: 2.5.2 webpack-sources: 3.5.0 transitivePeerDependencies: - '@minify-html/node' @@ -23588,11 +23607,11 @@ snapshots: '@webassemblyjs/ast': 1.14.1 '@webassemblyjs/wasm-edit': 1.14.1 '@webassemblyjs/wasm-parser': 1.14.1 - acorn: 8.16.0 - acorn-import-phases: 1.0.4(acorn@8.16.0) + acorn: 8.17.0 + acorn-import-phases: 1.0.4(acorn@8.17.0) browserslist: 4.28.2 chrome-trace-event: 1.0.4 - enhanced-resolve: 5.22.2 + enhanced-resolve: 5.24.0 es-module-lexer: 2.1.0 eslint-scope: 5.1.1 events: 3.3.0 @@ -23604,7 +23623,7 @@ snapshots: schema-utils: 4.3.3 tapable: 2.3.3 terser-webpack-plugin: 5.6.1(esbuild@0.28.0)(webpack@5.107.2) - watchpack: 2.5.1 + watchpack: 2.5.2 webpack-sources: 3.5.0 optionalDependencies: webpack-cli: 7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.107.2)