[Web][Harmony] Forward ref in Harmony IconButtob; Fix red kebab icon …

…and too big tip tile close icon (#7553) Co-authored-by: Nikki Kang <kangaroo233@gmail.com>
AudiusProject · Feb 12, 2024 · 887e0c2 · 887e0c2
1 parent 59b8df9
commit 887e0c2
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 62 deletions.
diff --git a/packages/harmony/src/components/button/IconButton/IconButton.tsx b/packages/harmony/src/components/button/IconButton/IconButton.tsx
@@ -1,3 +1,5 @@
+import { forwardRef } from 'react'
+
 import { useTheme, type CSSObject } from '@emotion/react'
 
 import type { IconComponent, IconProps } from 'components/icon'
@@ -16,51 +18,58 @@ export type IconButtonProps = {
  * The icon component allows you to pass in an icon and
  * apply color and sizing properties.
  */
-export const IconButton = (props: IconButtonProps) => {
-  const {
-    icon: Icon,
-    color: iconColor,
-    size = 'l',
-    shadow,
-    ripple,
-    height,
-    width,
-    ...other
-  } = props
-  const { disabled } = other
-  const { color, cornerRadius, spacing } = useTheme()
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props: IconButtonProps, ref) => {
+    const {
+      icon: Icon,
+      color: iconColor,
+      size = 'l',
+      shadow,
+      ripple,
+      height,
+      width,
+      ...other
+    } = props
+    const { disabled } = other
+    const { color, cornerRadius, spacing } = useTheme()
 
-  const buttonCss: CSSObject = {
-    background: 'transparent',
-    border: 'none',
-    borderRadius: '50%',
-    padding: spacing.xs,
-    overflow: 'unset'
-  }
+    const buttonCss: CSSObject = {
+      background: 'transparent',
+      border: 'none',
+      borderRadius: '50%',
+      padding: spacing.xs,
+      overflow: 'unset'
+    }
 
-  const rippleCss: CSSObject = {
-    '&:hover': {
-      backgroundColor: color.neutral.n100
-    },
-    '&:active': {
-      backgroundColor: color.neutral.n150
-    },
-    '&:focus-visible': {
-      border: `1px solid ${color.secondary.secondary}`,
-      borderRadius: cornerRadius.s
+    const rippleCss: CSSObject = {
+      '&:hover': {
+        backgroundColor: color.neutral.n100
+      },
+      '&:active': {
+        backgroundColor: color.neutral.n150
+      },
+      '&:focus-visible': {
+        border: `1px solid ${color.secondary.secondary}`,
+        borderRadius: cornerRadius.s
+      }
     }
-  }
 
-  return (
-    <BaseButton {...other} type='button' css={[buttonCss, ripple && rippleCss]}>
-      <Icon
-        aria-hidden
-        color={disabled ? 'disabled' : iconColor}
-        size={size}
-        shadow={shadow}
-        height={height}
-        width={width}
-      />
-    </BaseButton>
-  )
-}
+    return (
+      <BaseButton
+        ref={ref}
+        {...other}
+        type='button'
+        css={[buttonCss, ripple && rippleCss]}
+      >
+        <Icon
+          aria-hidden
+          color={disabled ? 'disabled' : iconColor}
+          size={size}
+          shadow={shadow}
+          height={height}
+          width={width}
+        />
+      </BaseButton>
+    )
+  }
+)
diff --git a/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.module.css b/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.module.css
@@ -150,11 +150,6 @@
   transform: scale3d(0.95, 0.95, 0.95);
 }
 
-.dismissIcon {
-  width: var(--unit-8);
-  height: var(--unit-8);
-}
-
 .dismissIcon path {
   fill: var(--neutral-light-4);
 }
diff --git a/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.tsx b/packages/web/src/components/tipping/feed-tip-tile/FeedTipTile.tsx
@@ -180,7 +180,7 @@ const DismissTipButton = () => {
       aria-label={messages.dismissButton}
       className={styles.dismissButton}
       onClick={handleClick}
-      icon={<IconRemove className={styles.dismissIcon} />}
+      icon={<IconRemove className={styles.dismissIcon} size='s' />}
     />
   )
 }

diff --git a/.../src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.module.css b/.../src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.module.css
@@ -37,7 +37,3 @@
 .listItemActions {
   flex-grow: 0;
 }
-
-.listItemActionsIcon svg {
-  color: var(--neutral-light-4) !important;
-}
diff --git a/...ges/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.tsx b/...ges/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.tsx
@@ -2,11 +2,12 @@ import { useCallback, useMemo } from 'react'
 
 import { DeveloperApp } from '@audius/common/api'
 import {
+  IconButton,
   IconKebabHorizontal,
   IconTrash,
   IconVisibilityPublic
 } from '@audius/harmony'
-import { IconButton, PopupMenu, PopupMenuItem } from '@audius/stems'
+import { PopupMenu, PopupMenuItem } from '@audius/stems'
 
 import styles from './DeveloperAppListItem.module.css'
 import { CreateAppPageProps, CreateAppsPages } from './types'
@@ -67,9 +68,8 @@ export const DeveloperAppListItem = (props: DeveloperAppListItemProps) => {
             {...triggerProps}
             className={styles.listItemActions}
             aria-label={messages.appActionsLabel}
-            icon={
-              <IconKebabHorizontal className={styles.listItemActionsIcon} />
-            }
+            color='default'
+            icon={IconKebabHorizontal}
             onClick={() => onClick()}
           />
         )}

diff --git a/...ages/settings-page/components/desktop/DeveloperApps/DeveloperAppsSettingsModal.module.css b/...ages/settings-page/components/desktop/DeveloperApps/DeveloperAppsSettingsModal.module.css
@@ -3,7 +3,3 @@
   width: var(--unit-6);
   margin-top: 2px;
 }
-
-.titleIcon path {
-  fill: var(--neutral);
-}