uikit-react-public 0.50.2 → 0.50.4

package/lib/components/Alert/Alert.stories.tsx

@@ -111,8 +111,8 @@ export const WithActionButton: Story = {
       {...args}
       actionButton={
         <Button
-          leftIcon={<Icon.ChevronRight />}
-          rightIcon={<Icon.ChevronRight />}
+          leftIcon={<Icon.ArrowRight />}
+          rightIcon={<Icon.ArrowRight />}
         >
           Action
         </Button>

package/lib/components/Alert/Alert.tsx

@@ -61,7 +61,7 @@ const Alert = ({
   const baseStyles = css`
     display: flex;
     align-items: flex-start;
-    gap: ${theme.margin.m8};
+    gap: ${actionButton ? theme.margin.m32 : theme.margin.m8};
     padding: ${padding.p16} ${padding.p12} ${padding.p16} ${padding.p8};
     border-left-width: 4px;
     border-left-style: solid;
@@ -123,10 +123,17 @@ const Alert = ({
     overflow-wrap: anywhere;
   `;
 
+  const contentGroupStyle = css`
+    display: flex;
+    align-items: flex-start;
+    gap: ${theme.margin.m8};
+    flex: 1;
+    min-width: 0;
+  `;
+
   const actionButtonStyle = css`
     align-self: center;
     flex-shrink: 0;
-    margin-left: auto;
   `;
 
   const IconComp = {
@@ -151,6 +158,22 @@ const Alert = ({
       })
     : null;
 
+  const alertContent = (
+    <>
+      <IconComp
+        className={iconStyle}
+        aria-label={typeName}
+        {...iconProps}
+      />
+      <div
+        {...contentProps}
+        className={cx(contentStyle, contentProps?.className)}
+      >
+        {children}
+      </div>
+    </>
+  );
+
   return (
     <AlertContext.Provider value={{ type }}>
       <div
@@ -159,17 +182,11 @@ const Alert = ({
         role='alert'
         {...props}
       >
-        <IconComp
-          className={iconStyle}
-          aria-label={typeName}
-          {...iconProps}
-        />
-        <div
-          {...contentProps}
-          className={cx(contentStyle, contentProps?.className)}
-        >
-          {children}
-        </div>
+        {actionButton ? (
+          <div className={contentGroupStyle}>{alertContent}</div>
+        ) : (
+          alertContent
+        )}
         {renderedActionButton}
       </div>
     </AlertContext.Provider>

package/lib/components/Alert/__tests__/Alert.test.tsx

@@ -104,8 +104,8 @@ describe('Alert', () => {
           type='info'
           actionButton={
             <Button
-              leftIcon={<Icon.ChevronRight />}
-              rightIcon={<Icon.ChevronRight />}
+              leftIcon={<Icon.ArrowRight />}
+              rightIcon={<Icon.ArrowRight />}
               onClick={onClick}
             >
               Action
@@ -122,4 +122,20 @@ describe('Alert', () => {
     await user.click(screen.getByRole('button', { name: 'Action' }));
     expect(onClick).toHaveBeenCalledOnce();
   });
+
+  test('keeps 32px between the content and action button', () => {
+    render(
+      <ThemeContextProvider>
+        <Alert
+          type='info'
+          actionButton={<Button>Action</Button>}
+        >
+          <Alert.Message>Alert message</Alert.Message>
+        </Alert>
+      </ThemeContextProvider>
+    );
+
+    const alert = screen.getByRole('alert');
+    expect(getComputedStyle(alert).gap).toBe('32px');
+  });
 });

package/lib/components/Button/Button.mdx

@@ -17,7 +17,7 @@ export const usage = {
   destructiveNoPadding: `<Button variant='tertiary-destructive-no-padding'>Destructive Action</Button>`,
   onDark: `<Button variant='secondary' onLight={false}>Secondary Button</Button>`,
   withIcon: `<Button icon={<Icon.AlertTriangle />}>Button</Button>`,
-  withTwoIcons: `<Button leftIcon={<Icon.ChevronRight />} rightIcon={<Icon.ChevronRight />}>Action</Button>`,
+  withTwoIcons: `<Button leftIcon={<Icon.ArrowRight />} rightIcon={<Icon.ArrowRight />}>Action</Button>`,
   loading: `<Button loading>Loading Button</Button>`,
   link: `<Button as='a' href='https://www.ucl.ac.uk' target='_blank'>Go to UCL&#39;s website</Button>`,
   fullWidth: `<Button fullWidth>Full Width Button</Button>`,

package/lib/components/Button/Button.stories.tsx

@@ -365,8 +365,8 @@ export const WithTwoIcons: Story = {
   name: 'With two icons',
   args: {
     children: 'Action',
-    leftIcon: <Icon.ChevronRight />,
-    rightIcon: <Icon.ChevronRight />,
+    leftIcon: <Icon.ArrowRight />,
+    rightIcon: <Icon.ArrowRight />,
   },
 };
 

package/lib/components/Button/__tests__/Button.test.tsx

@@ -83,8 +83,8 @@ describe('Button', () => {
     render(
       <ThemeContextProvider>
         <Button
-          leftIcon={<Icon.ChevronRight />}
-          rightIcon={<Icon.ChevronRight />}
+          leftIcon={<Icon.ArrowRight />}
+          rightIcon={<Icon.ArrowRight />}
           size='xsmall'
         >
           Action

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.50.2",
+  "version": "0.50.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",