fix(elements)!: switch IconBox wrapper element from a div to a span

BREAKING CHANGE: `<IconButton />` is now a span instead of a div.
MTES-MCT · May 2, 2024 · 4a17f10 · 4a17f10
1 parent 8a19fe6
commit 4a17f10
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 10 deletions.
diff --git a/src/components/Dropdown/Item.tsx b/src/components/Dropdown/Item.tsx
@@ -55,8 +55,7 @@ const PrimaryDropdownItem = styled(RsuiteDropdown.Item as any)<{
   &:not(:last-child) {
     border-bottom: 1px solid var(--lightGray);
   }
-  /* SVG Icon Components are wrapped within a <div />  */
-  > div {
+  > .Element-IconBox {
     margin-top: 1px;
   }
 `
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -61,8 +61,7 @@ const PrimaryDropdown = styled(RsuiteDropdown as any)<{
       color: ${p => p.theme.color.cultured};
     }
 
-    /* SVG Icon Components are wrapped within a <div /> */
-    > div {
+    > .Element-IconBox {
       margin: 1px 8px 0 0;
     }
 

diff --git a/src/elements/Button.tsx b/src/elements/Button.tsx
@@ -108,8 +108,7 @@ const StyledButton = styled.button<{
   padding: ${p => PADDING[p.size]};
   width: ${p => (p.isFullWidth ? '100%' : 'auto')};
 
-  /* SVG Icon Components are wrapped within a <div /> */
-  > div {
+  > .Element-IconBox {
     margin-right: 5px;
   }
 `

diff --git a/src/elements/IconBox.tsx b/src/elements/IconBox.tsx
@@ -2,15 +2,15 @@ import styled from 'styled-components'
 
 import type { HTMLAttributes } from 'react'
 
-export type IconBoxProps = HTMLAttributes<HTMLDivElement> & {
+export type IconBoxProps = HTMLAttributes<HTMLSpanElement> & {
   $color?: string | undefined
   /** In pixels */
   $size?: number | undefined
 }
 /**
  * Internal component used to wrap SVG icon components
  */
-export const IconBox = styled.div.attrs<IconBoxProps, IconBoxProps>(() => ({
+export const IconBox = styled.span.attrs<IconBoxProps, IconBoxProps>(() => ({
   className: 'Element-IconBox'
 }))`
   display: inline-block;

diff --git a/src/elements/Tag/index.tsx b/src/elements/Tag/index.tsx
@@ -101,8 +101,8 @@ const Box = styled.span<{
   height: 22px;
   line-height: normal;
   padding: ${p => (p.$withCircleIcon ? '1px 8px 0px 1px' : '0px 8px')};
-  /* SVG Icon components are wrapped within a <div /> */
-  > div {
+
+  > .Element-IconBox {
     margin-right: 4px;
   }
 `