Merge pull request #2806 from SUI-Components/a11y-label-classNames

feat(components/atom/label): open classnames
SUI-Components · Jan 17, 2025 · 28ab605 · 28ab605
2 parents b6563bc + 9106fbf
commit 28ab605
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/components/atom/label/src/index.tsx b/components/atom/label/src/index.tsx
@@ -34,18 +34,41 @@ export interface AtomLabelProps extends Pick<LabelHTMLAttributes<HTMLLabelElemen
    * Font size: set different font sizes, use AtomLabelFontSizes
    */
   fontSize?: FontSize
+  /**
+   * class attribute
+   */
+  className?: string
 }
 
-const getClass = ({inline, type, fontSize}: Pick<AtomLabelProps, 'inline' | 'type' | 'fontSize'>) =>
-  cx(CLASSNAME, {
-    [`${CLASSNAME}--${fontSize as string}`]: Boolean(fontSize),
-    [`${CLASSNAME}--${type as string}`]: Boolean(type),
-    [`${CLASSNAME}--inlineLeft`]: inline === 'left',
-    [`${CLASSNAME}--inlineRight`]: inline === 'right'
-  })
+const getClass = ({
+  inline,
+  type,
+  fontSize,
+  className
+}: Pick<AtomLabelProps, 'inline' | 'type' | 'fontSize' | 'className'>) =>
+  cx(
+    CLASSNAME,
+    {
+      [`${CLASSNAME}--${fontSize as string}`]: Boolean(fontSize),
+      [`${CLASSNAME}--${type as string}`]: Boolean(type),
+      [`${CLASSNAME}--inlineLeft`]: inline === 'left',
+      [`${CLASSNAME}--inlineRight`]: inline === 'right'
+    },
+    className
+  )
 
-const AtomLabel: FC<AtomLabelProps> = ({name, text, inline, optionalText, type, fontSize, htmlFor, onClick}) => (
-  <label htmlFor={htmlFor ?? name} className={getClass({inline, type, fontSize})} onClick={onClick}>
+const AtomLabel: FC<AtomLabelProps> = ({
+  name,
+  text,
+  inline,
+  optionalText,
+  type,
+  fontSize,
+  htmlFor,
+  onClick,
+  className
+}) => (
+  <label htmlFor={htmlFor ?? name} className={getClass({inline, type, fontSize, className})} onClick={onClick}>
     {text}
     {Boolean(optionalText) && <span className="sui-AtomLabel-optionalText">{optionalText}</span>}
   </label>

diff --git a/components/atom/label/test/index.test.tsx b/components/atom/label/test/index.test.tsx
@@ -65,7 +65,7 @@ describe(json.name, () => {
       expect(container.innerHTML).to.not.have.lengthOf(0)
     })
 
-    it('should NOT extend classNames', () => {
+    it('should extend classNames', () => {
       // Given
       const props = {className: 'extended-classNames'}
       const findSentence = (str: string) => (string: string) => string.match(new RegExp(`S*${str}S*`))
@@ -75,7 +75,7 @@ describe(json.name, () => {
       const findClassName = findSentence(props.className)
 
       // Then
-      expect(findClassName(container.innerHTML)).to.be.null
+      expect(findClassName(container.innerHTML)).to.not.be.null
     })
   })