fix(form): Select correctly updates for the dense spec

Relates to #1089
mlaursen · Mar 22, 2021 · 2930595 · 2930595
1 parent 25178d7
commit 2930595
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 0 deletions.
diff --git a/packages/form/src/select/Select.tsx b/packages/form/src/select/Select.tsx
@@ -339,6 +339,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
         aria-disabled={disabled || undefined}
         ref={refHandler}
         role="button"
+        dense={dense}
         tabIndex={disabled ? undefined : 0}
         label={!!label}
         onFocus={handleFocus}

diff --git a/packages/form/src/select/__tests__/Select.tsx b/packages/form/src/select/__tests__/Select.tsx
@@ -40,6 +40,15 @@ describe("Select", () => {
 
     rerender(<Select {...PROPS} placeholder="Choose..." label="Label" />);
     expect(container).toMatchSnapshot();
+
+    rerender(<Select {...PROPS} dense />);
+    expect(container).toMatchSnapshot();
+
+    rerender(<Select {...PROPS} dense label="Label" />);
+    expect(container).toMatchSnapshot();
+
+    rerender(<Select {...PROPS} dense label="Label" placeholder="Choose..." />);
+    expect(container).toMatchSnapshot();
   });
 
   it("should update the label and select class names when focused as well as hiding the placeholder text", () => {

diff --git a/packages/form/src/select/__tests__/__snapshots__/Select.tsx.snap b/packages/form/src/select/__tests__/__snapshots__/Select.tsx.snap
@@ -106,6 +106,116 @@ exports[`Select should render correctly 3`] = `
 </div>
 `;
 
+exports[`Select should render correctly 4`] = `
+<div>
+  <div
+    aria-haspopup="listbox"
+    class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--dense rmd-text-field-container--outline-right rmd-select"
+    id="select"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      class="rmd-select__value"
+      id="select-display-value"
+    />
+    <input
+      id="select-value"
+      type="hidden"
+      value=""
+    />
+    <span
+      class="rmd-text-field-addon rmd-text-field-addon--presentational"
+    >
+      <i
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons"
+      >
+        arrow_drop_down
+      </i>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Select should render correctly 5`] = `
+<div>
+  <div
+    aria-haspopup="listbox"
+    class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--dense-label rmd-text-field-container--outline-right rmd-select"
+    id="select"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      class="rmd-label rmd-floating-label rmd-floating-label--dense rmd-select__label"
+      id="select-label"
+    >
+      Label
+    </span>
+    <span
+      class="rmd-select__value"
+      id="select-display-value"
+    />
+    <input
+      id="select-value"
+      type="hidden"
+      value=""
+    />
+    <span
+      class="rmd-text-field-addon rmd-text-field-addon--presentational"
+    >
+      <i
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons"
+      >
+        arrow_drop_down
+      </i>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Select should render correctly 6`] = `
+<div>
+  <div
+    aria-haspopup="listbox"
+    class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--dense-label rmd-text-field-container--outline-right rmd-select"
+    id="select"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      class="rmd-label rmd-floating-label rmd-floating-label--dense rmd-select__label"
+      id="select-label"
+    >
+      Label
+    </span>
+    <span
+      class="rmd-select__value rmd-select__value--placeholder"
+      id="select-display-value"
+    >
+      Choose...
+    </span>
+    <input
+      id="select-value"
+      type="hidden"
+      value=""
+    />
+    <span
+      class="rmd-text-field-addon rmd-text-field-addon--presentational"
+    >
+      <i
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons"
+      >
+        arrow_drop_down
+      </i>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Select should update the label and select class names when focused as well as hiding the placeholder text 1`] = `
 <div>
   <div