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/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>
           )