feat(bar-loader): update spectrum css input

adobe · Jan 6, 2021 · 7c41293 · 7c41293
1 parent d8b1218
commit 7c41293
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 35 deletions.
diff --git a/packages/bar-loader/README.md b/packages/bar-loader/README.md
@@ -33,7 +33,6 @@ An `<sp-bar-loader>` is used to visually show the progression of a system operat
 <div
     style="width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;"
 >
-    <sp-bar-loader label="Loaded a lot" progress="71" small></sp-bar-loader>
     <sp-bar-loader label="Loaded a little" progress="22"></sp-bar-loader>
 </div>
 ```
@@ -46,7 +45,6 @@ When a loader needs to be placed on top of a colored background, use the over ba
 <div
     style="width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around; background-color: var(--spectrum-alias-background-color-modal-overlay);"
 >
-    <sp-bar-loader progress="42" over-background small></sp-bar-loader>
     <sp-bar-loader progress="7" over-background></sp-bar-loader>
 </div>
 ```
@@ -59,7 +57,6 @@ A bar loader can be either determinate or indeterminate as signified by `[indete
 <div
     style="width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;"
 >
-    <sp-bar-loader indeterminate small></sp-bar-loader>
     <sp-bar-loader indeterminate></sp-bar-loader>
 </div>
 ```
@@ -72,7 +69,6 @@ A bar loader can be delivered with its labeling displayed above its visual indic
 <div
     style="width: var(--spectrum-global-dimension-size-3000); height: var(--spectrum-global-dimension-size-2000); display: flex; flex-direction: column; align-items: center; justify-content: space-around;"
 >
-    <sp-bar-loader small label="Label Above" progress="71"></sp-bar-loader>
     <sp-bar-loader
         side-label
         indeterminate

diff --git a/packages/bar-loader/package.json b/packages/bar-loader/package.json
@@ -49,10 +49,11 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/progressbar": "^1.0.0-beta.2"
+        "@spectrum-css/progressbar": "^1.0.0-beta.3"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",
+        "@spectrum-web-components/field-label": "^0.0.1",
         "tslib": "^2.0.0"
     }
 }
diff --git a/packages/bar-loader/src/BarLoader.ts b/packages/bar-loader/src/BarLoader.ts
@@ -19,6 +19,7 @@ import {
     property,
 } from '@spectrum-web-components/base';
 
+import '@spectrum-web-components/field-label/sp-field-label.js';
 import styles from './bar-loader.css.js';
 
 /**
@@ -41,8 +42,8 @@ export class BarLoader extends SpectrumElement {
     @property({ type: Boolean, reflect: true, attribute: 'side-label' })
     public sideLabel = false;
 
-    @property({ type: Boolean, reflect: true })
-    public small = false;
+    @property({ type: String, reflect: true })
+    public size = 'm';
 
     @property({ type: Number })
     public progress = 0;
@@ -51,11 +52,18 @@ export class BarLoader extends SpectrumElement {
         return html`
             ${this.label
                 ? html`
-                      <div class="label">${this.label}</div>
+                      <sp-field-label size=${this.size} class="label">
+                          ${this.label}
+                      </sp-field-label>
                       ${this.indeterminate
                           ? html``
                           : html`
-                                <div class="percentage">${this.progress}%</div>
+                                <sp-field-label
+                                    size=${this.size}
+                                    class="percentage"
+                                >
+                                    ${this.progress}%
+                                </sp-field-label>
                             `}
                   `
                 : html``}

diff --git a/packages/bar-loader/src/spectrum-bar-loader.css b/packages/bar-loader/src/spectrum-bar-loader.css
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 
 THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-.spectrum-ProgressBar--sizeS {
+:host([size='s']) {
     /* .spectrum-ProgressBar--sizeS */
     --spectrum-progressbar-border-radius: var(
         --spectrum-progressbar-s-border-radius
@@ -38,7 +38,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         --spectrum-global-dimension-size-75
     );
 }
