fix(InputField): align text content with inputWithin spacing

- specify max width to 96px - add story and update snapshots
chanzuckerberg · Jul 19, 2024 · d033e78 · d033e78
1 parent 3b94114
commit d033e78
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 13 deletions.
diff --git a/src/components/InputField/InputField.module.css b/src/components/InputField/InputField.module.css
@@ -26,6 +26,10 @@
  *
  * Typically used for buttons and icon buttons to enable things like show/hide password buttons .
  */
+.input-field__input--input-within {
+  padding-right: calc(var(--eds-size-12) / 16 * 1rem);
+}
+
 .input-field__input-within {
   position: absolute;
   right: calc(var(--eds-size-1) / 16 * 1rem);
@@ -34,6 +38,9 @@
   display: grid;
   align-items: center;
   justify-content: center;
+
+  /* max width is padding size minus right position size */
+  max-width: calc(var(--eds-size-11) / 16 * 1rem);
 }
 
 .input-field__leading-icon {
@@ -60,10 +67,6 @@
   padding-left: 2.25rem;
 }
 
-.input-field__input--input-within {
-  padding-right: 8rem;
-}
-
 .input-field__footer {
   display: flex;
   justify-content: space-between;

diff --git a/src/components/InputField/InputField.stories.tsx b/src/components/InputField/InputField.stories.tsx
@@ -241,7 +241,7 @@ export const ShowHint: Story = {
  * small component. This facility is used to implement controls that should appear visibly nested
  * within the button, to the right-hand side.
  *
- * Please keep the text of the button brief (button width < 128px)
+ * Please keep the text of the button brief (button width < 96px)
  */
 export const InputWithin: Story = {
   parameters: {
@@ -265,6 +265,34 @@ export const InputWithin: Story = {
   ),
 };
 
+/**
+ * The button has a maximum width, so if more text is placed in the button than this width can handle, it
+ * will be trimmed.
+ *
+ * Please keep the text of the button brief (button width < 96px)
+ */
+export const LongInputWithin: Story = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    docs: {
+      source: {
+        type: 'dynamic',
+      },
+    },
+  },
+  render: () => (
+    <InputField
+      inputWithin={
+        <Button icon="open-in-new" iconLayout="left" rank="secondary" size="sm">
+          Button with extra text
+        </Button>
+      }
+      label="Input field with button inside"
+      type="text"
+    />
+  ),
+};
+
 /**
  * You can lock the maximum length of the text content of `InputField`. When setting `maxLength`,
  * the field will reuse the browser's [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)

diff --git a/src/components/InputField/__snapshots__/InputField.test.tsx.snap b/src/components/InputField/__snapshots__/InputField.test.tsx.snap
@@ -257,6 +257,63 @@ exports[`<InputField /> LeadingIcon story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<InputField /> LongInputWithin story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div>
+    <div
+      class="input-field__overline"
+    >
+      <label
+        class="label label--lg input-field__label"
+        for=":ru:"
+      >
+        Input field with button inside
+      </label>
+    </div>
+    <div
+      class="input-field__body"
+    >
+      <input
+        aria-invalid="false"
+        class="input input-field__input--input-within"
+        id=":ru:"
+        type="text"
+      />
+      <div
+        class="input-field__input-within"
+      >
+        <button
+          class="button button--layout-left button--secondary button--sm button--variant-default"
+          type="button"
+        >
+          <span
+            class="button__text"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon"
+              fill="currentColor"
+              height="1rem"
+              style="--icon-size: 1rem;"
+              viewBox="0 0 24 24"
+              width="1rem"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"
+              />
+            </svg>
+            Button with extra text
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<InputField /> NoFieldnote story renders snapshot 1`] = `
 <div
   class="p-8"
@@ -666,7 +723,7 @@ exports[`<InputField /> WithAMaxLength story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":ru:"
+        for=":r10:"
       >
         test label
       </label>
@@ -689,7 +746,7 @@ exports[`<InputField /> WithAMaxLength story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input error"
-        id=":ru:"
+        id=":r10:"
         maxlength="15"
         required=""
         type="text"
@@ -715,7 +772,7 @@ exports[`<InputField /> WithARecommendedLength story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":r10:"
+        for=":r12:"
       >
         Shortened Length Field
       </label>
@@ -738,7 +795,7 @@ exports[`<InputField /> WithARecommendedLength story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input error"
-        id=":r10:"
+        id=":r12:"
         required=""
         type="text"
         value="Some initial text"
@@ -763,7 +820,7 @@ exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1
     >
       <label
         class="label label--lg input-field__label"
-        for=":r12:"
+        for=":r14:"
       >
         test label
       </label>
@@ -784,10 +841,10 @@ exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":r13:"
+        aria-describedby=":r15:"
         aria-invalid="false"
         class="input error"
-        id=":r12:"
+        id=":r14:"
         maxlength="20"
         required=""
         type="text"
@@ -799,7 +856,7 @@ exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1
     >
       <div
         class="field-note field-note--error"
-        id=":r13:"
+        id=":r15:"
       >
         <svg
           class="icon field-note__icon"