feat #113 (quantity selector): move icons from svg sprite to css vari…

…ables
Orange-OpenSource · Dec 7, 2021 · 47c3b83 · 47c3b83
1 parent d0618c2
commit 47c3b83
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 60 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -360,13 +360,18 @@ $success-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
 $info-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$info}' d='M62.5 0a62.5 62.5 0 100 125 62.5 62.5 0 000-125zm0 14.7a11 11 0 110 22 11 11 0 010-22zM47.8 44.1h25.7v46.2c0 4.7 1.3 6.5 1.8 7.2.8 1 2.3 1.5 4.8 1.6h.8v3.8H47.8v-3.7h.8c2.3-.1 4-.8 5-2 .4-.4 1-2 1-7V57c0-4.8-.6-6.6-1.2-7.3-.8-1-2.4-1.5-4.9-1.6h-.7V44z'/></svg>") !default;
 $warning-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='#{$warning}' d='M15 0a15 15 0 100 30 15 15 0 000-30zm.15 5.39h.01c1.12 0 2 .95 1.92 2.06l-.63 10.43c0 .7-.58.97-1.29.97-.72 0-1.28-.27-1.28-.97l-.63-10.46c-.06-1.09.8-2.01 1.9-2.03zm-.3 15.33c.11 0 .21 0 .31.02 2.19.35 2.19 3.5 0 3.84-2.77.44-3.1-3.86-.3-3.86z'/></svg>") !default;
 $danger-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 125'><path fill='#{$danger}' d='M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0015.6 125H125a15.6 15.6 0 0013.5-23.5L83.8 7.8A15.6 15.6 0 0070.3 0zm19.2 50a6.4 6.4 0 014.4 1.9 6.4 6.4 0 010 9L79.4 75.6l15 15a6.4 6.4 0 010 9.2 6.4 6.4 0 01-4.5 1.9 6.4 6.4 0 01-4.6-2l-15-15-15 15a6.4 6.4 0 01-4.6 2 6.4 6.4 0 01-4.6-2 6.4 6.4 0 010-9l15-15L46.8 61a6.4 6.4 0 119-9.1l14.6 14.5L84.8 52a6.4 6.4 0 014.7-1.9z'/></svg>") !default;
+$add-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M850,400H600V150a50,50,0,0,0-50-50H450a50,50,0,0,0-50,50V400H150a50,50,0,0,0-50,50V550a50,50,0,0,0,50,50H400V850a50,50,0,0,0,50,50H550a50,50,0,0,0,50-50V600H850a50,50,0,0,0,50-50V450A50,50,0,0,0,850,400Z'/></svg>") !default;
+$remove-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2'><rect xmlns='http://www.w3.org/2000/svg' id='minus_sml' width='10' height='2'/></svg>") !default;
+
 //// SVG used several times
 $svg-as-custom-props: (
   "chevron": $chevron-icon,
   "close":   $cross-icon-stroke,
   "check":   $check-icon,
   "success": $success-icon,
-  "error":   $danger-icon
+  "error":   $danger-icon,
+  "add":     $add-icon,
+  "remove":  $remove-icon
 ) !default;
 //// Filters
 // see https://codepen.io/sosuke/pen/Pjoqqp
@@ -1842,4 +1847,14 @@ $step-link-marker-lg:    counter($stepped-process-counter) ".\A0" !default;
 $step-item-arrow-width:  1rem !default;
 $step-item-arrow-shape:  polygon(0% 0%, subtract(100%, $border-width) 50%, 0% 100%) #{"/* rtl:"} polygon(100% 0%, $border-width 50%, 100% 100%) #{"*/"} !default; // Used in clip-path
 // scss-docs-end stepped-process
+
+//// Quantity selector
+// scss-docs-start quantity-selector
+$quantity-selector-icon-add:           var(--#{$boosted-variable-prefix}add-icon) !default;
+$quantity-selector-icon-remove:        var(--#{$boosted-variable-prefix}remove-icon) !default;
+$quantity-selector-icon-width:         .875rem !default;
+$quantity-selector-icon-remove-height: .125rem !default;
+$quantity-selector-icon-add-height:    .875rem !default;
+
+// scss-docs-end back-to-top
 // End mod
diff --git a/scss/forms/_quantity-selector.scss b/scss/forms/_quantity-selector.scss
@@ -41,13 +41,17 @@
   }
 
   button {
+
     border: $border-width solid $gray-500;
     &:first-of-type {
+      @include button-icon($quantity-selector-icon-remove, $size: $quantity-selector-icon-width $quantity-selector-icon-remove-height, $pseudo: "after");
       order: -1;
       border-right: none;
     }
     &:last-of-type {
+      @include button-icon($quantity-selector-icon-add, $size: $quantity-selector-icon-width $quantity-selector-icon-add-height, $pseudo: "after");
       border-left: none;
     }
   }
+
 }
