feat(toggle buttons): Orange branded 🎉 — both with icons and no outline

Orange-OpenSource · Feb 8, 2021 · 2cd8ffe · 2cd8ffe
1 parent d11441c
commit 2cd8ffe
Show file tree

Hide file tree

Showing 9 changed files with 435 additions and 72 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "26 kB"
+      "maxSize": "26.1 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "23.7 kB"
+      "maxSize": "23.8 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
@@ -103,6 +103,10 @@
   .btn:active + &,
   .btn.active + & {
     border-color: $primary;
+
+    &:focus {
+      border-color: $black;
+    }
   }
 
   .btn:disabled + &,

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -105,7 +105,8 @@
 
   &:active,
   &.active {
-    color: $primary;
+    color: $accessible-orange;
+    background-color: transparent;
   }
 
   &:disabled,

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -214,11 +214,20 @@
   // @note almost the same structure than the button-variant() mixin
   // @note meant to override whatever .btn-* variant is used
   + .btn {
+    margin-left: 0 !important; // stylelint-disable-line declaration-no-important
     color: $black;
     @include gradient-bg($white);
     border-color: $gray-500;
     @include box-shadow($btn-box-shadow);
 
+    &.btn-icon:not(.btn-no-outline)::before,
+    &.btn-icon:not(.btn-no-outline)::after {
+      display: inline-block;
+      width: $border-width;
+      height: 100%;
+      content: "";
+    }
+
     &:not(:first-of-type) {
       border-left: 0;
     }
@@ -245,6 +254,11 @@
       outline-offset: $outline-width;
       box-shadow: $btn-focus-box-shadow;
     }
+
+    &:checked + .btn-no-outline {
+      border-color: $gray-500;
+      outline-color: currentColor;
+    }
   }
 
   &:checked {
@@ -256,6 +270,15 @@
       border-color: $black;
       outline-color: $black;
     }
+
+    + .btn-no-outline {
+      &,
+      &:hover,
+      &:focus {
+        color: $accessible-orange;
+        background-color: transparent;
+      }
+    }
   }
 
   &:active + .btn,
@@ -282,5 +305,41 @@
       border-color: currentColor; // Boosted mod
       opacity: $form-check-btn-check-disabled-opacity;
     }
+
+    // Boosted mod
+    &:checked + .btn {
+      color: $white;
+      background-color: $form-label-disabled-color;
+      border-color: $form-label-disabled-color;
+    }
+
+    &:checked + .btn-no-outline {
+      color: $gray-500;
+      background-color: transparent;
+      border-color: currentColor;
+    }
+    // End mod
+  }
+
+  // Boosted mod: handle no-outline case
+  + .btn-no-outline {
+    // Absurd selector to hack on specifity
+    &:not(:only-of-type) {
+      border: $border-width solid transparent;
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      color: $black;
+      border-color: $gray-500;
+    }
+
+    &:active {
+      color: $accessible-orange;
+      background-color: transparent;
+    }
   }
+  // End mod
 }
diff --git a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html
@@ -39,6 +39,7 @@ <h2 class="h6 pt-4 pb-3 mb-4 border-bottom border-light border-1">على هذه
           <li><a class="d-flex" href="#disabled-forms">أشكال المعطلين</a></li>
           <li><a class="d-flex" href="#sizing">تحجيم</a></li>
           <li><a class="d-flex" href="#input-group">مجموعة الإدخال</a></li>
+          <li><a class="d-flex" href="#toggle">أزرار تبديل الراديو</a></li>
           <li><a class="d-flex" href="#validation">التحقق</a></li>
         </ul>
       </li>
@@ -503,6 +504,80 @@ <h3>مجموعة الإدخال</h3>
         {{< /example >}}
       </div>
     </article>
