feat(Alert): add sharp shape (#877)

Author: tenphi

.changeset/alert-shape-prop.md

@@ -0,0 +1,6 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Add `shape` prop to Alert component. The shape prop accepts 'card' (default, 1cr radius with border) or 'sharp' (no border radius or border) values to control border styling.
+

.github/workflows/main.yml

@@ -112,4 +112,5 @@ jobs:
           exitZeroOnChanges: true
           exitOnceUploaded: true
           autoAcceptChanges: true
+          onlyChanged: true
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/pull-request.yml

@@ -179,6 +179,7 @@ jobs:
         with:
           exitZeroOnChanges: true
           exitOnceUploaded: true
+          onlyChanged: true
           debug: true
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

package.json

@@ -136,7 +136,7 @@
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",
     "bytes": "^3.1.2",
-    "chromatic": "^8.0.0",
+    "chromatic": "^13.1.4",
     "cross-env": "^7.0.3",
     "csstype": "^3.1.2",
     "dedent": "^0.7.0",

pnpm-lock.yaml

@@ -48,3 +48,15 @@ CustomStyling.args = {
   textAlign: 'center',
   fill: '#danger-bg',
 };
+
+export const SharpShape = Template.bind({});
+SharpShape.args = {
+  shape: 'sharp',
+  theme: 'success',
+};
+
+export const CardShape = Template.bind({});
+CardShape.args = {
+  shape: 'card',
+  theme: 'danger',
+};

src/components/content/Alert/Alert.stories.tsx

@@ -13,7 +13,10 @@ const AlertElement = tasty({
   styles: {
     display: 'block',
     flow: 'column',
-    radius: '1cr',
+    radius: {
+      '': '1cr',
+      'shape=sharp': '0',
+    },
     padding: '1.5x',
     preset: 't3',
     color: {
@@ -31,10 +34,11 @@ const AlertElement = tasty({
     border: {
       '': '#clear',
       ...Object.keys(THEMES).reduce((map, type) => {
-        map[`[data-type="${type}"]`] = THEMES[type].border;
+        map[`type=${type}`] = THEMES[type].border;
 
         return map;
       }, {}),
+      'shape=sharp': '0',
     },
   },
 });
@@ -43,14 +47,9 @@ export const Alert = forwardRef(function Alert(
   props: CubeAlertProps,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const { styles, theme, filteredProps } = useAlert(props);
+  const { styles, mods, filteredProps } = useAlert(props);
 
   return (
-    <AlertElement
-      {...filteredProps}
-      ref={ref}
-      data-type={theme}
-      styles={styles}
-    />
+    <AlertElement {...filteredProps} ref={ref} mods={mods} styles={styles} />
   );
 });

src/components/content/Alert/Alert.tsx

@@ -17,27 +17,27 @@ describe('<Alert /> component', () => {
       useAlert({ theme: 'danger', isDisabled: true }),
     );
 
-    expect(result.current.theme).toBe('disabled');
+    expect(result.current.mods.type).toBe('disabled');
   });
 
   it('should correctly render theme', () => {
     const { result } = renderHook(() => useAlert({ theme: 'danger' }));
 
-    expect(result.current.theme).toBe('danger');
+    expect(result.current.mods.type).toBe('danger');
   });
 
   it('should correctly render type', () => {
     const { result } = renderHook(() => useAlert({ type: 'danger' }));
 
-    expect(result.current.theme).toBe('danger');
+    expect(result.current.mods.type).toBe('danger');
   });
 
   it('should correctly render theme', () => {
     const { result } = renderHook(() =>
       useAlert({ theme: 'danger', type: 'note' }),
     );
 
-    expect(result.current.theme).toBe('danger');
+    expect(result.current.mods.type).toBe('danger');
   });
 
   it('should add qa', () => {
@@ -47,4 +47,26 @@ describe('<Alert /> component', () => {
 
     expect(result.current.filteredProps.qa).toBe('test');
   });
+
+  it('should default to card shape', () => {
+    const { result } = renderHook(() => useAlert({ theme: 'danger' }));
+
+    expect(result.current.mods.shape).toBe('card');
+  });
+
+  it('should correctly render sharp shape', () => {
+    const { result } = renderHook(() =>
+      useAlert({ theme: 'danger', shape: 'sharp' }),
+    );
+
+    expect(result.current.mods.shape).toBe('sharp');
+  });
+
+  it('should correctly render card shape', () => {
+    const { result } = renderHook(() =>
+      useAlert({ theme: 'success', shape: 'card' }),
+    );
+
+    expect(result.current.mods.shape).toBe('card');
+  });
 });

src/components/content/Alert/alert.test.tsx

@@ -18,4 +18,11 @@ export interface CubeAlertProps
    * @default note
    */
   theme?: keyof typeof THEMES;
+  /**
+   * Shape of the alert's border radius and border.
+   * - `card` - Card shape with border radius (`1cr`) and border
+   * - `sharp` - Sharp corners with no border radius or border (`0`)
+   * @default "card"
+   */
+  shape?: 'card' | 'sharp';
 }

src/components/content/Alert/types.ts

@@ -11,7 +11,7 @@ import { CubeAlertProps } from './types';
 const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES] as const;
 
 export function useAlert(props: CubeAlertProps) {
-  const { type, isDisabled = false, theme } = props;
+  const { type, isDisabled = false, theme, shape = 'card', mods } = props;
 
   const styles = extractStyles(props, STYLE_LIST);
 
@@ -25,7 +25,11 @@ export function useAlert(props: CubeAlertProps) {
 
   return {
     styles,
-    theme: _theme,
+    mods: {
+      shape,
+      type: _theme,
+      ...mods,
+    },
     filteredProps: filterBaseProps(props, { eventProps: true }),
   };
 }