feat(minimal inputdropdown): update Minimal Dropdown Style (#354)

* feat(minimal inputdropdown): update Minimal Dropdown Style * change color to use palette * snapshots * update label style * update after running yarn test -u * not forward isMinimal --------- Co-authored-by: Lia Prins <liajprins@gmail.com>
chanzuckerberg · Feb 14, 2023 · 56d99ff · 56d99ff
1 parent b9a3662
commit 56d99ff
Show file tree

Hide file tree

Showing 21 changed files with 351 additions and 195 deletions.
diff --git a/src/core/Accordion/__snapshots__/index.test.tsx.snap b/src/core/Accordion/__snapshots__/index.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<Accordion /> Test story renders snapshot 1`] = `
       class="MuiAccordionSummary-expandIconWrapper css-yw020d-MuiAccordionSummary-expandIconWrapper"
     >
       <div
-        class="css-jbvua0"
+        class="css-1ft6wgl"
       >
         <svg
           aria-hidden="true"

diff --git a/src/core/Banner/__snapshots__/banner.test.tsx.snap b/src/core/Banner/__snapshots__/banner.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
         class="css-1f3aume"
       >
         <div
-          class="css-jbvua0"
+          class="css-1ft6wgl"
         >
           <svg
             aria-hidden="true"
@@ -38,7 +38,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
       type="button"
     >
       <div
-        class="css-jbvua0"
+        class="css-1ft6wgl"
       >
         <svg
           aria-hidden="true"
@@ -70,7 +70,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
         class="css-1f3aume"
       >
         <div
-          class="css-jbvua0"
+          class="css-1ft6wgl"
         >
           <svg
             aria-hidden="true"
@@ -102,7 +102,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
       type="button"
     >
       <div
-        class="css-jbvua0"
+        class="css-1ft6wgl"
       >
         <svg
           aria-hidden="true"
@@ -134,7 +134,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
         class="css-1f3aume"
       >
         <div
-          class="css-jbvua0"
+          class="css-1ft6wgl"
         >
           <svg
             aria-hidden="true"
@@ -157,7 +157,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
       type="button"
     >
       <div
-        class="css-jbvua0"
+        class="css-1ft6wgl"
       >
         <svg
           aria-hidden="true"
@@ -190,7 +190,7 @@ exports[`<Banner /> Test story renders snapshot 1`] = `
       class="css-1f3aume"
     >
       <div
-        class="css-jbvua0"
+        class="css-1ft6wgl"
       >
         <svg
           aria-hidden="true"
@@ -213,7 +213,7 @@ exports[`<Banner /> Test story renders snapshot 1`] = `
     type="button"
   >
     <div
-      class="css-jbvua0"
+      class="css-1ft6wgl"
     >
       <svg
         aria-hidden="true"

diff --git a/src/core/Button/__snapshots__/index.test.tsx.snap b/src/core/Button/__snapshots__/index.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<button /> MinimalLivePreview story renders snapshot 1`] = `
       class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
     >
       <div
-        class="css-jbvua0"
+        class="css-1ft6wgl"
       >
         <svg
           aria-hidden="true"
@@ -78,7 +78,7 @@ exports[`<button /> RoundedLivePreview story renders snapshot 1`] = `
       class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
     >
       <div
-        class="css-jbvua0"
+        class="css-1ft6wgl"
       >
         <svg
           aria-hidden="true"
@@ -116,7 +116,7 @@ exports[`<button /> RoundedLivePreview story renders snapshot 1`] = `
       class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
     >
       <div
-        class="css-jbvua0"
+        class="css-1ft6wgl"
       >
         <svg
           aria-hidden="true"
@@ -161,7 +161,7 @@ exports[`<button /> SquareLivePreview story renders snapshot 1`] = `
       class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
     >
       <div
-        class="css-jbvua0"
+        class="css-1ft6wgl"
       >
         <svg
           aria-hidden="true"
@@ -199,7 +199,7 @@ exports[`<button /> SquareLivePreview story renders snapshot 1`] = `
       class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
     >
       <div
-        class="css-jbvua0"
+        class="css-1ft6wgl"
       >
         <svg
           aria-hidden="true"

diff --git a/src/core/ButtonDropdown/__snapshots__/index.test.tsx.snap b/src/core/ButtonDropdown/__snapshots__/index.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`<ButtonDropdown /> Test story renders snapshot 1`] = `
     class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
   >
     <div
-      class="css-jbvua0"
+      class="css-1ft6wgl"
     >
       <svg
         aria-hidden="true"
@@ -31,7 +31,7 @@ exports[`<ButtonDropdown /> Test story renders snapshot 1`] = `
     class="MuiButton-endIcon MuiButton-iconSizeMedium css-9tj150-MuiButton-endIcon"
   >
     <div