-.spectrum-ProgressBar--sizeM {
+:host([size='m']) {
     /* .spectrum-ProgressBar--sizeM */
     --spectrum-progressbar-border-radius: var(
         --spectrum-progressbar-m-border-radius
@@ -66,7 +66,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         --spectrum-global-dimension-size-100
     );
 }
-.spectrum-ProgressBar--sizeL {
+:host([size='l']) {
     /* .spectrum-ProgressBar--sizeL */
     --spectrum-progressbar-label-gap-y: var(
         --spectrum-global-dimension-size-50
@@ -91,7 +91,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         1000ms
     );
 }
-.spectrum-ProgressBar--sizeXL {
+:host([size='xl']) {
     /* .spectrum-ProgressBar--sizeXL */
     --spectrum-progressbar-border-radius: var(
         --spectrum-progressbar-xl-border-radius

diff --git a/packages/bar-loader/src/spectrum-config.js b/packages/bar-loader/src/spectrum-config.js
@@ -25,9 +25,27 @@ const config = {
                     name: 'side-label',
                 },
                 {
-                    type: 'boolean',
-                    selector: '.spectrum-ProgressBar--small',
-                    name: 'small',
+                    type: 'enum',
+                    name: 'size',
+                    forceOntoHost: true,
+                    values: [
+                        {
+                            name: 's',
+                            selector: '.spectrum-ProgressBar--sizeS',
+                        },
+                        {
+                            name: 'm',
+                            selector: '.spectrum-ProgressBar--sizeM',
+                        },
+                        {
+                            name: 'l',
+                            selector: '.spectrum-ProgressBar--sizeL',
+                        },
+                        {
+                            name: 'xl',
+                            selector: '.spectrum-ProgressBar--sizeXL',
+                        },
+                    ],
                 },
                 {
                     type: 'boolean',

diff --git a/packages/bar-loader/stories/bar-loader.stories.ts b/packages/bar-loader/stories/bar-loader.stories.ts
@@ -31,12 +31,6 @@ export const label = (): TemplateResult => {
     `;
 };
 
-export const labelSmall = (): TemplateResult => {
-    return html`
-        <sp-bar-loader label="Loading" progress="50" small></sp-bar-loader>
-    `;
-};
-
 export const indeterminate = (): TemplateResult => {
     return html`
         <sp-bar-loader label="Loading" indeterminate></sp-bar-loader>

diff --git a/yarn.lock b/yarn.lock
@@ -3432,12 +3432,12 @@
   resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5"
   integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==
 
-"@spectrum-css/accordion@^3.0.0-beta.4":
+"@spectrum-css/accordion@^3.0.0-beta.5":
   version "3.0.0-beta.5"
   resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-3.0.0-beta.5.tgz#8a927c53f954ddf3b40b9af665c2b1e4b3cc1e95"
   integrity sha512-lE136EoYH0BzrawgwB4bae+4ITffpCp/I/C1aJIQhWlZm4+pMBeOjOfSo+6r4N9wgiph8genUTQHP5Kdgblmjg==
 
-"@spectrum-css/actionbar@^3.0.0-beta.5":
+"@spectrum-css/actionbar@^3.0.0-beta.6":
   version "3.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/@spectrum-css/actionbar/-/actionbar-3.0.0-beta.6.tgz#d9084d64db5de9a1b3659781ebced6f92c698f50"
   integrity sha512-R3x5lRIbVm1Z6Bpa9pFpM0Y9X5eKYX/kZRQz1R3VN9mZSMTABe1SLmpSele21/N5Vn1vEsY/63y93ycJCNBQ1w==
@@ -3447,17 +3447,17 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.0-beta.1.tgz#a6684cac108d4a9daefe0be6df8201d3c369a0d6"
   integrity sha512-QbrPMTkbkmh+dEBP66TFXmF5z3qSde+BnLR5hnlo2XMvKvnblX2VJStEbQ+hTKuSZXCRFADXyXD5o0NOYDTByQ==
 
-"@spectrum-css/actiongroup@^1.0.0-beta.4":
+"@spectrum-css/actiongroup@^1.0.0-beta.5":
   version "1.0.0-beta.5"
   resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.0-beta.5.tgz#0aebe606bc4b5fad9a1dc40195e3cb90f44741eb"
   integrity sha512-wcs/Vod6yv96V+AS+F6/sGs2VkCmBLDqUulqJdEZSv8xHZ48OYxtVey70gwgqB1KV0p899zYJbH3CYibNDt8Fg==
 
-"@spectrum-css/asset@^3.0.0-beta.4":
+"@spectrum-css/asset@^3.0.0-beta.5":
   version "3.0.0-beta.5"
   resolved "https://registry.yarnpkg.com/@spectrum-css/asset/-/asset-3.0.0-beta.5.tgz#c63454add8a7ed1c70bba01d2afbbb24cb20fd3c"
   integrity sha512-9YSso7Mc/wWvIi5OPjxlrfA5yEHdjhXgqdV4AWSSshAZ4zrMC6jrNI6wINoUM8sLMMt6nJW2qzDG8kackGV9Zg==
 
-"@spectrum-css/avatar@^3.0.0-beta.4":
+"@spectrum-css/avatar@^3.0.0-beta.5":
   version "3.0.0-beta.5"
   resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-3.0.0-beta.5.tgz#5159c2621bb9aa6f58f6d2ff821207a30b1394d7"
   integrity sha512-v8G5NJQReIQOdBfN+5obWLhRnSkCJWriyv4suSb9IHTZsgQk8lQriB3GiY/YkcU2N1mFfj3FifFPCH5x8ty1/w==
@@ -3467,27 +3467,27 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/banner/-/banner-3.0.0-beta.2.tgz#df448a3dcb8ac63448bd628843a2895cec305780"
   integrity sha512-NqrT03ItWzj+L0dtqjedhop6wKOspBmaowzp9IOY/2kL561kRqYTLKR9vTteZ3cEDVD3ajKA8y+bKIW0eN+X7A==
 
-"@spectrum-css/button@^3.0.0-beta.5":
+"@spectrum-css/button@^3.0.0-beta.6":
   version "3.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.6.tgz#007919d3e7a6692e506dc9addcd46aee6b203b1a"
   integrity sha512-ZoJxezt5Pc006RR7SMG7PfC0VAdWqaGDpd21N8SEykGuz/KmNulqGW8RiSZQGMVX/jk5ZCAthPrH8cI/qtKbMg==
 
-"@spectrum-css/buttongroup@^3.0.0-beta.5":
+"@spectrum-css/buttongroup@^3.0.0-beta.6":
   version "3.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-3.0.0-beta.6.tgz#c810b8873cd128b9ac0c0e0e63b6757706110c2e"
   integrity sha512-7c/RGqw2kNOuef17wiAmAPPL5FZMFZongFexc7uOqjlZjLGirhc9hnyYZXjU44v3ii1+zBztuVpVmfeqZlHr8A==
 
-"@spectrum-css/card@^3.0.0-beta.5":
+"@spectrum-css/card@^3.0.0-beta.6":
   version "3.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-3.0.0-beta.6.tgz#049d7a1e9cd41567e22ff56e8bb98098e52e8d7f"
   integrity sha512-L1nuBPOAGc3gt2c81WNBVp7oPWq8V+a4gr1aPoXmcFMjMhGNVZSVt93kP3Dnr4ALabRG4+gdMJJylP/CGx0e9w==
 
-"@spectrum-css/checkbox@^3.0.0-beta.5":
+"@spectrum-css/checkbox@^3.0.0-beta.6":
   version "3.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.0-beta.6.tgz#338c4e58c4570ac8023f7332794fcb45f5ae9374"
   integrity sha512-Z0Mwu7yn2b+QcZaBqMpKhliTQiF8T/cRyKgTyaIACtJ0FAK5NBJ4h/X6SWW3iXtoUWCH4+p/Hdtq1iQHAFi1qQ==
 
-"@spectrum-css/coachmark@^3.0.0-beta.5":
+"@spectrum-css/coachmark@^3.0.0-beta.6":
   version "3.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/@spectrum-css/coachmark/-/coachmark-3.0.0-beta.6.tgz#607b7f8403689780d54487041ab7bbdcfe448979"
   integrity sha512-KpqBYgQ2AiZRvQWQAZkznwprdv1yEeAhSPORtneVZoo5Sb5mA3wzJiwimPesOM37kDHx6l4swRrAA8IqWSEWHA==
@@ -3497,7 +3497,7 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/commons/-/commons-3.0.0.tgz#61b01fde7ee14f3c61220568339a4b7c07e7d194"
   integrity sha512-pJhzpx6QR+AU0y4GMKSrcZgP855KuYCRYuy8sqi2TQ6hjkkHPmPmZ59+IihGZgPyk42qAJh8tfUCRWxgNxCX7g==
 
-"@spectrum-css/dialog@^3.0.0-beta.5":
+"@spectrum-css/dialog@^3.0.0-beta.6":
   version "3.0.0-beta.6"
   resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.0-beta.6.tgz#b88e5cc8796d94b395e9c3dbe90d621e9848b6a1"
   integrity sha512-Xg8u1sIjXkIsaSeC/ZlQ3KNfpehVBtEvV7etVa8Gp1sTFoKiDIUI1CV7sWcjMN3LoSgL5Hu2OmNo8FdOU9jKag==
@@ -3559,12 +3559,12 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.0-beta.6.tgz#787611f020e091234e6ba7e946b0dbd0ed1a2fa2"
   integrity sha512-dUJlwxoNpB6jOR0g/ywH2cPoUz2FVsL6xPfkm6BSsLp9ejhYy0/OFF4w0Q32Fu9qJDbWJ9qaoOlPpt7IjQ+/GQ==
 
-"@spectrum-css/progressbar@^1.0.0-beta.2", "@spectrum-css/progressbar@^1.0.0-beta.3":
+"@spectrum-css/progressbar@^1.0.0-beta.3":
   version "1.0.0-beta.3"
   resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-1.0.0-beta.3.tgz#402e07b0b4387b9c23bec8bd2cd1b1fbbeb8738b"
   integrity sha512-NIE9zoG0njCKCRMX79Xl2NVK1a3kJ3MHbkhk6MA1A03VhMXcmxR+Ono3FIwqcrI8h9xRQUVGOvZc3T7bLbAf1w==
 
-"@spectrum-css/progresscircle@^1.0.0-beta.2":
+"@spectrum-css/progresscircle@^1.0.0-beta.3":
   version "1.0.0-beta.3"
   resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-1.0.0-beta.3.tgz#3ad7f9bd4dfd7c149a662ccbc43c5f745e054846"
   integrity sha512-2zCpdlcya1Y5Q2V1pK1u6tTpG2s1KAt7GCvSKpyPtViWjcW0QiVXktRn4hvsgHNG4tzH8/KdiwlN8IqXdyRP1A==