saves

marigold-ui · Dec 16, 2022 · 53309ee · 53309ee
1 parent 962ca5b
commit 53309ee
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 54 deletions.
diff --git a/docs/src/pages/components/label.mdx b/docs/src/pages/components/label.mdx
@@ -48,6 +48,12 @@ import { Label } from '@marigold/components';
       description: 'Sets the label required.',
       default: 'false',
     },
+    {
+      property: 'labelWidth',
+      type: 'string',
+      description: 'Sets the label width.',
+      default: 'none',
+    },
     {
       property: '...',
       type: '',

diff --git a/packages/components/src/FieldBase/FieldBase.stories.tsx b/packages/components/src/FieldBase/FieldBase.stories.tsx
@@ -63,7 +63,7 @@ export const Basic: ComponentStory<typeof FieldBase> = args => (
 );
 
 export const Complex: ComponentStory<typeof FieldBase> = args => (
-  <FieldBaseGroup space="medium">
+  <FieldBaseGroup labelWidth="30%">
     <FieldBase {...args} label="This is my Label">
       <input type="text" />
     </FieldBase>

diff --git a/packages/components/src/FieldBase/FieldBase.tsx b/packages/components/src/FieldBase/FieldBase.tsx
@@ -8,7 +8,7 @@ import {
 
 import { Label, LabelProps } from '../Label';
 import { HelpText } from '../HelpText';
-import { FieldBaseGroup, useFieldBaseGroupContext } from './FieldBaseGroup';
+import { useFieldBaseGroupContext } from './FieldBaseGroup';
 export interface FieldBaseProps {
   children?: ReactNode;
   variant?: string;
@@ -52,49 +52,47 @@ export const FieldBase = ({
 
   const style = useComponentStyles('Field', { variant, size });
 
-  const { space } = useFieldBaseGroupContext();
+  const { labelWidth } = useFieldBaseGroupContext();
 
   return (
-    <>
-      <Box
-        {...props}
-        __baseCSS={{
-          display: 'flex',
-          flexDirection: 'column',
-          width,
-          position: 'relative',
-        }}
-        css={style}
-      >
-        {label && (
-          <Label
-            required={required}
+    <Box
+      {...props}
+      __baseCSS={{
+        display: 'flex',
+        flexDirection: 'column',
+        width,
+        position: 'relative',
+      }}
+      css={style}
+    >
+      {label && (
+        <Label
+          required={required}
+          variant={variant}
+          size={size}
+          labelWidth={labelWidth}
+          {...labelProps}
+          {...stateProps}
+        >
+          {label}
+        </Label>
+      )}
+      <Box __baseCSS={{ display: 'flex', flexDirection: 'column' }}>
+        {children}
+        {hasHelpText && (
+          <HelpText
+            {...stateProps}
             variant={variant}
             size={size}
-            space={space}
-            {...labelProps}
-            {...stateProps}
-          >
-            {label}
-          </Label>
+            disabled={disabled}
+            description={description}
+            descriptionProps={descriptionProps}
+            error={error}
+            errorMessage={errorMessage}
+            errorMessageProps={errorMessageProps}
+          />
         )}
-        <Box __baseCSS={{ display: 'flex', flexDirection: 'column' }}>
-          {children}
-          {hasHelpText && (
-            <HelpText
-              {...stateProps}
-              variant={variant}
-              size={size}
-              disabled={disabled}
-              description={description}
-              descriptionProps={descriptionProps}
-              error={error}
-              errorMessage={errorMessage}
-              errorMessageProps={errorMessageProps}
-            />
-          )}
-        </Box>
       </Box>
-    </>
+    </Box>
   );
 };
diff --git a/packages/components/src/FieldBase/FieldBaseGroup.tsx b/packages/components/src/FieldBase/FieldBaseGroup.tsx
@@ -1,7 +1,7 @@
 import { createContext, ReactNode, useContext } from 'react';
 
 export interface FieldBaseGroupContextProps {
-  space?: 'small' | 'none' | 'large' | 'medium' | undefined;
+  labelWidth?: string;
 }
 
 export const FieldBaseGroupContext = createContext<FieldBaseGroupContextProps>(
@@ -10,12 +10,15 @@ export const FieldBaseGroupContext = createContext<FieldBaseGroupContextProps>(
 export const useFieldBaseGroupContext = () => useContext(FieldBaseGroupContext);
 
 export interface FieldBaseGroupProps {
-  space?: 'small' | 'none' | 'large' | 'medium' | undefined;
+  labelWidth?: string;
   children: ReactNode;
 }
-export const FieldBaseGroup = ({ space, children }: FieldBaseGroupProps) => {
+export const FieldBaseGroup = ({
+  labelWidth,
+  children,
+}: FieldBaseGroupProps) => {
   return (
-    <FieldBaseGroupContext.Provider value={{ space }}>
+    <FieldBaseGroupContext.Provider value={{ labelWidth }}>
       {children}
     </FieldBaseGroupContext.Provider>
   );

diff --git a/packages/components/src/Label/Label.tsx b/packages/components/src/Label/Label.tsx
@@ -14,14 +14,8 @@ export interface LabelProps extends ComponentProps<'label'> {
   variant?: string;
   size?: string;
   required?: boolean;
-  space?: keyof typeof LABEL_SPACE;
+  labelWidth?: string;
 }
-const LABEL_SPACE = {
-  small: '10%',
-  medium: '20%',
-  large: '50%',
-  none: 'auto',
-};
 
 // Component
 // ---------------
@@ -31,12 +25,11 @@ export const Label = ({
   children,
   variant,
   size,
-  space = 'none',
+  labelWidth,
   ...props
 }: LabelProps) => {
   const styles = useComponentStyles('Label', { size, variant });
 
-  console.log(space);
   return (
     <Box
       {...props}
@@ -46,7 +39,8 @@ export const Label = ({
       aria-required={required}
       __baseCSS={{
         display: 'flex',
-        flexBasis: LABEL_SPACE[space],
+        flexDirection: 'row',
+        width: labelWidth,
       }}
       css={styles}
     >

diff --git a/themes/theme-core/src/components/Label.style.ts b/themes/theme-core/src/components/Label.style.ts
@@ -2,6 +2,7 @@ import { Theme } from '@marigold/components';
 
 export const Label: Theme['components']['Label'] = {
   base: {
+    justifyContent: 'flex-end',
     fontSize: 'xxsmall',
     color: 'text',
     '&:disabled': {