Merged in fix/BOOK-293-button-variants (pull request #3371)

fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): inherit color for icon


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css

@@ -90,6 +90,7 @@
 @media screen and (min-width: 768px) and (max-width: 1366px) {
   .container {
     display: flex;
+    align-items: center;
   }
   .codePopover {
     background: var(--Base-Surface-Primary-light-Normal);

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx

@@ -230,13 +230,7 @@ function CodeRulesModal() {
   return (
     <Modal
       trigger={
-        <IconButton variant="Muted" size="sm" emphasis>
-          <MaterialIcon
-            icon="info"
-            color="Icon/Interactive/Placeholder"
-            size={20}
-          />
-        </IconButton>
+        <IconButton variant="Muted" size="sm" emphasis iconName="info" />
       }
       title={codeVoucher}
     >
@@ -264,7 +258,7 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
       </Checkbox>
       {bookingCodeValue ? (
         <Button
-          size="Small"
+          size="sm"
           className={styles.hideOnMobile}
           variant="Tertiary"
           type="button"

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RemoveExtraRooms/RemoveExtraRooms.tsx

@@ -24,7 +24,7 @@ export function RemoveExtraRooms({ ...props }: ButtonProps) {
       style={{ width: "100%" }}
       type="button"
       onClick={removeExtraRooms}
-      size="Small"
+      size="sm"
       variant="Secondary"
       {...props}
     >

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/RewardNight/index.tsx

@@ -101,14 +101,7 @@ export default function RewardNight() {
           </Typography>
           <Modal
             trigger={
-              <IconButton variant="Muted" emphasis size="sm">
-                <MaterialIcon
-                  icon="info"
-                  size={20}
-                  color="Icon/Interactive/Placeholder"
-                  className={styles.errorIcon}
-                />
-              </IconButton>
+              <IconButton variant="Muted" emphasis size="sm" iconName="info" />
             }
             title={reward}
           >

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/index.tsx

@@ -181,7 +181,7 @@ export function Search({
                 <Typography variant="Body/Supporting text (caption)/smBold">
                   <Button
                     variant="Text"
-                    size="Small"
+                    size="sm"
                     aria-label={intl.formatMessage({
                       id: "common.clear",
                       defaultMessage: "Clear",
@@ -197,7 +197,7 @@ export function Search({
                 <Button
                   className={styles.searchButton}
                   variant="Primary"
-                  size="Small"
+                  size="sm"
                   type="submit"
                   onPress={() => {
                     if (!searchTerm) {

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx

@@ -10,7 +10,6 @@ import { hotelreservation } from "@scandic-hotels/common/constants/routes/hotelR
 import { dt } from "@scandic-hotels/common/dt"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
@@ -119,9 +118,8 @@ export default function FormContent({
           form={formId}
           type="submit"
           isDisabled={isSearching}
-        >
-          <MaterialIcon icon="search" color="CurrentColor" size={28} />
-        </IconButton>
+          iconName="search"
+        />
       </div>
       <div
         className={cx(
@@ -147,10 +145,9 @@ export default function FormContent({
           className={styles.submitButton}
           form={formId}
           variant="Primary"
-          size="Medium"
+          size="md"
           type="submit"
           isDisabled={isSearching}
-          typography="Body/Supporting text (caption)/smBold"
         >
           {isDirty && isBookingFlow
             ? intl.formatMessage({
@@ -210,9 +207,13 @@ export function BookingWidgetFormContentSkeleton() {
         </div>
       </div>
       <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
-        <IconButton variant="Filled" size="xl" type="submit" isDisabled>
-          <MaterialIcon icon="search" color="CurrentColor" size={28} />
-        </IconButton>
+        <IconButton
+          variant="Filled"
+          size="xl"
+          type="submit"
+          isDisabled
+          iconName="search"
+        />
       </div>
       <div className={cx(styles.voucherContainer, styles.voucherRow)}>
         <VoucherSkeleton />
@@ -221,10 +222,9 @@ export function BookingWidgetFormContentSkeleton() {
         <Button
           className={styles.submitButton}
           variant="Primary"
-          size="Medium"
+          size="md"
           type="submit"
           isDisabled
-          typography="Body/Supporting text (caption)/smBold"
         >
           {intl.formatMessage({
             id: "bookingWidget.button.search",