From 409e1e848502fade60156fa10830a4f247ce97f9 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Thu, 31 Oct 2024 18:55:43 +0000
Subject: [PATCH 1/9] initial commit

---
 .../InlineMessage.dev.stories.tsx             |  18 +++
 .../InlineMessage/InlineMessage.module.css    |  42 ++++++
 .../react/src/InlineMessage/InlineMessage.tsx | 130 +++++++++++-------
 3 files changed, 138 insertions(+), 52 deletions(-)
 create mode 100644 packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx
 create mode 100644 packages/react/src/InlineMessage/InlineMessage.module.css

diff --git a/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx
new file mode 100644
index 00000000000..f587ddb6386
--- /dev/null
+++ b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx
@@ -0,0 +1,18 @@
+import type {Meta} from '@storybook/react'
+import React from 'react'
+import {InlineMessage} from '.'
+
+const meta = {
+  title: 'Experimental/Components/InlineMessage/Dev',
+  component: InlineMessage,
+} satisfies Meta<typeof InlineMessage>
+
+export default meta
+
+export const Default = () => {
+  return (
+    <InlineMessage variant="unavailable" sx={{color: 'red'}}>
+      An example inline message
+    </InlineMessage>
+  )
+}
diff --git a/packages/react/src/InlineMessage/InlineMessage.module.css b/packages/react/src/InlineMessage/InlineMessage.module.css
new file mode 100644
index 00000000000..8cbcf66d87e
--- /dev/null
+++ b/packages/react/src/InlineMessage/InlineMessage.module.css
@@ -0,0 +1,42 @@
+.InlineMessage {
+  display: grid;
+  /* stylelint-disable-next-line primer/typography */
+  font-size: var(--inline-message-fontSize);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: var(--inline-message-lineHeight);
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--inline-message-fgColor);
+  column-gap: 0.5rem;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+
+  &[data-size='small'] {
+    --inline-message-fontSize: var(--text-body-size-small);
+    --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);
+  }
+
+  &[data-size='medium'] {
+    --inline-message-fontSize: var(--text-body-size-medium);
+    --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);
+  }
+
+  &[data-variant='warning'] {
+    --inline-message-fgColor: var(--fgColor-attention);
+  }
+
+  &[data-variant='critical'] {
+    --inline-message-fgColor: var(--fgColor-danger);
+  }
+
+  &[data-variant='success'] {
+    --inline-message-fgColor: var(--fgColor-success);
+  }
+
+  &[data-variant='unavailable'] {
+    --inline-message-fgColor: var(--fgColor-muted);
+  }
+}
+
+.InlineMessageIcon {
+  min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize)) !important;
+}
diff --git a/packages/react/src/InlineMessage/InlineMessage.tsx b/packages/react/src/InlineMessage/InlineMessage.tsx
index 55f2296a6fd..9c85e1c720b 100644
--- a/packages/react/src/InlineMessage/InlineMessage.tsx
+++ b/packages/react/src/InlineMessage/InlineMessage.tsx
@@ -1,78 +1,104 @@
 import {AlertFillIcon, AlertIcon, CheckCircleFillIcon, CheckCircleIcon} from '@primer/octicons-react'
+import {clsx} from 'clsx'
 import React from 'react'
 import styled from 'styled-components'
 import {get} from '../constants'
-
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {useFeatureFlag} from '../FeatureFlags'
+import classes from './InlineMessage.module.css'
+import type {SxProp} from '../sx'
 type MessageVariant = 'critical' | 'success' | 'unavailable' | 'warning'
 
