feat: add support for small icons to InlineMessage

primer · Jun 6, 2024 · 42727e7 · 42727e7
1 parent 1dae1fd
commit 42727e7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/packages/react/src/InlineMessage/InlineMessage.stories.tsx b/packages/react/src/InlineMessage/InlineMessage.stories.tsx
@@ -31,4 +31,8 @@ export const Playground: StoryObj<typeof InlineMessage> = {
       options: ['critical', 'success', 'unavailable', 'warning'],
     },
   },
+  args: {
+    size: 'medium',
+    variant: 'success',
+  },
 }
diff --git a/packages/react/src/InlineMessage/InlineMessage.tsx b/packages/react/src/InlineMessage/InlineMessage.tsx
@@ -1,4 +1,4 @@
-import {AlertIcon, AlertFillIcon, IssueClosedIcon, FeedIssueClosedIcon} from '@primer/octicons-react'
+import {AlertFillIcon, CheckCircleFillIcon, FeedIssueClosedIcon} from '@primer/octicons-react'
 import React from 'react'
 import styled from 'styled-components'
 import {get} from '../constants'
@@ -58,22 +58,21 @@ const StyledMessage = styled.div`
 `
 
 const variantToIcon: Record<MessageVariant, React.ReactNode> = {
-  warning: <AlertIcon className="InlineMessageIcon" />,
-  critical: <AlertIcon className="InlineMessageIcon" />,
-  success: <IssueClosedIcon className="InlineMessageIcon" />,
-  unavailable: <AlertIcon className="InlineMessageIcon" />,
-}
-
-const variantToFilledIcon: Record<MessageVariant, React.ReactNode> = {
   warning: <AlertFillIcon className="InlineMessageIcon" />,
   critical: <AlertFillIcon className="InlineMessageIcon" />,
   success: <FeedIssueClosedIcon className="InlineMessageIcon" />,
   unavailable: <AlertFillIcon className="InlineMessageIcon" />,
 }
 
+const variantToSmallIcon: Record<MessageVariant, React.ReactNode> = {
+  warning: <AlertFillIcon className="InlineMessageIcon" size={12} />,
+  critical: <AlertFillIcon className="InlineMessageIcon" size={12} />,
+  success: <CheckCircleFillIcon className="InlineMessageIcon" size={12} />,
+  unavailable: <AlertFillIcon className="InlineMessageIcon" size={12} />,
+}
+
 export function InlineMessage({children, size = 'medium', variant, ...rest}: InlineMessageProps) {
-  // When the `InlineMessage` is small, use the fill variant of icons
-  const icon = size === 'small' ? variantToFilledIcon[variant] : variantToIcon[variant]
+  const icon = size === 'small' ? variantToSmallIcon[variant] : variantToIcon[variant]
   return (
     <StyledMessage {...rest} data-size={size} data-variant={variant}>
       {icon}