-      class="css-jbvua0"
+      class="css-1ft6wgl"
     >
       <svg
         aria-hidden="true"

diff --git a/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap b/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<ButtonIcon /> Test story renders snapshot 1`] = `
   type="button"
 >
   <div
-    class="css-jbvua0"
+    class="css-1ft6wgl"
   >
     <svg
       aria-hidden="true"

diff --git a/src/core/CellBasic/__snapshots__/index.test.tsx.snap b/src/core/CellBasic/__snapshots__/index.test.tsx.snap
@@ -95,7 +95,7 @@ exports[`<CellBasic /> Test story renders snapshot 1`] = `
             class="css-fm7ypo"
           >
             <div
-              class="css-jbvua0"
+              class="css-1ft6wgl"
             >
               <svg
                 aria-hidden="true"

diff --git a/src/core/CellHeader/__snapshots__/index.test.tsx.snap b/src/core/CellHeader/__snapshots__/index.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`<CellHeader /> Ascending story renders snapshot 1`] = `
             type="button"
           >
             <div
-              class="css-jbvua0"
+              class="css-1ft6wgl"
             >
               <svg
                 aria-hidden="true"
@@ -67,7 +67,7 @@ exports[`<CellHeader /> Test story renders snapshot 1`] = `
             type="button"
           >
             <div
-              class="css-jbvua0"
+              class="css-1ft6wgl"
             >
               <svg
                 aria-hidden="true"

diff --git a/src/core/ComplexFilter/__snapshots__/index.test.tsx.snap b/src/core/ComplexFilter/__snapshots__/index.test.tsx.snap
@@ -5,30 +5,37 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
   class="css-1x0reya"
 >
   <button
-    class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-6o30iu-MuiButtonBase-root-MuiButton-root"
+    class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-je8px9-MuiButtonBase-root-MuiButton-root"
     label="Click Target"
     tabindex="0"
     type="button"
   >
     <span
-      class="css-1sjvubj"
+      class="css-t2kylo"
     >
-      Click Target
+      <span
+        class="styled-label css-1wq753n"
+      >
+        Click Target
+      </span>
+      <div
+        class="css-1ft6wgl"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
+          data-jest-file-name="IconChevronDownSmall.svg"
+          data-jest-svg-name="IconChevronDownSmall"
+          data-testid="IconChevronDownSmall"
+          fillcontrast="white"
+          focusable="false"
+          viewBox="0 0 14 14"
+        />
+      </div>
     </span>
     <div
-      class="css-jbvua0"
-    >
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
-        data-jest-file-name="IconChevronDownSmall.svg"
-        data-jest-svg-name="IconChevronDownSmall"
-        data-testid="IconChevronDownSmall"
-        fillcontrast="white"
-        focusable="false"
-        viewBox="0 0 14 14"
-      />
-    </div>
+      class="css-z8cnb2"
+    />
     <span
       class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
     />

diff --git a/src/core/Dialog/__snapshots__/index.test.tsx.snap b/src/core/Dialog/__snapshots__/index.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
     type="button"
   >
     <div
-      class="css-jbvua0"
+      class="css-1ft6wgl"
     >
       <svg
         aria-hidden="true"
@@ -93,7 +93,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
     type="button"
   >
     <div
-      class="css-jbvua0"
+      class="css-1ft6wgl"
     >
       <svg
         aria-hidden="true"
@@ -173,7 +173,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
     type="button"
   >
     <div
-      class="css-jbvua0"
+      class="css-1ft6wgl"
     >
       <svg
         aria-hidden="true"
@@ -253,7 +253,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
     type="button"
   >
     <div
-      class="css-jbvua0"
+      class="css-1ft6wgl"
     >
       <svg
         aria-hidden="true"

diff --git a/src/core/Dropdown/__snapshots__/index.test.tsx.snap b/src/core/Dropdown/__snapshots__/index.test.tsx.snap
@@ -2,31 +2,38 @@
 
 exports[`<Dropdown /> Test story renders snapshot 1`] = `
 <button
