fix: Pill background and update Pill examples (#414)

* docs(Pill): updated usage examples * fix(Pill): transparent background * chore: remove unneeded changeset
project44 · Jun 23, 2023 · 0e67869 · 0e67869
1 parent f621f6f
commit 0e67869
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 10 deletions.
diff --git a/.changeset/five-colts-fly.md b/.changeset/five-colts-fly.md
@@ -0,0 +1,5 @@
+---
+'@project44-manifest/react': patch
+---
+
+Fix Pill styles transparent background and custom theme example
diff --git a/apps/website/docs/data-display/pill.mdx b/apps/website/docs/data-display/pill.mdx
@@ -18,23 +18,44 @@ Represents an object or status
 Include an icon before the pill label.
 
 ```jsx live
-<Pill icon={<Icon icon="flight" />} label="In Transit" />
+<Pill icon={<AirplaneFilled />} label="In Transit" />
 ```
 
 ### Color
 
 Use the `colorScheme` prop to adjust the color of the pill.
 
 ```jsx live
-<Pill colorScheme="red" icon={<Icon icon="front_hand" />} label="On Hold" />
+<Pill colorScheme="red" icon={<Clock />} label="On Hold" />
 ```
 
 ### Collapsible
 
 Set the `isCollapsible` prop to make the pill collapse by default. The label will display on hover.
 
 ```jsx live
-<Pill icon={<Icon icon="flight" />} isCollapsible label="In Transit" />
+<Pill icon={<AirplaneFilled />} isCollapsible label="In Transit" />
+```
+
+### Custom theme
+
+An example of a custom theming
+
+```jsx live
+<Pill
+  css={{
+    backgroundColor: '$colors$palette-green-50',
+    '.manifest-pill__text': {
+      backgroundColor: 'inherit',
+      color: '$palette-green-700',
+    },
+    '.manifest-pill__icon': {
+      backgroundColor: '$palette-green-700',
+    },
+  }}
+  icon={<AirplaneFilled />}
+  label="In Transit"
+/>
 ```
 
 ## Props

diff --git a/packages/react/src/components/Pill/Pill.styles.ts b/packages/react/src/components/Pill/Pill.styles.ts
@@ -1,7 +1,7 @@
 import { css, pxToRem } from '@project44-manifest/react-styles';
 
 export const useStyles = css({
-  $$backgroundColor: 'tranparent',
+  $$backgroundColor: 'transparent',
 
   alignItems: 'center',
   backgroundColor: '$$backgroundColor',

diff --git a/packages/react/stories/Pill.stories.tsx b/packages/react/stories/Pill.stories.tsx
@@ -1,5 +1,6 @@
+import { AirplaneFilled, Clock } from '@project44-manifest/react-icons';
 import type { ComponentStory } from '@storybook/react';
-import { Flex, Icon, Pill } from '../src';
+import { Flex, Pill } from '../src';
 
 export default {
   title: 'Components/Pill',
@@ -11,7 +12,7 @@ const Template: ComponentStory<typeof Pill> = (args) => <Pill {...args} />;
 export const Default = Template.bind({});
 
 Default.args = {
-  icon: <Icon icon="flight" />,
+  icon: <AirplaneFilled />,
   label: 'In Transit',
 };
 
@@ -20,8 +21,8 @@ export const ColorScheme = Template.bind({});
 ColorScheme.decorators = [
   () => (
     <Flex align="center" css={{ gap: '$small' }}>
-      <Pill colorScheme="indigo" icon={<Icon icon="flight" />} label="In Transit" />
-      <Pill colorScheme="red" icon={<Icon icon="front_hand" />} label="On Hold" />
+      <Pill colorScheme="indigo" icon={<AirplaneFilled />} label="In Transit" />
+      <Pill colorScheme="red" icon={<Clock />} label="On Hold" />
     </Flex>
   ),
 ];
@@ -31,8 +32,31 @@ export const Collapsible = Template.bind({});
 Collapsible.decorators = [
   () => (
     <Flex align="center" css={{ gap: '$small' }}>
-      <Pill isCollapsible colorScheme="indigo" icon={<Icon icon="flight" />} label="In Transit" />
-      <Pill isCollapsible colorScheme="red" icon={<Icon icon="front_hand" />} label="On Hold" />
+      <Pill isCollapsible colorScheme="indigo" icon={<AirplaneFilled />} label="In Transit" />
+      <Pill isCollapsible colorScheme="red" icon={<Clock />} label="On Hold" />
+    </Flex>
+  ),
+];
+
+export const CustomColor = Template.bind({});
+
+CustomColor.decorators = [
+  () => (
+    <Flex align="center" css={{ gap: '$small' }}>
+      <Pill
+        css={{
+          backgroundColor: '$colors$palette-green-50',
+          '.manifest-pill__text': {
+            backgroundColor: 'inherit',
+            color: '$palette-green-700',
+          },
+          '.manifest-pill__icon': {
+            backgroundColor: '$palette-green-700',
+          },
+        }}
+        icon={<AirplaneFilled />}
+        label="In Transit"
+      />
     </Flex>
   ),
 ];