uui-avatar sizing update and others

nielslyngsoe · nielslyngsoe · commit a4293be66f9e · 2021-12-22T13:30:10.000+01:00
diff --git a/packages/uui-avatar-group/lib/uui-avatar-group.story.ts b/packages/uui-avatar-group/lib/uui-avatar-group.story.ts
@@ -1,6 +1,7 @@
 import { Story } from '@storybook/web-components';
 import { html } from 'lit-html';
 import '@umbraco-ui/uui-avatar-group/lib/index';
+import { GetRandomUmbracoWordOfWordCount } from '../../../storyhelpers/UmbracoWordGenerator';
 
 export default {
   title: 'Displays/Avatar Group',
@@ -17,10 +18,10 @@ export const AAAOverview: Story = props => html`
       '--uui-avatar-border-color'
     ]};"
     .limit=${props.limit}>
-    <uui-avatar title="First Last"></uui-avatar>
-    <uui-avatar title="First Last"></uui-avatar>
-    <uui-avatar title="First Last"></uui-avatar>
-    <uui-avatar title="First Last"></uui-avatar>
+    <uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
+    <uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
+    <uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
+    <uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
   </uui-avatar-group>
 `;
 AAAOverview.args = { fontSize: 2, '--uui-avatar-border-color': 'white' };
@@ -32,10 +33,10 @@ AAAOverview.parameters = {
   docs: {
     source: {
       code: html`<uui-avatar-group>
-        <uui-avatar title="First Last"></uui-avatar>
-        <uui-avatar title="First Last"></uui-avatar>
-        <uui-avatar title="First Last"></uui-avatar>
-        <uui-avatar title="First Last"></uui-avatar>
+        <uui-avatar title="Firstname Lastname"></uui-avatar>
+        <uui-avatar title="Firstname Lastname"></uui-avatar>
+        <uui-avatar title="Firstname Lastname"></uui-avatar>
+        <uui-avatar title="Firstname Lastname"></uui-avatar>
       </uui-avatar-group>`.strings,
     },
   },
@@ -47,10 +48,10 @@ export const Limit: Story = ({ limit }) => html`
   <uui-avatar-group
     style="font-size: 2rem; --uui-avatar-border-color: white;"
     .limit=${limit}>
-    <uui-avatar title="First Last"></uui-avatar>
-    <uui-avatar title="First Last"></uui-avatar>
-    <uui-avatar title="First Last"></uui-avatar>
-    <uui-avatar title="First Last"></uui-avatar>
+    <uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
+    <uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
+    <uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
+    <uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
   </uui-avatar-group>
 `;
 Limit.args = { limit: 2 };
@@ -59,10 +60,10 @@ Limit.parameters = {
   docs: {
     source: {
       code: html`<uui-avatar-group limit="2">
-        <uui-avatar title="First Last"></uui-avatar>
-        <uui-avatar title="First Last"></uui-avatar>
-        <uui-avatar title="First Last"></uui-avatar>
-        <uui-avatar title="First Last"></uui-avatar>
+        <uui-avatar title="Firstname Lastname"></uui-avatar>
+        <uui-avatar title="Firstname Lastname"></uui-avatar>
+        <uui-avatar title="Firstname Lastname"></uui-avatar>
+        <uui-avatar title="Firstname Lastname"></uui-avatar>
       </uui-avatar-group>`.strings,
     },
   },
diff --git a/packages/uui-avatar/lib/uui-avatar.element.ts b/packages/uui-avatar/lib/uui-avatar.element.ts
@@ -10,15 +10,16 @@ export class UUIAvatarElement extends LitElement {
   static styles = [
     css`
       :host {
-        display: flex;
+        display: inline-flex;
         align-items: center;
         justify-content: center;
         position: relative;
         overflow: hidden;
         border-radius: 50%;
-        font-weight: bold;
-        width: 2em;
-        height: 2em;
+        font-weight: 700;
+        -webkit-font-smoothing: subpixel-antialiased;
+        width: calc(2em + 4px);
+        height: calc(2em + 4px);
         user-select: none;
         /* box-sizing: border-box; */
 
@@ -73,7 +74,7 @@ export class UUIAvatarElement extends LitElement {
    * @attr
    * @default ''
    */
-  @property({ type: String })
+  @property({ type: String, reflect: true })
   get title() {
     return this._title;
   }
@@ -88,13 +89,22 @@ export class UUIAvatarElement extends LitElement {
   @state()
   private initials = '';
 
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.title) {
+      console.warn(this.tagName + ' needs a `title`', this);
+    }
+  }
+
   private createInitials(title: string) {
     let initials = '';
 
-    const words = (title || '').split(' ');
-    initials = words[0].substring(0, 1);
-    if (words.length > 1) {
-      initials += words[words.length - 1].substring(0, 1);
+    if (title) {
+      const words = title.match(/(\w+)/g) || [];
+      initials = words[0].substring(0, 1);
+      if (words.length > 1) {
+        initials += words[words.length - 1].substring(0, 1);
+      }
     }
     return initials.toUpperCase();
   }
diff --git a/packages/uui-avatar/lib/uui-avatar.story.ts b/packages/uui-avatar/lib/uui-avatar.story.ts
@@ -1,14 +1,15 @@
 import { Story } from '@storybook/web-components';
 import { html } from 'lit-html';
 import '@umbraco-ui/uui-avatar/lib/index';
+import { GetRandomUmbracoWordOfWordCount } from '../../../storyhelpers/UmbracoWordGenerator';
 
 export default {
   title: 'Displays/Avatar',
   id: 'uui-avatar',
   component: 'uui-avatar',
   args: {
-    title: 'First Last',
-    fontSize: 32,
+    title: GetRandomUmbracoWordOfWordCount(2),
+    fontSize: 12,
   },
   // argTypes: {
   //   'img-src': { table: { disable: true } },
@@ -47,7 +48,7 @@ AAAOverview.argTypes = {
 AAAOverview.parameters = {
   docs: {
     source: {
-      code: `<uui-avatar title="First Last"></uui-avatar>`,
+      code: `<uui-avatar title="Firstname Lastname"></uui-avatar>`,
     },
   },
 };
@@ -58,7 +59,7 @@ Picture.parameters = {
   controls: { include: ['imgSrc', 'imgSrcset', 'title'] },
   docs: {
     source: {
-      code: `<uui-avatar src="..."></uui-avatar>`,
+      code: `<uui-avatar src="..." title="Firstname Lastname"></uui-avatar>`,
     },
   },
 };
@@ -88,7 +89,26 @@ SlottedContent.parameters = {
   controls: { include: ['slot', 'overflow'] },
   docs: {
     source: {
-      code: `<uui-avatar>overflow</uui-avatar>`,
+      code: `<uui-avatar overflow title="overflow title">overflow content</uui-avatar>`,
+    },
+  },
+};
+
+export const InlineWithText = (props: any) => html`
+  <div>
+    Text
+    <uui-avatar
+      title="Hello world"
+      style="background-color: ${props.backgroundColor}; color: ${props.color}"
+      >${props.slot}</uui-avatar
+    >
+    around
+  </div>
+`;
+InlineWithText.parameters = {
+  docs: {
+    source: {
+      code: `Text <uui-avatar title="Hello world">overflow</uui-avatar> around`,
     },
   },
 };
diff --git a/packages/uui-base/lib/mixins/LabelMixin.ts b/packages/uui-base/lib/mixins/LabelMixin.ts
@@ -31,7 +31,7 @@ export const LabelMixin = <T extends Constructor<LitElement>>(
     connectedCallback() {
       super.connectedCallback();
       if (!this.label) {
-        console.warn(this.tagName + ' needs a `label`');
+        console.warn(this.tagName + ' needs a `label`', this);
       }
     }
 
diff --git a/src/components/uui-select-option/uui-select-option.element.ts b/src/components/uui-select-option/uui-select-option.element.ts
@@ -79,7 +79,7 @@ export class UUISelectOptionElement extends LabelMixin('', LitElement) {
     if (!this.hasAttribute('aria-selected'))
       this.setAttribute('aria-selected', 'false');
     if (!this.value) {
-      console.warn(this.tagName + ' needs a `value`');
+      console.warn(this.tagName + ' needs a `value`', this);
     }
   }
 
diff --git a/storyhelpers/UmbracoWordGenerator.ts b/storyhelpers/UmbracoWordGenerator.ts
@@ -13,18 +13,14 @@ export const UmbracoWords: Readonly<string[]> = [
   'Infinite Editing',
   'Umbraco Socks',
   '24 days in Umbraco',
-  'FAF',
   'Spark',
   'Package Manifest Podcast',
   'Skrift.io',
   'UmbrCoach',
   'Slave & Eagle',
   'Community Teams',
   'IRememberBeingDirty',
-  'GDPR',
-  'Unicore',
   'Media Picker v3',
-  'Marco',
   'Dependency Injection',
   'umbraCoffee',
   'Community Corner',
@@ -34,7 +30,6 @@ export const UmbracoWords: Readonly<string[]> = [
   'The Friendly CMS',
   'Block List Editor',
   'ImageSharp',
-  'Smidge',
   'ContentService',
   'ContentFlow',
   'Package Migrations',
@@ -59,8 +54,6 @@ export const UmbracoWords: Readonly<string[]> = [
   'Section',
   'IUrlProvider',
   'The Friendly CMS',
-  'Gulp',
-  'End of life',
   'Long term support',
   'Code of conduct',
   'Surface Controller',
@@ -86,6 +79,13 @@ export const UmbracoWords: Readonly<string[]> = [
 export function GetRandomUmbracoWord(): string {
   return UmbracoWords[Math.floor(Math.random() * UmbracoWords.length)];
 }
+export function GetRandomUmbracoWordOfWordCount(wordCount: number): string {
+  const dictionary = UmbracoWords.filter((x: string) => {
+    const result = x.match(/(\w+)/g);
+    return result ? result.length === wordCount : false;
+  });
+  return dictionary[Math.floor(Math.random() * dictionary.length)];
+}
 export function ArrayOfUmbracoWords(arrayLength: number): string[] {
   return [...Array(arrayLength)].map(() => GetRandomUmbracoWord());
 }

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ export const LabelMixin = <T extends Constructor<LitElement>>(`
`31`	`31`	`connectedCallback() {`
`32`	`32`	`super.connectedCallback();`
`33`	`33`	`if (!this.label) {`
`34`		- console.warn(this.tagName + ' needs a `label`');
	`34`	+ console.warn(this.tagName + ' needs a `label`', this);
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`
Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,7 @@ export class UUISelectOptionElement extends LabelMixin('', LitElement) {`
`79`	`79`	`if (!this.hasAttribute('aria-selected'))`
`80`	`80`	`this.setAttribute('aria-selected', 'false');`
`81`	`81`	`if (!this.value) {`
`82`		- console.warn(this.tagName + ' needs a `value`');
	`82`	+ console.warn(this.tagName + ' needs a `value`', this);
`83`	`83`	`}`
`84`	`84`	`}`
`85`	`85`