@zohodesk/components 1.6.0 → 1.6.1

package/README.md

@@ -2,6 +2,19 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+
+# 1.6.1
+
+- **Label Component - v1**
+  - The label component of v1 has been updated with accessibility enhancements and few props have been renamed and restructured to align better with accessibility guidelines
+    - Mandatory field accessibility has been improved by allowing the mandatory indicator type (asterisk or text) to be handled via user preferences.
+    - Explicit boolean props are introduced: isRequired, isDisabled, isReadOnly - These replace earlier state handling that was implicitly managed through the palette prop.
+    - Custom Class Structure has been updated to provide separate styling control : Label element, Container wrapper
+    - The variant prop has been replaced with textWeight to clearly define typography styling (regular / semibold).
+    - The dataId has been replaced with testId, customId
+
+  - These updates have been applied across all form labels using Label v1
+
 # 1.6.0
 
 - Updated @zohodesk-private/color-variable-preprocessor package - Grayscale introduced
@@ -18,7 +31,6 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 - **Select**  
  - Removed the size prop from InputFieldLine usage, as it is unused.
 
-
 # 1.5.8
 
 - Memoized **Portal** logic to improve performance.

package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css

@@ -8,4 +8,10 @@
 	--zdt_v1_switch_onLabel: hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_v1_switch_offLabel: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_switch_offLabel_hover: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* label */
+	--zdt_v1_label_text: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_label_required_text: hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_label_disabled_text: var(--dot_inputDisable);
+	--zdt_v1_label_secondary_text: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 }

package/assets/Appearance/light/mode/Component_v1_LightMode.module.css

@@ -8,4 +8,10 @@
 	--zdt_v1_switch_onLabel: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_v1_switch_offLabel: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_switch_offLabel_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* label */
+	--zdt_v1_label_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_label_required_text: hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_label_disabled_text: var(--dot_inputDisable);
+	--zdt_v1_label_secondary_text: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 }

package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css

@@ -8,4 +8,10 @@
 	--zdt_v1_switch_onLabel: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_v1_switch_offLabel: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_switch_offLabel_hover: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* label */
+	--zdt_v1_label_text: hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_label_required_text: hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_label_disabled_text: var(--dot_inputDisable);
+	--zdt_v1_label_secondary_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 }

package/es/Provider/LibraryContext.js

