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
2025-12-19 12:32:52 +00:00
parent 2197ab2137
commit 3f632e6031
169 changed files with 665 additions and 944 deletions
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx
@@ -78,7 +78,7 @@ export default function AdditionalInfoForm({
          <Button
            type="submit"
            variant="Primary"
-            size="Medium"
+            size="md"
            isDisabled={form.formState.isSubmitting}
          >
            {intl.formatMessage({
--- a/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx
@@ -171,7 +171,7 @@ export default function FindMyBooking({
          <Button
            type="submit"
            variant="Primary"
-            size="Large"
+            size="lg"
            isDisabled={form.formState.isSubmitting || update.isPending}
          >
            {intl.formatMessage({
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/SelectDeliveryTime/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/SelectDeliveryTime/index.tsx
@@ -64,7 +64,7 @@ export default function SelectDeliveryTime() {
      <Button
        wrapping={false}
        variant="Text"
-        size="Small"
+        size="sm"
        color="Primary"
        className={styles.changeButton}
        onPress={() => setShowChangeTime(true)}
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Steps/DeliveryDetailsStep/index.tsx
@@ -73,7 +73,7 @@ export default function DeliveryMethodStep() {
            <Button
              wrapping={false}
              variant="Text"
-              size="Small"
+              size="sm"
              color="Primary"
              className={styles.requestButton}
              onPress={() => setShowSpecialRequests(true)}
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Summary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/Summary/index.tsx
@@ -185,8 +185,7 @@ export default function Summary({ onSubmit }: { onSubmit: () => void }) {
          {isConfirmation && (
            <Button
              type="button"
-              typography="Body/Supporting text (caption)/smBold"
-              size="Small"
+              size="sm"
              variant="Text"
              onPress={togglePriceDetails}
              className={styles.priceButton}
@@ -209,10 +208,9 @@ export default function Summary({ onSubmit }: { onSubmit: () => void }) {

          <div className={styles.buttons}>
            <Button
-              typography="Body/Supporting text (caption)/smBold"
              type="button"
              variant="Text"
-              size="Medium"
+              size="sm"
              color="Primary"
              wrapping={false}
              onPress={prevStep}
@@ -220,11 +218,8 @@ export default function Summary({ onSubmit }: { onSubmit: () => void }) {
              {secondaryButtonLabel}
            </Button>
            <Button
-              typography="Body/Supporting text (caption)/smBold"
-              size="Medium"
-              isDisabled={
-                isSubmitting || (isConfirmation && !!Object.keys(errors).length)
-              }
+              size="sm"
+              isDisabled={isSubmitting}
              isPending={isSubmitting}
              onPress={handleNextStep}
              variant={isSingleItem || isConfirmation ? "Primary" : "Secondary"}
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AllAncillariesModal/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AllAncillariesModal/index.tsx
@@ -24,7 +24,7 @@ export default function AllAncillariesModal() {
    <div>
      <Button
        variant="Text"
-        size="Small"
+        size="sm"
        color="Primary"
        onPress={() => setIsOpen(true)}
      >
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotUpcoming/CustomerSupport.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotUpcoming/CustomerSupport.tsx
@@ -11,11 +11,7 @@ export default function CustomerSupport() {

  return (
    <DialogTrigger>
-      <Button
-        variant="Secondary"
-        size="Small"
-        typography="Body/Supporting text (caption)/smBold"
-      >
+      <Button variant="Secondary" size="sm">
        {intl.formatMessage({
          id: "common.customerSupport",
          defaultMessage: "Customer support",
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotUpcoming/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotUpcoming/index.tsx
@@ -46,12 +46,7 @@ export default function NotUpcoming() {
  return (
    <>
      {!isWebview(pathname) && (
-        <ButtonLink
-          variant="Tertiary"
-          size="Medium"
-          href={url}
-          typography="Body/Supporting text (caption)/smBold"
-        >
+        <ButtonLink variant="Tertiary" size="md" href={url}>
          {intl.formatMessage({
            defaultMessage: "Rebook",
            id: "myStay.referenceCard.actions.rebook",
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ActionsButton/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ActionsButton/index.tsx
@@ -24,7 +24,6 @@ export default function ActionsButton({
      wrapping={false}
      onPress={onPress}
      isDisabled={isDisabled}
-      typography="Body/Paragraph/mdBold"
    >
      <MaterialIcon color="CurrentColor" icon={icon} className={styles.icon} />
      <span>{text}</span>
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/index.tsx
@@ -25,12 +25,7 @@ export default function ManageStay() {
  }
  return (
    <>
-      <Button
-        size="Medium"
-        variant="Tertiary"
-        typography="Body/Supporting text (caption)/smBold"
-        onPress={() => setIsOpen(true)}
-      >
+      <Button size="md" variant="Tertiary" onPress={() => setIsOpen(true)}>
        <span>{manageStay}</span>
        <MaterialIcon color="CurrentColor" icon="keyboard_arrow_down" />
      </Button>
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/index.tsx
@@ -20,10 +20,9 @@ export default function Upcoming() {
      <ManageStay />
      <ButtonLink
        variant="Secondary"
-        size="Medium"
+        size="md"
        target="_blank"
        href={directionsUrl}
-        typography="Body/Supporting text (caption)/smBold"
      >
        <span>
          {intl.formatMessage({
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/GuaranteeInfo/GuaranteeInfoModal/index.tsx
@@ -59,8 +59,7 @@ export function GuaranteeInfoModal() {
            className={styles.closeButton}
            variant="Secondary"
            color="Primary"
-            size="Medium"
-            typography="Body/Paragraph/mdBold"
+            size="md"
            onPress={() => setIsOpen(false)}
          >
            {intl.formatMessage({
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
@@ -268,13 +268,9 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
                      variant="Muted"
                      emphasis
                      className={styles.termsInfoIcon}
-                    >
-                      <MaterialIcon
-                        icon="info"
-                        color="Icon/Default"
-                        size={20}
-                      />
-                    </IconButton>
+                      iconName="info"
+                      size="md"
+                    />
                  }
                >
                  <div className={styles.terms}>
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx
@@ -55,9 +55,8 @@ export default function Terms() {
              emphasis
              size="sm"
              className={styles.button}
-            >
-              <MaterialIcon icon="info" color="Icon/Default" size={20} />
-            </IconButton>
+              iconName="info"
+            />
          }
        >
          <div className={styles.terms}>
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx
@@ -34,7 +34,7 @@ export default function RoomDetailsSidePeek({
    <>
      <Button
        variant="Text"
-        size="Small"
+        size="sm"
        color="Primary"
        wrapping
        onPress={() => {