uui-badge sizing

Author: nielslyngsoe

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

@@ -13,23 +13,27 @@ export class UUIBadgeElement extends LitElement {
     css`
       :host {
         position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
         /* top: -8px;
         right: -8px; */
-        padding: 3px 5px;
+        padding: var(--uui-size-1) var(--uui-size-2);
         --uui-badge-inset: -8px -8px auto auto;
         /* 4 different ones */
         inset: var(--uui-badge-inset);
 
         text-align: center;
-        font-size: 12px;
-        line-height: 16px;
+        font-size: var(--uui-badge-font-size, var(--uui-type-small-size));
         font-weight: 900;
+        line-height: 1;
 
         margin-right: 0 !important;
 
-        min-width: var(--uui-size-4);
-        min-height: var(--uui-size-4);
+        min-width: var(--uui-size-8);
+        min-height: var(--uui-size-8);
+        box-sizing: border-box;
 
         border-width: var(--uui-badge-border-width, 1px);
         border-style: solid;
@@ -44,9 +48,44 @@ export class UUIBadgeElement extends LitElement {
           var(--uui-interface-surface)
         );
         color: var(--uui-badge-contrast, var(--uui-interface-contrast));
-        display: flex;
-        justify-content: center;
-        align-items: center;
+      }
+
+      /** TODO: we didn't want to target elements by name, but what else can we do? */
+      ::slotted(uui-icon) {
+        margin-left: -0.2em;
+        margin-right: -0.2em;
+      }
+
+      @keyframes --uui-badge-bounce {
+        0% {
+          transform: translateY(0);
+        }
+        20% {
+          transform: translateY(-6px);
+        }
+        40% {
+          transform: translateY(0);
+        }
+        55% {
+          transform: translateY(-3px);
+        }
+        70% {
+          transform: translateY(0);
+        }
+        100% {
+          transform: translateY(0);
+        }
+      }
+      :host([attention]) {
+        animation-duration: 1.4s;
+        animation-iteration-count: infinite;
+        animation-name: --uui-badge-bounce;
+        animation-timing-function: ease;
+      }
+      @media (prefers-reduced-motion) {
+        :host([attention]) {
+          animation: none;
+        }
       }
 
       :host([look='primary']) {
@@ -130,6 +169,15 @@ export class UUIBadgeElement extends LitElement {
   @property({ type: String, reflect: true })
   look: InterfaceLookType = 'danger';
 
+  /**
+   * Bring attention to this badge by applying a bounce animation.
+   * @type Boolean
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  attention = false;
+
   render() {
     return html` <slot></slot> `;
   }

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

@@ -10,6 +10,11 @@ export default {
   title: 'Displays/Badge',
   component: 'uui-badge',
   id: 'uui-badge',
+  args: {
+    look: 'primary',
+    slot: '1',
+    attention: false,
+  },
   argTypes: {
     look: {
       options: [
@@ -28,27 +33,37 @@ export default {
 
 const Template: Story = props => html` <div
   style="position:relative; width:80px; height:80px; border: 2px dashed black;">
-  <uui-badge .look=${props.look}>${props.slot}</uui-badge>
+  <uui-badge .look=${props.look} ?attention=${props.attention}
+    >${props.slot}</uui-badge
+  >
 </div>`;
 
 export const AAAOverview = Template.bind({});
 AAAOverview.args = {
-  look: 'danger',
-  slot: '!',
+  look: 'primary',
+  slot: '1',
+  attention: false,
 };
 AAAOverview.storyName = 'Overview';
 AAAOverview.parameters = {
   docs: {
     source: {
       code: `
 <div style="position:relative;">
-  <uui-badge>!</uui-badge>
+  <uui-badge>1</uui-badge>
 </div>
     `,
     },
   },
 };
 
+export const WithAttention = Template.bind({});
+WithAttention.args = {
+  look: 'danger',
+  slot: '!',
+  attention: true,
+};
+
 export const WithText = Template.bind({});
 WithText.args = {
   look: 'positive',
@@ -58,19 +73,17 @@ WithText.parameters = {
   docs: {
     source: {
       code: `
-<div style="position:relative;">
   <uui-badge look="positive">Published</uui-badge>
-</div>
     `,
     },
   },
 };
 
-// TODO: Uncomment when we fix the icon package.
-// export const WithIcon = () => html` <div
-//   style="position:relative; width:20px; height:10px;">
-//   <uui-badge look="secondary"><uui-icon name="info"></uui-icon></uui-badge>
-// </div>`;
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  look: 'positive',
+  slot: html`<uui-icon name="info"></uui-icon>`,
+};
 
 export const OnButton: Story = props => html` <uui-button look="outline">
   Button label
@@ -94,15 +107,13 @@ OnButton.parameters = {
 };
 
 export const Looks: Story = props => html`
-  <div
-    style="position:relative; width:80px; height:80px; border: 2px dashed black; margin-bottom: 16px">
-    <uui-badge .look=${props.look}>${props.slot}</uui-badge>
-  </div>
   ${InterfaceLookNames.map(
     (lookName: InterfaceLookType) =>
       html`<div
         style="position:relative; display:inline-block; width:10px; height:10px; margin-right: 16px;">
-        <uui-badge .look=${lookName}> 1 </uui-badge>
+        <uui-badge .look=${lookName} ?attention=${props.attention}
+          >${props.slot}</uui-badge
+        >
       </div>`
   )}
 `;