diff --git a/.changeset/alert-shape-prop.md b/.changeset/alert-shape-prop.md new file mode 100644 index 000000000..b53baa4f3 --- /dev/null +++ b/.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. + diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 221569748..3136a06e0 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -112,4 +112,5 @@ jobs: exitZeroOnChanges: true exitOnceUploaded: true autoAcceptChanges: true + onlyChanged: true projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index f489708c1..4df765d0f 100644 --- a/.github/workflows/pull-request.yml +++ b/.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 }} diff --git a/package.json b/package.json index 6a94a6aa7..3d967430a 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 02ab78e1e..284e40f10 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -223,8 +223,8 @@ importers: specifier: ^3.1.2 version: 3.1.2 chromatic: - specifier: ^8.0.0 - version: 8.0.0 + specifier: ^13.1.4 + version: 13.3.3 cross-env: specifier: ^7.0.3 version: 7.0.3 @@ -3672,9 +3672,17 @@ packages: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} - chromatic@8.0.0: - resolution: {integrity: sha512-K3wKac6XrbyZ+Hyt1Y3j5PIdvq/RA1LvVObhJ2VUuy6utTeEKoBIIIU7U0C6ZPj67WVk70+FjpDCv619SowcdQ==} + chromatic@13.3.3: + resolution: {integrity: sha512-89w0hiFzIRqLbwGSkqSQzhbpuqaWpXYZuevSIF+570Wb+T/apeAkp3px8nMJcFw+zEdqw/i6soofkJtfirET1Q==} hasBin: true + peerDependencies: + '@chromatic-com/cypress': ^0.*.* || ^1.0.0 + '@chromatic-com/playwright': ^0.*.* || ^1.0.0 + peerDependenciesMeta: + '@chromatic-com/cypress': + optional: true + '@chromatic-com/playwright': + optional: true chrome-trace-event@1.0.3: resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==} @@ -11406,7 +11414,7 @@ snapshots: optionalDependencies: fsevents: 2.3.3 - chromatic@8.0.0: {} + chromatic@13.3.3: {} chrome-trace-event@1.0.3: {} diff --git a/src/components/content/Alert/Alert.stories.tsx b/src/components/content/Alert/Alert.stories.tsx index 438642f18..b4853c362 100644 --- a/src/components/content/Alert/Alert.stories.tsx +++ b/src/components/content/Alert/Alert.stories.tsx @@ -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', +}; diff --git a/src/components/content/Alert/Alert.tsx b/src/components/content/Alert/Alert.tsx index 848c4617d..272ff7e70 100644 --- a/src/components/content/Alert/Alert.tsx +++ b/src/components/content/Alert/Alert.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, ) { - const { styles, theme, filteredProps } = useAlert(props); + const { styles, mods, filteredProps } = useAlert(props); return ( - + ); }); diff --git a/src/components/content/Alert/alert.test.tsx b/src/components/content/Alert/alert.test.tsx index aa6b7cf97..1c59d4fdc 100644 --- a/src/components/content/Alert/alert.test.tsx +++ b/src/components/content/Alert/alert.test.tsx @@ -17,19 +17,19 @@ describe(' 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', () => { @@ -37,7 +37,7 @@ describe(' component', () => { 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(' 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'); + }); }); diff --git a/src/components/content/Alert/types.ts b/src/components/content/Alert/types.ts index 232a8cf8e..0fb7d215b 100644 --- a/src/components/content/Alert/types.ts +++ b/src/components/content/Alert/types.ts @@ -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'; } diff --git a/src/components/content/Alert/use-alert.ts b/src/components/content/Alert/use-alert.ts index 2074ec29f..1c1a82721 100644 --- a/src/components/content/Alert/use-alert.ts +++ b/src/components/content/Alert/use-alert.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 }), }; }