@heliux-org/design-system-core 0.0.56 → 0.0.58

package/src/components/Dropdown/Dropdown.jsx

@@ -26,6 +26,25 @@ import generateBaseStyles, { customTheme } from "./Dropdown.styles";
 import Control from "./components/Control/Control";
 import menuStyles from "./components/menu/menu.module.scss";
 import styles from "./Dropdown.module.scss";
+import { LabelPosition } from "../../constants/positions";
+import FieldLabel from "../FieldLabel/FieldLabel";
+
+const rowStyle = {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "baseline",
+  gap: "7px",
+}
+const columnStyle = {
+  display: "flex",
+  flexDirection: "column",
+}
+const labelStyle = {
+  paddingBottom: 0,
+  fontSize: "14px",
+  fontWeight: "700",
+  lineHeight: "22px",
+}
 
 const Dropdown = forwardRef(
   (
@@ -93,6 +112,8 @@ const Dropdown = forwardRef(
       filterOption,
       menuPosition,
       "data-testid": dataTestId,
+      labelPosition,
+      labelText
     },
     ref
   ) => {
@@ -126,13 +147,14 @@ const Dropdown = forwardRef(
       return {};
     }, [selectedOptions]);
 
+    const divStyle = labelPosition && labelPosition === LabelPosition.LEFT ? rowStyle : columnStyle;
+
     const overrideAriaLabel = useMemo(() => {
       return (
         ariaLabel ||
-        `${readOnly ? "Readonly " : ""} ${tooltipContent} ${
-          Array.isArray(selectedOptions)
-            ? `Selected: ${selectedOptions.map((o) => o.label).join(", ")}`
-            : "Select"
+        `${readOnly ? "Readonly " : ""} ${tooltipContent} ${Array.isArray(selectedOptions)
+          ? `Selected: ${selectedOptions.map((o) => o.label).join(", ")}`
+          : "Select"
         }`
       );
     }, [ariaLabel, readOnly, selectedOptions, tooltipContent]);
@@ -422,72 +444,78 @@ const Dropdown = forwardRef(
     );
 
     return (
-      <DropDownComponent
-        className={cx(styles.dropdown, className)}
-        selectProps={customProps}
-        components={{
-          DropdownIndicator,
-          Menu,
-          ClearIndicator,
-          Input,
-          Option: CustomOption,
-          Control,
-          SingleValue,
-          ...(multi && {
-            MultiValue: NOOP, // We need it for react-select to behave nice with "multi"
-            ValueContainer: MultiValueContainer,
-          }),
-          ...(isVirtualized && { MenuList: WindowedMenuList }),
-        }}
-        // When inside scroll we set the menu position by js and we can't follow the drop down location while use scrolling
-        closeMenuOnScroll={closeMenuOnScroll}
-        size={size}
-        noOptionsMessage={noOptionsMessage}
-        placeholder={placeholder}
-        isDisabled={disabled}
-        isClearable={!readOnly && clearable}
-        isSearchable={!readOnly && searchable}
-        readOnly={readOnly}
-        withReadOnlyStyle={withReadOnlyStyle}
-        aria-readonly={readOnly}
-        aria-label={overrideAriaLabel}
-        aria-details={tooltipContent}
-        defaultValue={defaultValue}
-        value={value}
-        onMenuOpen={onMenuOpen}
-        onMenuClose={onMenuClose}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-        onInputChange={onInputChange}
-        openMenuOnFocus={openMenuOnFocus}
-        openMenuOnClick={openMenuOnClick}
-        isRtl={rtl}
-        styles={inlineStyles}
-        theme={customTheme}
-        maxMenuHeight={maxMenuHeight}
-        menuPortalTarget={overrideMenuPortalTarget}
-        menuPlacement={menuPlacement}
-        menuPosition={menuPosition}
-        menuIsOpen={!readOnly && menuIsOpen}
-        tabIndex={tabIndex}
-        id={id}
-        data-testid={
-          dataTestId || getTestId(ComponentDefaultTestId.DROPDOWN, id)
-        }
-        autoFocus={autoFocus}
-        closeMenuOnSelect={closeMenuOnSelect}
-        ref={ref}
-        withMandatoryDefaultOptions={withMandatoryDefaultOptions}
-        isOptionSelected={isOptionSelected}
-        isLoading={isLoading}
-        loadingMessage={loadingMessage}
-        tabSelectsValue={tabSelectsValue}
-        filterOption={filterOption}
-        {...asyncAdditions}
-        {...additions}
-      />
+      <div style={divStyle} >
+        <FieldLabel
+          labelText={labelText}
+          labelStyle={labelStyle}
+        />
+        <DropDownComponent
+          className={cx(styles.dropdown, className)}
+          selectProps={customProps}
+          components={{
+            DropdownIndicator,
+            Menu,
+            ClearIndicator,
+            Input,
+            Option: CustomOption,
+            Control,
+            SingleValue,
+            ...(multi && {
+              MultiValue: NOOP, // We need it for react-select to behave nice with "multi"
+              ValueContainer: MultiValueContainer,
+            }),
+            ...(isVirtualized && { MenuList: WindowedMenuList }),
+          }}
+          // When inside scroll we set the menu position by js and we can't follow the drop down location while use scrolling
+          closeMenuOnScroll={closeMenuOnScroll}
+          size={size}
+          noOptionsMessage={noOptionsMessage}
+          placeholder={placeholder}
+          isDisabled={disabled}
+          isClearable={!readOnly && clearable}
+          isSearchable={!readOnly && searchable}
+          readOnly={readOnly}
+          withReadOnlyStyle={withReadOnlyStyle}
+          aria-readonly={readOnly}
+          aria-label={overrideAriaLabel}
+          aria-details={tooltipContent}
+          defaultValue={defaultValue}
+          value={value}
+          onMenuOpen={onMenuOpen}
+          onMenuClose={onMenuClose}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          onInputChange={onInputChange}
+          openMenuOnFocus={openMenuOnFocus}
+          openMenuOnClick={openMenuOnClick}
+          isRtl={rtl}
+          styles={inlineStyles}
+          theme={customTheme}
+          maxMenuHeight={maxMenuHeight}
+          menuPortalTarget={overrideMenuPortalTarget}
+          menuPlacement={menuPlacement}
+          menuPosition={menuPosition}
+          menuIsOpen={!readOnly && menuIsOpen}
+          tabIndex={tabIndex}
+          id={id}
+          data-testid={
+            dataTestId || getTestId(ComponentDefaultTestId.DROPDOWN, id)
+          }
+          autoFocus={autoFocus}
+          closeMenuOnSelect={closeMenuOnSelect}
+          ref={ref}
+          withMandatoryDefaultOptions={withMandatoryDefaultOptions}
+          isOptionSelected={isOptionSelected}
+          isLoading={isLoading}
+          loadingMessage={loadingMessage}
+          tabSelectsValue={tabSelectsValue}
+          filterOption={filterOption}
+          {...asyncAdditions}
+          {...additions}
+        />
+      </div>
     );
   }
 );
@@ -541,6 +569,8 @@ Dropdown.defaultProps = {
   loadingMessage: undefined,
   ariaLabel: undefined,
   filterOption: undefined,
+  labelPosition: LabelPosition.TOP,
+  labelText: "Label",
 };
 
 Dropdown.propTypes = {
@@ -797,6 +827,10 @@ Dropdown.propTypes = {
    * createFilter function is available at Dropdown.createFilter
    */
   filterOption: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  labelPosition: PropTypes.LabelPosition,
+
+  labelText: PropTypes.string,
 };
 
 export default Dropdown;

package/src/components/Dropdown/__stories__/dropdown.mdx

@@ -152,6 +152,12 @@ The Dropdown component supports multiple options selection in two different stat
 
 ## Use cases and examples
 
+### Label Positions
+
+<Canvas>
+  <Story of={DropdownStories.LabelPositions} />
+</Canvas>
+
 ### Multiple dropdown with renderers as options
 
 Inside the advanced filters, a user can select multiple people from the dropdown menu, and they will be shown as Tags.

package/src/components/Dropdown/__stories__/dropdown.stories.js

@@ -105,6 +105,24 @@ export const Sizes = {
   name: "Sizes",
 };
 
+export const LabelPositions = {
+  render: () => (
+    <div>
+      <Dropdown
+        placeholder="Label on top"
+        className="dropdown-stories-styles_spacing"
+      />
+      <Dropdown
+        placeholder="Label on left"
+        className="dropdown-stories-styles_spacing"
+        labelPosition="left"
+      />
+    </div>
+  ),
+
+  name: "Label Positions",
+};
+
 export const Disabled = {
   render: () => {
     const options = useMemo(

package/src/components/Dropdown/__stories__/dropdown.stories.scss

@@ -3,7 +3,7 @@
 .dropdown-stories-styles {
   &_spacing {
     min-width: 250px;
-    margin: 10px 20px 40px;
+    margin: 0px 20px 40px 0px;
   }
 
   &_rules-spacing {