fix: infobar: buttons should have transparent background and inherit color

src/components/InfoBar/InfoBar.test.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import Enzyme from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import MatchMediaMock from 'jest-matchmedia-mock';
+import { InfoBar, InfoBarType } from './';
+import { fireEvent, render } from '@testing-library/react';
+import { IconName } from '../Icon';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+let matchMedia: any;
+
+describe('InfoBar', () => {
+  beforeAll(() => {
+    matchMedia = new MatchMediaMock();
+  });
+
+  afterEach(() => {
+    matchMedia.clear();
+  });
+
+  test('Renders without crashing', () => {
+    const { container, getByRole } = render(
+      <InfoBar content={'InfoBar test render'} />
+    );
+    const infoBar = getByRole('alert');
+    expect(() => container).not.toThrowError();
+    expect(infoBar).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Calls onClose callback when close button is clicked', () => {
+    const onClose = jest.fn();
+    const { container } = render(
+      <InfoBar closable content={'InfoBar test onClose'} onClose={onClose} />
+    );
+    fireEvent.click(container.querySelector('.close-button'));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  test('Renders a custom icon when the icon prop uses a custom icon', () => {
+    const { container } = render(
+      <InfoBar content={'InfoBar test icon'} icon={IconName.mdiAccountGroup} />
+    );
+    expect(container.querySelector('.icon')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  test('InfoBar is Disruptive', () => {
+    const { container } = render(
+      <InfoBar
+        content={'InfoBar test disruptive'}
+        type={InfoBarType.disruptive}
+      />
+    );
+    expect(container.querySelector('.disruptive')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  test('InfoBar is Neutral', () => {
+    const { container } = render(
+      <InfoBar content={'InfoBar test neutral'} type={InfoBarType.neutral} />
+    );
+    expect(container.querySelector('.neutral')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  test('InfoBar is Positive', () => {
+    const { container } = render(
+      <InfoBar content={'InfoBar test positive'} type={InfoBarType.positive} />
+    );
+    expect(container.querySelector('.positive')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  test('InfoBar is Warning', () => {
+    const { container } = render(
+      <InfoBar content={'InfoBar test warning'} type={InfoBarType.warning} />
+    );
+    expect(container.querySelector('.warning')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/InfoBar/InfoBar.tsx

@@ -93,8 +93,12 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
               <div className={messageClasses}>{content}</div>
               {actionButtonProps && (
                 <SystemUIButton
+                  transparent
                   {...actionButtonProps}
-                  disruptive={type === InfoBarType.disruptive}
+                  classNames={mergeClasses([
+                    styles.actionButton,
+                    actionButtonProps.classNames,
+                  ])}
                 />
               )}
               {closable && (
@@ -103,8 +107,12 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
                   iconProps={{ path: closeIcon }}
                   onClick={onClose}
                   shape={ButtonShape.Round}
+                  transparent
                   {...closeButtonProps}
-                  disruptive={type === InfoBarType.disruptive}
+                  classNames={mergeClasses([
+                    styles.closeButton,
+                    closeButtonProps?.classNames,
+                  ])}
                 />
               )}
             </div>

src/components/InfoBar/__snapshots__/InfoBar.test.tsx.snap

@@ -0,0 +1,187 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoBar InfoBar is Disruptive 1`] = `
+<div>
+  <div
+    class="info-bar disruptive"
+    role="alert"
+  >
+    <span
+      aria-hidden="false"
+      class="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style="width: 20px; height: 20px;"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+          style="fill: currentColor;"
+        />
+      </svg>
+    </span>
+    <div
+      class="message body2"
+    >
+      InfoBar test disruptive
+    </div>
+  </div>
+</div>
+`;
+
+exports[`InfoBar InfoBar is Neutral 1`] = `
+<div>
+  <div
+    class="info-bar neutral"
+    role="alert"
+  >
+    <span
+      aria-hidden="false"
+      class="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style="width: 20px; height: 20px;"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+          style="fill: currentColor;"
+        />
+      </svg>
+    </span>
+    <div
+      class="message body2"
+    >
+      InfoBar test neutral
+    </div>
+  </div>
+</div>
+`;
+
+exports[`InfoBar InfoBar is Positive 1`] = `
+<div>
+  <div
+    class="info-bar positive"
+    role="alert"
+  >
+    <span
+      aria-hidden="false"
+      class="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style="width: 20px; height: 20px;"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+          style="fill: currentColor;"
+        />
+      </svg>
+    </span>
+    <div
+      class="message body2"
+    >
+      InfoBar test positive
+    </div>
+  </div>
+</div>
+`;
+
+exports[`InfoBar InfoBar is Warning 1`] = `
+<div>
+  <div
+    class="info-bar warning"
+    role="alert"
+  >
+    <span
+      aria-hidden="false"
+      class="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style="width: 20px; height: 20px;"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z"
+          style="fill: currentColor;"
+        />
+      </svg>
+    </span>
+    <div
+      class="message body2"
+    >
+      InfoBar test warning
+    </div>
+  </div>
+</div>
+`;
+
+exports[`InfoBar Renders a custom icon when the icon prop uses a custom icon 1`] = `
+<div>
+  <div
+    class="info-bar neutral"
+    role="alert"
+  >
+    <span
+      aria-hidden="false"
+      class="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style="width: 20px; height: 20px;"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
+          style="fill: currentColor;"
+        />
+      </svg>
+    </span>
+    <div
+      class="message body2"
+    >
+      InfoBar test icon
+    </div>
+  </div>
+</div>
+`;
+
+exports[`InfoBar Renders without crashing 1`] = `
+<div>
+  <div
+    class="info-bar neutral"
+    role="alert"
+  >
+    <span
+      aria-hidden="false"
+      class="icon icon-wrapper"
+      role="presentation"
+    >
+      <svg
+        role="presentation"
+        style="width: 20px; height: 20px;"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+          style="fill: currentColor;"
+        />
+      </svg>
+    </span>
+    <div
+      class="message body2"
+    >
+      InfoBar test render
+    </div>
+  </div>
+</div>
+`;

src/components/InfoBar/infoBar.module.scss

@@ -11,35 +11,74 @@
   &.neutral {
     background-color: var(--info-bar-background-color);
     color: var(--info-bar-text-color);
+
+    .action-button,
+    .close-button {
+      &:active {
+        background-color: var(--info-bar-button-active-background-color);
+      }
+    }
   }
 
   &.positive {
     background-color: var(--info-bar-positive-background-color);
     color: var(--info-bar-positive-text-color);
+
+    .action-button,
+    .close-button {
+      &:active {
+        background-color: var(
+          --info-bar-positive-button-active-background-color
+        );
+      }
+    }
   }
 
   &.warning {
     background-color: var(--info-bar-warning-background-color);
     color: var(--info-bar-warning-text-color);
+
+    .action-button,
+    .close-button {
+      &:active {
+        background-color: var(
+          --info-bar-warning-button-active-background-color
+        );
+      }
+    }
   }
 
   &.disruptive {
     background-color: var(--info-bar-disruptive-background-color);
     color: var(--info-bar-disruptive-text-color);
+
+    .action-button,
+    .close-button {
+      &:active {
+        background-color: var(
+          --info-bar-disruptive-button-active-background-color
+        );
+      }
+    }
   }
 
+  .action-button,
+  .close-button,
   .icon {
     color: inherit;
   }
 
+  .action-button,
+  .close-button {
+    &:hover {
+      background-color: var(--info-bar-button-hover-background-color);
+    }
+  }
+
   .message {
     flex: 1;
     display: flex;
     align-items: center;
     color: inherit;
   }
-
-  .buttons-container {
-    padding: $space-m;
-  }
 }

src/styles/themes/_default-theme.scss

@@ -643,12 +643,19 @@
   // ------ Info Bar theme ------
   --info-bar-border-radius: var(--border-radius-xl);
   --info-bar-background-color: var(--grey-color-10);
+  --info-bar-button-active-background-color: var(--grey-color-20);
+  --info-bar-button-hover-background-color: var(--background-color);
   --info-bar-text-color: var(--grey-color-70);
   --info-bar-positive-background-color: var(--green-color-10);
+  --info-bar-positive-button-active-background-color: var(--green-color-20);
   --info-bar-positive-text-color: var(--green-color-70);
   --info-bar-warning-background-color: var(--orange-color-10);
+  --info-bar-warning-button-active-background-color: var(--orange-color-20);
   --info-bar-warning-text-color: var(--orange-color-70);
   --info-bar-disruptive-background-color: var(--disruptive-color-10);
+  --info-bar-disruptive-button-active-background-color: var(
+    --disruptive-color-20
+  );
   --info-bar-disruptive-text-color: var(--disruptive-color-70);
   // ------ Info Bar theme ------