@@ -11,6 +11,8 @@ const LibraryContextProvider = _ref => {
     hasTagColorInheritedToText,
     shouldIndicateSwitchState,
     shouldStrikeThroughDisabledButton,
+    labelRequiredType,
+    shouldHighlightRequiredLabel,
     children
   } = _ref;
   const [value, setValue] = useState({
@@ -19,7 +21,9 @@ const LibraryContextProvider = _ref => {
     coloredTagVariant,
     hasTagColorInheritedToText,
     shouldIndicateSwitchState,
-    shouldStrikeThroughDisabledButton
+    shouldStrikeThroughDisabledButton,
+    labelRequiredType,
+    shouldHighlightRequiredLabel
   });
 
   function setGlobalContext(key, data) {
@@ -44,7 +48,9 @@ LibraryContextProvider.propTypes = {
   hasTagColorInheritedToText: PropTypes.bool,
   direction: PropTypes.string,
   shouldIndicateSwitchState: PropTypes.bool,
-  shouldStrikeThroughDisabledButton: PropTypes.bool
+  shouldStrikeThroughDisabledButton: PropTypes.bool,
+  labelRequiredType: PropTypes.oneOf(['asterisk', 'text']),
+  shouldHighlightRequiredLabel: PropTypes.bool
 };
 LibraryContextProvider.defaultProps = {
   isReducedMotion: getLibraryConfig('isReducedMotion'),
@@ -52,6 +58,8 @@ LibraryContextProvider.defaultProps = {
   coloredTagVariant: 'bold',
   hasTagColorInheritedToText: true,
   shouldIndicateSwitchState: false,
-  shouldStrikeThroughDisabledButton: false
+  shouldStrikeThroughDisabledButton: false,
+  labelRequiredType: 'asterisk',
+  shouldHighlightRequiredLabel: true
 };
 export default LibraryContextProvider;

package/es/v1/Label/Label.js

@@ -1,40 +1,103 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Label/Label.module.css";
-import colors from "../../Label/LabelColors.module.css";
-export default function Label(props) {
+import React from 'react'; // props
+
+import defaultProps from "./props/defaultProps";
+import propTypes from "./props/propTypes"; // methods
+
+import cssJSLogic from "./css/cssJSLogic";
+import { renderNode } from '@zohodesk/utils'; // hoc
+
+import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry'; // constants
+
+import { DISPLAY_MODE, FONT_SIZE } from "./constants"; // components
+
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Typography from "../../Typography/Typography"; // css
+
+import style from "./css/Label_v1.module.css";
+
+const Label = props => {
   const {
-    text,
-    type,
-    palette,
-    size,
-    clipped,
     htmlFor,
-    title,
     onClick,
-    dataId,
-    dataSelectorId,
-    variant,
-    customClass,
-    id,
-    a11y = {}
+    text,
+    customId,
+    testId,
+    tagAttributes,
+    a11yAttributes,
+    customProps,
+    isRequired,
+    requiredType,
+    isClipped,
+    size,
+    fontWeight,
+    layout,
+    renderRightPlaceholderNode,
+    renderLeftPlaceholderNode,
+    i18nKeys
   } = props;
   const {
-    tabIndex
-  } = a11y;
-  return /*#__PURE__*/React.createElement("label", {
-    className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
-          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
-    htmlFor: htmlFor,
-    "data-title": title,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    "data-selector-id": dataSelectorId,
-    onClick: onClick,
-    id: id,
-    tabIndex: tabIndex
-  }, text);
-}
+    container: tagAttributes_container,
+    label: tagAttributes_label
+  } = tagAttributes;
+  const {
+    container: a11yAttributes_container,
+    label: a11yAttributes_label
+  } = a11yAttributes;
+  const {
+    container: customProps_container,
+    label: customProps_label
+  } = customProps;
+  const {
+    requiredText: i18n_requiredText = 'Required'
+  } = i18nKeys;
+  const {
+    labelClass,
+    requiredClass,
+    containerClass
+  } = cssJSLogic({
+    props,
+    style
+  });
+  const a11yAttributes_requiredText = {
+    'aria-hidden': 'true'
+  };
+
+  const renderRequired = () => /*#__PURE__*/React.createElement(Typography, {
+    $ui_tagName: "span",
+    $ui_className: requiredClass,
+    $a11yAttributes_text: a11yAttributes_requiredText,
+    $ui_size: FONT_SIZE[size],
+    $ui_weight: fontWeight,
+    $i18n_dataTitle: ""
+  }, requiredType === 'text' ? `(${i18n_requiredText})` : '*');
+
+  return /*#__PURE__*/React.createElement(Flex, { ...customProps_container,
+    $tagAttributes_container: { ...tagAttributes_container,
+      'data-selector-id': customId
+    },
+    $ui_displayMode: DISPLAY_MODE[layout],
+    $ui_alignItems: "center",
+    $a11yAttributes_container: a11yAttributes_container,
+    testId: testId,
+    customId: customId,
+    $ui_className: containerClass
+  }, renderNode(renderLeftPlaceholderNode), /*#__PURE__*/React.createElement(Typography, { ...customProps_label,
+    $tagAttributes_text: { ...tagAttributes_label,
+      htmlFor,
+      onClick
+    },
+    $ui_tagName: "label",
+    $ui_className: labelClass,
+    $i18n_dataTitle: text,
+    $a11yAttributes_text: a11yAttributes_label,
+    $ui_size: FONT_SIZE[size],
+    $ui_weight: fontWeight,
+    $flag_dotted: isClipped
+  }, text, isRequired && !isClipped ? renderRequired() : null), isRequired && isClipped ? renderRequired() : null, renderNode(renderRightPlaceholderNode));
+};
+
+export default withComponentRegistrar(Label, {
+  name: 'ZDC_V1_Label'
+});
 Label.defaultProps = defaultProps;
 Label.propTypes = propTypes;

package/es/v1/Label/__tests__/Label.spec.js

@@ -0,0 +1,214 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import Label from "../Label"; // Hoisted enum values (PropTypes.oneOf enforcement)
+
+const REQUIRED_TYPE_VALUES = ['asterisk', 'text'];
+const SIZE_VALUES = ['small', 'medium'];
+const PALETTE_VALUES = ['default', 'secondary'];
+const TEXT_WEIGHT_VALUES = ['regular', 'semibold'];
+const LAYOUT_VALUES = ['inline', 'block'];
+afterEach(cleanup);
+describe('Label - Snapshot', () => {
+  test('Render with default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(REQUIRED_TYPE_VALUES)('Render with requiredType=%s', value => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isRequired: true,
+      requiredType: value
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(SIZE_VALUES)('Render with size=%s', value => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      size: value
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(PALETTE_VALUES)('Render with palette=%s', value => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      palette: value
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(TEXT_WEIGHT_VALUES)('Render with fontWeight=%s', value => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      fontWeight: value
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(LAYOUT_VALUES)('Render with layout=%s', value => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      layout: value
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with shouldHighlightRequired=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isRequired: true,
+      shouldHighlightRequired: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isClipped=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isClipped: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isRequired=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isRequired: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isRequired=true isClipped=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isRequired: true,
+      isClipped: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isDisabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isReadOnly=true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isReadOnly: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlFor', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      htmlFor: "input-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with i18nKeys', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      isRequired: true,
+      requiredType: "text",
+      i18nKeys: {
+        requiredText: 'Custom Required'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      customClass: {
+        container: 'custom-container',
+        label: 'custom-label'
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      customProps: {
+        container: {
+          $flag_shrink: true
+        },
+        label: {
+          $ui_lineClamp: '2'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      customId: "label-customId",
+      testId: "label-testId"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tag attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      tagAttributes: {
+        container: {
+          'data-custom-attr': 'true'
+        },
+        label: {
+          'data-custom-attr': 'true'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Label text",
+      a11yAttributes: {
+        container: {
+          role: 'group'
+        },
+        label: {
+          'aria-label': 'Custom label'
+        }
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});