-export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & {
-  /**
-   * Specify the size of the InlineMessage
-   */
-  size?: 'small' | 'medium'
-
-  /**
-   * Specify the type of the InlineMessage
-   */
-  variant: MessageVariant
-}
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 
-const StyledMessage = styled.div`
-  display: grid;
-  column-gap: 0.5rem;
-  grid-template-columns: auto 1fr;
-  align-items: start;
-  color: var(--inline-message-fgColor, ${get('colors.fg.muted')});
-  line-height: var(--inline-message-lineHeight);
-  font-size: var(--inline-message-fontSize, ${get('fontSizes.1')});
+export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> &
+  SxProp & {
+    /**
+     * Specify the size of the InlineMessage
+     */
+    size?: 'small' | 'medium'
 
-  &[data-size='small'] {
-    --inline-message-fontSize: var(--text-body-size-small, ${get('fontSizes.0')});
-    --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);
+    /**
+     * Specify the type of the InlineMessage
+     */
+    variant: MessageVariant
   }
 
-  &[data-size='medium'] {
-    --inline-message-fontSize: var(--text-body-size-medium, ${get('fontSizes.1')});
-    --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);
-  }
+const StyledMessage = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'div',
+  styled.div`
+    display: grid;
+    column-gap: 0.5rem;
+    grid-template-columns: auto 1fr;
+    align-items: start;
+    color: var(--inline-message-fgColor, ${get('colors.fg.muted')});
+    line-height: var(--inline-message-lineHeight);
+    font-size: var(--inline-message-fontSize, ${get('fontSizes.1')});
 
-  &[data-variant='warning'] {
-    --inline-message-fgColor: ${get('colors.attention.fg')};
-  }
+    &[data-size='small'] {
+      --inline-message-fontSize: var(--text-body-size-small, ${get('fontSizes.0')});
+      --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);
+    }
 
-  &[data-variant='critical'] {
-    --inline-message-fgColor: ${get('colors.danger.fg')};
-  }
+    &[data-size='medium'] {
+      --inline-message-fontSize: var(--text-body-size-medium, ${get('fontSizes.1')});
+      --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);
+    }
 
-  &[data-variant='success'] {
-    --inline-message-fgColor: ${get('colors.success.fg')};
-  }
+    &[data-variant='warning'] {
+      --inline-message-fgColor: ${get('colors.attention.fg')};
+    }
 
-  &[data-variant='unavailable'] {
-    --inline-message-fgColor: ${get('colors.fg.muted')};
-  }
+    &[data-variant='critical'] {
+      --inline-message-fgColor: ${get('colors.danger.fg')};
+    }
 
-  & .InlineMessageIcon {
-    min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));
-  }
-`
+    &[data-variant='success'] {
+      --inline-message-fgColor: ${get('colors.success.fg')};
+    }
+
+    &[data-variant='unavailable'] {
+      --inline-message-fgColor: ${get('colors.fg.muted')};
+    }
+
+    & .InlineMessageIcon {
+      min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));
+    }
+  `,
+)
 
 const variantToIcon: Record<MessageVariant, React.ReactNode> = {
-  warning: <AlertIcon className="InlineMessageIcon" />,
-  critical: <AlertIcon className="InlineMessageIcon" />,
-  success: <CheckCircleIcon className="InlineMessageIcon" />,
-  unavailable: <AlertIcon className="InlineMessageIcon" />,
+  warning: <AlertIcon className={classes.InlineMessageIcon} />,
+  critical: <AlertIcon className={classes.InlineMessageIcon} />,
+  success: <CheckCircleIcon className={classes.InlineMessageIcon} />,
+  unavailable: <AlertIcon className={classes.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} />,
+  warning: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
+  critical: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
+  success: <CheckCircleFillIcon className={classes.InlineMessageIcon} size={12} />,
+  unavailable: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
 }
 
