feat(elements): pass class name to icon button

MTES-MCT · Aug 20, 2024 · 443338d · 443338d
1 parent ce11625
commit 443338d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/src/elements/IconButton.tsx b/src/elements/IconButton.tsx
@@ -78,7 +78,7 @@ export function IconButton({
   switch (accent) {
     case Accent.SECONDARY:
       return (
-        <Wrapper>
+        <Wrapper className={className}>
           {!!badgeNumber && (
             <BadgeNumber backgroundColor={badgeBackgroundColor} color={badgeColor} size={size}>
               {badgeNumber}
@@ -90,7 +90,7 @@ export function IconButton({
 
     case Accent.TERTIARY:
       return (
-        <Wrapper>
+        <Wrapper className={className}>
           {!!badgeNumber && (
             <BadgeNumber backgroundColor={badgeBackgroundColor} color={badgeColor} size={size}>
               {badgeNumber}
@@ -102,7 +102,7 @@ export function IconButton({
 
     default:
       return (
-        <Wrapper>
+        <Wrapper className={className}>
           {!!badgeNumber && (
             <BadgeNumber backgroundColor={badgeBackgroundColor} color={badgeColor} size={size}>
               {badgeNumber}

diff --git a/stories/fields/MultiRadio.stories.tsx b/stories/fields/MultiRadio.stories.tsx
@@ -123,6 +123,9 @@ export function _MultiRadio(props: MultiRadioProps) {
   const [outputValueWithIcon, setOutputValueWithIcons] = useState<InterestPointOptionValueType | undefined>(
     OPTIONS_WITH_ICONS[2]?.value
   )
+  const [outputValueInlineWithIcon, setOutputValueInlineWithIcons] = useState<InterestPointOptionValueType | undefined>(
+    OPTIONS_WITH_ICONS[2]?.value
+  )
 
   return (
     <>
@@ -163,6 +166,27 @@ export function _MultiRadio(props: MultiRadioProps) {
 
         {outputValueWithBoolean !== undefined && <Output value={outputValueWithBoolean} />}
       </div>
+
+      <div style={{ marginTop: '32px' }}>
+        <MultiRadio
+          {...props}
+          isInline
+          label="Multiradio inline with icons"
+          name="myMultiRadioInlineWithIcons"
+          onChange={nextOptionValue => setOutputValueInlineWithIcons(nextOptionValue)}
+          options={OPTIONS_WITH_ICONS}
+          optionValueKey="value"
+          renderMenuItem={(label, value) => (
+            <>
+              <value.Icon />
+              {label}
+            </>
+          )}
+          value={outputValueInlineWithIcon}
+        />
+
+        {outputValueInlineWithIcon !== undefined && <Output value={outputValueInlineWithIcon} />}
+      </div>
     </>
   )
 }