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/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/index.tsx

@@ -91,13 +91,12 @@ export default function SummaryContent({
             onPress={toggleSummaryOpen}
             variant="Muted"
             emphasis
-          >
-            <MaterialIcon
-              icon="keyboard_arrow_down"
-              size={20}
-              color="CurrentColor"
-            />
-          </IconButton>
+            aria-label={intl.formatMessage({
+              id: "common.close",
+              defaultMessage: "Close",
+            })}
+            iconName="keyboard_arrow_down"
+          />
         </div>
         <Typography variant="Body/Paragraph/mdBold">
           <p className={styles.dates}>

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/index.tsx

@@ -159,7 +159,6 @@ export default function Room({
                   <Button
                     className={styles.termsButton}
                     variant="Text"
-                    typography="Body/Supporting text (caption)/smBold"
                     wrapping={false}
                   >
                     {intl.formatMessage({

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx

@@ -137,9 +137,8 @@ export function MobileSummary() {
         <Button
           variant="Primary"
           color="Primary"
-          size="Large"
+          size="lg"
           type="submit"
-          typography="Body/Paragraph/mdBold"
           isDisabled={selectedRates.state !== "ALL_SELECTED"}
         >
           {intl.formatMessage({

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx

@@ -56,7 +56,7 @@ export function RoomPackagesForm({
           <Divider color="Border/Divider/Subtle" className={styles.divider} />
           <div className={styles.buttonContainer}>
             <Typography variant="Body/Supporting text (caption)/smBold">
-              <Button variant="Tertiary" size="Small" type="submit">
+              <Button variant="Tertiary" size="sm" type="submit">
                 {intl.formatMessage({
                   id: "common.apply",
                   defaultMessage: "Apply",
@@ -64,11 +64,7 @@ export function RoomPackagesForm({
               </Button>
             </Typography>
             <Typography variant="Body/Supporting text (caption)/smBold">
-              <Button
-                onPress={clearSelectedPackages}
-                size="Small"
-                variant="Text"
-              >
+              <Button onPress={clearSelectedPackages} size="sm" variant="Text">
                 {intl.formatMessage({
                   id: "common.clear",
                   defaultMessage: "Clear",

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Modal.tsx

@@ -64,9 +64,12 @@ export function RoomPackageFilterModal({
                 variant="Muted"
                 emphasis
                 onPress={() => setIsOpen(false)}
-              >
-                <MaterialIcon icon="close" size={24} color="CurrentColor" />
-              </IconButton>
+                aria-label={intl.formatMessage({
+                  id: "common.close",
+                  defaultMessage: "Close",
+                })}
+                iconName="close"
+              />
             </div>
             <RoomPackagesForm
               close={() => setIsOpen(false)}

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx

@@ -100,6 +100,7 @@ export function RoomPackageFilter({ roomIndex }: { roomIndex: number }) {
                 {filterLabel}
                 <IconButton
                   variant="Muted"
+                  emphasis
                   onPress={() => deletePackage(pkg.code)}
                   aria-label={intl.formatMessage(
                     {
@@ -111,13 +112,9 @@ export function RoomPackageFilter({ roomIndex }: { roomIndex: number }) {
                     }
                   )}
                   className={styles.removeButton}
-                >
-                  <MaterialIcon
-                    icon="close"
-                    size={16}
-                    color="Icon/Interactive/Default"
-                  />
-                </IconButton>
+                  iconName="close"
+                  size="sm"
+                />
               </span>
             </Typography>
           )