fix(components): pass styles to Selector and RadioButton label (#652)

The label element is the main visual component since there is no wrapper element, so any custom styles should be passed to the label.
sumup-oss · Jul 22, 2020 · a3f807e · a3f807e
1 parent a83f6d3
commit a3f807e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
@@ -180,6 +180,7 @@ const RadioButtonComponent = (
     invalid,
     disabled,
     tracking,
+    className,
     ...props
   }: RadioButtonProps,
   ref: RadioButtonProps['ref'],
@@ -201,7 +202,12 @@ const RadioButtonComponent = (
         onClick={handleChange}
         ref={ref}
       />
-      <RadioButtonLabel htmlFor={id} disabled={disabled} invalid={invalid}>
+      <RadioButtonLabel
+        htmlFor={id}
+        disabled={disabled}
+        invalid={invalid}
+        className={className}
+      >
         {children || label}
       </RadioButtonLabel>
     </>

diff --git a/src/components/Selector/Selector.tsx b/src/components/Selector/Selector.tsx
@@ -145,6 +145,7 @@ function SelectorComponent(
     checked,
     onChange,
     tracking,
+    className,
     ...props
   }: SelectorProps,
   ref: SelectorProps['ref'],
@@ -166,7 +167,11 @@ function SelectorComponent(
         ref={ref}
         {...props}
       />
-      <SelectorLabel htmlFor={inputId} disabled={disabled}>
+      <SelectorLabel
+        htmlFor={inputId}
+        disabled={disabled}
+        className={className}
+      >
         {children}
       </SelectorLabel>
     </>