fix: extractStyles() logic fix & field label position fix (#138)

Author: tenphi

.changeset/violet-flowers-remain.md

@@ -0,0 +1,6 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix extractStyles() logic.
+Fix label position inside a field.

src/components/forms/Checkbox/Checkbox.tsx

@@ -60,6 +60,10 @@ const CheckboxWrapperElement = tasty({
     flow: 'row',
     preset: 'default',
     cursor: 'pointer',
+    margin: {
+      '': 0,
+      'inside-form & side-label': '1.5x top',
+    },
   },
 });
 
@@ -149,10 +153,6 @@ function Checkbox(
     labelStyles.fontWeight = 400;
   }
 
-  if (insideForm && labelPosition === 'side') {
-    inputStyles.marginTop = '1x';
-  }
-
   let { isFocused, focusProps } = useFocus({ isDisabled }, true);
   let { hoverProps, isHovered } = useHover({ isDisabled });
 
@@ -201,6 +201,8 @@ function Checkbox(
     disabled: isDisabled,
     hovered: isHovered,
     focused: isFocused,
+    'side-label': labelPosition === 'side',
+    'inside-form': insideForm,
   };
 
   const checkboxField = (

src/components/forms/FieldWrapper.tsx

@@ -25,14 +25,18 @@ const FieldElement = tasty({
       '': '1x',
       'has-sider': '@(column-gap, 1x)',
     },
-    placeItems: 'baseline stretch',
+    placeItems: 'start stretch',
 
     LabelArea: {
       display: 'block',
       width: {
         '': 'initial',
         'has-sider': '@label-width',
       },
+      padding: {
+        '': 'initial',
+        'has-sider': '1.25x top',
+      },
     },
 
     InputArea: {

src/components/forms/Label.tsx

@@ -63,10 +63,6 @@ export const LABEL_STYLES: Styles = {
   display: 'block',
   fontWeight: 600,
   preset: 'default',
-  padding: {
-    '': '0',
-    side: '(1x - 1bw) top',
-  },
   color: {
     '': '#dark',
     invalid: '#danger-text',

src/components/forms/RadioGroup/RadioGroup.tsx

@@ -42,7 +42,10 @@ const RadioGroupElement = tasty({
       '': '1x',
       horizontal: '1x 2x',
     },
-    padding: '(1x - 1bw) 0',
+    padding: {
+      '': 0,
+      'inside-form & side-label': '1.5x 0',
+    },
   },
 });
 
@@ -69,6 +72,7 @@ function RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {
     isHidden,
     styles,
     groupStyles,
+    insideForm,
     ...otherProps
   } = props;
   let domRef = useDOMRef(ref);
@@ -84,6 +88,8 @@ function RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {
       styles={groupStyles}
       mods={{
         horizontal: orientation === 'horizontal',
+        'inside-form': insideForm,
+        'side-label': labelPosition === 'side',
       }}
     >
       <FormContext.Provider

src/components/forms/Switch/Switch.tsx

@@ -16,7 +16,6 @@ import {
   Styles,
   tasty,
 } from '../../../tasty';
-import { Base } from '../../Base';
 import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { HiddenInput } from '../../HiddenInput';
@@ -31,14 +30,19 @@ import {
   WithNullableSelected,
 } from '../../../utils/react/nullableValue';
 
-const BaseSwitchWrapperElement = tasty({
+const SwitchWrapperElement = tasty({
   qa: 'SwitchWrapper',
   styles: {
     position: 'relative',
+    margin: {
+      '': 0,
+      'inside-form & side-label': '1x top',
+    },
   },
 });
 
-const SwitchWrapperElement = tasty({
+const SwitchLabelElement = tasty({
+  as: 'label',
   qa: 'SwitchWrapper',
   styles: {
     position: 'relative',
@@ -73,10 +77,6 @@ const SwitchElement = tasty({
     },
     transition: 'theme',
     cursor: 'pointer',
-    marginTop: {
-      '': null,
-      'inside-form & side-label': '-3px',
-    },
     placeSelf: {
       '': null,
       'inside-form & side-label': 'start',
@@ -164,32 +164,31 @@ function Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   let { inputProps } = useSwitch(props, useToggleState(props), inputRef);
 
+  const mods = {
+    'inside-form': insideForm,
+    'side-label': labelPosition === 'side',
+    checked: inputProps.checked,
+    disabled: isDisabled,
+    hovered: isHovered,
+    focused: isFocused,
+  };
+
   const switchField = (
-    <BaseSwitchWrapperElement qa={qa || 'Switch'}>
+    <SwitchWrapperElement qa={qa || 'Switch'} mods={mods}>
       <HiddenInput
         data-qa="HiddenInput"
         {...mergeProps(inputProps, focusProps)}
         ref={inputRef}
       />
-      <SwitchElement
-        mods={{
-          'inside-form': insideForm,
-          'side-label': labelPosition === 'side',
-          checked: inputProps.checked,
-          disabled: isDisabled,
-          hovered: isHovered,
-          focused: isFocused,
-        }}
-        styles={inputStyles}
-      >
+      <SwitchElement mods={mods} styles={inputStyles}>
         <SwitchThumbElement
           styles={thumbStyles}
           mods={{
             checked: inputProps.checked,
           }}
         />
       </SwitchElement>
-    </BaseSwitchWrapperElement>
+    </SwitchWrapperElement>
   );
 
   if (insideForm) {
@@ -217,9 +216,9 @@ function Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {
   }
 
   return (
-    <SwitchWrapperElement
-      as="label"
+    <SwitchLabelElement
       styles={styles}
+      mods={mods}
       {...hoverProps}
       {...filterBaseProps(otherProps)}
       ref={domRef}
@@ -242,7 +241,7 @@ function Switch(props: WithNullableSelected<CubeSwitchProps>, ref) {
           ) : null}
         </Element>
       )}
-    </SwitchWrapperElement>
+    </SwitchLabelElement>
   );
 }
 

src/tasty/tasty.test.tsx

@@ -3,6 +3,7 @@ import { tasty } from './tasty';
 import { Button } from '../components/actions';
 import { Block } from '../components/Block';
 import { CONTAINER_STYLES } from './styles/list';
+import { Card } from '../components/content/Card/Card';
 
 describe('tasty() API', () => {
   beforeEach(() => {

src/tasty/utils/styles.test.ts

@@ -1,6 +1,7 @@
 import {
   applyStates,
   computeState,
+  extractStyles,
   replaceStateValues,
   styleMapToStyleMapStateList,
 } from './styles';
@@ -375,3 +376,34 @@ describe('styleMapToStyleMapStateList', () => {
     ]);
   });
 });
+
+describe('extractStyles', () => {
+  function checkExtraction(list) {
+    list.forEach((obj, i) => {
+      it(`to list ${i}`, () => {
+        // @ts-ignore
+        expect(extractStyles(...obj.input)).toEqual(obj.output);
+      });
+    });
+  }
+
+  describe('Should extract styles from props', () => {
+    checkExtraction([
+      {
+        input: [
+          {
+            fill: '#black',
+            border: false,
+            styles: { fill: '#clear', border: true, color: '#dark' },
+          },
+          ['fill', 'border'],
+        ],
+        output: {
+          fill: '#black',
+          border: false,
+          color: '#dark',
+        },
+      },
+    ]);
+  });
+});

src/tasty/utils/styles.ts

@@ -616,18 +616,13 @@ export function extractStyles(
 
   Object.keys(props).forEach((prop) => {
     const propName = propMap ? propMap[prop] || prop : prop;
+    const isPropExist = prop in props;
     const value = props[prop];
 
     if (ignoreList && ignoreList.includes(prop)) {
       // do nothing
-    } else if (styleList.includes(propName)) {
-      // If value is not nullish then map it to the styles
-      if (value != null && value !== false) {
-        styles[propName] = value;
-        // If value is nullish then erase the default value of the style
-      } else if (propName in styles) {
-        delete styles[propName];
-      }
+    } else if (styleList.includes(propName) && isPropExist) {
+      styles[propName] = value;
     }
   }, {});