[v12] feat(ui-badge): rework Badge

packages/ui-badge/src/Badge/README.md

@@ -26,7 +26,7 @@ type: example
       }}
     >
       <IconButton
-        renderIcon={IconUserSolid}
+        renderIcon={<UserRoundInstUIIcon />}
         screenReaderLabel="Edits"
         withBorder={false}
         withBackground={false}
@@ -39,7 +39,7 @@ type: example
       }}
     >
       <IconButton
-        renderIcon={IconUserSolid}
+        renderIcon={<UserRoundInstUIIcon />}
         screenReaderLabel="Edits"
         withBorder={false}
         withBackground={false}
@@ -137,7 +137,7 @@ type: example
 ---
 const EditButton = () => (
   <IconButton
-    renderIcon={IconUserSolid}
+    renderIcon={<UserRoundInstUIIcon />}
     screenReaderLabel="Edit page"
     withBorder={false}
     withBackground={false}

packages/ui-badge/src/Badge/index.tsx

@@ -30,10 +30,9 @@ import {
   withDeterministicId
 } from '@instructure/ui-react-utils'
 
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
 import type { BadgeProps } from './props'
@@ -44,7 +43,7 @@ category: components
 ---
 **/
 @withDeterministicId()
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class Badge extends Component<BadgeProps> {
   static readonly componentId = 'Badge'
 

packages/ui-badge/src/Badge/styles.ts

@@ -24,7 +24,7 @@
 
 import { keyframes } from '@instructure/emotion'
 
-import type { BadgeTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { BadgeProps, BadgeStyle } from './props'
 
 // keyframes have to be outside of 'generateStyle',
@@ -46,7 +46,7 @@ const pulseAnimation = keyframes`
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: BadgeTheme,
+  componentTheme: NewComponentTypes['Badge'],
   props: BadgeProps
 ): BadgeStyle => {
   const { type, variant, placement = '', standalone, pulse } = props