Refactors Svelte btn-icon-left and btn-icon-right are no longer a par…

…t of the library.
AgnosticUI · Sep 18, 2020 · 9f7a528 · 9f7a528
1 parent c18eb72
commit 9f7a528
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 111 deletions.
diff --git a/agnosticui-svelte/copystyles.js b/agnosticui-svelte/copystyles.js
@@ -7,13 +7,6 @@ const fs = require('fs');
  * Buttons
  */
 let css = fs.readFileSync('../agnosticui-css/button.css', 'utf8');
-
-// For svelte we have to do a replacement since svg is a global:
-css = css.replace(/(.*btn-icon-left )(svg)/, '$1:global($2)'); // :global(svg)
-css = css.replace(/(.*btn-icon-right )(svg)/, '$1:global($2)')
-css = css.replace(/(.*btn-icon-left )(\.btn-icon)/, '$1:global($2)'); // :global(svg)
-css = css.replace(/(.*btn-icon-right )(\.btn-icon)/, '$1:global($2)')
-
 const buttonSvelte = fs.readFileSync('./src/stories/Button.svelte', 'utf8');
 const styleRegex = /<style>([\s\S]*?)<\/style>/;
 const buttonSvelteSynchronized = buttonSvelte.replace(styleRegex, `<style>\n${css}\n</style>`);

diff --git a/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap b/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap
@@ -310,65 +310,64 @@ exports[`Storyshots Button Groups Button Group 1`] = `
 </section>
 `;
 
-exports[`Storyshots Button Icons Button Icon Left Test 1`] = `
+exports[`Storyshots Button Icons Button Icons 1`] = `
 <section
   class="storybook-snapshot-container"
 >
-  <button
-    class="btn btn-primary btn-rounded"
-    type="button"
+  <div
+    style="display: inline-flex;"
   >
-    Download 
-    <svg
-      aria-hidden="true"
-      class="btn-icon"
-      height="16"
-      version="1.1"
-      viewBox="0 0 16 16"
-      width="16"
+    <button
+      class="btn btn-primary btn-rounded"
+      type="button"
     >
-      <path
-        d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02
+      Download 
+      <svg
+        aria-hidden="true"
+        class="btn-icon-right"
+        height="16"
+        version="1.1"
+        viewBox="0 0 16 16"
+        width="16"
+      >
+        <path
+          d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02
       5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7
       1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81
       0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16
       5.06 14.08 4 12 4z"
-        fill="currentColor"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </button>
-</section>
-`;
-
-exports[`Storyshots Button Icons Button Icon Right Test 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <button
-    class="btn btn-primary btn-rounded"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      data-custom-icon="true"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      stroke-width="0"
-      viewBox="0 0 24 24"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </button>
+     
+    <button
+      class="btn btn-primary btn-rounded"
+      type="button"
     >
-      <path
-        d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36
+      <svg
+        aria-hidden="true"
+        class="btn-icon-left"
+        data-custom-icon="true"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36
       1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39
       0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57
       3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
-      />
-    </svg>
-     Call
-  </button>
+        />
+      </svg>
+       Call
+    </button>
+  </div>
 </section>
 `;
 

diff --git a/agnosticui-svelte/src/stories/Button.svelte b/agnosticui-svelte/src/stories/Button.svelte
@@ -560,24 +560,6 @@ Apply this class to the nth-of-type(2) onwards to ensure the borders line up pro
   margin-top: -1px;
 }
 
-/**
-  * Button Icons
-  */
-
-/* For envs like React, CSS Modules appears to allow element-based selector (e.g. `svg` here)
-to leak through. So we leverage that so we don't have to do fancy regex when copying over styles. */
-.btn-icon-left :global(svg),
-.btn-icon-left :global(.btn-icon) { /* When copying needs to become :global(.btn-icon) */
-  margin-right: 6px;
-}
-
-/* For envs like React, CSS Modules appears to allow element-based selector (e.g. `svg` here)
-to leak through. So we leverage that so we don't have to do fancy regex when copying over styles. */
-.btn-icon-right :global(svg),
-.btn-icon-right :global(.btn-icon) { /* When copying needs to become :global(.btn-icon) */
-  margin-left: 6px;
-}
-
 /**
  * Invisible buttons. Generally used for a Cancel or icon button that behaves like a button,
  * semantically and for a11y, but, does so without all the typical "button chrome" behind it.
@@ -595,7 +577,6 @@ to leak through. So we leverage that so we don't have to do fancy regex when cop
   outline: none;
   box-shadow: none;
 }
-
 </style>
 
 <button {type} class={klasses} on:click={handleClick}>

diff --git a/agnosticui-svelte/src/stories/ButtonIcon.stories.js b/agnosticui-svelte/src/stories/ButtonIcon.stories.js
@@ -1,14 +1,9 @@
-import ButtonIconLeft from './ButtonIconLeft.svelte';
-import ButtonIconRight from './ButtonIconRight.svelte';
+import ButtonIconTest from './ButtonIconTest.svelte';
 
 export default {
   title: 'Button Icons',
 };
 
-export const ButtonIconLeftTest = () => ({
-  Component: ButtonIconLeft,
-});
-
-export const ButtonIconRightTest = () => ({
-  Component: ButtonIconRight,
+export const ButtonIcons = () => ({
+  Component: ButtonIconTest,
 });
diff --git a/agnosticui-svelte/src/stories/ButtonIconLeft.svelte b/agnosticui-svelte/src/stories/ButtonIconLeft.svelte
diff --git a/agnosticui-svelte/src/stories/ButtonIconRight.svelte b/agnosticui-svelte/src/stories/ButtonIconRight.svelte
@@ -8,9 +8,7 @@
   }
 </style>
 
-<Button isRounded={true} mode="primary" isIconRight={true}>
-  <!-- NOTE -- no class="btn-icon" on this SVG? This is to prove we support either .btn-icon or svg element.
-  The background is if we want to use <i class="fa fa-type btn-icon"> it will still work even though not an SVG. -->
+<Button isRounded={true} mode="primary">
   <svg
     fill="currentColor"
     stroke-width="0"

diff --git a/agnosticui-svelte/src/stories/ButtonIconTest.svelte b/agnosticui-svelte/src/stories/ButtonIconTest.svelte
@@ -0,0 +1,53 @@
+<script>
+  import Button from "./Button.svelte";
+</script>
+
+<style>
+  .btn-icon-left {
+    margin-right: 8px;
+  }
+  .btn-icon-right {
+    margin-left: 8px;
+  }
+</style>
+
+<div style="display: inline-flex;">
+  <Button isRounded={true} mode="primary">
+    Download <svg
+      class="btn-icon-right"
+      viewBox="0 0 16 16"
+      version="1.1"
+      width="16"
+      height="16"
+      aria-hidden="true">
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02
+      5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7
+      1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81
+      0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16
+      5.06 14.08 4 12 4z" />
+    </svg>
+  </Button>
+
+  <Button isRounded={true} mode="primary">
+    <svg
+      class="btn-icon-left"
+      fill="currentColor"
+      stroke-width="0"
+      viewBox="0 0 24 24"
+      data-custom-icon="true"
+      focusable="false"
+      aria-hidden="true"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36
+      1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39
+      0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57
+      3.57.11.35.03.74-.25 1.02l-2.2 2.2z" />
+    </svg> Call
+  </Button>
+</div>