Merge pull request #169 from umbraco/feature/loader-bar-looks

Author: nielslyngsoe

package-lock.json

@@ -166,6 +166,9 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
       #loader {
         font-size: 1.5em;
       }
+      :host([look]:not([look=''])) #loader {
+        color: inherit;
+      }
 
       /* ANIMATIONS */
       @keyframes fadeIn {

packages/uui-button/lib/uui-button.element.ts

@@ -18,6 +18,7 @@ export default {
     look: '',
     type: '',
     label: 'Button',
+    state: '',
   },
   argTypes: {
     look: {
@@ -270,11 +271,8 @@ WithIcon.parameters = {
   },
 };
 
-export const WaitingState = () => html`
-  <uui-button state="waiting" label="A11Y proper label">
-    Loading button
-  </uui-button>
-`;
+export const WaitingState = Template.bind({});
+WaitingState.args = { state: 'waiting' };
 WaitingState.parameters = {
   docs: {
     source: {

packages/uui-button/lib/uui-button.story.ts

@@ -182,4 +182,10 @@
   --uui-color-mine-grey-dimmed: color(
     $mine-grey saturation(- 100%) lightness(+ 10%)
   );
+
+  --uui-color-primary: var(--uui-color-violet-blue);
+  --uui-color-secondary: var(--uui-color-timberwolf);
+  --uui-color-positive: var(--uui-color-jungle-green);
+  --uui-color-warning: var(--uui-color-sunglow);
+  --uui-color-danger: var(--uui-color-maroon-flush);
 }

packages/uui-css/lib/custom-properties/colors.css

@@ -19,6 +19,7 @@ export class UUILoaderBarElement extends LitElement {
         width: 100%;
         height: 4px;
         overflow: hidden;
+        color: var(--uui-color-primary);
       }
 
       #bar,
@@ -74,6 +75,7 @@ export class UUILoaderBarElement extends LitElement {
   ];
 
   private _progress = 0;
+
   /**
    * Set this to a number between 0 and 100 to reflect the progress of some operation. When the value is left at 0 loader will looped animation
    * @type {number}

packages/uui-loader-bar/lib/uui-loader-bar.element.ts

@@ -27,12 +27,12 @@ const Template: Story = props =>
     <uui-loader-bar
       progress=${props.progress}
       animationDuration=${props.animationDuration}
-      style="color: ${props.color}"></uui-loader-bar>
+      style=${props.color ? 'color: ' + props.color : ''}></uui-loader-bar>
   `;
 
 export const AAAOverview = Template.bind({});
 AAAOverview.storyName = 'Overview';
-AAAOverview.args = { color: 'black' };
+AAAOverview.args = { color: '' };
 AAAOverview.argTypes = {
   color: { table: { category: 'inline styling' } },
 };

packages/uui-loader-bar/lib/uui-loader-bar.story.ts

@@ -21,6 +21,7 @@ export class UUILoaderCircleElement extends LitElement {
         position: relative;
         width: 1em;
         height: 1em;
+        color: var(--uui-color-primary);
       }
 
       #spinner {

packages/uui-loader-circle/lib/uui-loader-circle.element.ts

@@ -22,15 +22,17 @@ export default {
 const Template: Story = props =>
   html`
     <uui-loader-circle
-      style="color: ${props.color}; font-size: ${props.fontSize}"
+      style="${props.color
+        ? 'color: ' + props.color
+        : ''}; font-size: ${props.fontSize}"
       progress=${props.progress}
       ?show-progress=${props.showProgress}></uui-loader-circle>
   `;
 
 export const AAAOverview = Template.bind({});
 AAAOverview.storyName = 'Overview';
 
-AAAOverview.args = { color: 'black' };
+AAAOverview.args = { color: '' };
 AAAOverview.argTypes = {
   color: { table: { category: 'inline styling' } },
 };

packages/uui-loader-circle/lib/uui-loader-circle.story.ts

@@ -11,6 +11,7 @@ export class UUILoaderElement extends LitElement {
     css`
       :host {
         /* currently this components color is defined through currentColor, if we like to use a different color, we need to implemenet a --uui-interface- color which will be set/overwritten when looks are set, aka. if this element is used within a button with the look danger, then this component would get an appropriate color. */
+        color: var(--uui-color-primary);
       }
 
       div {

packages/uui-loader/lib/uui-loader.element.ts

@@ -18,8 +18,9 @@ export default {
 };
 
 export const Overview: Story = props =>
-  html`<uui-loader style="color: ${props.color}"></uui-loader>`;
-Overview.args = { color: 'black' };
+  html`<uui-loader
+    style=${props.color ? 'color: ' + props.color : ''}></uui-loader>`;
+Overview.args = { color: '' };
 Overview.argTypes = {
   color: { table: { category: 'inline styling' } },
 };