@transferwise/components 46.165.2 → 46.165.3

package/src/Inputs/InputGroup/_stories/InputGroup.test.story.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search } from '@transferwise/icons';
 
@@ -19,6 +20,9 @@ type Story = StoryObj<typeof InputGroup>;
  * In RTL mode the start and end sides are mirrored, so an addonStart icon
  * should appear on the right and an addonEnd button should appear on the left.
  * All three placement combinations are included to verify each case.
+ *
+ * Each combination is also rendered with Latin and Arabic values: `dir="auto"`
+ * can resolve the input opposite to the page, and the addons must not overlap the text.
  */
 export const RTLDiff: Story = {
   render: () => {
@@ -26,46 +30,50 @@ export const RTLDiff: Story = {
 
     return (
       <>
-        <InputGroup
-          addonStart={{
-            content: <Search size={24} />,
-            initialContentWidth: 24,
-          }}
-        >
-          <Input placeholder={i18n.placeholder_start} />
-        </InputGroup>
+        {[undefined, 'non-RTL value', 'مرحبا بالعالم'].map((value) => (
+          <Fragment key={value ?? 'placeholder'}>
+            <InputGroup
+              addonStart={{
+                content: <Search size={24} />,
+                initialContentWidth: 24,
+              }}
+            >
+              <Input placeholder={i18n.placeholder_start} defaultValue={value} />
+            </InputGroup>
 
-        <InputGroup
-          addonEnd={{
-            content: (
-              <Button v2 size="sm">
-                {i18n.copy}
-              </Button>
-            ),
-            interactive: true,
-            padding: 'sm',
-          }}
-        >
-          <Input placeholder={i18n.placeholder_end} />
-        </InputGroup>
+            <InputGroup
+              addonEnd={{
+                content: (
+                  <Button v2 size="sm">
+                    {i18n.copy}
+                  </Button>
+                ),
+                interactive: true,
+                padding: 'sm',
+              }}
+            >
+              <Input placeholder={i18n.placeholder_end} defaultValue={value} />
+            </InputGroup>
 
-        <InputGroup
-          addonStart={{
-            content: <Search size={24} />,
-            initialContentWidth: 24,
-          }}
-          addonEnd={{
-            content: (
-              <Button v2 size="sm">
-                {i18n.clear}
-              </Button>
-            ),
-            interactive: true,
-            padding: 'sm',
-          }}
-        >
-          <Input placeholder={i18n.placeholder_both} />
-        </InputGroup>
+            <InputGroup
+              addonStart={{
+                content: <Search size={24} />,
+                initialContentWidth: 24,
+              }}
+              addonEnd={{
+                content: (
+                  <Button v2 size="sm">
+                    {i18n.clear}
+                  </Button>
+                ),
+                interactive: true,
+                padding: 'sm',
+              }}
+            >
+              <Input placeholder={i18n.placeholder_both} defaultValue={value} />
+            </InputGroup>
+          </Fragment>
+        ))}
       </>
     );
   },

package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css

@@ -5,7 +5,6 @@
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
-  background-color: #37517e;
   background-color: var(--color-content-primary);
   opacity: 0.4;
   transition-property: opacity;
@@ -19,11 +18,8 @@
   position: fixed;
   inset: 0px;
   inset-block-end: env(keyboard-inset-height, 0px);
-  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
-  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
-  margin-block-start: 64px;
   margin-block-start: var(--size-64);
   display: flex;
   flex-direction: column;
@@ -37,7 +33,6 @@
   /* TODO: Tokenize */
   border-start-end-radius: 32px;
   /* TODO: Tokenize */
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
@@ -66,15 +61,12 @@
 }
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
-  padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
   display: grid;
   grid-template-rows: minmax(0, 1fr);
-  grid-row-gap: 8px;
   grid-row-gap: var(--size-8);
-  row-gap: 8px;
   row-gap: var(--size-8);
   overflow: auto;
 }
