Merge pull request #2772 from SUI-Components/feat/allow-description-w…

…ith-addon feat(components/molecule/dropdownOption): improve design when description and left addon exists
SUI-Components · Oct 23, 2024 · fb18e51 · fb18e51
2 parents 860d1d3 + 87d1d62
commit fb18e51
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 1 deletion.
diff --git a/components/molecule/dropdownOption/demo/ArticleLeftAddonAndDescription.js b/components/molecule/dropdownOption/demo/ArticleLeftAddonAndDescription.js
@@ -0,0 +1,83 @@
+import {useState} from 'react'
+
+import PropTypes from 'prop-types'
+
+import {Article, Cell, Code, Grid, H2, Input, Label, Paragraph} from '@s-ui/documentation-library'
+
+import MoleculeDropdownOption from '../src/index.js'
+import {CLASS_DEMO_OPTION, OPTIONS_WITH_LEFT_ADDON} from './config.js'
+
+const ArticleLeftAddonAndDescription = ({className}) => {
+  const [singleData, setSingleData] = useState([])
+  const [multipleData, setMultipleData] = useState([])
+
+  const handleSelectSingle = (event, {value, selected}) => {
+    setSingleData(selected ? [value] : [])
+  }
+
+  const handleSelectMultiple = (event, {value, selected}) => {
+    setMultipleData(selected ? [...multipleData, value] : [...multipleData.filter(data => data !== value)])
+  }
+
+  return (
+    <Article className={className}>
+      <H2>LEFT ADDON AND DESCRIPTION</H2>
+      <Paragraph>
+        Each option can optionally include a left addon, specified using the <Code>leftAddon</Code> prop (React node),
+        as well as a description provided via the <Code>description</Code> prop (string) to display additional
+        information
+      </Paragraph>
+      <Grid cols={2} gutter={[8, 8]}>
+        <Cell>
+          <Label>Single</Label>
+        </Cell>
+        <Cell>
+          <Label>Multiple</Label>
+        </Cell>
+        <Cell className={CLASS_DEMO_OPTION}>
+          {OPTIONS_WITH_LEFT_ADDON.map(({option, leftAddon}) => (
+            <MoleculeDropdownOption
+              key={option}
+              value={option}
+              leftAddon={leftAddon}
+              description="description"
+              onSelect={handleSelectSingle}
+              selected={singleData.includes(option)}
+            >
+              {option}
+            </MoleculeDropdownOption>
+          ))}
+        </Cell>
+        <Cell className={CLASS_DEMO_OPTION}>
+          {OPTIONS_WITH_LEFT_ADDON.map(({option, leftAddon}) => (
+            <MoleculeDropdownOption
+              key={option}
+              value={option}
+              leftAddon={leftAddon}
+              textWrap={'noWrap'}
+              description="description"
+              onSelect={handleSelectMultiple}
+              selected={multipleData.includes(option)}
+            >
+              {option}
+            </MoleculeDropdownOption>
+          ))}
+        </Cell>
+        <Cell>
+          <Input readOnly disabled fullWidth value={JSON.stringify(singleData, null, 2)} />
+        </Cell>
+        <Cell>
+          <Input readOnly disabled fullWidth value={JSON.stringify(multipleData, null, 2)} />
+        </Cell>
+      </Grid>
+    </Article>
+  )
+}
+
+ArticleLeftAddonAndDescription.displayName = 'ArticleLeftAddonAndDescription'
+
+ArticleLeftAddonAndDescription.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleLeftAddonAndDescription
diff --git a/components/molecule/dropdownOption/demo/index.js b/components/molecule/dropdownOption/demo/index.js
@@ -4,6 +4,7 @@ import ArticleBehavior from './ArticleBehavior.js'
 import ArticleDefault from './ArticleDefault.js'
 import ArticleDescription from './ArticleDescription.js'
 import ArticleHighLight from './ArticleHighLight.js'
