Banner component update

.storybook/main.ts

@@ -31,6 +31,7 @@ const config: StorybookConfig = {
   typescript: {
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
+      tsconfigPath: './tsconfig.app.json', // https://github.com/storybookjs/storybook/issues/30015
       shouldExtractLiteralValuesFromEnum: true,
       shouldRemoveUndefinedFromOptional: true, // Prevent issues with props of type `undefined | T`
     },

.storybook/preview.tsx

@@ -48,11 +48,10 @@ const preview = {
             [
               'Panel',
               'Card',
+              'Banner',
               'Dialog',
               'Disclosure',
               'Accordion',
-              'Alert',
-              'Banner',
             ],
             'actions',
             [

.vscode/custom.css-data.json

@@ -1,4 +1,5 @@
 {
+  // https://github.com/microsoft/vscode-custom-data
   "version": 1.1,
   "properties": [
     { "name": "interpolate-size" },

app/lib.ts

@@ -20,11 +20,10 @@ export { LinkAsButton } from '../src/components/actions/LinkAsButton/LinkAsButto
 // Containers
 export { Panel } from '../src/components/containers/Panel/Panel.tsx';
 export { Card } from '../src/components/containers/Card/Card.tsx';
+export { Banner } from '../src/components/containers/Banner/Banner.tsx';
 export { Dialog } from '../src/components/containers/Dialog/Dialog.tsx';
 export { Disclosure } from '../src/components/containers/Disclosure/Disclosure.tsx';
 export { Accordion } from '../src/components/containers/Accordion/Accordion.tsx';
-export { Alert } from '../src/components/containers/Alert/Alert.tsx';
-export { Banner } from '../src/components/containers/Banner/Banner.tsx';
 
 // Forms > Context
 export { Form } from '../src/components/forms/context/Form/Form.tsx';

plopfile.ts

@@ -36,7 +36,6 @@ const componentTemplate = {
         > Add `ComponentProps<>` to the props if you want the consumer to be able to pass additional properties through
           to the underlying element. Can be a tag (e.g. `'div'`) or another component (e.g. `typeof OtherComponent`).
       - ```
-        role="presentation"
         {...propsRest}
         className={cx('bk', 'my-classname', className)
         ```
@@ -78,7 +77,6 @@ const componentTemplate = {
       const { unstyled = false, variant, ...propsRest } = props;
       return (
         <{{{element-type}}}
-          role="presentation"
           {...propsRest}
           className={cx({
             bk: true,
@@ -163,10 +161,10 @@ const componentTemplate = {
     |* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
     |* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-    import type { Meta, StoryObj } from '@storybook/react';
-
     import * as React from 'react';
 
+    import type { Meta, StoryObj } from '@storybook/react';
+
     import { {{{component-name}}} } from './{{{component-name}}}.tsx';
 
 

src/assets/icons/_icons.ts

@@ -39,6 +39,7 @@ export const icons = {
   'group': {},
   'help': {},
   'home': {},
+  'info-filled': {},
   'info': {},
   'install': {},
   'integration': {},
@@ -66,12 +67,14 @@ export const icons = {
   'settings': {},
   'solutions': {},
   'status-cancel': {},
+  'status-failed-filled': {},
   'status-failed': {},
+  'status-success-filled': {},
   'status-success': {},
   'tasks': {},
   'user-authentication': {},
   'user-profile': {},
   'user': {},
   'warning': {},
   'workflow': {},
-} as const satisfies Record<string, IconDef>;
+} as const satisfies Record<string, IconDef>;

src/components/actions/Button/Button.module.scss

@@ -16,7 +16,10 @@
     cursor: pointer;
 
     margin: 0;
-    padding: calc(bk.$spacing-2 - 0.125lh) bk.$spacing-3; /* Note: compensate for line-height difference with Figma */
+    padding: 0;
+    &:not(.bk-button--trimmed) {
+      padding: calc(bk.$spacing-2 - 0.125lh) bk.$spacing-3; /* Note: compensate for line-height difference with Figma */
+    }
 
     /* Transparent border for consistency with other variants that have a border */
     border: bk.$size-1 solid transparent;
@@ -67,7 +70,7 @@
       --bk-button-color-contrast: #{bk.$theme-button-primary-text-non-active};
       cursor: not-allowed;
     }
-
+    
     @media (prefers-reduced-motion: no-preference) {
       transition: none 150ms ease-in-out;
       transition-property: border, background, color;

src/components/actions/Button/Button.stories.tsx

@@ -10,7 +10,7 @@ import * as React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import { Icon } from '../../graphics/Icon/Icon.tsx';
-import { Alert } from '../../containers/Alert/Alert.tsx';
+import { Banner } from '../../containers/Banner/Banner.tsx';
 
 import { Button } from './Button.tsx';
 
@@ -25,7 +25,6 @@ export default {
     design: { type: 'figma', url: 'https://www.figma.com/design/ymWCnsGfIsC2zCz17Ur11Z/Design-System-UX?node-id=4599-156236&m=dev' },
   },
   tags: ['autodocs'],
-  argTypes: {},
   args: {
     unstyled: false,
     label: 'Button',
@@ -40,10 +39,12 @@ export default {
     Story => (
       <ErrorBoundary
         FallbackComponent={({ error, resetErrorBoundary }) =>
-          <Alert kind="error" style={{ width: '80cqi' }}>
-            <p>Error: {error?.message}</p>
-            <p><Button variant="tertiary" label="Reset" onClick={resetErrorBoundary}/></p>
-          </Alert>
+          <Banner variant="error" style={{ width: '60cqi' }}
+            title="Error"
+            actions={<Banner.ActionButton label="Reset" onPress={resetErrorBoundary}/>}
+          >
+            {error?.message}
+          </Banner>
         }
       >
         <Story/>
@@ -260,3 +261,20 @@ export const CustomContentWithIconAfter: Story = {
     </>,
   },
 };
+
+/**
+ * Buttons come with some padding around the text. If you want to trim this, set `trimmed="true"`. This can be
+ * useful, for example when you want to control the height of the button, or make it fit a single line height.
+ */
+export const ButtonTrimmed: Story = {
+  ...Tertiary,
+  args: {
+    ...Tertiary.args,
+    trimmed: true,
+    children: <>
+      Trimmed button
+      <Icon icon="caret-down" className="icon"/>
+    </>,
+    style: { background: 'light-dark(white, black)' },
+  },
+};

src/components/actions/Button/Button.tsx

@@ -20,6 +20,9 @@ export type ButtonProps = React.PropsWithChildren<Omit<ComponentProps<'button'>,
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
 
+  /** Whether to trim this component (strip any spacing around the element). */
+  trimmed?: undefined | boolean,
+
   /**
    * The label of the button. Additional UI elements may be added, e.g. a loading indicator. If full control over
    * the button content is desired, use `children` instead, this overrides the `label`.
@@ -48,6 +51,7 @@ export const Button = (props: ButtonProps) => {
   const {
     children,
     unstyled = false,
+    trimmed = false,
     label,
     nonactive = false,
     variant = 'tertiary',
@@ -112,14 +116,19 @@ export const Button = (props: ButtonProps) => {
     buttonType = 'submit';
   }
 
+  // If both children and label are specified, use the `label` as the accessible name by default
+  const accessibleName = typeof children !== 'undefined' && label ? label : undefined;
+
   return (
     <button
+      aria-label={accessibleName}
       {...propsRest}
       type={buttonType} // Not overridable
       disabled={!isInteractive}
       className={cx({
         bk: true,
         [cl['bk-button']]: !unstyled,
+        [cl['bk-button--trimmed']]: trimmed,
         [cl['bk-button--primary']]: variant === 'primary',
         [cl['bk-button--secondary']]: variant === 'secondary',
         [cl['bk-button--nonactive']]: isNonactive,