[@mantine/core] Fix incorrect selectors used to style Radio, Checkbox…

… and Switch components
mantinedev · Oct 3, 2022 · 129d6b5 · 129d6b5
1 parent ec1edd0
commit 129d6b5
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 19 deletions.
diff --git a/src/mantine-core/src/Button/Button.test.tsx b/src/mantine-core/src/Button/Button.test.tsx
@@ -45,7 +45,6 @@ describe('@mantine/core/Button', () => {
 
   it('sets data-loading attribute based on loading prop', () => {
     render(<Button loading />);
-    expect(screen.getByRole('button')).toBeDisabled();
     expect(screen.getByRole('button')).toHaveAttribute('data-loading');
   });
 

diff --git a/src/mantine-core/src/Checkbox/Checkbox.styles.ts b/src/mantine-core/src/Checkbox/Checkbox.styles.ts
@@ -47,10 +47,16 @@ export default createStyles(
     return {
       description: {
         marginTop: `calc(${theme.spacing.xs}px / 2)`,
+        [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
       },
 
       error: {
         marginTop: `calc(${theme.spacing.xs}px / 2)`,
+        [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
+      },
+
+      label: {
+        [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
       },
 
       icon: {
@@ -98,9 +104,7 @@ export default createStyles(
         color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
         cursor: theme.cursorType,
         order: labelPosition === 'left' ? 1 : 2,
-        '& *': {
-          [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
-        },
+
         '& label[data-disabled]': {
           color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
         },

diff --git a/src/mantine-core/src/Checkbox/Checkbox.tsx b/src/mantine-core/src/Checkbox/Checkbox.tsx
@@ -147,7 +147,12 @@ export const Checkbox: CheckboxComponent = forwardRef<HTMLInputElement, Checkbox
 
           <div className={classes.labelWrapper}>
             {label && (
-              <label data-disabled={disabled || undefined} htmlFor={uuid} data-testid="label">
+              <label
+                className={classes.label}
+                data-disabled={disabled || undefined}
+                htmlFor={uuid}
+                data-testid="label"
+              >
                 {label}
               </label>
             )}

diff --git a/src/mantine-core/src/Input/InputWrapper/InputWrapper.tsx b/src/mantine-core/src/Input/InputWrapper/InputWrapper.tsx
@@ -136,7 +136,7 @@ export const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>((props
       key="description"
       {...descriptionProps}
       {...sharedProps}
-      size={descriptionProps.size || sharedProps.size}
+      size={descriptionProps?.size || sharedProps.size}
     >
       {description}
     </InputDescription>
@@ -148,7 +148,7 @@ export const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>((props
     <InputError
       {...errorProps}
       {...sharedProps}
-      size={errorProps.size || sharedProps.size}
+      size={errorProps?.size || sharedProps.size}
       key="error"
     >
       {error}

diff --git a/src/mantine-core/src/Radio/Radio.styles.ts b/src/mantine-core/src/Radio/Radio.styles.ts
@@ -34,10 +34,16 @@ export default createStyles(
 
       description: {
         marginTop: `calc(${theme.spacing.xs}px / 2)`,
+        [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
       },
 
       error: {
         marginTop: `calc(${theme.spacing.xs}px / 2)`,
+        [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
+      },
+
+      label: {
+        [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
       },
 
       body: {
@@ -118,9 +124,6 @@ export default createStyles(
         color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
         cursor: theme.cursorType,
         order: labelPosition === 'left' ? 1 : 2,
-        '& *': {
-          [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
-        },
 
         '& label[data-disabled]': {
           color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],

diff --git a/src/mantine-core/src/Radio/Radio.tsx b/src/mantine-core/src/Radio/Radio.tsx
@@ -126,7 +126,7 @@ export const Radio: RadioComponent = forwardRef<HTMLInputElement, RadioProps>((p
 
         <div className={classes.labelWrapper}>
           {label && (
-            <label data-disabled={disabled || undefined} htmlFor={uuid}>
+            <label className={classes.label} data-disabled={disabled || undefined} htmlFor={uuid}>
               {label}
             </label>
           )}

diff --git a/src/mantine-core/src/Switch/Switch.styles.ts b/src/mantine-core/src/Switch/Switch.styles.ts
@@ -58,16 +58,20 @@ export default createStyles(
     const errorColor = theme.fn.variant({ variant: 'filled', color: 'red' }).background;
 
     return {
+      root: {},
+
       description: {
         marginTop: `calc(${theme.spacing.xs}px / 2)`,
+        [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
       },
 
       error: {
         marginTop: `calc(${theme.spacing.xs}px / 2)`,
+        [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
       },
 
-      root: {
-        display: 'block',
+      label: {
+        [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
       },
 
       body: {
@@ -114,8 +118,6 @@ export default createStyles(
         fontSize: theme.fn.size({ size, sizes: labelFontSizes }),
         fontWeight: 600,
         order: labelPosition === 'left' ? 2 : 1,
-
-        // for disabling text selection on double click
         userSelect: 'none',
         MozUserSelect: 'none',
         WebkitUserSelect: 'none',
@@ -182,9 +184,7 @@ export default createStyles(
         color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
         cursor: theme.cursorType,
         order: labelPosition === 'left' ? 1 : 2,
-        '& *': {
-          [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
-        },
+
         '& label[data-disabled]': {
           color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
         },

diff --git a/src/mantine-core/src/Switch/Switch.tsx b/src/mantine-core/src/Switch/Switch.tsx
@@ -147,7 +147,12 @@ export const Switch: SwitchComponent = forwardRef<HTMLInputElement, SwitchProps>
 
         <div className={classes.labelWrapper}>
           {label && (
-            <label data-disabled={rest.disabled || undefined} htmlFor={uuid} data-testid="label">
+            <label
+              className={classes.label}
+              data-disabled={rest.disabled || undefined}
+              htmlFor={uuid}
+              data-testid="label"
+            >
               {label}
             </label>
           )}

diff --git a/src/mantine-styles-api/src/styles-api/Checkbox.styles-api.ts b/src/mantine-styles-api/src/styles-api/Checkbox.styles-api.ts
@@ -9,4 +9,5 @@ export const Checkbox: Record<CheckboxStylesNames, string> = {
   icon: 'Checked or indeterminate state icon',
   error: 'Error message',
   description: 'Description',
+  label: 'Label',
 };
diff --git a/src/mantine-styles-api/src/styles-api/Radio.styles-api.ts b/src/mantine-styles-api/src/styles-api/Radio.styles-api.ts
@@ -12,4 +12,5 @@ export const Radio: Record<RadioStylesNames, string> = {
   icon: 'Radio button icon',
   error: 'Error message',
   description: 'Description',
+  label: 'Label',
 };
diff --git a/src/mantine-styles-api/src/styles-api/Switch.styles-api.ts b/src/mantine-styles-api/src/styles-api/Switch.styles-api.ts
@@ -10,4 +10,5 @@ export const Switch: Record<SwitchStylesNames, string> = {
   trackLabel: 'onLabel and offLabel',
   error: 'Error message',
   description: 'Description',
+  label: 'Label',
 };