+import ArticleLeftAddonAndDescription from './ArticleLeftAddonAndDescription.js'
 import ArticleLeftAddons from './ArticleLeftAddons.js'
 import ArticleTextWrap from './ArticleTextWrap.js'
 import {CLASS_DEMO_SECTION} from './config.js'
@@ -28,6 +29,8 @@ const Demo = () => (
     <ArticleTextWrap className={CLASS_DEMO_SECTION} />
     <br />
     <ArticleLeftAddons className={CLASS_DEMO_SECTION} />
+    <br />
+    <ArticleLeftAddonAndDescription className={CLASS_DEMO_SECTION} />
   </div>
 )
 

diff --git a/components/molecule/dropdownOption/src/config.js b/components/molecule/dropdownOption/src/config.js
@@ -8,6 +8,7 @@ export const CLASS_TEXT = `${BASE_CLASS}-text`
 export const CLASS_DESCRIPTION = `${BASE_CLASS}-description`
 export const CLASS_DISABLED = `${BASE_CLASS}--disabled`
 export const CLASS_WITH_DESCRIPTION = `${BASE_CLASS}--withDescription`
+export const CLASS_WITH_DESCRIPTION_AND_ADDON = `${BASE_CLASS}--withDescriptionAndAddon`
 export const CLASS_HIGHLIGHTED = `is-highlighted`
 export const CLASS_HIGHLIGHTED_MARK = `${BASE_CLASS}-mark`
 export const CLASS_LEFT_ADDON = `${BASE_CLASS}-leftAddon`

diff --git a/components/molecule/dropdownOption/src/index.js b/components/molecule/dropdownOption/src/index.js
@@ -19,6 +19,7 @@ import {
   CLASS_LEFT_ADDON,
   CLASS_TEXT,
   CLASS_WITH_DESCRIPTION,
+  CLASS_WITH_DESCRIPTION_AND_ADDON,
   MODIFIER_LINE_WRAP,
   MODIFIER_NO_WRAP,
   MODIFIER_THREE_LINES,
@@ -49,12 +50,14 @@ const MoleculeDropdownOption = forwardRef(
     },
     forwardedRef
   ) => {
+    const hasAddonAndDescription = description && !!leftAddon
     const ref = useMergeRefs(innerRef || createRef(), forwardedRef)
     const [innerSelected, setInnerSelected] = useControlledState(selected, defaultSelected)
     const className = cx(BASE_CLASS, {
       [CLASS_CHECKBOX]: checkbox,
       [CLASS_DISABLED]: disabled,
       [CLASS_WITH_DESCRIPTION]: description,
+      [CLASS_WITH_DESCRIPTION_AND_ADDON]: hasAddonAndDescription,
       'is-selected': innerSelected
     })
     const innerClassName = cx([
@@ -131,10 +134,11 @@ const MoleculeDropdownOption = forwardRef(
             {leftAddon ? <span className={CLASS_LEFT_ADDON}>{leftAddon}</span> : null}
             <span onFocus={handleInnerFocus} className={innerClassName}>
               {children}
+              {hasAddonAndDescription && <span className={CLASS_DESCRIPTION}>{description}</span>}
             </span>
           </>
         )}
-        {description && <span className={CLASS_DESCRIPTION}>{description}</span>}
+        {!hasAddonAndDescription && <span className={CLASS_DESCRIPTION}>{description}</span>}
       </li>
     )
   }

diff --git a/components/molecule/dropdownOption/src/styles/index.scss b/components/molecule/dropdownOption/src/styles/index.scss
@@ -102,4 +102,22 @@ $base-class: '.sui-MoleculeDropdownOption';
     justify-content: center;
     padding: $pt-molecule-dropdown-option-with-description $pl-molecule-dropdown-option;
   }
+
+  &--withDescriptionAndAddon {
+    flex-direction: row;
+
+    & #{$base-class} {
+      &-leftAddon {
+        height: fit-content;
+      }
+      &-text {
+        display: flex;
+        gap: 4px;
+        flex-direction: column;
+      }
+      &-description {
+        margin: 0;
+      }
+    }
+  }
 }