Merge pull request #872 from trimble-oss/dev/coliff/alerts-labels-fixes

Updates Labels for forms and Alerts styles
trimble-oss · Jun 26, 2024 · da980c3 · da980c3
2 parents 7c41861 + 8e53a14
commit da980c3
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 59 deletions.
diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss
@@ -120,3 +120,19 @@ input[type="search"]::-webkit-search-cancel-button {
 .nav-tabs {
   --bs-nav-tabs-border-radius: 0.25rem;
 }
+
+[data-bs-theme="light"] .alert-danger i.modus-icons {
+  color: var(--bs-danger);
+}
+
+[data-bs-theme="light"] .alert-primary i.modus-icons {
+  color: var(--bs-primary);
+}
+
+[data-bs-theme="light"] .alert-success i.modus-icons {
+  color: var(--bs-success);
+}
+
+[data-bs-theme="light"] .alert-warning i.modus-icons {
+  color: var(--bs-warning);
+}
diff --git a/content/components/web/alerts/_index.md b/content/components/web/alerts/_index.md
@@ -32,14 +32,16 @@ Alerts display in direct response to a user action (e.g. clicking the Submit but
     <tr>
       <td style="line-height: 1.25" scope="row">
         <div class="border">
-          <div class="alert alert-danger d-flex align-items-center mx-3 mt-3 mb-0" role="alert">
-            <i class="modus-icons alert-icon me-2" aria-hidden="true">warning</i>
+          <div class="alert alert-danger d-flex align-items-center mx-3 mt-3 mb-0 alert-dismissible fade show" role="alert">
+            <i class="modus-icons alert-icon me-2" aria-hidden="true">alert</i>
             <div>Error! Your username and password were incorrect</div>
+            <button type="button" class="btn-close" aria-label="Close">
+            </button>
           </div>
           <div class="p-3">
             <form>
               <div class="form-group mb-3">
-                <label for="exampleInputEmail1">Email address</label>
+                <label for="exampleInputEmail1" class="form-label">Email address</label>
                 <input
                   type="email"
                   class="form-control"
@@ -49,7 +51,7 @@ Alerts display in direct response to a user action (e.g. clicking the Submit but
                 />
               </div>
               <div class="form-group mb-3">
-                <label for="exampleInputPassword1">Password</label>
+                <label for="exampleInputPassword1" class="form-label">Password</label>
                 <input
                   type="password"
                   class="form-control"

diff --git a/content/components/web/alerts/styles.md b/content/components/web/alerts/styles.md
@@ -17,29 +17,31 @@ popoverCSSInspector: true
 
 ## Specifications
 
-- Container (Height: 56px; Radius: 2px; <span class="theme-l">background-color: white;</span> 1px border, 8px indicator line same color as border on the left; Padding: 16px; Margin: 16px) _required_
+- Container (Height: 56px; Radius: 2px; 1px border, 12px indicator line same color as border on the left; Padding: 16px; Margin: 16px) _required_
 - Alert text (Font: Open Sans Bold 14px) _required_
 - Leading Non-Interactive Icon/ Charm (16x16px) _optional_
-- Button (text only, right aligned) or trailing close icon (16px16px) _optional_
+- Button (text only, right aligned) or trailing close icon (16px16px)
 - Link (underlined, only one per alert) _optional_
 
 <div class="p-5 my-3 pr-5 bg-dark bg-opacity-10">
   <br />
   <br />
   <div
-    class="alert alert-success d-flex align-items-center bg-white"
+    class="alert alert-success d-flex align-items-center alert-dismissible fade show"
     style="max-width: 460px; height: 56px"
     role="alert"
     data-bs-toggle="popover"
     data-bs-placement="right"
     data-bs-custom-class="popover-css-inspector"
     data-css-inspector-hide="b-width margin width"
-    data-css-inspector-show="b-color b-width b-left-width "
-    data-bs-container="td">
+    data-css-inspector-show="b-color b-width b-left-width"
+    data-bs-container="main">
     <i class="modus-icons notranslate alert-icon me-2" aria-hidden="true">
       check_circle
     </i>
     <div>You have completed a task.</div>
+    <button type="button" class="btn-close" aria-label="Close">
+      </button>
   </div>
   <br />
 </div>
@@ -65,77 +67,54 @@ document.addEventListener('DOMContentLoaded', function() {
 ### Examples
 
 <style>
-[data-bs-theme=light] .alert {
-  background-color: white !important;
-}
-.bg-light .alert {
-  max-width: 600px;
-}
 .css-max-width {
   display: none;
 }
-[data-bs-theme=dark] .popover-body .theme-d {
+[data-bs-theme="dark"] .popover-body .theme-d {
   display: inline-block !important;
 }
-[data-bs-theme=dark] code {
+[data-bs-theme="dark"] code {
   filter: brightness(250%);
 }
 </style>
 
 <div class="bg-secondary bg-opacity-10">
   <div class="p-3 p-xl-4 px-xl-5 mx-4">
-    <div class="alert alert-primary d-flex align-items-center" role="alert">
+    <div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
       <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">info</i>
     <div>
       An example alert with an icon
     </div>
+     <button type="button" class="btn-close" aria-label="Close">
+      </button>
   </div>
-    <div class="alert alert-secondary d-flex align-items-center py-2" role="alert">
-      <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">help</i>
-      <div>A basic secondary alert with a button</div>
-      <div class="ms-auto">
-        <a href="#" class="btn-text-primary">Button</a>
-      </div>
-    </div>
-    <div class="alert alert-dark d-flex align-items-center" role="alert">
-      <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">info</i>
-      <div>A basic dark alert with a <a href="#examples">link</a></div>
-    </div>
     <div class="alert alert-success d-flex align-items-center alert-dismissible fade show" role="alert">
       <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">check_circle</i>
       <div>Success! A basic success alert with a dismiss icon</div>
-      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
-      </button>
-    </div>
-    <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
-    <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">warning</i>
-      <div> Error! A basic error alert with a dismiss icon</div>
-      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
+      <button type="button" class="btn-close" aria-label="Close">
       </button>
     </div>
     <div class="alert alert-warning d-flex align-items-center alert-dismissible fade show" role="alert">
-      <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">alert_outlined</i>
+      <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">warning</i>
       <div>Warning! A basic warning alert with a dismiss icon</div>
-      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
+      <button type="button" class="btn-close" aria-label="Close">
+      </button>
+    </div>
+    <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
+    <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">alert</i>
+      <div> Error! A basic error alert with a dismiss icon</div>
+      <button type="button" class="btn-close" aria-label="Close">
       </button>
     </div>
   </div>
 </div>
 
-### Colors
-
 <!-- prettier-ignore-start -->
 | Element   | Property   | Color                                                                              |
 | --------- | ---------- | ---------------------------------------------------------------------------------- |
 | Primary   | Color      | {{< color-preview nameL="Trimble Blue" hexL="#0063a3" nameD=" " hexD="#ffffff" >}} |
 |           | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#0063a380" >}}      |
 |           | Border     | {{< color-preview nameL="Trimble Blue" hexL="#0063a3" nameD=" " hexD="#019AEB" >}} |
-| Secondary | Color      | {{< color-preview nameL="Gray 6" hexL="#6a6e79" nameD=" " hexD="#ffffff" >}}       |
-|           | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#6a6e7980" >}}      |
-|           | Border     | {{< color-preview nameL="Gray 8" hexL="#464B52" nameD=" " hexD="#6a6e79" >}}       |
-| Dark      | Color      | {{< color-preview nameL="Trimble Gray" hexL="#252a2e" nameD=" " hexD="#ffffff" >}} |
-|           | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#171c1e80" >}}      |
-|           | Border     | {{< color-preview nameL="Trimble Gray" hexL="#252a2e" nameD=" " hexD="#464b52" >}} |
 | Success   | Color      | {{< color-preview nameL="Green Dark" hexL="#006638" nameD=" " hexD="#ffffff" >}}   |
 |           | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#1e8a4480" >}}      |
 |           | Border     | {{< color-preview nameL="Green Dark" hexL="#006638" nameD=" " hexD="#1e8a44" >}}   |
@@ -145,7 +124,7 @@ document.addEventListener('DOMContentLoaded', function() {
 | Warning   | Color      | {{< color-preview nameL="Trimble Gray" hexL="#252A2E" nameD=" " hexD="#ffffff" >}} |
 |           | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="#fbad2680" >}}      |
 |           | Border     | {{< color-preview nameL="Yellow Dark" hexL="#e49325" nameD=" " hexD="#fbad26" >}}  |
-{class="table table-sm table-bordered border border-opacity-50"}
+{class="table table-sm table-bordered border border-opacity-50 d-none"}
 <!-- prettier-ignore-end -->
 
 ### Behaviors

diff --git a/content/components/web/rich-text-format-editor/styles.md b/content/components/web/rich-text-format-editor/styles.md
@@ -169,11 +169,11 @@ The modals consists of following elements:
           </div>
           <div class="modal-body">
             <div class="form-group mb-3">
-              <label for="inputText">Text <span class="text-danger">*</span></label>
+              <label for="inputText" class="form-label">Text <span class="text-danger">*</span></label>
               <input class="form-control my-1" placeholder="Enter text" type="text" id="inputText" required />
             </div>
             <div class="form-group mb-3">
-              <label for="inputUrl">URL <span class="text-danger">*</span></label>
+              <label for="inputUrl" class="form-label">URL <span class="text-danger">*</span></label>
               <input class="form-control my-1" placeholder="Placeholder text" type="url" id="inputUrl" required />
             </div>
           </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,13 +44,13 @@
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "6.0.0",
-    "@trimble-oss/modus-bootstrap": "2.0.0-alpha32",
+    "@trimble-oss/modus-bootstrap": "2.0.0-alpha33",
     "@trimble-oss/modus-icons": "1.14.0",
     "autoprefixer": "10.4.19",
     "bootstrap-print-css": "1.0.1",
     "cross-env": "7.0.3",
     "htmlhint": "1.1.4",
-    "hugo-bin": "0.124.0",
+    "hugo-bin": "0.125.0",
     "list.js": "2.3.1",
     "npm-run-all": "4.1.5",
     "popover-css-inspector": "1.0.0-beta14",