fix(Button): proper layout on extend buttons (#2154)

* fix(Button): proper layout on extend buttons * fix: fix * fix: feedback tom Co-authored-by: Matthias <[email protected]>
scaleway · Jan 24, 2023 · 21456c0 · 21456c0
1 parent c9647fc
commit 21456c0
Show file tree

Hide file tree

Showing 17 changed files with 4,046 additions and 3,340 deletions.
diff --git a/packages/form/src/components/Submit/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/Submit/__tests__/__snapshots__/index.spec.tsx.snap
diff --git a/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,22 +2,23 @@
 
 exports[`SubmitErrorAlert should display an alert when submitError is present 1`] = `
 <DocumentFragment>
-  .cache-107ul6f {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  border-radius: 4px;
-  border-width: 0;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
+  .cache-tyws59 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  border-radius: 4px;
+  border-width: 0;
+  cursor: pointer;
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -39,27 +40,31 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
   color: #ffffff;
 }
 
-.cache-107ul6f:hover,
-.cache-107ul6f:focus {
+.cache-tyws59:hover,
+.cache-tyws59:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.cache-107ul6f:hover,
-.cache-107ul6f:focus {
+.cache-tyws59:hover,
+.cache-tyws59:focus {
   color: #ffffff;
   background-color: #149a7b;
 }
 
-.cache-107ul6f:focus {
+.cache-tyws59:focus {
   box-shadow: 0 0 0 2px #149a7b40;
 }
 
-.cache-115wth8 {
+.cache-185b9wk {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  gap: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -68,6 +73,10 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
   pointer-events: none;
 }
 
@@ -139,11 +148,11 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
   >
     <button
       aria-disabled="false"
-      class="cache-107ul6f em6gco80"
+      class="cache-tyws59 em6gco80"
       type="submit"
     >
       <div
-        class="cache-115wth8 em6gco83"
+        class="cache-185b9wk em6gco83"
       >
         Submit
       </div>

diff --git a/packages/form/src/components/TagsField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/TagsField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -167,22 +167,23 @@ exports[`ToggleField should render correctly with default tags 1`] = `
   text-overflow: ellipsis;
 }
 