-  class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-6o30iu-MuiButtonBase-root-MuiButton-root"
+  class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-je8px9-MuiButtonBase-root-MuiButton-root"
   data-testid="dropdown"
   label="Click Target"
   tabindex="0"
   type="button"
 >
   <span
-    class="css-1sjvubj"
+    class="css-t2kylo"
   >
-    Click Target
+    <span
+      class="styled-label css-1wq753n"
+    >
+      Click Target
+    </span>
+    <div
+      class="css-1ft6wgl"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
+        data-jest-file-name="IconChevronDownSmall.svg"
+        data-jest-svg-name="IconChevronDownSmall"
+        data-testid="IconChevronDownSmall"
+        fillcontrast="white"
+        focusable="false"
+        viewBox="0 0 14 14"
+      />
+    </div>
   </span>
   <div
-    class="css-jbvua0"
-  >
-    <svg
-      aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
-      data-jest-file-name="IconChevronDownSmall.svg"
-      data-jest-svg-name="IconChevronDownSmall"
-      data-testid="IconChevronDownSmall"
-      fillcontrast="white"
-      focusable="false"
-      viewBox="0 0 14 14"
-    />
-  </div>
+    class="css-z8cnb2"
+  />
   <span
     class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
   />

diff --git a/src/core/DropdownMenu/__snapshots__/index.test.tsx.snap b/src/core/DropdownMenu/__snapshots__/index.test.tsx.snap
@@ -2,30 +2,34 @@
 
 exports[`<DropdownMenu /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-1ptdbw3-MuiButtonBase-root-MuiButton-root"
+  class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-1t6yh93-MuiButtonBase-root-MuiButton-root"
   label="Click Target"
   tabindex="0"
   type="button"
 >
   <span
-    class="css-1sjvubj"
+    class="css-112kt0x"
   >
-    Click Target
+    <span
+      class="styled-label css-1wq753n"
+    >
+      Click Target
+    </span>
+    <div
+      class="css-1ft6wgl"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
+        data-jest-file-name="IconChevronDownSmall.svg"
+        data-jest-svg-name="IconChevronDownSmall"
+        data-testid="IconChevronDownSmall"
+        fillcontrast="white"
+        focusable="false"
+        viewBox="0 0 14 14"
+      />
+    </div>
   </span>
-  <div
-    class="css-jbvua0"
-  >
-    <svg
-      aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
-      data-jest-file-name="IconChevronDownSmall.svg"
-      data-jest-svg-name="IconChevronDownSmall"
-      data-testid="IconChevronDownSmall"
-      fillcontrast="white"
-      focusable="false"
-      viewBox="0 0 14 14"
-    />
-  </div>
   <span
     class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
   />

diff --git a/src/core/Icon/style.ts b/src/core/Icon/style.ts
@@ -91,5 +91,6 @@ export const StyledSvgIcon = styled(SvgIcon, {
 `;
 
 export const StyledIcon = styled("div")`
+  /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */
   display: contents;
 `;