-export function InlineMessage({children, size = 'medium', variant, ...rest}: InlineMessageProps) {
+export function InlineMessage({children, className, size = 'medium', variant, ...rest}: InlineMessageProps) {
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
   const icon = size === 'small' ? variantToSmallIcon[variant] : variantToIcon[variant]
+  if (enabled) {
+    return (
+      <StyledMessage
+        className={clsx(classes.InlineMessage, className)}
+        {...rest}
+        data-size={size}
+        data-variant={variant}
+      >
+        {icon}
+        {children}
+      </StyledMessage>
+    )
+  }
   return (
     <StyledMessage {...rest} data-size={size} data-variant={variant}>
       {icon}

From 9eada3131bc685eabd0374d9d196270938cc89d2 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Thu, 31 Oct 2024 18:59:59 +0000
Subject: [PATCH 2/9] add changeset

---
 .changeset/silent-cherries-behave.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/silent-cherries-behave.md

diff --git a/.changeset/silent-cherries-behave.md b/.changeset/silent-cherries-behave.md
new file mode 100644
index 00000000000..ee09a911a13
--- /dev/null
+++ b/.changeset/silent-cherries-behave.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Migrate 'InlineMessage' component to use CSS modules

From 34b0bce8e210279dc42c5927cf42e493447e355d Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:05:43 +0000
Subject: [PATCH 3/9] key icon classnames off of Feature Flag

---
 .../react/src/InlineMessage/InlineMessage.tsx | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/InlineMessage/InlineMessage.tsx b/packages/react/src/InlineMessage/InlineMessage.tsx
index 9c85e1c720b..1db8a969fb5 100644
--- a/packages/react/src/InlineMessage/InlineMessage.tsx
+++ b/packages/react/src/InlineMessage/InlineMessage.tsx
@@ -68,24 +68,31 @@ const StyledMessage = toggleStyledComponent(
   `,
 )
 
-const variantToIcon: Record<MessageVariant, React.ReactNode> = {
-  warning: <AlertIcon className={classes.InlineMessageIcon} />,
-  critical: <AlertIcon className={classes.InlineMessageIcon} />,
-  success: <CheckCircleIcon className={classes.InlineMessageIcon} />,
-  unavailable: <AlertIcon className={classes.InlineMessageIcon} />,
+const variantToIcon = (enabled: boolean, variant: MessageVariant): React.ReactNode => {
+  const icons = {
+    warning: <AlertIcon className={enabled ? classes.InlineMessageIcon : 'InlineMessageIcon'} />,
+    critical: <AlertIcon className={enabled ? classes.InlineMessageIcon : 'InlineMessageIcon'} />,
+    success: <CheckCircleIcon className={enabled ? classes.InlineMessageIcon : 'InlineMessageIcon'} />,
+    unavailable: <AlertIcon className={enabled ? classes.InlineMessageIcon : 'InlineMessageIcon'} />,
+  }
+
+  return icons[variant]
 }
 
-const variantToSmallIcon: Record<MessageVariant, React.ReactNode> = {
-  warning: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
-  critical: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
-  success: <CheckCircleFillIcon className={classes.InlineMessageIcon} size={12} />,
-  unavailable: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
+const variantToSmallIcon = (enabled: boolean, variant: MessageVariant): React.ReactNode => {
+  const icons = {
+    warning: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
+    critical: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
+    success: <CheckCircleFillIcon className={classes.InlineMessageIcon} size={12} />,
+    unavailable: <AlertFillIcon className={classes.InlineMessageIcon} size={12} />,
+  }
+  return icons[variant]
 }
 
 export function InlineMessage({children, className, size = 'medium', variant, ...rest}: InlineMessageProps) {
   const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
 
-  const icon = size === 'small' ? variantToSmallIcon[variant] : variantToIcon[variant]
+  const icon = size === 'small' ? variantToSmallIcon(enabled, variant) : variantToIcon(enabled, variant)
   if (enabled) {
     return (
       <StyledMessage

From 8333efce62a435e391680849d9ae92daecebc521 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:17:14 +0000
Subject: [PATCH 4/9] refactor

---
 .../react/src/InlineMessage/InlineMessage.tsx | 20 ++++++-------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/InlineMessage/InlineMessage.tsx b/packages/react/src/InlineMessage/InlineMessage.tsx
index 1db8a969fb5..173c9502f1b 100644
--- a/packages/react/src/InlineMessage/InlineMessage.tsx
+++ b/packages/react/src/InlineMessage/InlineMessage.tsx
@@ -93,21 +93,13 @@ export function InlineMessage({children, className, size = 'medium', variant, ..
   const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
 
   const icon = size === 'small' ? variantToSmallIcon(enabled, variant) : variantToIcon(enabled, variant)
-  if (enabled) {
-    return (
-      <StyledMessage
-        className={clsx(classes.InlineMessage, className)}
-        {...rest}
-        data-size={size}
-        data-variant={variant}
-      >
-        {icon}
-        {children}
-      </StyledMessage>
-    )
-  }
   return (
-    <StyledMessage {...rest} data-size={size} data-variant={variant}>
+    <StyledMessage
+      className={clsx(className, enabled && classes.InlineMessage)}
+      {...rest}
+      data-size={size}
+      data-variant={variant}
+    >
       {icon}
       {children}
     </StyledMessage>

From 8c2a22527725f53a0f217c6d752040d067be10bb Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:17:26 +0000
Subject: [PATCH 5/9] add dev story to vrt tests

---
 e2e/components/InlineMessage.test.ts                          | 4 ++++
 .../react/src/InlineMessage/InlineMessage.dev.stories.tsx     | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/e2e/components/InlineMessage.test.ts b/e2e/components/InlineMessage.test.ts
index cb595a96201..ecafcb6b0e6 100644
--- a/e2e/components/InlineMessage.test.ts
+++ b/e2e/components/InlineMessage.test.ts
@@ -12,6 +12,10 @@ const stories = [
     title: 'Multiline',
     id: 'experimental-components-inlinemessage-features--multiline',
   },
+  {
+    title: 'Dev Default',
+    id: 'experimental-components-inlinemessage-dev--dev-story',
+  },
 ]
 
 const scenarios = matrix({
diff --git a/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx
index f587ddb6386..05ef79c74c5 100644
--- a/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx
+++ b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx
@@ -9,7 +9,7 @@ const meta = {
 
 export default meta
 
-export const Default = () => {
+export const DevDefault = () => {
   return (
     <InlineMessage variant="unavailable" sx={{color: 'red'}}>
       An example inline message

From 1ea68cf700340ad14f1305e5727708d78a2ea6a4 Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:53:14 +0000
Subject: [PATCH 6/9] style fix and remove !important

---
 packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx | 2 +-
 packages/react/src/InlineMessage/InlineMessage.module.css      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx
index 05ef79c74c5..69f87029b3a 100644
--- a/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx
+++ b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx
@@ -11,7 +11,7 @@ export default meta
 
 export const DevDefault = () => {
   return (
-    <InlineMessage variant="unavailable" sx={{color: 'red'}}>
+    <InlineMessage variant="unavailable" sx={{border: '1px solid red'}}>
       An example inline message
     </InlineMessage>
   )
diff --git a/packages/react/src/InlineMessage/InlineMessage.module.css b/packages/react/src/InlineMessage/InlineMessage.module.css
index 8cbcf66d87e..0ddbea7498b 100644
--- a/packages/react/src/InlineMessage/InlineMessage.module.css
+++ b/packages/react/src/InlineMessage/InlineMessage.module.css
@@ -38,5 +38,5 @@
 }
 
 .InlineMessageIcon {
-  min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize)) !important;
+  min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));
 }

From 26d2c37b512aada72dcd6017a941818823c509fd Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <randall-krauskopf@github.com>
Date: Mon, 4 Nov 2024 10:52:03 -0600
Subject: [PATCH 7/9] fix dev id

---
 e2e/components/InlineMessage.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/components/InlineMessage.test.ts b/e2e/components/InlineMessage.test.ts
index ecafcb6b0e6..81814c82a20 100644
--- a/e2e/components/InlineMessage.test.ts
+++ b/e2e/components/InlineMessage.test.ts
@@ -14,7 +14,7 @@ const stories = [
   },
   {
     title: 'Dev Default',
-    id: 'experimental-components-inlinemessage-dev--dev-story',
+    id: 'experimental-components-inlinemessage-dev--dev-default',
   },
 ]
 

From dd940f7722595eeeff9ca191e06ebc930d6e51e9 Mon Sep 17 00:00:00 2001
From: randall-krauskopf <randall-krauskopf@users.noreply.github.com>
Date: Mon, 4 Nov 2024 17:04:53 +0000
Subject: [PATCH 8/9] test(vrt): update snapshots

---
 ...Message-Dev-Default-dark-colorblind-linux.png | Bin 0 -> 7192 bytes
 ...lineMessage-Dev-Default-dark-dimmed-linux.png | Bin 0 -> 7092 bytes
 ...sage-Dev-Default-dark-high-contrast-linux.png | Bin 0 -> 7229 bytes
 .../InlineMessage-Dev-Default-dark-linux.png     | Bin 0 -> 7192 bytes
 ...Message-Dev-Default-dark-tritanopia-linux.png | Bin 0 -> 7192 bytes
 ...essage-Dev-Default-light-colorblind-linux.png | Bin 0 -> 7235 bytes
 ...age-Dev-Default-light-high-contrast-linux.png | Bin 0 -> 7252 bytes
 .../InlineMessage-Dev-Default-light-linux.png    | Bin 0 -> 7235 bytes
 ...essage-Dev-Default-light-tritanopia-linux.png | Bin 0 -> 7235 bytes
 9 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 .playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-colorblind-linux.png
 create mode 100644 .playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-dimmed-linux.png
 create mode 100644 .playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-high-contrast-linux.png
 create mode 100644 .playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-linux.png
 create mode 100644 .playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-tritanopia-linux.png
 create mode 100644 .playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-light-colorblind-linux.png
 create mode 100644 .playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-light-high-contrast-linux.png
 create mode 100644 .playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-light-linux.png
 create mode 100644 .playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-light-tritanopia-linux.png

diff --git a/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-colorblind-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f89572e51a6660189a6db468c79ab3184af8df5
GIT binary patch
literal 7192
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
PeSo*8-(}+WKi>NvD^)D)

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-dimmed-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f13182a7a160a80c23bb606e3b75c6d3870331f6
GIT binary patch
literal 7092
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

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-high-contrast-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..47bdf2c53ca98b0d5a11a01cf8b06c579876f631
GIT binary patch
literal 7229
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

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-linux.png b/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f89572e51a6660189a6db468c79ab3184af8df5
GIT binary patch
literal 7192
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
PeSo*8-(}+WKi>NvD^)D)

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-dark-tritanopia-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f89572e51a6660189a6db468c79ab3184af8df5
GIT binary patch
literal 7192
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
PeSo*8-(}+WKi>NvD^)D)

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-light-colorblind-linux.png b/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-light-colorblind-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b522169e8c4265079a022c006c8333b5c81160b
GIT binary patch
literal 7235
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

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-light-high-contrast-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..7215a9c96dceb8d5d4f1ecf416ece9ec074b6a3a
GIT binary patch
literal 7252
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
CX0g)%

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-light-linux.png b/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-light-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b522169e8c4265079a022c006c8333b5c81160b
GIT binary patch
literal 7235
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

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/InlineMessage.test.ts-snapshots/InlineMessage-Dev-Default-light-tritanopia-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b522169e8c4265079a022c006c8333b5c81160b
GIT binary patch
literal 7235
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

literal 0
HcmV?d00001


From 6ad8105e7835731e3b955dfe1dbe3f2488435e2b Mon Sep 17 00:00:00 2001
From: Randall Krauskopf <randall-krauskopf@github.com>
Date: Mon, 4 Nov 2024 16:06:32 -0600
Subject: [PATCH 9/9] fix dev story

---
 .../react/src/InlineMessage/InlineMessage.dev.stories.tsx  | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx
index 69f87029b3a..95c6d281cac 100644
--- a/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx
+++ b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx
@@ -9,10 +9,7 @@ const meta = {
 
 export default meta
 
+// Previous Styled version of the component didn't accept an sx prop so no need to test if that works.
 export const DevDefault = () => {
-  return (
-    <InlineMessage variant="unavailable" sx={{border: '1px solid red'}}>
-      An example inline message
-    </InlineMessage>
-  )
+  return <InlineMessage variant="unavailable">An example inline message</InlineMessage>
 }