Merge branch 'release/2.7.0'

USDA-FSA · Dec 21, 2021 · 2fd380f · 2fd380f
2 parents 1d855af + a86a672
commit 2fd380f
Show file tree

Hide file tree

Showing 54 changed files with 1,173 additions and 878 deletions.
diff --git a/README.md b/README.md
@@ -73,7 +73,7 @@ Lastly, refer to [Using the Boilerplate](#using-the-boilerplate) for basic guida
 
 If you don't have Node or the ability to incorporate source files into a build process (Grunt, Gulp, Webpack, etc), follow these steps to manually use the FSA Style.
 
-Download the latest assets: **https://github.com/usda-fsa/fsa-style/releases/download/2.6.1/fsa-style-2.6.1.zip**
+Download the latest assets: **https://github.com/usda-fsa/fsa-style/releases/download/2.7.0/fsa-style-2.7.0.zip**
 
 #### 1. Visual Index
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "fsa-style",
   "description": "Open Source CSS Framework of the USDA's FPAC Design System",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "main": "index.js",
   "license": "SEE LICENSE in LICENSE.md",
   "repository": {

diff --git a/src/boilerplate.html b/src/boilerplate.html
diff --git a/src/demo/rwd__btn-group.html b/src/demo/rwd__btn-group.html
@@ -24,14 +24,14 @@
         <span class="
 
           fsa-btn-group
-          fsa-btn-group--block
+          fsa-btn-group--fill
 
           fsa-btn-group--small@s
           fsa-btn-group--inline@s
 
           fsa-btn-group--medium@m
 
-          fsa-btn-group--block@l
+          fsa-btn-group--fill@l
 
         " role="group" aria-label="Label describing this group">
           <button class="fsa-btn-group__item" type="button">Label</button>
@@ -41,11 +41,11 @@
       </p>
       <code>
         <span class="docs-highlight">fsa-btn-group</span><br>
-        <span class="docs-highlight@xs-only">fsa-btn-group--<strong>block</strong></span><br>
+        <span class="docs-highlight@xs-only">fsa-btn-group--<strong>fill</strong></span><br>
         <span class="docs-highlight@s-only">fsa-btn-group--<strong>small@s</strong></span><br>
         <span class="docs-highlight@s-only docs-highlight@m-only">fsa-btn-group--<strong>inline@s</strong></span><br>
         <span class="docs-highlight@m">fsa-btn-group--<strong>medium@m</strong></span><br>
-        <span class="docs-highlight@l">fsa-btn-group--<strong>block@l</strong></span>
+        <span class="docs-highlight@l">fsa-btn-group--<strong>fill@l</strong></span>
       </code>
     </div>
   </div>

diff --git a/src/demo/rwd__buttons.html b/src/demo/rwd__buttons.html
@@ -23,15 +23,15 @@
       <p>
         <button class="
           fsa-btn
-          fsa-btn--block
+          fsa-btn--fill
           fsa-btn--inline@s
           fsa-btn--small@m
           fsa-btn--medium@l
           fsa-btn--plain@l">Label</button>
       </p>
       <code style="display: block;">
         <span class="docs-highlight">fsa-btn</span><br>
-        <span class="docs-highlight@xs-only">fsa-btn--<strong>block</strong></span><br>
+        <span class="docs-highlight@xs-only">fsa-btn--<strong>fill</strong></span><br>
         <span class="docs-highlight@s">fsa-btn--<strong>inline@s</strong></span><br>
         <span class="docs-highlight@m-only">fsa-btn--<strong>small@m</strong></span><br>
         <span class="docs-highlight@l">fsa-btn--<strong>medium@l</strong></span><br>

diff --git a/src/demo/rwd__input.html b/src/demo/rwd__input.html
@@ -21,10 +21,10 @@
   <div class="fsa-section">
     <div class="fsa-section__bd">
       <p>
-        <input class="fsa-input fsa-input--block@s fsa-input--large@s fsa-input--medium@m fsa-input--small@l fsa-input--inline@l" type="text" name="some_name" value="Text" placeholder="Placeholder">
+        <input class="fsa-input fsa-input--fill@s fsa-input--large@s fsa-input--medium@m fsa-input--small@l fsa-input--inline@l" type="text" name="some_name" value="Text" placeholder="Placeholder">
       </p>
       <code><span class="docs-highlight">fsa-input</span></code><br>
-      <code><span class="docs-highlight@s-only docs-highlight@m-only">fsa-input--<strong>block@s</strong></span></code><br>
+      <code><span class="docs-highlight@s-only docs-highlight@m-only">fsa-input--<strong>fill@s</strong></span></code><br>
       <code><span class="docs-highlight@s-only">fsa-input--<strong>large@s</strong></span></code><br>
       <code><span class="docs-highlight@m-only">fsa-input--<strong>medium@m</strong></span></code><br>
       <code><span class="docs-highlight@l">fsa-input--<strong>small@l</strong></span></code><br>

diff --git a/src/demo/rwd__link-display.html b/src/demo/rwd__link-display.html
@@ -26,11 +26,11 @@
   <div class="fsa-section">
     <div class="fsa-section__bd fsa-p-t--s">
         <div class="fsa-text-size--4">
-          <a style="outline: 1px dashed #999;" class="fsa-link--block fsa-link--inline@s" href="https://en.wikipedia.org/wiki/Sierra_Nevada">Sierra Nevada mountains</a>
+          <a style="outline: 1px dashed #999;" class="fsa-link--fill fsa-link--inline@s" href="https://en.wikipedia.org/wiki/Sierra_Nevada">Sierra Nevada mountains</a>
         </div>
         <p class="fsa-level fsa-level--justify-center fsa-m--s">
           <code>
-            <span class="docs-highlight@xs-only">fsa-link--block</span><br>
+            <span class="docs-highlight@xs-only">fsa-link--fill</span><br>
             <span class="docs-highlight@s">fsa-link--inline<strong>@s</strong></span><br>
           </code>
         </p>

diff --git a/src/demo/rwd__select.html b/src/demo/rwd__select.html
@@ -21,7 +21,7 @@
   <div class="fsa-section">
     <div class="fsa-section__bd">
       <p>
-        <select class="fsa-select fsa-select--large@s fsa-select--block@m fsa-select--small@l fsa-select--inline@l" name="State">
+        <select class="fsa-select fsa-select--large@s fsa-select--fill@m fsa-select--small@l fsa-select--inline@l" name="State">
           <option value="none" selected="selected">- Select a State -</option>
           <option value="AL">Alabama</option>
           <option value="AK">Alaska</option>
@@ -78,7 +78,7 @@
       </p>
       <code><span class="docs-highlight">fsa-select</span></code><br>
       <code><span class="docs-highlight@s-only docs-highlight@m-only">fsa-select--<strong>large@s</strong></span></code><br>
-      <code><span class="docs-highlight@m-only">fsa-select--<strong>block@m</strong></span></code><br>
+      <code><span class="docs-highlight@m-only">fsa-select--<strong>fill@m</strong></span></code><br>
       <code><span class="docs-highlight@l-only">fsa-select--<strong>small@l</strong></span></code><br>
       <code><span class="docs-highlight@l-only">fsa-select--<strong>inline@l</strong></span></code>
     </div>

diff --git a/src/demo/rwd__stepped-control.html b/src/demo/rwd__stepped-control.html
@@ -35,7 +35,7 @@
         <p>Rerum saepe dolorem culpa nobis harum quae nam deleniti laudantium nemo velit perspiciatis ex, blanditiis possimus natus tempore ea aperiam praesentium quaerat repellendus doloremque? Aliquam assumenda temporibus vel distinctio! Quia.</p>
         <div class="fsa-stepped-control fsa-stepped-control--sticky">
           <div class="fsa-stepped-control__bd">
-            <div class="fsa-stepped-control__message fsa-stepped-control__message--block" role="status">
+            <div class="fsa-stepped-control__message fsa-stepped-control__message--fill" role="status">
               <strong>5</strong> of <strong>10</strong> Commodities are complete
             </div>
             <div class="fsa-stepped-control__list">

diff --git a/src/demo/rwd__table.html b/src/demo/rwd__table.html
@@ -20,7 +20,7 @@
 <body>
   <div class="fsa-section">
     <div class="fsa-section__bd">
-      <ul class="fsa-form-list fsa-text-size--2">
+      <ul class="fsa-form-list fsa-text-size--2 fsa-m-t--ss">
         <li>
           <input data-behavior="toggle-rwd-table" data-target="rwd-table-demo" class="fsa-radio" id="rwd-table-01" type="radio" name="rwd-table" value="fsa-table--responsive-horizontal" checked="">
           <label for="rwd-table-01"><code>fsa-table<strong>--responsive-horizontal</strong></code></label>