-.cache-1vxrlm6-StyledButton {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  border-radius: 4px;
-  border-width: 0;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
+.cache-26x052-StyledButton {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  border-radius: 4px;
+  border-width: 0;
+  cursor: pointer;
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -216,17 +217,17 @@ exports[`ToggleField should render correctly with default tags 1`] = `
   height: fit-content;
 }
 
-.cache-1vxrlm6-StyledButton:hover,
-.cache-1vxrlm6-StyledButton:focus {
+.cache-26x052-StyledButton:hover,
+.cache-26x052-StyledButton:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.cache-1vxrlm6-StyledButton>svg {
+.cache-26x052-StyledButton>svg {
   pointer-events: none;
 }
 
-.cache-brwenz {
+.cache-zy3rt6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -285,11 +286,11 @@ exports[`ToggleField should render correctly with default tags 1`] = `
         <button
           aria-disabled="false"
           aria-label="Close tag"
-          class="e1vt8sjg0 cache-1vxrlm6-StyledButton em6gco80"
+          class="e1vt8sjg0 cache-26x052-StyledButton em6gco80"
           type="button"
         >
           <div
-            class="cache-brwenz em6gco81"
+            class="cache-zy3rt6 em6gco81"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles etwatq50"
@@ -314,11 +315,11 @@ exports[`ToggleField should render correctly with default tags 1`] = `
         <button
           aria-disabled="false"
           aria-label="Close tag"
-          class="e1vt8sjg0 cache-1vxrlm6-StyledButton em6gco80"
+          class="e1vt8sjg0 cache-26x052-StyledButton em6gco80"
           type="button"
         >
           <div
-            class="cache-brwenz em6gco81"
+            class="cache-zy3rt6 em6gco81"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles etwatq50"
@@ -406,22 +407,23 @@ exports[`ToggleField should render correctly with default tags on initialValues
   text-overflow: ellipsis;
 }
 
-.cache-1vxrlm6-StyledButton {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  border-radius: 4px;
-  border-width: 0;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
+.cache-26x052-StyledButton {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  border-radius: 4px;
+  border-width: 0;
+  cursor: pointer;
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -455,17 +457,17 @@ exports[`ToggleField should render correctly with default tags on initialValues
   height: fit-content;
 }
 
-.cache-1vxrlm6-StyledButton:hover,
-.cache-1vxrlm6-StyledButton:focus {
+.cache-26x052-StyledButton:hover,
+.cache-26x052-StyledButton:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.cache-1vxrlm6-StyledButton>svg {
+.cache-26x052-StyledButton>svg {
   pointer-events: none;
 }
 
-.cache-brwenz {
+.cache-zy3rt6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -524,11 +526,11 @@ exports[`ToggleField should render correctly with default tags on initialValues
         <button
           aria-disabled="false"
           aria-label="Close tag"
-          class="e1vt8sjg0 cache-1vxrlm6-StyledButton em6gco80"
+          class="e1vt8sjg0 cache-26x052-StyledButton em6gco80"
           type="button"
         >
           <div
-            class="cache-brwenz em6gco81"
+            class="cache-zy3rt6 em6gco81"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles etwatq50"
@@ -553,11 +555,11 @@ exports[`ToggleField should render correctly with default tags on initialValues
         <button
           aria-disabled="false"
           aria-label="Close tag"
-          class="e1vt8sjg0 cache-1vxrlm6-StyledButton em6gco80"
+          class="e1vt8sjg0 cache-26x052-StyledButton em6gco80"
           type="button"
         >
           <div
-            class="cache-brwenz em6gco81"
+            class="cache-zy3rt6 em6gco81"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles etwatq50"
@@ -645,22 +647,23 @@ exports[`ToggleField should render correctly with default tags on initialValues
   text-overflow: ellipsis;
 }
 
-.cache-1vxrlm6-StyledButton {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  border-radius: 4px;
-  border-width: 0;
-  cursor: pointer;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
+.cache-26x052-StyledButton {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  border-radius: 4px;
+  border-width: 0;
+  cursor: pointer;
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -694,17 +697,17 @@ exports[`ToggleField should render correctly with default tags on initialValues
   height: fit-content;
 }
 
-.cache-1vxrlm6-StyledButton:hover,
-.cache-1vxrlm6-StyledButton:focus {
+.cache-26x052-StyledButton:hover,
+.cache-26x052-StyledButton:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.cache-1vxrlm6-StyledButton>svg {
+.cache-26x052-StyledButton>svg {
   pointer-events: none;
 }
 
-.cache-brwenz {
+.cache-zy3rt6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -763,11 +766,11 @@ exports[`ToggleField should render correctly with default tags on initialValues
         <button
           aria-disabled="false"
           aria-label="Close tag"
-          class="e1vt8sjg0 cache-1vxrlm6-StyledButton em6gco80"
+          class="e1vt8sjg0 cache-26x052-StyledButton em6gco80"
           type="button"
         >
           <div
-            class="cache-brwenz em6gco81"
+            class="cache-zy3rt6 em6gco81"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles etwatq50"
@@ -792,11 +795,11 @@ exports[`ToggleField should render correctly with default tags on initialValues
         <button
           aria-disabled="false"
           aria-label="Close tag"
-          class="e1vt8sjg0 cache-1vxrlm6-StyledButton em6gco80"
+          class="e1vt8sjg0 cache-26x052-StyledButton em6gco80"
           type="button"
         >
           <div
-            class="cache-brwenz em6gco81"
+            class="cache-zy3rt6 em6gco81"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles etwatq50"
@@ -821,11 +824,11 @@ exports[`ToggleField should render correctly with default tags on initialValues
         <button
           aria-disabled="false"
           aria-label="Close tag"
-          class="e1vt8sjg0 cache-1vxrlm6-StyledButton em6gco80"
+          class="e1vt8sjg0 cache-26x052-StyledButton em6gco80"
           type="button"
         >
           <div
-            class="cache-brwenz em6gco81"
+            class="cache-zy3rt6 em6gco81"
           >
             <svg
               class="cache-1ah7xw8-sizeStyles etwatq50"