Merged in fix/BOOK-61-update-chip (pull request #3041)

fix(BOOK-61): update chip

* fix(BOOK-61): update chip

* fix(BOOK-61): revert chip changes


Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx

@@ -6,10 +6,9 @@ import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { logger } from "@scandic-hotels/common/logger"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
-import Chip from "@scandic-hotels/design-system/Chip"
+import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { useSelectRateContext } from "../../../../../../contexts/SelectRate/SelectRateContext"
@@ -80,19 +79,17 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
         ) : null}
         {showModifyButton && (
           <div className={styles.modifyButtonContainer}>
-            <Button clean onClick={() => setActiveRoom(roomIndex)}>
-              <Chip size="small" variant="uiTextHighContrast">
-                <MaterialIcon
-                  size={16}
-                  color="Icon/Inverted"
-                  icon="edit_square"
-                />
-                {intl.formatMessage({
-                  id: "common.change",
-                  defaultMessage: "Change",
-                })}
-              </Chip>
-            </Button>
+            <ChipButton
+              size="Medium"
+              onClick={() => setActiveRoom(roomIndex)}
+              variant="Outlined"
+            >
+              {intl.formatMessage({
+                id: "common.change",
+                defaultMessage: "Change",
+              })}
+              <MaterialIcon size={20} color="CurrentColor" icon="edit_square" />
+            </ChipButton>
           </div>
         )}
       </div>

packages/design-system/lib/components/Chip/index.tsx

@@ -1,12 +1,15 @@
-import { Typography } from '../Typography'
-
 import { VariantProps } from 'class-variance-authority'
 import { chipVariants } from './variants'
+import Footnote from '../Footnote'
 
 export interface ChipProps
   extends React.HtmlHTMLAttributes<HTMLDivElement>,
     VariantProps<typeof chipVariants> {}
 
+/**
+ * @deprecated Do not use
+ */
+
 export default function Chip({
   children,
   className,
@@ -19,8 +22,8 @@ export default function Chip({
     variant,
   })
   return (
-    <Typography variant="Tag/sm">
-      <span className={classNames}>{children}</span>
-    </Typography>
+    <Footnote asChild>
+      <div className={classNames}>{children}</div>
+    </Footnote>
   )
 }

packages/design-system/lib/components/ChipButton/chip-button.module.css

@@ -1,7 +1,7 @@
 .chip {
   background-color: var(--Component-Button-Inverted-Fill-Default);
   border-radius: var(--Corner-radius-sm);
-  padding: var(--Space-x1) var(--Space-x15);
+  padding: 6px var(--Space-x15);
   color: var(--Text-Interactive-Default);
   display: inline-flex;
   align-items: center;