Feat: Adds looks and reworks colors on badge and tag (#243)

JesmoDev · web-flow · commit 94206b46c69f · 2022-06-27T11:21:55.000+02:00
diff --git a/packages/uui-badge/lib/uui-badge.element.ts b/packages/uui-badge/lib/uui-badge.element.ts
@@ -1,12 +1,14 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { InterfaceColor, InterfaceLook } from '@umbraco-ui/uui-base/lib/types';
 
 /**
  *  A badge to notify that there is something that requires attention of the user. The badge is positioned with `position: absolute`. It will determine its position against the first ancestor with `position: relative`.
  *  @element uui-badge
  *  @slot - The slot for badge contents
  */
+
 @defineElement('uui-badge')
 export class UUIBadgeElement extends LitElement {
   static styles = [
@@ -32,26 +34,55 @@ export class UUIBadgeElement extends LitElement {
         box-sizing: border-box;
 
         border-radius: var(--uui-size-4);
-
-        /** default color: */
-        background-color: var(--uui-color-default);
-        color: var(--uui-color-default-contrast);
+        border: 1px solid transparent;
       }
-      :host([color='secondary']) {
-        background-color: var(--uui-color-surface-alt);
-        color: var(--uui-color-default);
+
+      :host {
+        --color: var(--uui-color-default);
+        --color-standalone: var(--uui-color-default-standalone);
+        --color-contrast: var(--uui-color-default-contrast);
       }
       :host([color='positive']) {
-        background-color: var(--uui-color-positive);
-        color: var(--uui-color-positive-contrast);
+        --color: var(--uui-color-positive);
+        --color-standalone: var(--uui-color-positive-standalone);
+        --color-contrast: var(--uui-color-positive-contrast);
       }
       :host([color='warning']) {
-        background-color: var(--uui-color-warning);
-        color: var(--uui-color-warning-contrast);
+        --color: var(--uui-color-warning);
+        --color-standalone: var(--uui-color-warning-standalone);
+        --color-contrast: var(--uui-color-warning-contrast);
       }
       :host([color='danger']) {
-        background-color: var(--uui-color-danger);
-        color: var(--uui-color-danger-contrast);
+        --color: var(--uui-color-danger);
+        --color-standalone: var(--uui-color-danger-standalone);
+        --color-contrast: var(--uui-color-danger-contrast);
+      }
+
+      :host {
+        background-color: var(--uui-color-surface);
+        color: var(--color-standalone);
+        border-color: transparent;
+      }
+      :host([look='primary']) {
+        background-color: var(--color);
+        color: var(--color-contrast);
+        border-color: transparent;
+      }
+      :host([look='secondary']) {
+        background-color: var(--uui-color-surface-alt);
+        color: var(--color-standalone);
+        border-color: transparent;
+      }
+      :host([look='outline']) {
+        background-color: var(--uui-color-surface);
+        color: var(--color-standalone);
+        border-color: var(--color-standalone);
+      }
+      :host([look='placeholder']) {
+        border-style: dashed;
+        background-color: var(--uui-color-surface);
+        color: var(--color-standalone);
+        border-color: var(--uui-color-border-standalone);
       }
 
       /** TODO: we didn't want to target elements by name, but what else can we do? */
@@ -95,13 +126,22 @@ export class UUIBadgeElement extends LitElement {
   ];
 
   /**
-   * Changes the look of the badge to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" badge.
-   * @type {"" | "default"|"positive"|"warning"|"danger"}
+   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
+   * @type {"default" | "positive" | "warning" | "danger"}
+   * @attr
+   * @default "default"
+   */
+  @property({ reflect: true })
+  color: InterfaceColor = 'default';
+
+  /**
+   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
+   * @type {"default" | "primary" | "secondary" | "outline" | "placeholder"}
    * @attr
-   * @default default
+   * @default "default"
    */
-  @property({ type: String, reflect: true })
-  color = '';
+  @property({ reflect: true })
+  look: InterfaceLook = 'primary';
 
   /**
    * Bring attention to this badge by applying a bounce animation.
diff --git a/packages/uui-badge/lib/uui-badge.story.ts b/packages/uui-badge/lib/uui-badge.story.ts
@@ -9,13 +9,22 @@ export default {
   id: 'uui-badge',
   args: {
     color: 'default',
+    look: 'primary',
     slot: '1',
     attention: false,
   },
   argTypes: {
+    look: {
+      control: {
+        type: 'select',
+      },
+      options: ['default', 'primary', 'secondary', 'outline', 'placeholder'],
+    },
     color: {
-      options: ['default', 'secondary', 'positive', 'warning', 'danger'],
-      control: { type: 'select' },
+      control: {
+        type: 'select',
+      },
+      options: ['default', 'positive', 'warning', 'danger'],
     },
     slot: {
       control: { type: 'text' },
@@ -25,8 +34,11 @@ export default {
 
 const Template: Story = props => html` <uui-icon-registry-essential>
   <div
-    style="position:relative; width:80px; height:80px; border: 2px dashed black;">
-    <uui-badge .color=${props.color} ?attention=${props.attention}
+    style="position:relative; width:80px; height:80px; border: 1px dashed rgba(0,0,0,0.1)">
+    <uui-badge
+      .color=${props.color}
+      .look=${props.look}
+      ?attention=${props.attention}
       >${props.slot}</uui-badge
     >
   </div>
@@ -43,7 +55,7 @@ AAAOverview.parameters = {
   docs: {
     source: {
       code: `
-<div style="position:relative; width:80px; height:80px; border: 2px dashed black;">
+<div style="position:relative; width:80px; height:80px; border: 1px dashed rgba(0,0,0,0.1)">
   <uui-badge>1</uui-badge>
 </div>
     `,
@@ -61,7 +73,7 @@ WithAttention.parameters = {
   docs: {
     source: {
       code: `
-<div style="position:relative; width:80px; height:80px; border: 2px dashed black;">
+<div style="position:relative; width:80px; height:80px; border: 1px dashed rgba(0,0,0,0.1)">
   <uui-badge color="danger" attention>!</uui-badge>
 </div>
     `,
@@ -78,7 +90,7 @@ WithText.parameters = {
   docs: {
     source: {
       code: `
-<div style="position:relative; width:80px; height:80px; border: 2px dashed black;">
+<div style="position:relative; width:80px; height:80px; border: 1px dashed rgba(0,0,0,0.1)">
   <uui-badge color="positive">Published</uui-badge>
 </div>
     `,
@@ -98,7 +110,7 @@ WithIcon.parameters = {
   docs: {
     source: {
       code: `
-<div style="position:relative; width:80px; height:80px; border: 2px dashed black;">
+<div style="position:relative; width:80px; height:80px; border: 1px dashed rgba(0,0,0,0.1)">
   <uui-icon-registry-essential>
     <uui-badge ="positive">
       <uui-icon name="favorite"></uui-icon>
@@ -131,26 +143,34 @@ OnButton.parameters = {
   },
 };
 
-export const Colors: Story = () => html`
-  <div
-    style="position:relative; width:80px; height:80px; border: 2px dashed black">
-    <uui-badge>Default</uui-badge>
-  </div>
-  <div
-    style="position:relative; width:80px; height:80px; border: 2px dashed black; margin-top: 16px">
-    <uui-badge color="secondary">secondary</uui-badge>
-  </div>
-  </div>
-  <div
-    style="position:relative; width:80px; height:80px; border: 2px dashed black; margin-top: 16px">
-    <uui-badge color="positive">positive</uui-badge>
-  </div>
-  <div
-    style="position:relative; width:80px; height:80px; border: 2px dashed black; margin-top: 16px">
-    <uui-badge color="warning">warning</uui-badge>
-  </div>
-  <div
-    style="position:relative; width:80px; height:80px; border: 2px dashed black; margin-top: 16px">
-    <uui-badge color="danger">danger</uui-badge>
-  </div>
-`;
+const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
+const colors = ['default', 'positive', 'warning', 'danger'];
+
+function uppercaseFirstLetter(s: string) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+export const LooksAndColors: Story = () =>
+  html`
+    ${colors.map(
+      color =>
+        html`
+          <h5>${uppercaseFirstLetter(color)}</h5>
+          <div style="margin-bottom: 32px; display: flex; gap: 16px;">
+            ${looks.map(
+              look => html`
+                <div
+                  style="position:relative; width:100px; height:80px; border: 1px dashed rgba(0,0,0,0.1); margin-top: 16px">
+                  <uui-badge
+                    .look=${look as any}
+                    .color=${color as any}
+                    style="margin-right:12px;"
+                    >${uppercaseFirstLetter(look)}</uui-badge
+                  >
+                </div>
+              `
+            )}
+          </div>
+        `
+    )}
+  `;
diff --git a/packages/uui-base/lib/types/InterfaceColor.ts b/packages/uui-base/lib/types/InterfaceColor.ts
@@ -0,0 +1,8 @@
+export const InterfaceColorValues: Readonly<InterfaceColor[]> = [
+  'default',
+  'positive',
+  'warning',
+  'danger',
+] as const;
+
+export type InterfaceColor = '' | 'default' | 'positive' | 'warning' | 'danger';
diff --git a/packages/uui-base/lib/types/InterfaceLook.ts b/packages/uui-base/lib/types/InterfaceLook.ts
@@ -1,32 +1,15 @@
-import { CSSResult, CSSResultArray, CSSResultGroup, unsafeCSS } from 'lit';
-
-export const InterfaceLookNames: Readonly<InterfaceLookType[]> = [
+export const InterfaceLookValues: Readonly<InterfaceLook[]> = [
+  'default',
   'primary',
   'secondary',
   'outline',
   'placeholder',
-  'positive',
-  'warning',
-  'danger',
 ] as const;
 
-export type InterfaceLookType =
+export type InterfaceLook =
   | ''
+  | 'default'
   | 'primary'
   | 'secondary'
   | 'outline'
-  | 'placeholder'
-  | 'positive'
-  | 'warning'
-  | 'danger';
-
-export const InterfaceLookDefaultValue = '';
-
-//TODO implement that in next released, so it can print out fallback values
-export function InterfaceLookCSSCreator(
-  loopMethod: (lookName: CSSResult) => CSSResultGroup
-): CSSResultArray {
-  return InterfaceLookNames.map((lookName: InterfaceLookType) => {
-    return loopMethod(unsafeCSS(lookName));
-  });
-}
+  | 'placeholder';
diff --git a/packages/uui-base/lib/types/index.ts b/packages/uui-base/lib/types/index.ts
@@ -1 +1,2 @@
 export * from './InterfaceLook';
+export * from './InterfaceColor';
diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts
@@ -12,19 +12,12 @@ import {
 import { css, html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { InterfaceColor, InterfaceLook } from '@umbraco-ui/uui-base/lib/types';
 
 export type UUIButtonState = undefined | 'waiting' | 'success' | 'failed';
 
 export type UUIButtonType = 'submit' | 'button' | 'reset';
 
-export type Look =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'outline'
-  | 'placeholder';
-export type Color = 'default' | 'positive' | 'warning' | 'danger';
-
 /**
  *  @element uui-button
  *  @fires {UUIButtonEvent} click - fires when the element is clicked
@@ -373,7 +366,7 @@ export class UUIButtonElement extends FormControlMixin(
    * @default "default"
    */
   @property({ reflect: true })
-  look: Look = 'default';
+  look: InterfaceLook = 'default';
 
   /**
    * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
@@ -382,7 +375,7 @@ export class UUIButtonElement extends FormControlMixin(
    * @default "default"
    */
   @property({ reflect: true })
-  color: Color = 'default';
+  color: InterfaceColor = 'default';
 
   /**
    * Makes the left and right padding of the button narrower.
diff --git a/packages/uui-tag/lib/uui-tag.element.ts b/packages/uui-tag/lib/uui-tag.element.ts
diff --git a/packages/uui-tag/lib/uui-tag.story.ts b/packages/uui-tag/lib/uui-tag.story.ts

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export * from './InterfaceLook';`
	`2`	`+export * from './InterfaceColor';`