feat: add extra content class name prop for radio and checkbox compon…

…ents (#1048) * feat(radio): add content class name prop * feat(checkbox): add content class name prop
alfa-laboratory · Mar 29, 2022 · 3c076b9 · 3c076b9
1 parent 5d7a9d5
commit 3c076b9
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 3 deletions.
diff --git a/packages/checkbox/src/Component.test.tsx b/packages/checkbox/src/Component.test.tsx
@@ -28,6 +28,20 @@ describe('Checkbox', () => {
             expect(container.firstElementChild).toHaveClass(className);
         });
 
+        it('should set contentClassName', () => {
+            const className = 'custom-class';
+            const { container } = render(<Checkbox label='label' contentClassName={className} />);
+
+            expect(container.querySelector('.content')).toHaveClass(className);
+        });
+
+        it('should set boxClassName', () => {
+            const className = 'custom-class';
+            const { container } = render(<Checkbox boxClassName={className} />);
+
+            expect(container.querySelector('.box')).toHaveClass(className);
+        });
+
         it('should set `checked` class', () => {
             const { container } = render(<Checkbox checked={true} />);
 

diff --git a/packages/checkbox/src/Component.tsx b/packages/checkbox/src/Component.tsx
@@ -47,6 +47,11 @@ export type CheckboxProps = Omit<NativeProps, 'size' | 'onChange'> & {
      */
     boxClassName?: string;
 
+    /**
+     * Доп. класс контента
+     */
+    contentClassName?: string;
+
     /**
      * Выравнивание
      */
@@ -96,6 +101,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
             hint,
             size = 's',
             boxClassName,
+            contentClassName,
             align = 'start',
             addons,
             block,
@@ -151,9 +157,11 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
                 </span>
 
                 {(label || hint || errorMessage) && (
-                    <span className={styles.content}>
+                    <span className={cn(styles.content, contentClassName)}>
                         {label && <span className={styles.label}>{label}</span>}
+
                         {hint && !errorMessage && <span className={styles.hint}>{hint}</span>}
+
                         {errorMessage && (
                             <span className={styles.errorMessage} role='alert'>
                                 {errorMessage}

diff --git a/packages/radio/src/Component.test.tsx b/packages/radio/src/Component.test.tsx
@@ -26,6 +26,20 @@ describe('Radio', () => {
             expect(container.firstElementChild).toHaveClass(className);
         });
 
+        it('should set contentClassName', () => {
+            const className = 'custom-class';
+            const { container } = render(<Radio label='label' contentClassName={className} />);
+
+            expect(container.querySelector('.content')).toHaveClass(className);
+        });
+
+        it('should set circleClassName', () => {
+            const className = 'custom-class';
+            const { container } = render(<Radio circleClassName={className} />);
+
+            expect(container.querySelector('.circle')).toHaveClass(className);
+        });
+
         it('should set `checked` class', () => {
             const { container } = render(<Radio checked={true} />);
 
@@ -52,7 +66,7 @@ describe('Radio', () => {
     });
 
     describe('Attributes tests', () => {
-        it('should set `data-test-id` atribute', () => {
+        it('should set `data-test-id` attribute', () => {
             const dataTestId = 'test-id';
             const { getByTestId } = render(<Radio dataTestId={dataTestId} />);
 

diff --git a/packages/radio/src/Component.tsx b/packages/radio/src/Component.tsx
@@ -62,6 +62,11 @@ export type RadioProps = Omit<
      */
     circleClassName?: string;
 
+    /**
+     * Доп. класс контента
+     */
+    contentClassName?: string;
+
     /**
      * Выравнивание
      */
@@ -95,6 +100,7 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
             onChange,
             className,
             circleClassName,
+            contentClassName,
             name,
             disabled,
             inactive,
@@ -143,7 +149,7 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
                 />
                 <span className={cn(styles.circle, circleClassName)} />
                 {(label || hint) && (
-                    <span className={styles.content}>
+                    <span className={cn(styles.content, contentClassName)}>
                         {label && <span className={styles.label}>{label}</span>}
                         {hint && <span className={styles.hint}>{hint}</span>}
                     </span>