diff --git a/.changeset/nervous-rules-admire.md b/.changeset/nervous-rules-admire.md new file mode 100644 index 0000000000..9e50863e4d --- /dev/null +++ b/.changeset/nervous-rules-admire.md @@ -0,0 +1,5 @@ +--- +"@marigold/components": patch +--- + +fix: `` component doesn't enforce defaults diff --git a/docs/app/components/[...slug]/page.tsx b/docs/app/components/[...slug]/page.tsx index 9d0e5e04db..8202178175 100644 --- a/docs/app/components/[...slug]/page.tsx +++ b/docs/app/components/[...slug]/page.tsx @@ -6,7 +6,6 @@ import { Mdx } from '@/ui/mdx'; import { MarigoldThemeSwitch, ThemeMenu } from './_components'; import { b2bTheme, coreTheme } from '@/theme'; -import { SSRProvider } from '@/ui'; interface ComponentPageProps { params: { @@ -61,13 +60,11 @@ export default async function ComponentPage({ params }: ComponentPageProps) { return (
- -

{page.title}

- - - - - +

{page.title}

+ + + +
); } diff --git a/packages/components/package.json b/packages/components/package.json index 5b54dc10c5..faa26a3157 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -49,7 +49,6 @@ "@react-aria/selection": "3.16.0", "@react-aria/separator": "3.3.3", "@react-aria/slider": "3.5.0", - "@react-aria/ssr": "3.7.0", "@react-aria/switch": "3.5.2", "@react-aria/table": "3.10.0", "@react-aria/tabs": "3.6.1", diff --git a/packages/components/src/DateField/DateField.tsx b/packages/components/src/DateField/DateField.tsx index a4cf680c94..4fbcf24f20 100644 --- a/packages/components/src/DateField/DateField.tsx +++ b/packages/components/src/DateField/DateField.tsx @@ -83,11 +83,13 @@ export const DateField = ({ const stateProps = useStateProps({ hover: isHovered, error, + readOnly, disabled, required, focus: isFocused || isPressed, }); + console.log(readOnly); return ( ) => { <> {item.key !== state.collection.getFirstKey() && (
  • - +
    • )}
  • diff --git a/packages/components/src/Provider/index.ts b/packages/components/src/Provider/index.ts index 86cee1ddcb..c88d75b79b 100644 --- a/packages/components/src/Provider/index.ts +++ b/packages/components/src/Provider/index.ts @@ -1,4 +1,3 @@ export { useTheme, ThemeProvider } from '@marigold/system'; -export { SSRProvider } from '@react-aria/ssr'; export * from './MarigoldProvider'; diff --git a/packages/components/src/Text/Text.test.tsx b/packages/components/src/Text/Text.test.tsx index c9f5ebfcf5..ae49d4a507 100644 --- a/packages/components/src/Text/Text.test.tsx +++ b/packages/components/src/Text/Text.test.tsx @@ -6,13 +6,13 @@ import { Text } from './Text'; const theme: Theme = { name: 'test', colors: { - emerald: 'rgb(5 150 105);', + emerald: 'rgb(5 150 105)', }, components: { - Text: cva("font-['Oswald_Regular']", { + Text: cva('font-["Oswald_Regular"]', { variants: { variant: { - one: 'font-["Arial]"', + one: 'font-["Arial"]', }, }, }), @@ -26,7 +26,7 @@ test('uses base as default variant', () => { ); const text = screen.getByText(/text/); - expect(text).toHaveClass(`font-['Oswald_Regular']`); + expect(text).toHaveClass(`font-["Oswald_Regular"]`); }); test('uses theme styles', () => { @@ -38,7 +38,7 @@ test('uses theme styles', () => { const text = screen.getByText(/text/); expect(text.className).toMatchInlineSnapshot( - `"font-["Arial]" text-[--color] outline-[--outline] not-italic cursor-default font-normal text-[13px]"` + `"font-["Arial"] text-[--color] outline-[--outline]"` ); }); @@ -64,8 +64,9 @@ test('style props override theme styles', () => { const text = screen.getByText(/text/); expect(text.className).toMatchInlineSnapshot( - `"font-["Arial]" text-[--color] outline-[--outline] not-italic cursor-default font-normal text-[13px]"` + `"font-["Arial"] text-[--color] outline-[--outline]"` ); + expect(text.style.cssText).toMatchInlineSnapshot(`"--color: red-700;"`); }); test('get theme color', () => { @@ -78,9 +79,9 @@ test('get theme color', () => { const text = screen.getByTestId('text'); expect(text).toMatchInlineSnapshot(`

    `); }); diff --git a/packages/components/src/Text/Text.tsx b/packages/components/src/Text/Text.tsx index d6ec01d6ef..3e20181c67 100644 --- a/packages/components/src/Text/Text.tsx +++ b/packages/components/src/Text/Text.tsx @@ -39,11 +39,11 @@ export const Text = ({ variant, size, color, - align = 'none', - cursor = 'default', - weight = 'normal', - fontSize = 'xs', - fontStyle = 'normal', + align, + cursor, + weight, + fontSize, + fontStyle, children, ...props }: TextProps) => { @@ -60,11 +60,11 @@ export const Text = ({ className={cn( classNames, 'text-[--color] outline-[--outline]', - textStyle[fontStyle], - textAlign[align], - cursorStyle[cursor], - fontWeight[weight], - textSize[fontSize] + fontStyle && textStyle[fontStyle], + align && textAlign[align], + cursor && cursorStyle[cursor], + weight && fontWeight[weight], + fontSize && textSize[fontSize] )} style={createVar({ color: diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5a36a6a9c4..889cf0a101 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -486,9 +486,6 @@ importers: '@react-aria/slider': specifier: 3.5.0 version: 3.5.0(react@18.2.0) - '@react-aria/ssr': - specifier: 3.7.0 - version: 3.7.0(react@18.2.0) '@react-aria/switch': specifier: 3.5.2 version: 3.5.2(react@18.2.0) diff --git a/themes/theme-b2b/src/components/DateField.styles.ts b/themes/theme-b2b/src/components/DateField.styles.ts index cafdd0e717..f7b7c5f657 100644 --- a/themes/theme-b2b/src/components/DateField.styles.ts +++ b/themes/theme-b2b/src/components/DateField.styles.ts @@ -6,6 +6,7 @@ export const DateField: ThemeComponent<'DateField'> = { 'border-border-light rounded-sm border outline-none', 'h-[34px] px-2', 'group-hover/field:border-border-hover', + 'group-readonly/field:group-focus/field:border-border-light group-readonly/field:group-focus/field:outline-none', 'group-focus/field:border-border-focus group-focus/field:outline-outline-focus group-focus/field:-outline-offset-1', ' group-disabled/field:bg-bg-disabled group-disabled/field:border-border-disabled group-disabled/field:text-text-disabled', ' group-readonly/field:bg-bg-transparent group-readonly/field:text-text-disabled', diff --git a/themes/theme-b2b/src/components/Input.styles.ts b/themes/theme-b2b/src/components/Input.styles.ts index a668829bd7..a0128a1119 100644 --- a/themes/theme-b2b/src/components/Input.styles.ts +++ b/themes/theme-b2b/src/components/Input.styles.ts @@ -8,6 +8,7 @@ export const Input: ThemeComponent<'Input'> = { 'border-border-light rounded-sm border outline-none', 'px-2 leading-[2]', 'hover:border-border-hover', + 'read-only:focus:border-border-light read-only:focus:outline-none', 'focus:border-border-focus focus:outline-outline-focus focus:-outline-offset-1', 'disabled:bg-bg-disabled disabled:text-text-disabled disabled:cursor-not-allowed ', 'data-[error]:border-border-error data-[error]:outline-outline-error data-[error]:-outline-offset-1', diff --git a/themes/theme-b2b/src/components/NumberField.styles.ts b/themes/theme-b2b/src/components/NumberField.styles.ts index 7eb89e3f12..3a56539c2f 100644 --- a/themes/theme-b2b/src/components/NumberField.styles.ts +++ b/themes/theme-b2b/src/components/NumberField.styles.ts @@ -4,7 +4,8 @@ export const NumberField: ThemeComponent<'NumberField'> = { group: cva([ 'border-border-light rounded-sm border border-solid', 'data-[hover]:border-border-hover', - 'data-[focus]:border-border-focus ', + 'group-readonly/field:group-focus/field:border-border-light group-readonly/field:group-focus/field:shadow-none', + 'data-[focus]:border-border-focus data-[focus]:shadow-shadow-focus data-[focus]:shadow-[0_0_0_1px]', 'data-[disabled]:bg-bg-disabled data-[disabled]:text-text-disabled data-[disabled]:cursor-not-allowed ', 'data-[error]:border-border-error', ]), diff --git a/themes/theme-b2b/src/components/TextArea.styles.ts b/themes/theme-b2b/src/components/TextArea.styles.ts index 46f577b0b4..c25adeba68 100644 --- a/themes/theme-b2b/src/components/TextArea.styles.ts +++ b/themes/theme-b2b/src/components/TextArea.styles.ts @@ -5,6 +5,7 @@ export const TextArea: ThemeComponent<'TextArea'> = cva([ 'border-border-light rounded-sm border outline-none', 'px-2 py-0', 'hover:border-border-hover', + 'read-only:focus:border-border-light read-only:focus:shadow-none', 'focus:border-border-focus focus:shadow-[0_0_0_1px_#fa8005]', 'disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:border-border-disabled disabled:border-border-disabled disabled:cursor-not-allowed', 'group-error/field:border-border-error group-error/field:shadow-[0_0_0_1px_#dd4142]', diff --git a/themes/theme-b2b/src/tokens.ts b/themes/theme-b2b/src/tokens.ts index 05b2a1d783..5d4d922223 100644 --- a/themes/theme-b2b/src/tokens.ts +++ b/themes/theme-b2b/src/tokens.ts @@ -26,68 +26,72 @@ const brand = { '900': '#111827', '950': '#030712', }, +} as const; - blue: { - '50': '#eefbfd', - '100': '#d5f2f8', - '200': '#b0e5f1', - '300': '#79d0e7', - '400': '#3ab3d5', - '500': '#1f96bb', - '600': '#1d799d', - '700': '#1e6280', - '800': '#215269', - '900': '#1f455a', - '950': '#0f2c3d', - }, +const green = { + '50': '#f7fce9', + '100': '#eef8cf', + '200': '#dcf1a5', + '300': '#c3e670', + '400': '#a8d744', + '500': '#8bbd26', + '600': '#6b961a', + '700': '#527318', + '800': '#425b19', + '900': '#394e19', + '950': '#1c2a09', +}; - red: { - '50': '#fdf3f3', - '100': '#fce4e4', - '200': '#f9cfcf', - '300': '#f4adad', - '400': '#ec7d7e', - '500': '#dd4142', - '600': '#cc3637', - '700': '#ab2a2b', - '800': '#8e2627', - '900': '#772526', - '950': '#400f0f', - }, +const yellow = { + '50': '#ffffe7', + '100': '#feffc1', + '200': '#fffd86', + '300': '#fff441', + '400': '#ffe60d', + '500': '#eac500', + '600': '#d19e00', + '700': '#a67102', + '800': '#89580a', + '900': '#74480f', + '950': '#442504', +}; - yellow: { - '50': '#ffffe7', - '100': '#feffc1', - '200': '#fffd86', - '300': '#fff441', - '400': '#ffe60d', - '500': '#eac500', - '600': '#d19e00', - '700': '#a67102', - '800': '#89580a', - '900': '#74480f', - '950': '#442504', - }, +const red = { + '50': '#fdf3f3', + '100': '#fce4e4', + '200': '#f9cfcf', + '300': '#f4adad', + '400': '#ec7d7e', + '500': '#dd4142', + '600': '#cc3637', + '700': '#ab2a2b', + '800': '#8e2627', + '900': '#772526', + '950': '#400f0f', +}; - green: { - '50': '#f7fce9', - '100': '#eef8cf', - '200': '#dcf1a5', - '300': '#c3e670', - '400': '#a8d744', - '500': '#8bbd26', - '600': '#6b961a', - '700': '#527318', - '800': '#425b19', - '900': '#394e19', - '950': '#1c2a09', - }, -} as const; +const blue = { + '50': '#eefbfd', + '100': '#d5f2f8', + '200': '#b0e5f1', + '300': '#79d0e7', + '400': '#3ab3d5', + '500': '#1f96bb', + '600': '#1d799d', + '700': '#1e6280', + '800': '#215269', + '900': '#1f455a', + '950': '#0f2c3d', +}; export const colors = { // Brand // --------------- brand, + blue, + yellow, + green, + red, // Text // --------------- @@ -97,13 +101,13 @@ export const colors = { accent: brand.secondary[500], }, - link: brand.blue[400], + link: blue[400], light: brand.secondary[100], // State disabled: brand.secondary[400], - error: brand.red[500], + error: red[500], hover: brand.secondary[800], }, @@ -136,7 +140,7 @@ export const colors = { * Use this when you need to separate a specific layer from * the surface color, e.g. table headers. */ - raised: brand.secondary[500], + raised: brand.secondary[400], /** * Use this when you need to make a specific layer * to appear lower than the surface color, e.g. progress bar. @@ -149,20 +153,28 @@ export const colors = { // State disabled: brand.secondary[200], hover: { DEFAULT: brand.secondary[400], light: brand.secondary[200] }, - focus: brand.primary[200], + focus: brand.secondary[200], selected: { DEFAULT: brand.primary[100], input: brand.primary[600], }, // Status - info: brand.blue[500], + info: blue[500], }, // Shadow // --------------- shadow: { light: brand.secondary[400], + + // state + focus: brand.primary[600], + + // status + error: red[500], + selected: red[700], + disabled: brand.secondary[400], }, // Border @@ -178,9 +190,9 @@ export const colors = { selected: brand.primary[800], // Status - error: brand.red[500], - info: brand.blue[500], - warning: brand.yellow[500], + error: red[500], + info: blue[500], + warning: yellow[500], }, // Outline @@ -189,19 +201,19 @@ export const colors = { dark: brand.secondary[700], // State - focus: brand.blue[400], + focus: blue[400], // Status - error: brand.red[500], + error: red[500], }, // Fill // --------------- fill: { // Status - required: brand.red[500], - error: brand.red[500], - info: brand.blue[500], - warning: brand.yellow[500], + required: red[500], + error: red[500], + info: blue[500], + warning: yellow[500], }, };