feat(radio): add align

core-ds · Jan 13, 2021 · fe9faec · fe9faec
1 parent c8e4489
commit fe9faec
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 19 deletions.
diff --git a/packages/radio-group/src/__snapshots__/Component.test.tsx.snap b/packages/radio-group/src/__snapshots__/Component.test.tsx.snap
@@ -17,7 +17,7 @@ Object {
           class="radioList"
         >
           <label
-            class="container s my-radio radio"
+            class="container s start my-radio radio"
           >
             <input
               type="radio"
@@ -37,7 +37,7 @@ Object {
             </span>
           </label>
           <label
-            class="container s my-second-radio radio"
+            class="container s start my-second-radio radio"
           >
             <input
               type="radio"
@@ -57,7 +57,7 @@ Object {
             </span>
           </label>
           <label
-            class="container s radio"
+            class="container s start radio"
           >
             <input
               type="radio"
@@ -93,7 +93,7 @@ Object {
         class="radioList"
       >
         <label
-          class="container s my-radio radio"
+          class="container s start my-radio radio"
         >
           <input
             type="radio"
@@ -113,7 +113,7 @@ Object {
           </span>
         </label>
         <label
-          class="container s my-second-radio radio"
+          class="container s start my-second-radio radio"
         >
           <input
             type="radio"
@@ -133,7 +133,7 @@ Object {
           </span>
         </label>
         <label
-          class="container s radio"
+          class="container s start radio"
         >
           <input
             type="radio"
@@ -226,7 +226,7 @@ Object {
           class="radioList"
         >
           <label
-            class="container s my-radio radio"
+            class="container s start my-radio radio"
           >
             <input
               type="radio"
@@ -246,7 +246,7 @@ Object {
             </span>
           </label>
           <label
-            class="container s my-second-radio radio"
+            class="container s start my-second-radio radio"
           >
             <input
               type="radio"
@@ -266,7 +266,7 @@ Object {
             </span>
           </label>
           <label
-            class="container s radio"
+            class="container s start radio"
           >
             <input
               type="radio"
@@ -307,7 +307,7 @@ Object {
         class="radioList"
       >
         <label
-          class="container s my-radio radio"
+          class="container s start my-radio radio"
         >
           <input
             type="radio"
@@ -327,7 +327,7 @@ Object {
           </span>
         </label>
         <label
-          class="container s my-second-radio radio"
+          class="container s start my-second-radio radio"
         >
           <input
             type="radio"
@@ -347,7 +347,7 @@ Object {
           </span>
         </label>
         <label
-          class="container s radio"
+          class="container s start radio"
         >
           <input
             type="radio"
@@ -445,7 +445,7 @@ Object {
           class="radioList"
         >
           <label
-            class="container s radio-group radio"
+            class="container s start radio-group radio"
           >
             <input
               type="radio"
@@ -481,7 +481,7 @@ Object {
         class="radioList"
       >
         <label
-          class="container s radio-group radio"
+          class="container s start radio-group radio"
         >
           <input
             type="radio"

diff --git a/packages/radio/src/Component.stories.mdx b/packages/radio/src/Component.stories.mdx
@@ -22,10 +22,12 @@ import { name, version } from '../package.json';
         const disabled = boolean('disabled', false);
         const label = text('label', 'Text label')
         const hint = text('hint', 'Hint');
+        const align = select('align', ['start', 'end', 'center'], 'start');
         return (
             <Radio
                 disabled={disabled}
                 size={size}
+                align={align}
                 onChange={handleChange}
                 checked={checked}
                 hint={hint}

diff --git a/packages/radio/src/Component.tsx b/packages/radio/src/Component.tsx
@@ -6,6 +6,7 @@ import { useFocus } from '@alfalab/hooks';
 import styles from './index.module.css';
 
 type NativeProps = InputHTMLAttributes<HTMLInputElement>;
+type Align = 'start' | 'end' | 'center';
 
 export type RadioProps = Omit<
     NativeProps,
@@ -51,6 +52,11 @@ export type RadioProps = Omit<
      */
     className?: string;
 
+    /**
+     * Выравнивание
+     */
+    align?: Align;
+
     /**
      * Обработчик на выбор элемента
      */
@@ -75,6 +81,7 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
             checked,
             hint,
             size = 's',
+            align = 'start',
             ...restProps
         },
         ref,
@@ -92,7 +99,7 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
         return (
             // eslint-disable-next-line jsx-a11y/label-has-associated-control
             <label
-                className={cn(styles.container, styles[size], className, {
+                className={cn(styles.container, styles[size], styles[align], className, {
                     [styles.disabled]: disabled,
                     [styles.checked]: checked,
                     [styles.focused]: focused,

diff --git a/packages/radio/src/__snapshots__/Component.test.tsx.snap b/packages/radio/src/__snapshots__/Component.test.tsx.snap
@@ -6,7 +6,7 @@ Object {
   "baseElement": <body>
     <div>
       <label
-        class="container s"
+        class="container s start"
       >
         <input
           type="radio"
@@ -28,7 +28,7 @@ Object {
   </body>,
   "container": <div>
     <label
-      class="container s"
+      class="container s start"
     >
       <input
         type="radio"
@@ -107,7 +107,7 @@ Object {
   "baseElement": <body>
     <div>
       <label
-        class="container s"
+        class="container s start"
       >
         <input
           type="radio"
@@ -134,7 +134,7 @@ Object {
   </body>,
   "container": <div>
     <label
-      class="container s"
+      class="container s start"
     >
       <input
         type="radio"

diff --git a/packages/radio/src/index.module.css b/packages/radio/src/index.module.css
@@ -139,6 +139,18 @@
     flex-direction: column;
 }
 
+.start {
+    align-items: flex-start;
+}
+
+.end {
+    align-items: flex-end;
+}
+
+.center {
+    align-items: center;
+}
+
 .label {
     @mixin system_16-24_regular;
     color: var(--radio-label-color);