Fix HeaderButton's startIcon & endIcon fill color (#2374)

iTwin · Dec 17, 2024 · 52b3f4c · 52b3f4c
1 parent 71af094
commit 52b3f4c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/.changeset/shiny-waves-judge.md b/.changeset/shiny-waves-judge.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fix `HeaderButton`'s `startIcon` and `endIcon` fill color.
diff --git a/.changeset/smart-penguins-greet.md b/.changeset/smart-penguins-greet.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': patch
+---
+
+Fix fill of svgs in `iui-header-breadcrumb-button`.
diff --git a/packages/itwinui-css/src/header/header-buttons.scss b/packages/itwinui-css/src/header/header-buttons.scss
@@ -160,6 +160,17 @@ $iui-side-navigation-icon-margins: calc(1.5 * var(--iui-size-m));
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
+
+  svg {
+    fill: currentColor;
+
+    :disabled &,
+    [aria-disabled='true'] & {
+      @media (forced-colors: active) {
+        fill: GrayText;
+      }
+    }
+  }
 }
 
 @mixin iui-header-breadcrumb-button-split {
@@ -190,21 +201,9 @@ $iui-side-navigation-icon-margins: calc(1.5 * var(--iui-size-m));
   flex-shrink: 0;
   margin-inline-end: calc(0px - var(--iui-size-2xs));
 
-  &,
-  > svg {
-    fill: currentColor;
-  }
-
   .iui-header-breadcrumb-button-split & {
     margin-inline-end: 0;
   }
-
-  :disabled &,
-  [aria-disabled='true'] & {
-    @media (forced-colors: active) {
-      fill: GrayText;
-    }
-  }
 }
 
 @mixin iui-header-breadcrumb-button-text {
@@ -277,7 +276,7 @@ $iui-side-navigation-icon-margins: calc(1.5 * var(--iui-size-m));
 
     :is(:disabled, [aria-disabled='true']) & {
       background-color: var(--iui-color-background-backdrop);
-      fill: var(--iui-color-icon-disabled);
+      fill: currentColor;
 
       @media (forced-colors: active) {
         fill: GrayText;

diff --git a/packages/itwinui-react/src/core/Header/HeaderDropdownButton.tsx b/packages/itwinui-react/src/core/Header/HeaderDropdownButton.tsx
@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
 import * as React from 'react';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import {
@@ -15,7 +14,7 @@ import { HeaderBasicButton } from './HeaderBasicButton.js';
 import type { DropdownButtonProps } from '../Buttons/DropdownButton.js';
 
 export const HeaderDropdownButton = React.forwardRef((props, ref) => {
-  const { menuItems, className, children, ...rest } = props;
+  const { menuItems, children, ...rest } = props;
 
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
 
@@ -36,7 +35,6 @@ export const HeaderDropdownButton = React.forwardRef((props, ref) => {
       onVisibleChange={(open) => setIsMenuOpen(open)}
     >
       <HeaderBasicButton
-        className={cx('iui-header-breadcrumb-button', className)}
         ref={refs}
         aria-label='Dropdown'
         endIcon={