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/SelectHotel/Filters/FilterAndSortModal/index.tsx

@@ -135,7 +135,7 @@ export default function FilterAndSortModal({
   return (
     <>
       <DialogTrigger>
-        <Button variant="Secondary" size="Small" color="Primary">
+        <Button variant="Secondary" size="sm" color="Primary">
           <MaterialIcon icon="filter_alt" color="CurrentColor" />
           <Typography variant="Body/Supporting text (caption)/smBold">
             <p>
@@ -176,9 +176,8 @@ export default function FilterAndSortModal({
                         id: "common.close",
                         defaultMessage: "Close",
                       })}
-                    >
-                      <MaterialIcon icon="close" />
-                    </IconButton>
+                      iconName="close"
+                    />
                   </header>
                   <div className={styles.sorter}>
                     <DeprecatedSelect
@@ -217,8 +216,8 @@ export default function FilterAndSortModal({
                     <Button
                       variant="Tertiary"
                       color="Primary"
-                      size="Large"
-                      onClick={() => handleApplyFiltersAndSorting(close)}
+                      size="lg"
+                      onPress={() => handleApplyFiltersAndSorting(close)}
                     >
                       <Typography variant="Body/Paragraph/mdBold">
                         <p>
@@ -238,13 +237,13 @@ export default function FilterAndSortModal({
                       </Typography>
                     </Button>
                     <Button
-                      onClick={() => {
+                      onPress={() => {
                         setSelectedFilters([])
                         setFilteredCount(unfilteredResultCount)
                       }}
                       variant="Text"
                       color="Primary"
-                      size="Medium"
+                      size="md"
                     >
                       <Typography variant="Body/Paragraph/mdBold">
                         <p>

packages/booking-flow/lib/components/SelectHotel/MapWithButtonWrapper/index.tsx

@@ -14,8 +14,7 @@ export function MapWithButtonWrapper({ children }: React.PropsWithChildren) {
       <FakeButton
         variant="Primary"
         color="Inverted"
-        size="Small"
-        typography="Body/Supporting text (caption)/smBold"
+        size="sm"
         className={styles.button}
       >
         <MaterialIcon icon="map" color="CurrentColor" size={20} />

packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -168,7 +168,7 @@ export function SelectHotelMapContent({
       variant="Primary"
       color="Inverted"
       wrapping
-      size="Small"
+      size="sm"
       className={styles.closeButton}
     >
       <Link
@@ -216,7 +216,7 @@ export function SelectHotelMapContent({
           <Button
             variant="Text"
             type="button"
-            size="Small"
+            size="sm"
             className={styles.filterContainerCloseButton}
           >
             <Link href={closeMapUrl} keepSearchParams className={styles.link}>