fix: rest MUI components - Introduced ForwardRef (#224)

* refactor(162): added forwardRef Card * refactor(162): introduced forwardRefDivider * refactor(162): introduced forwardRef MuiComponents * refactor(162): introducing forwardRef * refactor(162): introduced forwardRef * refactor(162): introduced forwardRef * fix(162): fixed link * fix: fixed port number * fix: fixed duplicated id * fix: fixed ref iconbutton * fix: updated snaps * fix: fixed port * fix: fixed eslint errors * fix: the item should be a button * fix: fixed eslint errors
2026-01-18 17:16:00 +07:00 · 2019-10-31 08:12:18 +01:00
parent a4cdd145d2
commit b56e43846b
82 changed files with 467 additions and 269 deletions
--- a/src/components/Header/snapshots/Header.test.tsx.snap
+++ b/src/components/Header/snapshots/Header.test.tsx.snap
@@ -5,10 +5,10 @@ exports[`<Header /> component with logged in state should load the component in
  class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc emotion-9 MuiAppBar-colorPrimary"
 >
  <div
-    class="MuiToolbar-root MuiToolbar-regular css-1pwdmmq emotion-8 MuiToolbar-gutters"
+    class="MuiToolbar-root MuiToolbar-regular css-1bjere7 emotion-8 MuiToolbar-gutters"
  >
    <div
-      class="MuiToolbar-root MuiToolbar-regular css-1vacr9s emotion-4 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular css-i5xjw9 emotion-4 MuiToolbar-gutters"
    >
      <a
        class="css-1dk30lc"
@@ -19,7 +19,7 @@ exports[`<Header /> component with logged in state should load the component in
        />
      </a>
      <div
-        class="css-13zpdre emotion-3"
+        class="css-12prohx emotion-3"
      >
        <div
          class="css-1crzyyo emotion-2"
@@ -40,7 +40,7 @@ exports[`<Header /> component with logged in state should load the component in
                class="MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
              >
                <div
-                  class="MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart"
+                  class="MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart"
                >
                  <svg
                    aria-hidden="true"
@@ -74,10 +74,10 @@ exports[`<Header /> component with logged in state should load the component in
      </div>
    </div>
    <div
-      class="MuiToolbar-root MuiToolbar-regular css-m61s5i emotion-7 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular css-1qii1b7 emotion-7 MuiToolbar-gutters"
    >
      <button
-        class="MuiButtonBase-root MuiIconButton-root css-1y1xi9f emotion-5 MuiIconButton-colorInherit"
+        class="MuiButtonBase-root MuiIconButton-root css-13o7eu2 emotion-5 MuiIconButton-colorInherit"
        tabindex="0"
        type="button"
      >
@@ -101,35 +101,40 @@ exports[`<Header /> component with logged in state should load the component in
        />
      </button>
      <a
-        class="css-1aacqdd emotion-6"
+        class="css-kbn7if emotion-6"
        data-testid="header--tooltip-documentation"
        href="https://verdaccio.org/docs/en/installation"
+        rel="noopener noreferrer"
        target="_blank"
      >
-        <button
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
-          tabindex="0"
-          type="button"
+        <h6
+          class="MuiTypography-root MuiTypography-subtitle1"
        >
-          <span
-            class="MuiIconButton-label"
+          <button
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+            tabindex="0"
+            type="button"
          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <span
+              class="MuiIconButton-label"
            >
-              <path
-                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
-              />
-            </svg>
-          </span>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </button>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </h6>
      </a>
      <button
        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
@@ -193,10 +198,10 @@ exports[`<Header /> component with logged in state should load the component in
  class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc emotion-9 MuiAppBar-colorPrimary"
 >
  <div
-    class="MuiToolbar-root MuiToolbar-regular css-1pwdmmq emotion-8 MuiToolbar-gutters"
+    class="MuiToolbar-root MuiToolbar-regular css-1bjere7 emotion-8 MuiToolbar-gutters"
  >
    <div
-      class="MuiToolbar-root MuiToolbar-regular css-1vacr9s emotion-4 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular css-i5xjw9 emotion-4 MuiToolbar-gutters"
    >
      <a
        class="css-1dk30lc"
@@ -207,7 +212,7 @@ exports[`<Header /> component with logged in state should load the component in
        />
      </a>
      <div
-        class="css-13zpdre emotion-3"
+        class="css-12prohx emotion-3"
      >
        <div
          class="css-1crzyyo emotion-2"
@@ -228,7 +233,7 @@ exports[`<Header /> component with logged in state should load the component in
                class="MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
              >
                <div
-                  class="MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart"
+                  class="MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart"
                >
                  <svg
                    aria-hidden="true"
@@ -262,10 +267,10 @@ exports[`<Header /> component with logged in state should load the component in
      </div>
    </div>
    <div
-      class="MuiToolbar-root MuiToolbar-regular css-m61s5i emotion-7 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular css-1qii1b7 emotion-7 MuiToolbar-gutters"
    >
      <button
-        class="MuiButtonBase-root MuiIconButton-root css-1y1xi9f emotion-5 MuiIconButton-colorInherit"
+        class="MuiButtonBase-root MuiIconButton-root css-13o7eu2 emotion-5 MuiIconButton-colorInherit"
        tabindex="0"
        type="button"
      >
@@ -289,35 +294,40 @@ exports[`<Header /> component with logged in state should load the component in
        />
      </button>
      <a
-        class="css-1aacqdd emotion-6"
+        class="css-kbn7if emotion-6"
        data-testid="header--tooltip-documentation"
        href="https://verdaccio.org/docs/en/installation"
+        rel="noopener noreferrer"
        target="_blank"
      >
-        <button
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
-          tabindex="0"
-          type="button"
+        <h6
+          class="MuiTypography-root MuiTypography-subtitle1"
        >
-          <span
-            class="MuiIconButton-label"
+          <button
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+            tabindex="0"
+            type="button"
          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <span
+              class="MuiIconButton-label"
            >
-              <path
-                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
-              />
-            </svg>
-          </span>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </button>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </h6>
      </a>
      <button
        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"