feat(Badge): rename type prop

BREAKING CHANGE: New type subtle is the old default one. New default is the old Inverted
kiwicom · Apr 20, 2023 · a55dbd2 · a55dbd2
1 parent 70a620d
commit a55dbd2
Show file tree

Hide file tree

Showing 19 changed files with 108 additions and 108 deletions.
diff --git a/docs/src/__examples__/Badge/DEFAULT.tsx b/docs/src/__examples__/Badge/DEFAULT.tsx
@@ -23,10 +23,10 @@ export default {
             "success",
             "critical",
             "warning",
-            "infoInverted",
-            "criticalInverted",
-            "successInverted",
-            "warningInverted",
+            "infoSubtle",
+            "criticalSubtle",
+            "successSubtle",
+            "warningSubtle",
             "bundleBasic",
             "bundleMedium",
             "bundleTop",

diff --git a/docs/src/__examples__/Badge/TYPES.tsx b/docs/src/__examples__/Badge/TYPES.tsx
@@ -10,18 +10,18 @@ export default {
     { name: "Success", code: `() => <Badge type="success">success</Badge>` },
     { name: "Warning", code: `() => <Badge type="warning">Warning</Badge>` },
     { name: "Critical", code: `() => <Badge type="critical">Critical</Badge>` },
-    { name: "infoInverted", code: `() => <Badge type="infoInverted">InfoInverted</Badge>` },
+    { name: "infoSubtle", code: `() => <Badge type="infoSubtle">InfoSubtle</Badge>` },
     {
-      name: "criticalInverted",
-      code: `() => <Badge type="criticalInverted">CriticalInverted</Badge>`,
+      name: "criticalSubtle",
+      code: `() => <Badge type="criticalSubtle">CriticalSubtle</Badge>`,
     },
     {
-      name: "successInverted",
-      code: `() => <Badge type="SuccessInverted">successInverted</Badge>`,
+      name: "successSubtle",
+      code: `() => <Badge type="SuccessSubtle">successSubtle</Badge>`,
     },
     {
-      name: "warningInverted",
-      code: `() => <Badge type="warningInverted">WarningInverted</Badge>`,
+      name: "warningSubtle",
+      code: `() => <Badge type="warningSubtle">WarningSubtle</Badge>`,
     },
     {
       name: "bundleBasic",

diff --git a/docs/src/__examples__/NotificationBadge/DEFAULT.tsx b/docs/src/__examples__/NotificationBadge/DEFAULT.tsx
@@ -19,10 +19,10 @@ export default {
             "success",
             "critical",
             "warning",
-            "infoInverted",
-            "criticalInverted",
-            "successInverted",
-            "warningInverted",
+            "infoSubtle",
+            "criticalSubtle",
+            "successSubtle",
+            "warningSubtle",
           ],
         },
       ],

diff --git a/docs/src/__examples__/NotificationBadge/TYPES.tsx b/docs/src/__examples__/NotificationBadge/TYPES.tsx
@@ -6,11 +6,11 @@ export default {
     <Stack direction="column">
       <Stack flex>
         <NotificationBadge type="critical">3</NotificationBadge>
-        <NotificationBadge type="criticalInverted">3</NotificationBadge>
+        <NotificationBadge type="criticalSubtle">3</NotificationBadge>
       </Stack>
       <Stack flex>
         <NotificationBadge type="info">3</NotificationBadge>
-        <NotificationBadge type="infoInverted">3</NotificationBadge>
+        <NotificationBadge type="infoSubtle">3</NotificationBadge>
       </Stack>
     </Stack>
   ),

diff --git a/docs/src/components/Navbar/index.tsx b/docs/src/components/Navbar/index.tsx
@@ -245,7 +245,7 @@ const Navbar = ({ location, docNavigation }: Props) => {
                                 {activeTab === "bookmarks" && (
                                   <Stack flex align="center">
                                     <div>Your bookmarks</div>
-                                    <Badge type="infoInverted">
+                                    <Badge type="info">
                                       {bookmarks ? Object.keys(bookmarks).length : 0}
                                     </Badge>
                                   </Stack>
@@ -264,7 +264,7 @@ const Navbar = ({ location, docNavigation }: Props) => {
                             >
                               <Stack flex align="center">
                                 <div>Your bookmarks</div>
-                                <Badge type="infoInverted">
+                                <Badge type="info">
                                   {bookmarks ? Object.keys(bookmarks).length : 0}
                                 </Badge>
                               </Stack>
@@ -301,7 +301,7 @@ const Navbar = ({ location, docNavigation }: Props) => {
                         title={
                           <Stack flex align="center">
                             <div>Your bookmarks</div>
-                            <Badge type="infoInverted">
+                            <Badge type="info">
                               {bookmarks ? Object.keys(bookmarks).length : 0}
                             </Badge>
                           </Stack>

diff --git a/packages/orbit-components/src/Badge/Badge.stories.tsx b/packages/orbit-components/src/Badge/Badge.stories.tsx
@@ -58,16 +58,16 @@ Info.story = {
   },
 };
 
-export const InfoInverted = () => {
+export const InfoSubtle = () => {
   const content = text("Content", "Badge");
   return (
-    <Badge type={TYPE_OPTIONS.INFO_INVERTED} icon={<Icons.Sightseeing />}>
+    <Badge type={TYPE_OPTIONS.INFO_SUBTLE} icon={<Icons.Sightseeing />}>
       {content}
     </Badge>
   );
 };
 
-InfoInverted.story = {
+InfoSubtle.story = {
   parameters: {
     info: "Check Orbit.Kiwi for more detailed design guidelines.",
   },
@@ -88,16 +88,16 @@ Success.story = {
   },
 };
 
-export const SuccessInverted = () => {
+export const SuccessSubtle = () => {
   const content = text("Content", "Badge");
   return (
-    <Badge type={TYPE_OPTIONS.SUCCESS_INVERTED} icon={<Icons.CheckCircle />}>
+    <Badge type={TYPE_OPTIONS.SUCCESS_SUBTLE} icon={<Icons.CheckCircle />}>
       {content}
     </Badge>
   );
 };
 
-SuccessInverted.story = {
+SuccessSubtle.story = {
   parameters: {
     info: "Check Orbit.Kiwi for more detailed design guidelines.",
   },
@@ -118,16 +118,16 @@ Warning.story = {
   },
 };
 
-export const WarningInverted = () => {
+export const WarningSubtle = () => {
   const content = text("Content", "Badge");
   return (
-    <Badge type={TYPE_OPTIONS.WARNING_INVERTED} icon={<Icons.Clock />}>
+    <Badge type={TYPE_OPTIONS.WARNING_SUBTLE} icon={<Icons.Clock />}>
       {content}
     </Badge>
   );
 };
 
-WarningInverted.story = {
+WarningSubtle.story = {
   parameters: {
     info: "Check Orbit.Kiwi for more detailed design guidelines.",
   },
@@ -148,16 +148,16 @@ Critical.story = {
   },
 };
 
-export const CriticalInverted = () => {
+export const CriticalSubtle = () => {
   const content = text("Content", "Badge");
   return (
-    <Badge type={TYPE_OPTIONS.CRITICAL_INVERTED} icon={<Icons.Sightseeing />}>
+    <Badge type={TYPE_OPTIONS.CRITICAL_SUBTLE} icon={<Icons.Sightseeing />}>
       {content}
     </Badge>
   );
 };
 
-CriticalInverted.story = {
+CriticalSubtle.story = {
   parameters: {
     info: "Check Orbit.Kiwi for more detailed design guidelines.",
   },
@@ -209,7 +209,7 @@ BadgeWithTranslatedNode.story = {
 
 export const Playground = () => {
   const content = text("Content", "Badge");
-  const type = select("Type", Object.values(TYPE_OPTIONS), TYPE_OPTIONS.INFO);
+  const type = select("Type", Object.values(TYPE_OPTIONS), TYPE_OPTIONS.INFO_SUBTLE);
   const dataTest = text("dataTest", "test");
   const Icon = getIcon(getIcons("Airplane"));
   const ariaLabel = text("ariaLabel", "test");

diff --git a/packages/orbit-components/src/Badge/README.md b/packages/orbit-components/src/Badge/README.md
@@ -39,21 +39,21 @@ Table below contains all types of the props available for object in Carrier arra
 
 ### enum
 
-| type                 |
-| :------------------- |
-| `"neutral"`          |
-| `"dark"`             |
-| `"info"`             |
-| `"success"`          |
-| `"warning"`          |
-| `"critical"`         |
-| `"infoInverted"`     |
-| `"criticalInverted"` |
-| `"successInverted"`  |
-| `"warningInverted"`  |
-| `"bundleBasic"`      |
-| `"bundleMedium"`     |
-| `"bundleTop"`        |
+| type               |
+| :----------------- |
+| `"neutral"`        |
+| `"dark"`           |
+| `"info"`           |
+| `"success"`        |
+| `"warning"`        |
+| `"critical"`       |
+| `"infoSubtle"`     |
+| `"criticalSubtle"` |
+| `"successSubtle"`  |
+| `"warningSubtle"`  |
+| `"bundleBasic"`    |
+| `"bundleMedium"`   |
+| `"bundleTop"`      |
 
 ## Functional specs
 

diff --git a/packages/orbit-components/src/Badge/consts.ts b/packages/orbit-components/src/Badge/consts.ts
@@ -2,16 +2,16 @@ import type { Type } from "./types";
 
 export const TYPE_OPTIONS: Record<string, Type> = {
   NEUTRAL: "neutral",
+  INFO_SUBTLE: "infoSubtle",
+  SUCCESS_SUBTLE: "successSubtle",
+  WARNING_SUBTLE: "warningSubtle",
+  CRITICAL_SUBTLE: "criticalSubtle",
+  DARK: "dark",
+  WHITE: "white",
   INFO: "info",
+  CRITICAL: "critical",
   SUCCESS: "success",
   WARNING: "warning",
-  CRITICAL: "critical",
-  DARK: "dark",
-  WHITE: "white",
-  INFO_INVERTED: "infoInverted",
-  CRITICAL_INVERTED: "criticalInverted",
-  SUCCESS_INVERTED: "successInverted",
-  WARNING_INVERTED: "warningInverted",
   BUNDLE_BASIC: "bundleBasic",
   BUNDLE_MEDIUM: "bundleMedium",
   BUNDLE_TOP: "bundleTop",

diff --git a/packages/orbit-components/src/Badge/index.js.flow b/packages/orbit-components/src/Badge/index.js.flow
@@ -15,10 +15,10 @@ export type Type =
   | "warning"
   | "critical"
   | "white"
-  | "infoInverted"
-  | "criticalInverted"
-  | "successInverted"
-  | "warningInverted"
+  | "infoSubtle"
+  | "criticalSubtle"
+  | "successSubtle"
+  | "warningSubtle"
   | "bundleBasic"
   | "bundleMedium"
   | "bundleTop";

diff --git a/packages/orbit-components/src/Badge/index.tsx b/packages/orbit-components/src/Badge/index.tsx
@@ -10,32 +10,32 @@ const getTypeToken = ({ name, theme, type }: { name: string; theme: Theme; type:
   const tokens = {
     [TOKENS.background]: {
       [TYPE_OPTIONS.NEUTRAL]: theme.orbit.paletteCloudLight,
-      [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueLight,
-      [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenLight,
-      [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeLight,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedLight,
+      [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.paletteBlueLight,
+      [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.paletteGreenLight,
+      [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.paletteOrangeLight,
+      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedLight,
       [TYPE_OPTIONS.DARK]: theme.orbit.paletteInkDark,
       [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite,
-      [TYPE_OPTIONS.INFO_INVERTED]: theme.orbit.paletteBlueNormal,
-      [TYPE_OPTIONS.CRITICAL_INVERTED]: theme.orbit.paletteRedNormal,
-      [TYPE_OPTIONS.SUCCESS_INVERTED]: theme.orbit.paletteGreenNormal,
-      [TYPE_OPTIONS.WARNING_INVERTED]: theme.orbit.paletteOrangeNormal,
+      [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueNormal,
+      [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedNormal,
+      [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenNormal,
+      [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeNormal,
       [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.backgroundBadgeBundleBasic,
       [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.backgroundBadgeBundleMedium,
       [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.backgroundBadgeBundleTop,
     },
     [TOKENS.color]: {
       [TYPE_OPTIONS.NEUTRAL]: theme.orbit.paletteInkDark,
-      [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDark,
-      [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDark,
-      [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDark,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDark,
+      [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.paletteBlueDark,
+      [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.paletteGreenDark,
+      [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.paletteOrangeDark,
+      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedDark,
       [TYPE_OPTIONS.DARK]: theme.orbit.paletteWhite,
       [TYPE_OPTIONS.WHITE]: theme.orbit.paletteInkDark,
-      [TYPE_OPTIONS.INFO_INVERTED]: theme.orbit.paletteWhite,
-      [TYPE_OPTIONS.CRITICAL_INVERTED]: theme.orbit.paletteWhite,
-      [TYPE_OPTIONS.SUCCESS_INVERTED]: theme.orbit.paletteWhite,
-      [TYPE_OPTIONS.WARNING_INVERTED]: theme.orbit.paletteWhite,
+      [TYPE_OPTIONS.INFO]: theme.orbit.paletteWhite,
+      [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteWhite,
+      [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteWhite,
+      [TYPE_OPTIONS.WARNING]: theme.orbit.paletteWhite,
       [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite,
       [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite,
       [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite,

diff --git a/packages/orbit-components/src/Badge/types.d.ts b/packages/orbit-components/src/Badge/types.d.ts
@@ -13,10 +13,10 @@ export type Type =
   | "warning"
   | "critical"
   | "white"
-  | "infoInverted"
-  | "criticalInverted"
-  | "successInverted"
-  | "warningInverted"
+  | "infoSubtle"
+  | "criticalSubtle"
+  | "successSubtle"
+  | "warningSubtle"
   | "bundleBasic"
   | "bundleMedium"
   | "bundleTop";

diff --git a/packages/orbit-components/src/Card/Card.stories.tsx b/packages/orbit-components/src/Card/Card.stories.tsx
@@ -199,7 +199,7 @@ export const CardWithDefaultExpanded = () => {
         header={
           <Stack inline align="center" justify="end">
             <Text type="secondary">Trip length: 1h55m</Text>
-            <Badge icon={<Clock />} type="warning">
+            <Badge icon={<Clock />} type="warningSubtle">
               Unavailable
             </Badge>
           </Stack>
@@ -221,7 +221,7 @@ export const CardWithDefaultExpanded = () => {
         header={
           <Stack inline justify="end">
             <Text type="secondary">Trip length: 1h55m</Text>
-            <Badge icon={<Clock />} type="warning">
+            <Badge icon={<Clock />} type="warningSubtle">
               Unavailable
             </Badge>
           </Stack>

diff --git a/packages/orbit-components/src/NotificationBadge/NotificationBadge.stories.tsx b/packages/orbit-components/src/NotificationBadge/NotificationBadge.stories.tsx
@@ -50,12 +50,12 @@ Info.story = {
   },
 };
 
-export const InfoInverted = () => {
+export const InfoSubtle = () => {
   const content = text("Content", "10");
-  return <NotificationBadge type={TYPE_OPTIONS.INFO_INVERTED}>{content}</NotificationBadge>;
+  return <NotificationBadge type={TYPE_OPTIONS.INFO_SUBTLE}>{content}</NotificationBadge>;
 };
 
-InfoInverted.story = {
+InfoSubtle.story = {
   parameters: {
     info: "Check Orbit.Kiwi for more detailed design guidelines.",
   },
@@ -94,12 +94,12 @@ Critical.story = {
   },
 };
 
-export const CriticalInverted = () => {
+export const CriticalSubtle = () => {
   const content = text("Content", "10");
-  return <NotificationBadge type={TYPE_OPTIONS.CRITICAL_INVERTED}>{content}</NotificationBadge>;
+  return <NotificationBadge type={TYPE_OPTIONS.CRITICAL_SUBTLE}>{content}</NotificationBadge>;
 };
 
-CriticalInverted.story = {
+CriticalSubtle.story = {
   parameters: {
     info: "Check Orbit.Kiwi for more detailed design guidelines.",
   },

diff --git a/packages/orbit-components/src/NotificationBadge/README.md b/packages/orbit-components/src/NotificationBadge/README.md
@@ -27,13 +27,13 @@ Table below contains all types of the props available in NotificationBadge compo
 
 ### enum
 
-| type                 |
-| :------------------- |
-| `"neutral"`          |
-| `"dark"`             |
-| `"info"`             |
-| `"success"`          |
-| `"warning"`          |
-| `"critical"`         |
-| `"infoInverted"`     |
-| `"criticalInverted"` |
+| type               |
+| :----------------- |
+| `"neutral"`        |
+| `"dark"`           |
+| `"info"`           |
+| `"success"`        |
+| `"warning"`        |
+| `"critical"`       |
+| `"infoSubtle"`     |
+| `"criticalSubtle"` |