@transferwise/components 46.165.4 → 46.166.0

package/src/Typeahead/Typeahead.less

@@ -35,13 +35,6 @@
   &--multiple {
     .np-chip {
       margin-bottom: auto;
-      animation-name: slide;
-      animation-duration: @animation-duration;
-      animation-timing-function: @animation-timing-function;
-
-      &:first-child {
-        animation-name: slideFirst;
-      }
 
       &-remove {
         animation-name: fadeIn;
@@ -55,7 +48,11 @@
       min-height: auto;
       padding-top: 0;
       padding-bottom: 0;
-      overflow: auto;
+      overflow: visible;
+    }
+
+    .typeahead__input-container--scrollable {
+      overflow-y: auto;
     }
 
     .typeahead__input {
@@ -98,14 +95,14 @@
       }
 
       .typeahead__input {
-        margin-bottom: calc(-1 * var(--size-8) + 1px);
+        margin-bottom: calc(-1 * var(--size-8));
         margin-left: var(--size-4);
       }
 
       .typeahead__input-wrapper {
         &::after {
           content: "";
-          height: calc(var(--size-8) - 1);
+          height: var(--size-8);
           width: 100%;
         }
       }
@@ -165,7 +162,7 @@
       }
 
       .typeahead__input {
-        padding-top: calc(var(--size-8) - 1);
+        padding-top: var(--size-8);
       }
 
       .typeahead__input-wrapper {
@@ -183,26 +180,6 @@
     }
   }
 
