Merge branch 'main' into fix-numberfield-hover

marigold-ui · Jul 17, 2023 · adf523e · adf523e
2 parents a42b462 + 1872595
commit adf523e
Show file tree

Hide file tree

Showing 18 changed files with 123 additions and 107 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/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/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/themes/theme-b2b/src/components/Button.styles.ts b/themes/theme-b2b/src/components/Button.styles.ts
@@ -18,12 +18,12 @@ export const Button: ThemeComponent<'Button'> = cva(
         ],
         ghost: [
           'border-border-dark border border-solid',
-          'text-text-primary',
+          'text-text-body',
           'hover:bg-bg-hover',
         ],
-        text: ['text-text-primary data-[hover]:bg-bg-hover'],
+        text: ['text-text-body data-[hover]:bg-bg-hover'],
         menu: [
-          'text-text-primary bg-bg-body hover:text-text-light hover:bg-bg-secondary-hover',
+          'text-text-body bg-bg-body hover:text-text-light hover:bg-bg-secondary-hover',
         ],
       },
       size: {

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/DatePicker.styles.ts b/themes/theme-b2b/src/components/DatePicker.styles.ts
@@ -5,7 +5,7 @@ export const DatePicker: ThemeComponent<'DatePicker'> = {
   button: cva([
     'h-full w-9 p-0',
     'flex items-center justify-center ',
-    'text-text-primary/80',
+    'text-text-body/80',
     'data-[hover]:bg-bg-hover group-focus/field:bg-bg-hover group-focus/field:[&[aria-expanded=true]]:bg-bg-secondary focus-visible:border-none focus-visible:outline-0 group-focus/field:text-white data-[hover]:text-white',
     'disabled:hidden',
   ]),

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/ListBox.styles.ts b/themes/theme-b2b/src/components/ListBox.styles.ts
@@ -1,7 +1,7 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
 // Make sure ListBox looks correct if is in an overlay
-const font = 'font-body text-text-primary';
+const font = 'font-body text-text-body';
 
 export const ListBox: ThemeComponent<'ListBox'> = {
   container: cva([
@@ -23,5 +23,5 @@ export const ListBox: ThemeComponent<'ListBox'> = {
   section: cva(
     '[&:nth-child(n+1)]:border-border-light outline-none [&:nth-child(n+1)]:border-t-[1px_solid]'
   ),
-  sectionTitle: cva('text-text-primary-light px-2 pt-2 text-sm'),
+  sectionTitle: cva('text-text-body-accent px-2 pt-2 text-sm'),
 };
diff --git a/themes/theme-b2b/src/components/Menu.styles.ts b/themes/theme-b2b/src/components/Menu.styles.ts
@@ -7,5 +7,5 @@ export const Menu: ThemeComponent<'Menu'> = {
     ' overflow-y-auto overflow-x-hidden',
   ]),
   item: cva('focus:bg-bg-focus cursor-pointer px-4 py-1 outline-none'),
-  section: cva('text-text-primary-light p-4 text-sm'),
+  section: cva('text-text-body-accent p-4 text-sm'),
 };
diff --git a/themes/theme-b2b/src/components/NumberField.styles.ts b/themes/theme-b2b/src/components/NumberField.styles.ts
@@ -4,12 +4,13 @@ export const NumberField: ThemeComponent<'NumberField'> = {
   group: cva([
     'border-border-light rounded-sm border border-solid',
     'hover:border-border-hover',
+    'group-readonly/field:group-focus/field:border-border-light group-readonly/field:group-focus/field:shadow-none',
     'group-focus/field:border-border-focus ',
     'group-disabled/field:bg-bg-disabled group-disabled/field:text-text-disabled group-disabled/field:cursor-not-allowed ',
     'group-error/field:border-border-error',
   ]),
   stepper: cva([
-    'text-text-primary w-7',
+    'text-text-body w-7',
     'border-border-light border-solid first-of-type:border-r',
     'border-border-light border-solid last-of-type:border-l ',
   ]),

diff --git a/themes/theme-b2b/src/components/Slider.styles.ts b/themes/theme-b2b/src/components/Slider.styles.ts
@@ -13,6 +13,6 @@ export const Slider: ThemeComponent<'Slider'> = {
     'data-[focus]:border-border-focus',
     'data-[disabled]:bg-bg-disabled data-[disabled]:border-border-disabled',
   ]),
-  label: cva('text-text-primary text-base font-normal'),
-  output: cva('text-text-primary text-base font-normal'),
+  label: cva('text-text-body text-base font-normal'),
+  output: cva('text-text-body text-base font-normal'),
 };
diff --git a/themes/theme-b2b/src/components/Table.styles.ts b/themes/theme-b2b/src/components/Table.styles.ts
@@ -5,7 +5,7 @@ export const Table: ThemeComponent<'Table'> = {
   header: cva(
     [
       'cursor-default border-b-[1px] p-4 text-left',
-      'text-text-primary border-border-light',
+      'text-text-body border-border-light',
       'focus:outline-outline-focus',
     ],
     {
@@ -24,7 +24,7 @@ export const Table: ThemeComponent<'Table'> = {
   ]),
   cell: cva(
     [
-      'text-text-primary border-border-light border-b-[1px] p-4',
+      'text-text-body border-border-light border-b-[1px] p-4',
       'focus:outline-outline-focus',
     ],
     {

diff --git a/themes/theme-b2b/src/components/Tabs.styles.ts b/themes/theme-b2b/src/components/Tabs.styles.ts
@@ -5,7 +5,7 @@ export const Tabs: ThemeComponent<'Tabs'> = {
   tab: cva(
     [
       'min-h-[40px]',
-      'data-[hover]:text-text-primary data-[hover]:border-b-border-hover data-[hover]:border-b-8 data-[hover]:border-solid',
+      'data-[hover]:text-text-body data-[hover]:border-b-border-hover data-[hover]:border-b-8 data-[hover]:border-solid',
       'aria-disabled:text-text-disabled ',
       'aria-selected:border-b-border-focus aria-selected:border-b-8 aria-selected:border-solid',
     ],

diff --git a/themes/theme-b2b/src/components/TextArea.styles.ts b/themes/theme-b2b/src/components/TextArea.styles.ts
@@ -1,10 +1,11 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
 export const TextArea: ThemeComponent<'TextArea'> = cva([
-  'text-text-primary font-body leading-8',
+  'text-text-body font-body leading-8',
   '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/root.ts b/themes/theme-b2b/src/root.ts
@@ -1,4 +1,4 @@
 import { Theme, cva } from '@marigold/system';
 export const root: Theme['root'] = cva(
-  'font-body text-text-primary bg-bg-body m-0 p-0'
+  'font-body text-text-body bg-bg-body m-0 p-0'
 );