diff --git a/site/content/docs/5.1/forms/quantity-selector.md b/site/content/docs/5.1/forms/quantity-selector.md
@@ -17,41 +17,29 @@ Value will vary between the values define in the `min` and `max` attributes (neg
 The custom `data-bs-round` attribute will help you to define the number of digits to appear after the decimal point.
 {{< example >}}
 <div class="quantity-selector mb-3">
-    <label class="form-label" for="inputQuantitySelector1">Quantity selector small: </label>
-    <div class="input-group">
-        <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite"
-            data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
-        <button type="button" class="btn btn-icon btn-secondary btn-sm"  aria-describedby="inputQuantitySelector1" data-bs-step="down">
-            <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
-                <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#remove" />
-            </svg>
-            <span class="visually-hidden">Step down</span>
-        </button>
-        <button type="button" class="btn btn-icon btn-secondary btn-sm"  aria-describedby="inputQuantitySelector1" data-bs-step="up">
-            <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
-                <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#add" />
-            </svg>
-            <span class="visually-hidden">Step up</span>
-        </button>
-    </div>
+  <label class="form-label" for="inputQuantitySelector1">Quantity selector small: </label>
+  <div class="input-group">
+    <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite"
+      data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
+    <button type="button" class="btn btn-icon btn-secondary btn-sm"  aria-describedby="inputQuantitySelector1" data-bs-step="down">
+      <span class="visually-hidden">Step down</span>
+    </button>
+    <button type="button" class="btn btn-icon btn-secondary btn-sm"  aria-describedby="inputQuantitySelector1" data-bs-step="up">
+      <span class="visually-hidden">Step up</span>
+    </button>
+  </div>
 </div>
 <div class="quantity-selector quantity-selector-l">
-    <label class="form-label" for="inputQuantitySelector2">Quantity selector large: </label>
-    <div class="input-group">
-        <input type="number" id="inputQuantitySelector2" class="form-control" aria-live="polite"
-            data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
-        <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="down">
-            <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
-                <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#remove" />
-            </svg>
-            <span class="visually-hidden">Step down</span>
-        </button>
-        <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="up">
-            <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
-                <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#add" />
-            </svg>
-            <span class="visually-hidden">Step up</span>
-        </button>
-    </div>
+  <label class="form-label" for="inputQuantitySelector2">Quantity selector large: </label>
+  <div class="input-group">
+    <input type="number" id="inputQuantitySelector2" class="form-control" aria-live="polite"
+      data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
+    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="down">
+      <span class="visually-hidden">Step down</span>
+    </button>
+    <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector2" data-bs-step="up">
+      <span class="visually-hidden">Step up</span>
+    </button>
+  </div>
 </div>
 {{< /example >}}
diff --git a/site/content/docs/5.1/forms/validation.md b/site/content/docs/5.1/forms/validation.md
@@ -284,25 +284,18 @@ Validation styles are available for the following form controls and components:
   </div>
 
   <div class="mb-3">
-    <div class="quantity-selector quantity-selector-l mb-3">
-        <label class="form-label" for="inputQuantitySelector1">Quantity selector: </label>
-        <div class="input-group">
-            <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite"
-                data-bs-step="counter" name="quantity" title="quantity" value="99" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
-            <button type="button" class="btn btn-icon btn-secondary btn-sm"  aria-describedby="inputQuantitySelector1" data-bs-step="down">
-                <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
-                    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#remove" />
-                </svg>
-                <span class="visually-hidden">Step down</span>
-            </button>
-            <button type="button" class="btn btn-icon btn-secondary btn-sm"  aria-describedby="inputQuantitySelector1" data-bs-step="up">
-                <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
-                    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#add" />
-                </svg>
-                <span class="visually-hidden">Step up</span>
-            </button>
-            <div class="invalid-feedback">Please enter a valid number</div>
-        </div>
+    <div class="quantity-selector quantity-selector-l">
+      <label class="form-label" for="inputQuantitySelector1">Quantity selector large: </label>
+      <div class="input-group">
+        <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite"
+          data-bs-step="counter" name="quantity" title="quantity" value="11" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
+        <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">
+          <span class="visually-hidden">Step down</span>
+        </button>
+        <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">
+          <span class="visually-hidden">Step up</span>
+        </button>
+      </div>
     </div>
   </div>
 

diff --git a/site/static/docs/5.1/assets/img/boosted-sprite.svg b/site/static/docs/5.1/assets/img/boosted-sprite.svg