Merge branch 'main' into remove-shadow-tokens

marigold-ui · Jul 17, 2023 · f907976 · f907976
2 parents 4c4a1d9 + 991fe17
commit f907976
Show file tree

Hide file tree

Showing 14 changed files with 117 additions and 102 deletions.
diff --git a/.changeset/nervous-rules-admire.md b/.changeset/nervous-rules-admire.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+fix: `<Text>` component doesn't enforce defaults
diff --git 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 (
     <article className="prose dark:prose-invert py-6">
-      <SSRProvider>
-        <h1>{page.title}</h1>
-        <MarigoldThemeSwitch themes={themes} initial="b2bTheme">
-          <ThemeMenu />
-          <Mdx title={page.title} code={page.body.code} />
-        </MarigoldThemeSwitch>
-      </SSRProvider>
+      <h1>{page.title}</h1>
+      <MarigoldThemeSwitch themes={themes} initial="b2bTheme">
+        <ThemeMenu />
+        <Mdx title={page.title} code={page.body.code} />
+      </MarigoldThemeSwitch>
     </article>
   );
 }
diff --git 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
@@ -83,11 +83,13 @@ export const DateField = ({
   const stateProps = useStateProps({
     hover: isHovered,
     error,
+    readOnly,
     disabled,
     required,
     focus: isFocused || isPressed,
   });
 
+  console.log(readOnly);
   return (
     <FieldBase
       error={error}
@@ -128,8 +130,7 @@ export const DateField = ({
         ) : (
           <div className="flex items-center justify-center">
             <svg
-              data-testid="a
-              ction"
+              data-testid="action"
               className={cn(classNames.action)}
               viewBox="0 0 24 24"
               width={24}

diff --git a/packages/components/src/Menu/MenuSection.tsx b/packages/components/src/Menu/MenuSection.tsx
@@ -24,7 +24,7 @@ const MenuSection = ({ onAction, item, state }: MenuSectionProps<object>) => {
     <>
       {item.key !== state.collection.getFirstKey() && (
         <li>
-          <Divider />
+          <Divider variant="section" />
         </li>
       )}
       <li {...itemProps}>

diff --git 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
@@ -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', () => {
     </ThemeProvider>
   );
   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(`
     <p
-      class="font-['Oswald_Regular'] text-[--color] outline-[--outline] not-italic cursor-default font-normal text-[13px]"
+      class="font-["Oswald_Regular"] text-[--color] outline-[--outline]"
       data-testid="text"
-      style="--color: rgb(5 150 105);;"
+      style="--color: rgb(5 150 105);"
     />
   `);
 });
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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]',