@@ -82,15 +74,12 @@
   grid-template-rows: auto minmax(0, 1fr);
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
-  padding: 16px;
   padding: var(--size-16);
   padding-block-start: 0px;
 }
 .np-bottom-sheet-v2-title {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-bottom-sheet-v2-body {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/Inputs/SelectInput/ButtonInput/SelectInputButtonInput.css

@@ -2,7 +2,6 @@
   display: inline-grid;
   grid-auto-columns: minmax(0, 1fr);
   align-content: center;
-  border-radius: 10px;
   border-radius: var(--size-10);
   text-align: start;
 }
@@ -13,8 +12,6 @@
 .np-button-input:has(.np-select-input-option-description-in-trigger) {
   block-size: auto !important;
   align-content: start;
-  padding-block-start: 12px !important;
   padding-block-start: var(--size-12) !important;
-  padding-block-end: 12px !important;
   padding-block-end: var(--size-12) !important;
 }

package/src/Inputs/SelectInput/ClearButton/SelectInputClearButton.css

@@ -1,21 +1,17 @@
 .np-select-input-addon-container {
   pointer-events: none;
-  margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
   display: inline-flex;
   align-items: center;
 }
 .np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
-  margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
 .np-select-input-addon {
   border-width: 0;
   background: none;
   display: inline-flex;
-  block-size: 24px;
   block-size: var(--size-24);
-  inline-size: 24px;
   inline-size: var(--size-24);
   align-items: center;
   justify-content: center;
@@ -24,11 +20,9 @@
 }
 .np-select-input-addon--interactive {
   pointer-events: auto;
-  color: #c9cbce;
   color: var(--color-interactive-secondary);
 }
 .np-select-input-addon--interactive:hover {
-  color: #b5b7ba;
   color: var(--color-interactive-secondary-hover);
 }
 .np-select-input-addon--interactive:focus {
@@ -39,8 +33,6 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-select-input-addon-separator {
-  block-size: 24px;
   block-size: var(--size-24);
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
   border-inline-start: 1px solid var(--color-border-neutral);
 }

package/src/Inputs/SelectInput/ItemView/SelectInputItemView.css

@@ -1,16 +1,13 @@
 .np-select-input-group-item--without-needle:first-child {
-  margin-block-start: calc(-1 * 8px);
   margin-block-start: calc(-1 * var(--size-8));
 }
 .np-select-input-group-item-header {
   position: sticky;
   inset-block-start: 0px;
   z-index: 10;
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }
 .np-select-input-separator-item {
-  margin: 8px;
   margin: var(--size-8);
   border-block-start-width: 1px;
 }

package/src/Inputs/SelectInput/Option/SelectInputOption.css

@@ -5,15 +5,10 @@
      -moz-user-select: none;
           user-select: none;
   align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
-  border-radius: 10px;
   border-radius: var(--radius-small);
-  padding-block: 12px;
   padding-block: var(--size-12);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
   color: var(--color-interactive-primary);
 }
@@ -21,7 +16,6 @@
   outline: none;
 }
 .np-select-input-option-container--active {
-  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 .np-select-input-option-container--disabled {

package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.css

@@ -1,11 +1,8 @@
 .np-select-input-option-content-container {
   display: flex;
   align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-select-input-option-content-icon {
@@ -21,7 +18,6 @@
   overflow: hidden;
 }
 .np-select-input-option-content-text-secondary {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-select-input-option-content-text-within-trigger {
@@ -30,8 +26,6 @@
   white-space: nowrap;
 }
 .np-select-input-option-content-text-line-1 > :not([hidden]) ~ :not([hidden]) {
-  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
-  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
 }

package/src/Inputs/SelectInput/Options/SelectInputOptions.css

@@ -14,34 +14,25 @@
 .np-select-input-options-status {
   display: flex;
   align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
-  padding-block: 8px 0px;
   padding-block: var(--size-8) 0px;
-  padding-inline: 24px;
   padding-inline: var(--size-24);
 }
 .np-select-input-options-status-icon {
   padding-block: 0;
-  padding-inline: 4px;
   padding-inline: var(--size-4);
-  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 .np-select-input-query-container {
   display: flex;
   flex-direction: column;
-  padding: 8px;
   padding: var(--size-8);
 }
 .np-select-input-listbox-container {
   position: relative;
   block-size: var(--initial-height);
-  scroll-padding-top: 8px;
   scroll-padding-top: var(--size-8);
-  scroll-padding-bottom: 8px;
   scroll-padding-bottom: var(--size-8);
   overflow-y: auto;
 }
@@ -55,13 +46,10 @@
   block-size: 100vh;
 }
 .np-select-input-listbox-container--has-group {
-  scroll-padding-top: 32px;
   scroll-padding-top: var(--size-32);
 }
 .np-select-input-listbox {
-  border-radius: 10px;
   border-radius: var(--radius-small);
-  padding: 8px;
   padding: var(--size-8);
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
 }
@@ -79,8 +67,6 @@
   block-size: 100%;
 }
 .np-select-input-footer {
-  padding-block: 4px 16px;
   padding-block: var(--size-4) var(--size-16);
-  padding-inline: 24px;
   padding-inline: var(--size-24);
 }

package/src/Inputs/SelectInput/Popover/SelectInputPopover.css

@@ -5,9 +5,7 @@
   inline-size: var(--width);
   flex-direction: column;
   overflow: hidden;
-  border-radius: 10px;
   border-radius: var(--radius-small);
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
@@ -22,9 +20,7 @@
 }
 .np-popover-v2 {
   display: grid;
-  grid-row-gap: 8px;
   grid-row-gap: var(--size-8);
-  row-gap: 8px;
   row-gap: var(--size-8);
   overflow-y: auto;
   grid-template-rows: minmax(0, 1fr);
@@ -33,14 +29,11 @@
   grid-template-rows: auto minmax(0, 1fr);
 }
 .np-popover-v2--padding-md {
-  padding: 16px;
   padding: var(--size-16);
 }
 .np-popover-v2-title {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-popover-v2-content {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/Inputs/SelectInput/SelectInput.css

@@ -5,7 +5,6 @@
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
-  background-color: #37517e;
   background-color: var(--color-content-primary);
   opacity: 0.4;
   transition-property: opacity;
@@ -19,11 +18,8 @@
   position: fixed;
   inset: 0px;
   inset-block-end: env(keyboard-inset-height, 0px);
-  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
-  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
-  margin-block-start: 64px;
   margin-block-start: var(--size-64);
   display: flex;
   flex-direction: column;
@@ -37,7 +33,6 @@
   /* TODO: Tokenize */
   border-start-end-radius: 32px;
   /* TODO: Tokenize */
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
@@ -66,15 +61,12 @@
 }
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
-  padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
   display: grid;
   grid-template-rows: minmax(0, 1fr);
-  grid-row-gap: 8px;
   grid-row-gap: var(--size-8);
-  row-gap: 8px;
   row-gap: var(--size-8);
   overflow: auto;
 }
@@ -82,23 +74,19 @@
   grid-template-rows: auto minmax(0, 1fr);
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
-  padding: 16px;
   padding: var(--size-16);
   padding-block-start: 0px;
 }
 .np-bottom-sheet-v2-title {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-bottom-sheet-v2-body {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-button-input {
   display: inline-grid;
   grid-auto-columns: minmax(0, 1fr);
   align-content: center;
-  border-radius: 10px;
   border-radius: var(--size-10);
   text-align: start;
 }
@@ -109,9 +97,7 @@
 .np-button-input:has(.np-select-input-option-description-in-trigger) {
   block-size: auto !important;
   align-content: start;
-  padding-block-start: 12px !important;
   padding-block-start: var(--size-12) !important;
-  padding-block-end: 12px !important;
   padding-block-end: var(--size-12) !important;
 }
 .np-popover-v2-container {
@@ -121,9 +107,7 @@
   inline-size: var(--width);
   flex-direction: column;
   overflow: hidden;
-  border-radius: 10px;
   border-radius: var(--radius-small);
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
@@ -138,9 +122,7 @@
 }
 .np-popover-v2 {
   display: grid;
-  grid-row-gap: 8px;
   grid-row-gap: var(--size-8);
-  row-gap: 8px;
   row-gap: var(--size-8);
   overflow-y: auto;
   grid-template-rows: minmax(0, 1fr);
@@ -149,15 +131,12 @@
   grid-template-rows: auto minmax(0, 1fr);
 }
 .np-popover-v2--padding-md {
-  padding: 16px;
   padding: var(--size-16);
 }
 .np-popover-v2-title {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-popover-v2-content {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-select-input-option-container {
@@ -167,15 +146,10 @@
      -moz-user-select: none;
           user-select: none;
   align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
-  border-radius: 10px;
   border-radius: var(--radius-small);
-  padding-block: 12px;
   padding-block: var(--size-12);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
   color: var(--color-interactive-primary);
 }
@@ -183,7 +157,6 @@
   outline: none;
 }
 .np-select-input-option-container--active {
-  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 .np-select-input-option-container--disabled {
@@ -198,11 +171,8 @@
 .np-select-input-option-content-container {
   display: flex;
   align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-select-input-option-content-icon {
@@ -218,7 +188,6 @@
   overflow: hidden;
 }
 .np-select-input-option-content-text-secondary {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-select-input-option-content-text-within-trigger {
@@ -227,24 +196,19 @@
   white-space: nowrap;
 }
 .np-select-input-option-content-text-line-1 > :not([hidden]) ~ :not([hidden]) {
-  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
-  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
 }
 .np-select-input-group-item--without-needle:first-child {
-  margin-block-start: calc(-1 * 8px);
   margin-block-start: calc(-1 * var(--size-8));
 }
 .np-select-input-group-item-header {
   position: sticky;
   inset-block-start: 0px;
   z-index: 10;
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }
 .np-select-input-separator-item {
-  margin: 8px;
   margin: var(--size-8);
   border-block-start-width: 1px;
 }
@@ -264,34 +228,25 @@
 .np-select-input-options-status {
   display: flex;
   align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
   -moz-column-gap: var(--size-8);
        column-gap: var(--size-8);
-  padding-block: 8px 0px;
   padding-block: var(--size-8) 0px;
-  padding-inline: 24px;
   padding-inline: var(--size-24);
 }
 .np-select-input-options-status-icon {
   padding-block: 0;
-  padding-inline: 4px;
   padding-inline: var(--size-4);
-  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 .np-select-input-query-container {
   display: flex;
   flex-direction: column;
-  padding: 8px;
   padding: var(--size-8);
 }
 .np-select-input-listbox-container {
   position: relative;
   block-size: var(--initial-height);
-  scroll-padding-top: 8px;
   scroll-padding-top: var(--size-8);
-  scroll-padding-bottom: 8px;
   scroll-padding-bottom: var(--size-8);
   overflow-y: auto;
 }
@@ -305,13 +260,10 @@
   block-size: 100vh;
 }
 .np-select-input-listbox-container--has-group {
-  scroll-padding-top: 32px;
   scroll-padding-top: var(--size-32);
 }
 .np-select-input-listbox {
-  border-radius: 10px;
   border-radius: var(--radius-small);
-  padding: 8px;
   padding: var(--size-8);
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
 }
@@ -329,29 +281,23 @@
   block-size: 100%;
 }
 .np-select-input-footer {
-  padding-block: 4px 16px;
   padding-block: var(--size-4) var(--size-16);
-  padding-inline: 24px;
   padding-inline: var(--size-24);
 }
 .np-select-input-addon-container {
   pointer-events: none;
-  margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
   display: inline-flex;
   align-items: center;
 }
 .np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
-  margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
 .np-select-input-addon {
   border-width: 0;
   background: none;
   display: inline-flex;
-  block-size: 24px;
   block-size: var(--size-24);
-  inline-size: 24px;
   inline-size: var(--size-24);
   align-items: center;
   justify-content: center;
@@ -360,11 +306,9 @@
 }
 .np-select-input-addon--interactive {
   pointer-events: auto;
-  color: #c9cbce;
   color: var(--color-interactive-secondary);
 }
 .np-select-input-addon--interactive:hover {
-  color: #b5b7ba;
   color: var(--color-interactive-secondary-hover);
 }
 .np-select-input-addon--interactive:focus {
@@ -375,9 +319,7 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-select-input-addon-separator {
-  block-size: 24px;
   block-size: var(--size-24);
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
   border-inline-start: 1px solid var(--color-border-neutral);
 }
 .np-select-input-content {
@@ -386,6 +328,5 @@
   white-space: nowrap;
 }
 .np-select-input-placeholder {
-  color: #768e9c;
   color: var(--color-content-tertiary);
 }