+    <article class="my-3" id="toggle">
+      <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
+        <h3>أزرار تبديل الراديو</h3>
+        <a class="d-flex align-items-center" href="{{< docsref "/forms/checks-radios" >}}#radio-toggle-buttons">توثيق</a>
+      </div>
+
+      <div>
+        {{< example show_markup="false" class="mt-0" >}}
+        <div class="btn-group">
+          <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
+          <label class="btn btn-secondary" for="option1">التحقق</label>
+
+          <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
+          <label class="btn btn-secondary" for="option2">مذياع</label>
+
+          <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
+          <label class="btn btn-secondary" for="option3">معاق</label>
+
+          <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
+          <label class="btn btn-secondary" for="option4">مذياع</label>
+        </div>
+        {{< /example >}}
+        {{< example show_markup="false" >}}
+        <div class="btn-group">
+          <input type="radio" class="btn-check" name="icons" id="option5" autocomplete="off" checked>
+          <label class="btn btn-icon" for="option5">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+            </svg>
+            <span class="visually-hidden">يوم</span>
+          </label>
+          <input type="radio" class="btn-check" name="icons" id="option6" autocomplete="off">
+          <label class="btn btn-icon" for="option6">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+            </svg>
+            <span class="visually-hidden">أسبوع</span>
+          </label>
+          <input type="radio" class="btn-check" name="icons" id="option7" autocomplete="off">
+          <label class="btn btn-icon" for="option7">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+            </svg>
+            <span class="visually-hidden">شهر</span>
+          </label>
+        </div>
+        {{< /example >}}
+        {{< example show_markup="false" >}}
+        <div class="btn-group">
+          <input type="radio" class="btn-check" name="icons" id="option8" autocomplete="off" checked>
+          <label class="btn btn-icon btn-no-outline" for="option8">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+            </svg>
+            <span class="visually-hidden">يوم</span>
+          </label>
+          <input type="radio" class="btn-check" name="icons" id="option9" autocomplete="off">
+          <label class="btn btn-icon btn-no-outline" for="option9">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+            </svg>
+            <span class="visually-hidden">أسبوع</span>
+          </label>
+          <input type="radio" class="btn-check" name="icons" id="option10" autocomplete="off">
+          <label class="btn btn-icon btn-no-outline" for="option10">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+            </svg>
+            <span class="visually-hidden">شهر</span>
+          </label>
+        </div>
+        {{< /example >}}
+      </div>
+    </article>
     <!-- Boosted mod: no floating labels -->
     <article class="my-3" id="validation">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">

diff --git a/site/content/docs/5.0/examples/cheatsheet/index.html b/site/content/docs/5.0/examples/cheatsheet/index.html
@@ -38,6 +38,7 @@ <h2 class="h6 pt-4 pb-3 mb-4 border-bottom border-light border-1">On this page</
           <li><a class="d-flex" href="#disabled-forms">Disabled forms</a></li>
           <li><a class="d-flex" href="#sizing">Sizing</a></li>
           <li><a class="d-flex" href="#input-group">Input group</a></li>
+          <li><a class="d-flex" href="#toggle">Radio toggle buttons</a></li>
           <li><a class="d-flex" href="#validation">Validation</a></li>
         </ul>
       </li>
@@ -499,6 +500,80 @@ <h3>Input group</h3>
         {{< /example >}}
       </div>
     </article>
+    <article class="my-3" id="toggle">
+      <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
+        <h3>Radio toggle buttons</h3>
+        <a class="d-flex align-items-center" href="{{< docsref "/forms/checks-radios" >}}#radio-toggle-buttons">Documentation</a>
+      </div>
+
+      <div>
+        {{< example show_markup="false" class="mt-0" >}}
+        <div class="btn-group">
+          <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
+          <label class="btn btn-secondary" for="option1">Checked</label>
+
+          <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
+          <label class="btn btn-secondary" for="option2">Radio</label>
+
+          <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
+          <label class="btn btn-secondary" for="option3">Disabled</label>
+
+          <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
+          <label class="btn btn-secondary" for="option4">Radio</label>
+        </div>
+        {{< /example >}}
+        {{< example show_markup="false" >}}
+        <div class="btn-group">
+          <input type="radio" class="btn-check" name="icons" id="option5" autocomplete="off" checked>
+          <label class="btn btn-icon" for="option5">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+            </svg>
+            <span class="visually-hidden">Day</span>
+          </label>
+          <input type="radio" class="btn-check" name="icons" id="option6" autocomplete="off">
+          <label class="btn btn-icon" for="option6">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+            </svg>
+            <span class="visually-hidden">Week</span>
+          </label>
+          <input type="radio" class="btn-check" name="icons" id="option7" autocomplete="off">
+          <label class="btn btn-icon" for="option7">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+            </svg>
+            <span class="visually-hidden">Month</span>
+          </label>
+        </div>
+        {{< /example >}}
+        {{< example show_markup="false" >}}
+        <div class="btn-group">
+          <input type="radio" class="btn-check" name="icons" id="option8" autocomplete="off" checked>
+          <label class="btn btn-icon btn-no-outline" for="option8">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#day"/>
+            </svg>
+            <span class="visually-hidden">Day</span>
+          </label>
+          <input type="radio" class="btn-check" name="icons" id="option9" autocomplete="off">
+          <label class="btn btn-icon btn-no-outline" for="option9">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#week"/>
+            </svg>
+            <span class="visually-hidden">Week</span>
+          </label>
+          <input type="radio" class="btn-check" name="icons" id="option10" autocomplete="off">
+          <label class="btn btn-icon btn-no-outline" for="option10">
+            <svg width="1.25rem" height="1.25rem" fill="currentColor">
+              <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#month"/>
+            </svg>
+            <span class="visually-hidden">Month</span>
+          </label>
+        </div>
+        {{< /example >}}
+      </div>
+    </article>
     <!-- Boosted mod: no floating labels -->
     <article class="my-3" id="validation">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">