-  @keyframes slide {
-    from {
-      transform: translateX(-12px);
-    }
-
-    to {
-      transform: none;
-    }
-  }
-
-  @keyframes slideFirst {
-    from {
-      transform: translateX(-4px);
-    }
-
-    to {
-      transform: none;
-    }
-  }
-
   @keyframes fadeIn {
     from {
       opacity: 0;
@@ -229,10 +206,11 @@
       color: var(--color-interactive-secondary);
     }
     .np-chip {
-      margin-top: 9px !important;
+      margin-top: var(--size-8);
     }
     .np-chip--removable {
-      .np-text-body-default-bold {
+      .np-text-body-default-bold,
+      .wds-text-body-default-bold {
         padding-right: var(--size-16);
         @media (--screen-400-zoom) {
           padding-right: var(--size-32);

package/src/Typeahead/TypeaheadInput/TypeaheadInput.tsx

@@ -65,10 +65,8 @@ export default class TypeaheadInput<T> extends Component<
   }
 
   recalculateWidth = () => {
-    requestAnimationFrame(() => {
-      this.setState({
-        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10),
-      });
+    this.setState({
+      inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, (this.sizerRef.current?.scrollWidth ?? 0) + 10),
     });
   };
 
@@ -131,7 +129,9 @@ export default class TypeaheadInput<T> extends Component<
 
           return multiple ? (
             <div
-              className="form-control typeahead__input-container"
+              className={clsx('form-control typeahead__input-container', {
+                'typeahead__input-container--scrollable': maxHeight != null,
+              })}
               style={{ maxHeight }}
               onClick={() => {
                 this.inputRef.current?.focus();

package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx

@@ -30,10 +30,10 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
     >
       <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
         <Highlight value={label} query={query} />
-        {note && <span className="np-text-body-default m-l-1">{note}</span>}
+        {note && <span className="np-text-body-default wds-text-body-default m-l-1">{note}</span>}
         {secondary && (
           <Highlight
-            className="np-text-body-default text-ellipsis"
+            className="np-text-body-default wds-text-body-default text-ellipsis"
             value={secondary}
             query={query}
           />

package/src/Typeahead/_stories/Typeahead.rtl.test.story.tsx

@@ -87,7 +87,7 @@ export const TriggerVariants: Story = {
       </>
     );
   },
-  ...withRTLDiff({ width: '80%', i18n: localisedStrings }),
+  ...withRTLDiff({ fixedRows: { heights: 'auto' }, width: '80%', i18n: localisedStrings }),
 };
 
 export const OpenDropdown: Story = {

package/src/Typeahead/_stories/Typeahead.test.story.tsx

@@ -112,3 +112,68 @@ export const AutoFocusInModal: Story = {
     );
   },
 };
+
+const testEmails = [
+  { label: 'alex@example.com' },
+  { label: 'bruno.silva@example.com' },
+  { label: 'chen@example.com' },
+  { label: 'dana.khan@example.com' },
+  { label: 'emeka@example.com' },
+];
+
+export const Chips: Story = {
+  render: () => (
+    <div className="d-flex flex-column">
+      <Field id="typeahead-chips-one-row" label="One row">
+        <Typeahead
+          id="typeahead-chips-one-row"
+          name="typeahead-chips-one-row"
+          multiple
+          allowNew
+          showSuggestions={false}
+          initialValue={testEmails.slice(0, 2)}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="typeahead-chips-wrapped" label="Wrapped over several rows">
+        <Typeahead
+          id="typeahead-chips-wrapped"
+          name="typeahead-chips-wrapped"
+          multiple
+          allowNew
+          showSuggestions={false}
+          initialValue={testEmails}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="typeahead-chips-capped" label="Capped with maxHeight">
+        <Typeahead
+          id="typeahead-chips-capped"
+          name="typeahead-chips-capped"
+          multiple
+          allowNew
+          showSuggestions={false}
+          maxHeight={100}
+          initialValue={testEmails}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+      <Field id="typeahead-chips-large" label="Large">
+        <Typeahead
+          id="typeahead-chips-large"
+          name="typeahead-chips-large"
+          size="lg"
+          multiple
+          allowNew
+          showSuggestions={false}
+          initialValue={testEmails.slice(0, 2)}
+          options={[]}
+          onChange={() => {}}
+        />
+      </Field>
+    </div>
+  ),
+};

package/src/Upload/Steps/UploadImageStep/UploadImageStep.tsx

@@ -78,8 +78,10 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
       <div className="droppable-default-card" aria-hidden={isComplete}>
         <div className="droppable-card-content">
           <div className="m-b-3">{this.getImage()}</div>
-          {usLabel && <h4 className="np-text-title-body m-b-1">{usLabel}</h4>}
-          {usPlaceholder && <p className="np-text-body-large m-b-3">{String(usPlaceholder)}</p>}
+          {usLabel && <h4 className="np-text-title-body wds-text-title-body m-b-1">{usLabel}</h4>}
+          {usPlaceholder && (
+            <p className="np-text-body-large wds-text-body-large m-b-3">{String(usPlaceholder)}</p>
+          )}
           <label
             className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}
             role="button"

package/src/Upload/_stories/Upload.rtl.test.story.tsx

@@ -34,6 +34,7 @@ export const Sizes: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: 'auto' },
     i18n: {
       smallUpload: { en: 'Small upload', ar: 'منطقة رفع صغيرة' },
       mediumUpload: { en: 'Medium upload', ar: 'منطقة رفع متوسطة' },

package/src/UploadInput/UploadInput.css

@@ -9,7 +9,7 @@
   border-radius: var(--radius-small);
   border-block-end: var(--outerBorder);
 }
-.np-upload-input .np-upload-input__section:has(.np-upload-input__item:last-child.is-interactive:hover):not(:has(.np-upload-input__item-button:hover)) + .np-upload-input__section--uploader .np-upload-input__upload-button::before {
+.np-upload-input .np-upload-input__section:has(.np-upload-input__item:last-child.is-interactive:hover):not( :has(.np-upload-input__item-button:hover)) + .np-upload-input__section--uploader .np-upload-input__upload-button::before {
   inset-inline-start: 0;
   inline-size: 100%;
   inset-block-start: 0;

package/src/UploadInput/UploadInput.less

@@ -1,6 +1,6 @@
 @import (reference) "./../styles/less/ring.less";
 @import (reference) "./../styles/less/mixins/_links.less";
-@import (reference) './UploadItem/UploadItem.less';
+@import (reference) "./UploadItem/UploadItem.less";
 
 .np-upload-input {
   --outerBorder: 1px solid var(--color-interactive-secondary);
@@ -20,11 +20,14 @@
     // if the last item in the file list is interactive (not an error)
     // and the user is hovering over it, then we need to adjust the
     // bottom separator, which happens to be in .np-upload-input__section--uploader
-    &:has(.np-upload-input__item:last-child.is-interactive:hover):not(:has(.np-upload-input__item-button:hover))
-    + .np-upload-input__section--uploader .np-upload-input__upload-button::before {
+    &:has(.np-upload-input__item:last-child.is-interactive:hover):not(
+        :has(.np-upload-input__item-button:hover)
+      )
+      + .np-upload-input__section--uploader
+      .np-upload-input__upload-button::before {
       left: 0;
       width: 100%;
       top: 0;
     }
   }
-}
+}

package/src/UploadInput/_stories/UploadInput.test.story.tsx

@@ -344,6 +344,7 @@ export const RTLDiff: Story = {
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: [8, 8, 46] },
     renderAs: 'iframe',
     i18n: {
       singleUpload: { en: 'single-upload.pdf', ar: 'تحميل-واحد.pdf' },

package/src/_deprecated/ActionButton/ActionButton.css

@@ -4,10 +4,9 @@
   padding-block: var(--size-8);
   padding-inline: var(--size-12);
   transition: color, background-color 0.15s ease-in-out;
-  font-weight: var(--font-weight-semi-bold);
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-control);
-  border-radius: var(--radius-small);
+  font-weight: var(--wds-font-weight-body-bold);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body);
   align-items: center;
   color: var(--color-interactive-control);
   background-color: var(--color-interactive-accent);

package/src/_deprecated/ActionButton/ActionButton.less

@@ -5,10 +5,9 @@
   height: var(--size-32);
   padding: var(--size-8) var(--size-12);
   transition: color, background-color 0.15s ease-in-out;
-  font-weight: var(--font-weight-semi-bold);
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-control);
-  border-radius: var(--radius-small);
+  font-weight: var(--wds-font-weight-body-bold);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body);
   align-items: center;
   color: var(--color-interactive-control);
   background-color: var(--color-interactive-accent);
@@ -46,7 +45,7 @@
       box-shadow: none;
       border-color: transparent;
       background-color: var(--color-interactive-accent-active);
-      
+
       &.btn-priority-2 {
         background-color: var(--color-background-neutral-active);
       }

package/src/_deprecated/ActionButton/ActionButton.tsx

@@ -36,7 +36,7 @@ const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
       type="button"
       className={clsx(
         'np-action-btn',
-        'np-text-body-default-bold',
+        'np-text-body-default-bold wds-text-body-default-bold',
         priority === Priority.TERTIARY
           ? 'btn-priority-3'
           : priority === Priority.SECONDARY

package/src/_deprecated/Avatar/Avatar.css

@@ -40,7 +40,7 @@
 .tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
 }
 .tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--icon {
@@ -51,7 +51,7 @@
   font-family: Arial, sans-serif;
 }
 .tw-avatar.tw-avatar--branded .tw-avatar__content {
-  font-family: var(--font-family-display);
+  font-family: var(--wds-font-family-display);
   font-feature-settings: "ss01";
   color: var(--color-dark-charcoal);
   line-height: 1;

package/src/_deprecated/Avatar/Avatar.less

@@ -55,7 +55,7 @@
   &.tw-avatar--initials,
   &.tw-avatar--emoji {
     font-family: Arial, sans-serif;
-    font-weight: var(--font-weight-semi-bold);
+    font-weight: var(--wds-font-weight-body-bold);
   }
 
   &.tw-avatar--initials,
@@ -71,7 +71,7 @@
   }
 
   &.tw-avatar--branded .tw-avatar__content {
-    font-family: var(--font-family-display);
+    font-family: var(--wds-font-family-display);
     font-feature-settings: "ss01";
     color: var(--color-dark-charcoal);
     line-height: 1;

package/src/_deprecated/Avatar/Avatar.tsx

@@ -86,7 +86,7 @@ const Avatar: React.FC<AvatarProps> = ({
       className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
         'tw-avatar--outlined': outlined,
         'tw-avatar--branded': Boolean(backgroundColorFromSeed),
-        'np-text-title-body': type === 'initials',
+        'np-text-title-body wds-text-title-body': type === 'initials',
       })}
       aria-label={ariaLabel}
     >

package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css

@@ -7,7 +7,8 @@
   color: var(--color-sentiment-content-primary);
   margin-block-end: 0;
 }
-.critical-comms .alert .np-text-title-body {
+.critical-comms .alert .np-text-title-body,
+.critical-comms .alert .wds-text-title-body {
   color: var(--color-sentiment-content-primary);
 }
 .critical-comms .status-circle.negative {

package/src/_deprecated/CriticalBanner/CriticalCommsBanner.less

@@ -7,7 +7,8 @@
     color: var(--color-sentiment-content-primary);
     margin-bottom: 0;
 
-    .np-text-title-body {
+    .np-text-title-body,
+    .wds-text-title-body {
       color: var(--color-sentiment-content-primary);
     }
   }

package/src/_deprecated/NavigationOption/_stories/NavigationOption.story.tsx

@@ -74,7 +74,7 @@ export const Variants: StoryObj<StoryArgs> = {
   render: ({ hasTitleOnly, ...args }: StoryArgs) => (
     <div>
       <div className="m-b-2">
-        <div className="title-4 m-b-1">Has Title Only</div>
+        <div className="wds-text-title-body m-b-1">Has Title Only</div>
         <NavigationOption
           {...args}
           content={null}
@@ -83,7 +83,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-b-2">
-        <div className="title-4 m-b-1">Full Content</div>
+        <div className="wds-text-title-body m-b-1">Full Content</div>
         <NavigationOption
           {...args}
           content={hasTitleOnly ? null : args.content}
@@ -92,7 +92,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-b-2">
-        <div className="title-4 m-b-1">With Icon</div>
+        <div className="wds-text-title-body m-b-1">With Icon</div>
         <NavigationOption
           {...args}
           media={<BankIcon size={24} />}
@@ -101,7 +101,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-b-2">
-        <div className="title-4 m-b-1">With Icon Avatar</div>
+        <div className="wds-text-title-body m-b-1">With Icon Avatar</div>
         <NavigationOption
           {...args}
           showMediaCircle={false}
@@ -115,7 +115,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-b-2">
-        <div className="title-4 m-b-1">With Contact Avatar</div>
+        <div className="wds-text-title-body m-b-1">With Contact Avatar</div>
         <NavigationOption
           {...args}
           showMediaCircle={false}
@@ -125,7 +125,7 @@ export const Variants: StoryObj<StoryArgs> = {
         />
       </div>
       <div className="m-t-4 m-b-2">
-        <div className="title-4 m-b-1">Not recommended usage</div>
+        <div className="wds-text-title-body m-b-1">Not recommended usage</div>
         <p>
           Rendering an Avatar on top of showMediaCircle causes the Avatar background-colour and the
           circle background-colour to overlap which also causes clipping issues with the Badge

package/src/_deprecated/Select/Select.css

@@ -1,9 +1,35 @@
-.np-select .np-dropdown-toggle {
+.np-dropdown-menu > li > a {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .np-dropdown-menu > li > a {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-dropdown-menu > li > a {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-dropdown-menu > li > a {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-dropdown-menu > li > a {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-dropdown-menu > li > a {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.np-select .np-dropdown-toggle {
   background-color: var(--color-background-screen);
   border: 1px solid var(--color-interactive-secondary);
   border-radius: var(--radius-small);
   color: var(--color-content-primary);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   overflow: hidden;
   padding-inline-start: var(--size-16);
   text-align: start;
@@ -116,10 +142,6 @@
   clear: both;
   border-radius: var(--radius-small);
   color: var(--color-content-primary);
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
 }
 .np-theme-personal .np-dropdown-menu > li > a {
@@ -191,8 +213,12 @@
 .np-dropdown-menu > .selected > a strong {
   color: inherit;
 }
+.np-dropdown-menu > .active > a .body-2,
+.np-dropdown-menu > .selected > a .body-2,
 .np-dropdown-menu > .active > a .np-text-body-default,
-.np-dropdown-menu > .selected > a .np-text-body-default {
+.np-dropdown-menu > .selected > a .np-text-body-default,
+.np-dropdown-menu > .active > a .wds-text-body-default,
+.np-dropdown-menu > .selected > a .wds-text-body-default {
   color: #c9cbce;
 }
 .np-dropdown-menu .np-select-filter,
@@ -208,12 +234,12 @@
 .np-dropdown-menu .np-dropdown-header {
   padding-block: var(--size-8);
   padding-inline: var(--size-16);
+  white-space: nowrap;
   color: var(--color-content-secondary);
   display: block;
-  font-size: var(--font-size-14);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-body);
-  white-space: nowrap;
+  font-size: var(--wds-font-size-body);
+  font-weight: var(--wds-font-weight-body-regular);
+  line-height: var(--wds-line-height-body);
 }
 .np-select .tw-icon,
 .np-dropdown-menu .tw-icon,
@@ -224,7 +250,9 @@
   vertical-align: middle;
 }
 .np-select .np-text-body-default,
-.np-dropdown-menu .np-text-body-default {
+.np-dropdown-menu .np-text-body-default,
+.np-select .wds-text-body-default,
+.np-dropdown-menu .wds-text-body-default {
   color: var(--color-content-secondary);
 }
 .np-select .tw-icon-search,
@@ -282,7 +310,13 @@
 .np-theme-personal .np-dropdown-menu .active a:focus .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
+.np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default,
+.np-theme-personal .np-dropdown-menu .active a .wds-text-body-default,
+.np-theme-personal .np-dropdown-menu .selected a .wds-text-body-default,
+.np-theme-personal .np-dropdown-menu .active a:focus .wds-text-body-default,
+.np-theme-personal .np-dropdown-menu .selected a:focus .wds-text-body-default,
+.np-theme-personal .np-dropdown-menu .active a:hover .wds-text-body-default,
+.np-theme-personal .np-dropdown-menu .selected a:hover .wds-text-body-default {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
@@ -290,7 +324,8 @@
   background-color: var(--color-background-neutral-active) !important;
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
-.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
+.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default,
+.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .wds-text-body-default {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu .np-dropdown-item {

package/src/_deprecated/Select/Select.less

@@ -18,7 +18,7 @@
     border: 1px solid var(--color-interactive-secondary);
     border-radius: var(--radius-small);
     color: var(--color-content-primary);
-    font-weight: var(--font-weight-regular);
+    font-weight: var(--wds-font-weight-body-regular);
     overflow: hidden;
     padding-left: var(--size-16);
     text-align: left;
@@ -170,7 +170,7 @@
       border-radius: var(--radius-small);
     }
 
-    .np-text-body-default;
+    .wds-text-body-default;
   }
 
   > li:first-child > a {
@@ -215,7 +215,9 @@
       color: inherit;
     }
 
-    .np-text-body-default {
+    .body-2,
+    .np-text-body-default,
+    .wds-text-body-default {
       color: @color-navy-content-secondary;
     }
   }
@@ -238,10 +240,9 @@
     white-space: nowrap;
     color: var(--color-content-secondary);
     display: block;
-    font-size: var(--font-size-14);
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-body);
-    white-space: nowrap;
+    font-size: var(--wds-font-size-body);
+    font-weight: var(--wds-font-weight-body-regular);
+    line-height: var(--wds-line-height-body);
   }
 }
 
@@ -255,7 +256,8 @@
     vertical-align: middle;
   }
 
-  .np-text-body-default {
+  .np-text-body-default,
+  .wds-text-body-default {
     color: var(--color-content-secondary);
   }
 
@@ -313,7 +315,8 @@
         background-color: var(--color-background-neutral-active);
 
         .body-2,
-        .np-text-body-default {
+        .np-text-body-default,
+        .wds-text-body-default {
           color: var(--color-interactive-primary);
         }
       }
@@ -324,7 +327,8 @@
       background-color: var(--color-background-neutral-active) !important;
 
       .body-2,
-      .np-text-body-default {
+      .np-text-body-default,
+      .wds-text-body-default {
         color: var(--color-interactive-primary);
       }
     }

package/src/_deprecated/Select/Select.test.tsx

@@ -47,6 +47,22 @@ describe('Select', () => {
     await userEvent.click(button);
   };
 
+  describe('classNames', () => {
+    it('applies overrides keyed by the legacy and the WDS text class', () => {
+      render(
+        <Select
+          {...props}
+          classNames={{
+            'np-text-body-large': 'legacy-override',
+            'wds-text-body-large': 'wds-override',
+          }}
+        />,
+      );
+
+      expect(screen.getByRole('button')).toHaveClass('legacy-override', 'wds-override');
+    });
+  });
+
   describe('search property', () => {
     it('should focus input when dropdown is open', async () => {
       const { container } = render(<Select {...props} search />);