From 7c41293db4c59bfc6943972ea133b410777c73f3 Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Thu, 17 Dec 2020 13:10:12 -0500 Subject: [PATCH] feat(bar-loader): update spectrum css input --- packages/bar-loader/README.md | 4 --- packages/bar-loader/package.json | 3 ++- packages/bar-loader/src/BarLoader.ts | 16 +++++++++--- .../bar-loader/src/spectrum-bar-loader.css | 8 +++--- packages/bar-loader/src/spectrum-config.js | 24 ++++++++++++++--- .../bar-loader/stories/bar-loader.stories.ts | 6 ----- yarn.lock | 26 +++++++++---------- 7 files changed, 52 insertions(+), 35 deletions(-) diff --git a/packages/bar-loader/README.md b/packages/bar-loader/README.md index 4cb81e7673..5a3ff2658d 100644 --- a/packages/bar-loader/README.md +++ b/packages/bar-loader/README.md @@ -33,7 +33,6 @@ An `` is used to visually show the progression of a system operat
-
``` @@ -46,7 +45,6 @@ When a loader needs to be placed on top of a colored background, use the over ba
-
``` @@ -59,7 +57,6 @@ A bar loader can be either determinate or indeterminate as signified by `[indete
-
``` @@ -72,7 +69,6 @@ A bar loader can be delivered with its labeling displayed above its visual indic
- ${this.label}
+ + ${this.label} + ${this.indeterminate ? html`` : html` -
${this.progress}%
+ + ${this.progress}% + `} ` : html``} diff --git a/packages/bar-loader/src/spectrum-bar-loader.css b/packages/bar-loader/src/spectrum-bar-loader.css index cce19b0889..ac96505f5f 100644 --- 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 index 0cf20faf33..3a667ab3e9 100644 --- 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 index a50c5e314a..f1a6fa21f9 100644 --- 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` - - `; -}; - export const indeterminate = (): TemplateResult => { return html` diff --git a/yarn.lock b/yarn.lock index 16f82f8ef6..9b6fb43b66 100644 --- 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==