From 7c5420fb288968bd5eff62851434f5359e9708f0 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Tue, 5 Sep 2023 16:24:54 -0700 Subject: [PATCH 01/15] Persona component --- css/src/components/index.scss | 1 + css/src/components/persona.scss | 82 ++++++++++++++++ site/src/components/persona.md | 148 +++++++++++++++++++++++++++++ site/src/scaffold/media/avatar.png | Bin 0 -> 30901 bytes 4 files changed, 231 insertions(+) create mode 100644 css/src/components/persona.scss create mode 100644 site/src/components/persona.md create mode 100644 site/src/scaffold/media/avatar.png diff --git a/css/src/components/index.scss b/css/src/components/index.scss index d6eeda7c6..6c78f5031 100644 --- a/css/src/components/index.scss +++ b/css/src/components/index.scss @@ -14,6 +14,7 @@ @import './notification.scss'; @import './icon.scss'; @import './image.scss'; +@import './persona.scss'; @import './popover.scss'; @import './pagination.scss'; @import './table.scss'; diff --git a/css/src/components/persona.scss b/css/src/components/persona.scss new file mode 100644 index 000000000..7348e9798 --- /dev/null +++ b/css/src/components/persona.scss @@ -0,0 +1,82 @@ +$persona-avatar-dimensions: 16 24 32 36 48 !default; +$persona-avatar-background-color: $alternate-background-medium !default; +$persona-avatar-font-color: $text-invert !default; +$persona-default-size: 32px !default; +$persona-font-size: $font-size-7 !default; +$persona-gap-size: $layout-1 !default; +$persona-metadata-font-size: $font-size-9 !default; +$persona-metadata-font-color: $text-subtle !default; +$persona-dimension-font-size-ratio: 0.45; + +.persona { + display: flex; + position: relative; + gap: $persona-gap-size; + font-size: $persona-font-size; + + .persona-avatar { + display: flex; + align-items: center; + justify-content: center; + width: $persona-default-size; + height: $persona-default-size; + border-radius: $border-radius-rounded; + background-color: $persona-avatar-background-color; + color: $persona-avatar-font-color; + font-size: $persona-default-size * $persona-dimension-font-size-ratio; + overflow: hidden; + + img, + svg { + display: block; + width: 100%; + height: auto; + max-height: 100%; + } + + span { + line-height: 1; + text-transform: uppercase; + } + } + + .persona-description :not(:first-child) { + color: $persona-metadata-font-color; + font-size: $persona-metadata-font-size; + } + + // Sizes + + /* stylelint-disable declaration-property-unit-allowed-list, max-nesting-depth */ + @each $dimension in $persona-avatar-dimensions { + &.persona-#{$dimension}x#{$dimension} { + .persona-avatar { + width: $dimension * 1px; + height: $dimension * 1px; + font-size: $dimension * $persona-dimension-font-size-ratio * 1px; + } + } + + @include tablet { + &.persona-#{$dimension}x#{$dimension}-tablet { + .persona-avatar { + width: $dimension * 1px; + height: $dimension * 1px; + font-size: $dimension * $persona-dimension-font-size-ratio * 1px; + } + } + } + + @include desktop { + &.persona-#{$dimension}x#{$dimension}-desktop { + .persona-avatar { + width: $dimension * 1px; + height: $dimension * 1px; + font-size: $dimension * $persona-dimension-font-size-ratio * 1px; + } + } + } + } + + /* stylelint-enable */ +} diff --git a/site/src/components/persona.md b/site/src/components/persona.md new file mode 100644 index 000000000..f27cd4dbd --- /dev/null +++ b/site/src/components/persona.md @@ -0,0 +1,148 @@ +--- +title: Persona +description: Persona component in the Atlas Design System +template: standard +figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Ftype%3Ddesign%26node-id%3D1284%253A2163%26mode%3Ddesign%26t%3DklysUJ7ALWgcF1SQ-1 allowfullscreen +classType: Component +classPrefixes: + - persona +--- + +# Persona + +Persona component comes in handy for user's representation. It consists of two parts - user's avatar and description. Description has their name and optional metadata. + +| Class pattern | Sizes | screensize | +| ------------------------- | ------------------------------------------------- | ------------------- | +| `.persona.persona-` | `16x16` `24x24` `32x32 (default)` `36x36` `48x48` | `tablet`, `desktop` | + +## Usage + +Below are examples of the most common persona component use-cases - one with an image avatar and another with user's initials. + +```html +
+
+ username +
+
+

Jane Doe

+

Software Engineer

+
+
+ +
+
+ JD +
+
+

John Doe

+

Software Engineer

+
+
+``` + +Persona component might contain a link to user's profile, with help of the [`.stretched-link` component](../components/stretched-link.md) the whole area persona takes becomes clickable: + +```html +
+
+ JD +
+
+ John Doe +

Software Engineer

+
+
+``` + +Persona might have both avatar and description presetned at the same time or just one of them. + +```html +
+
+ username +
+
+ +
+
+

John Doe

+

Software Engineer

+
+
+``` + +### Sizes + +The following classes are available for resizing avatar. + +```html +
+
+
+ User name +
+
+
+
+ User name +
+
+
+
+ User name +
+
+
+
+ User name +
+
+
+
+ User name +
+
+
+ +
+
+
+ ww +
+
+
+
+ ww +
+
+
+
+ ww +
+
+
+
+ ww +
+
+
+
+ ww +
+
+
+``` + +### Responsive sizes + +Tablet and desktop versions of all classes are also available. Resize your browser window to see the differences in sizes. + +```html +
+
+ User name +
+
+``` diff --git a/site/src/scaffold/media/avatar.png b/site/src/scaffold/media/avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..04e807764dbcfad163467953e320af16cbd67126 GIT binary patch literal 30901 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 eM@S{DkpBZ_)A1{lf@@3w0000 Date: Tue, 5 Sep 2023 21:04:25 -0700 Subject: [PATCH 02/15] Changeset --- .changeset/cold-radios-heal.md | 5 +++++ .changeset/eleven-seals-nail.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/cold-radios-heal.md create mode 100644 .changeset/eleven-seals-nail.md diff --git a/.changeset/cold-radios-heal.md b/.changeset/cold-radios-heal.md new file mode 100644 index 000000000..018272cec --- /dev/null +++ b/.changeset/cold-radios-heal.md @@ -0,0 +1,5 @@ +--- +'@microsoft/atlas-css': minor +--- + +Adding persona component. diff --git a/.changeset/eleven-seals-nail.md b/.changeset/eleven-seals-nail.md new file mode 100644 index 000000000..e7ebbc112 --- /dev/null +++ b/.changeset/eleven-seals-nail.md @@ -0,0 +1,5 @@ +--- +'@microsoft/atlas-site': minor +--- + +Adding doc page for persona component. From 60aa27aeb7fcf4877420f091f9df82c3f229cabc Mon Sep 17 00:00:00 2001 From: Olga Lipskaya <57374379+ollips@users.noreply.github.com> Date: Wed, 13 Sep 2023 11:27:56 -0700 Subject: [PATCH 03/15] Typo fix Co-authored-by: Ming Ho <94572161+homing1@users.noreply.github.com> --- site/src/components/persona.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/persona.md b/site/src/components/persona.md index f27cd4dbd..6b1bc3bee 100644 --- a/site/src/components/persona.md +++ b/site/src/components/persona.md @@ -56,7 +56,7 @@ Persona component might contain a link to user's profile, with help of the [`.st ``` -Persona might have both avatar and description presetned at the same time or just one of them. +Persona might have both avatar and description presented at the same time or just one of them. ```html
From c38d99f2e1d5cf221499e8816aa152df0d97b458 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Thu, 14 Sep 2023 19:07:22 -0700 Subject: [PATCH 04/15] Updating sizes, swithcing to t-shirt pattern naming --- css/src/components/persona.scss | 155 ++++++++++++++++++++++++++------ site/src/components/persona.md | 38 ++++---- 2 files changed, 149 insertions(+), 44 deletions(-) diff --git a/css/src/components/persona.scss b/css/src/components/persona.scss index 7348e9798..11fbd53a3 100644 --- a/css/src/components/persona.scss +++ b/css/src/components/persona.scss @@ -1,12 +1,18 @@ -$persona-avatar-dimensions: 16 24 32 36 48 !default; +$persona-avatar-xs: 28px !default; +$persona-avatar-sm: 32px !default; +$persona-avatar-md: 36px !default; +$persona-avatar-lg: 42px !default; +$persona-avatar-xl: 48px !default; + +$persona-avatar-font-size-ratio: 0.45; $persona-avatar-background-color: $alternate-background-medium !default; $persona-avatar-font-color: $text-invert !default; -$persona-default-size: 32px !default; -$persona-font-size: $font-size-7 !default; -$persona-gap-size: $layout-1 !default; + $persona-metadata-font-size: $font-size-9 !default; $persona-metadata-font-color: $text-subtle !default; -$persona-dimension-font-size-ratio: 0.45; + +$persona-font-size: $font-size-7 !default; +$persona-gap-size: $layout-1 !default; .persona { display: flex; @@ -18,12 +24,12 @@ $persona-dimension-font-size-ratio: 0.45; display: flex; align-items: center; justify-content: center; - width: $persona-default-size; - height: $persona-default-size; + width: $persona-avatar-md; + height: $persona-avatar-md; border-radius: $border-radius-rounded; background-color: $persona-avatar-background-color; color: $persona-avatar-font-color; - font-size: $persona-default-size * $persona-dimension-font-size-ratio; + font-size: $persona-avatar-md * $persona-avatar-font-size-ratio; overflow: hidden; img, @@ -47,36 +53,127 @@ $persona-dimension-font-size-ratio: 0.45; // Sizes - /* stylelint-disable declaration-property-unit-allowed-list, max-nesting-depth */ - @each $dimension in $persona-avatar-dimensions { - &.persona-#{$dimension}x#{$dimension} { + &.persona-xs { + .persona-avatar { + width: $persona-avatar-xs; + height: $persona-avatar-xs; + font-size: $persona-avatar-xs * $persona-avatar-font-size-ratio; + } + } + + &.persona-sm { + .persona-avatar { + width: $persona-avatar-sm; + height: $persona-avatar-sm; + font-size: $persona-avatar-sm * $persona-avatar-font-size-ratio; + } + } + + &.persona-md { + .persona-avatar { + width: $persona-avatar-md; + height: $persona-avatar-md; + font-size: $persona-avatar-md * $persona-avatar-font-size-ratio; + } + } + + &.persona-lg { + .persona-avatar { + width: $persona-avatar-lg; + height: $persona-avatar-lg; + font-size: $persona-avatar-lg * $persona-avatar-font-size-ratio; + } + } + + &.persona-xl { + .persona-avatar { + width: $persona-avatar-xl; + height: $persona-avatar-xl; + font-size: $persona-avatar-xl * $persona-avatar-font-size-ratio; + } + } + + @include tablet { + &.persona-xs-tablet { + .persona-avatar { + width: $persona-avatar-xs; + height: $persona-avatar-xs; + font-size: $persona-avatar-xs * $persona-avatar-font-size-ratio; + } + } + + &.persona-sm-tablet { .persona-avatar { - width: $dimension * 1px; - height: $dimension * 1px; - font-size: $dimension * $persona-dimension-font-size-ratio * 1px; + width: $persona-avatar-sm; + height: $persona-avatar-sm; + font-size: $persona-avatar-sm * $persona-avatar-font-size-ratio; } } - @include tablet { - &.persona-#{$dimension}x#{$dimension}-tablet { - .persona-avatar { - width: $dimension * 1px; - height: $dimension * 1px; - font-size: $dimension * $persona-dimension-font-size-ratio * 1px; - } + &.persona-md-tablet { + .persona-avatar { + width: $persona-avatar-md; + height: $persona-avatar-md; + font-size: $persona-avatar-md * $persona-avatar-font-size-ratio; } } - @include desktop { - &.persona-#{$dimension}x#{$dimension}-desktop { - .persona-avatar { - width: $dimension * 1px; - height: $dimension * 1px; - font-size: $dimension * $persona-dimension-font-size-ratio * 1px; - } + &.persona-lg-tablet { + .persona-avatar { + width: $persona-avatar-lg; + height: $persona-avatar-lg; + font-size: $persona-avatar-lg * $persona-avatar-font-size-ratio; + } + } + + &.persona-xl-tablet { + .persona-avatar { + width: $persona-avatar-xl; + height: $persona-avatar-xl; + font-size: $persona-avatar-xl * $persona-avatar-font-size-ratio; } } } - /* stylelint-enable */ + @include desktop { + &.persona-xs-desktop { + .persona-avatar { + width: $persona-avatar-xs; + height: $persona-avatar-xs; + font-size: $persona-avatar-xs * $persona-avatar-font-size-ratio; + } + } + + &.persona-sm-desktop { + .persona-avatar { + width: $persona-avatar-sm; + height: $persona-avatar-sm; + font-size: $persona-avatar-sm * $persona-avatar-font-size-ratio; + } + } + + &.persona-md-desktop { + .persona-avatar { + width: $persona-avatar-md; + height: $persona-avatar-md; + font-size: $persona-avatar-md * $persona-avatar-font-size-ratio; + } + } + + &.persona-lg-desktop { + .persona-avatar { + width: $persona-avatar-lg; + height: $persona-avatar-lg; + font-size: $persona-avatar-lg * $persona-avatar-font-size-ratio; + } + } + + &.persona-xl-desktop { + .persona-avatar { + width: $persona-avatar-xl; + height: $persona-avatar-xl; + font-size: $persona-avatar-xl * $persona-avatar-font-size-ratio; + } + } + } } diff --git a/site/src/components/persona.md b/site/src/components/persona.md index 6b1bc3bee..15306e106 100644 --- a/site/src/components/persona.md +++ b/site/src/components/persona.md @@ -12,9 +12,9 @@ classPrefixes: Persona component comes in handy for user's representation. It consists of two parts - user's avatar and description. Description has their name and optional metadata. -| Class pattern | Sizes | screensize | -| ------------------------- | ------------------------------------------------- | ------------------- | -| `.persona.persona-` | `16x16` `24x24` `32x32 (default)` `36x36` `48x48` | `tablet`, `desktop` | +| Class pattern | Sizes | screensize | +| ------------------------- | ---------------------------------- | ------------------- | +| `.persona.persona-` | `xs` `sm` `md (default)` `lg` `xl` | `tablet`, `desktop` | ## Usage @@ -75,31 +75,39 @@ Persona might have both avatar and description presented at the same time or jus ### Sizes -The following classes are available for resizing avatar. +The following classes are available for resizing avatar: `persona-xs` (28x28px), `persona-sm`, `persona-md`, `persona-lg`, `persona-xl`. + +| Class | Avatar's size in px | +| ------------ | ------------------- | +| `persona-xs` | 28px | +| `persona-sm` | 32px | +| `persona-md` | 36px | +| `persona-lg` | 42px | +| `persona-xl` | 48px | ```html
-
+
User name
-
+
User name
-
+
User name
-
+
User name
-
+
User name
@@ -107,27 +115,27 @@ The following classes are available for resizing avatar.
-
+
ww
-
+
ww
-
+
ww
-
+
ww
-
+
ww
@@ -140,7 +148,7 @@ The following classes are available for resizing avatar. Tablet and desktop versions of all classes are also available. Resize your browser window to see the differences in sizes. ```html -
+
User name
From 8f87bc4c0e7558626bb420ad8a95e0af0e9ccee6 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Thu, 14 Sep 2023 19:30:21 -0700 Subject: [PATCH 05/15] Copy adjustments --- site/src/components/persona.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/components/persona.md b/site/src/components/persona.md index 15306e106..35af95bf9 100644 --- a/site/src/components/persona.md +++ b/site/src/components/persona.md @@ -42,7 +42,7 @@ Below are examples of the most common persona component use-cases - one with an
``` -Persona component might contain a link to user's profile, with help of the [`.stretched-link` component](../components/stretched-link.md) the whole area persona takes becomes clickable: +Persona component might contain a link to user's profile, and with help of the [`.stretched-link` component](../components/stretched-link.md) the whole area persona takes becomes clickable: ```html
@@ -56,7 +56,7 @@ Persona component might contain a link to user's profile, with help of the [`.st
``` -Persona might have both avatar and description presented at the same time or just one of them. +Persona might have both avatar and description parts presented at the same time or just one of them. ```html
From 5ac249ed0424d0fcbbfcd95196ee5d28ee2a44b9 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Mon, 18 Sep 2023 15:55:37 -0700 Subject: [PATCH 06/15] Addressing comments --- css/src/components/persona.scss | 78 +++++++++++++++++++++------------ site/src/components/persona.md | 22 +++++----- 2 files changed, 62 insertions(+), 38 deletions(-) diff --git a/css/src/components/persona.scss b/css/src/components/persona.scss index 11fbd53a3..5295f9131 100644 --- a/css/src/components/persona.scss +++ b/css/src/components/persona.scss @@ -4,21 +4,24 @@ $persona-avatar-md: 36px !default; $persona-avatar-lg: 42px !default; $persona-avatar-xl: 48px !default; -$persona-avatar-font-size-ratio: 0.45; +$persona-avatar-font-size: 0.45em; $persona-avatar-background-color: $alternate-background-medium !default; $persona-avatar-font-color: $text-invert !default; +$persona-avatar-border-radius: $border-radius-rounded; + +$persona-name-font-size: $font-size-7 !default; +$persona-name-font-color: $text !default; $persona-metadata-font-size: $font-size-9 !default; $persona-metadata-font-color: $text-subtle !default; -$persona-font-size: $font-size-7 !default; $persona-gap-size: $layout-1 !default; .persona { display: flex; position: relative; gap: $persona-gap-size; - font-size: $persona-font-size; + font-size: $persona-avatar-md; .persona-avatar { display: flex; @@ -26,11 +29,12 @@ $persona-gap-size: $layout-1 !default; justify-content: center; width: $persona-avatar-md; height: $persona-avatar-md; - border-radius: $border-radius-rounded; + border-radius: $persona-avatar-border-radius; background-color: $persona-avatar-background-color; color: $persona-avatar-font-color; - font-size: $persona-avatar-md * $persona-avatar-font-size-ratio; - overflow: hidden; + font-size: $persona-avatar-font-size; + line-height: 1; + text-transform: uppercase; img, svg { @@ -38,141 +42,161 @@ $persona-gap-size: $layout-1 !default; width: 100%; height: auto; max-height: 100%; - } - - span { - line-height: 1; - text-transform: uppercase; + border-radius: $persona-avatar-border-radius; } } - .persona-description :not(:first-child) { + .persona-details { + align-self: center; color: $persona-metadata-font-color; font-size: $persona-metadata-font-size; + + .persona-name { + font-size: $persona-name-font-size; + + &:not(a) { + color: $persona-name-font-color; + } + } } // Sizes &.persona-xs { + font-size: $persona-avatar-xs; + .persona-avatar { width: $persona-avatar-xs; height: $persona-avatar-xs; - font-size: $persona-avatar-xs * $persona-avatar-font-size-ratio; } } &.persona-sm { + font-size: $persona-avatar-sm; + .persona-avatar { width: $persona-avatar-sm; height: $persona-avatar-sm; - font-size: $persona-avatar-sm * $persona-avatar-font-size-ratio; } } &.persona-md { + font-size: $persona-avatar-md; + .persona-avatar { width: $persona-avatar-md; height: $persona-avatar-md; - font-size: $persona-avatar-md * $persona-avatar-font-size-ratio; } } &.persona-lg { + font-size: $persona-avatar-lg; + .persona-avatar { width: $persona-avatar-lg; height: $persona-avatar-lg; - font-size: $persona-avatar-lg * $persona-avatar-font-size-ratio; } } &.persona-xl { + font-size: $persona-avatar-xl; + .persona-avatar { width: $persona-avatar-xl; height: $persona-avatar-xl; - font-size: $persona-avatar-xl * $persona-avatar-font-size-ratio; } } @include tablet { &.persona-xs-tablet { + font-size: $persona-avatar-xs; + .persona-avatar { width: $persona-avatar-xs; height: $persona-avatar-xs; - font-size: $persona-avatar-xs * $persona-avatar-font-size-ratio; } } &.persona-sm-tablet { + font-size: $persona-avatar-sm; + .persona-avatar { width: $persona-avatar-sm; height: $persona-avatar-sm; - font-size: $persona-avatar-sm * $persona-avatar-font-size-ratio; } } &.persona-md-tablet { + font-size: $persona-avatar-md; + .persona-avatar { width: $persona-avatar-md; height: $persona-avatar-md; - font-size: $persona-avatar-md * $persona-avatar-font-size-ratio; } } &.persona-lg-tablet { + font-size: $persona-avatar-lg; + .persona-avatar { width: $persona-avatar-lg; height: $persona-avatar-lg; - font-size: $persona-avatar-lg * $persona-avatar-font-size-ratio; } } &.persona-xl-tablet { + font-size: $persona-avatar-xl; + .persona-avatar { width: $persona-avatar-xl; height: $persona-avatar-xl; - font-size: $persona-avatar-xl * $persona-avatar-font-size-ratio; } } } @include desktop { &.persona-xs-desktop { + font-size: $persona-avatar-xs; + .persona-avatar { width: $persona-avatar-xs; height: $persona-avatar-xs; - font-size: $persona-avatar-xs * $persona-avatar-font-size-ratio; } } &.persona-sm-desktop { + font-size: $persona-avatar-sm; + .persona-avatar { width: $persona-avatar-sm; height: $persona-avatar-sm; - font-size: $persona-avatar-sm * $persona-avatar-font-size-ratio; } } &.persona-md-desktop { + font-size: $persona-avatar-md; + .persona-avatar { width: $persona-avatar-md; height: $persona-avatar-md; - font-size: $persona-avatar-md * $persona-avatar-font-size-ratio; } } &.persona-lg-desktop { + font-size: $persona-avatar-lg; + .persona-avatar { width: $persona-avatar-lg; height: $persona-avatar-lg; - font-size: $persona-avatar-lg * $persona-avatar-font-size-ratio; } } &.persona-xl-desktop { + font-size: $persona-avatar-xl; + .persona-avatar { width: $persona-avatar-xl; height: $persona-avatar-xl; - font-size: $persona-avatar-xl * $persona-avatar-font-size-ratio; } } } diff --git a/site/src/components/persona.md b/site/src/components/persona.md index 35af95bf9..aa0fabd15 100644 --- a/site/src/components/persona.md +++ b/site/src/components/persona.md @@ -10,7 +10,7 @@ classPrefixes: # Persona -Persona component comes in handy for user's representation. It consists of two parts - user's avatar and description. Description has their name and optional metadata. +Persona component comes in handy for user's representation. It consists of two parts - user's avatar and details. Details has their name and optional metadata. | Class pattern | Sizes | screensize | | ------------------------- | ---------------------------------- | ------------------- | @@ -25,8 +25,8 @@ Below are examples of the most common persona component use-cases - one with an
username
-
-

Jane Doe

+
+

Jane Doe

Software Engineer

@@ -35,8 +35,8 @@ Below are examples of the most common persona component use-cases - one with an
JD
-
-

John Doe

+
+

John Doe

Software Engineer

@@ -49,14 +49,14 @@ Persona component might contain a link to user's profile, and with help of the [
JD
-
- John Doe +
+ John Doe

Software Engineer

``` -Persona might have both avatar and description parts presented at the same time or just one of them. +Persona might have both avatar and details parts presented at the same time or just one of them. ```html
@@ -66,8 +66,8 @@ Persona might have both avatar and description parts presented at the same time
-
-

John Doe

+
+

John Doe

Software Engineer

@@ -75,7 +75,7 @@ Persona might have both avatar and description parts presented at the same time ### Sizes -The following classes are available for resizing avatar: `persona-xs` (28x28px), `persona-sm`, `persona-md`, `persona-lg`, `persona-xl`. +The following classes are available for resizing avatar: | Class | Avatar's size in px | | ------------ | ------------------- | From 3c8326074652f65b65acc9bd1809cb9f3043ae98 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya <57374379+ollips@users.noreply.github.com> Date: Mon, 18 Sep 2023 16:48:11 -0700 Subject: [PATCH 07/15] Updating copy Co-authored-by: Ming Ho <94572161+homing1@users.noreply.github.com> --- .changeset/eleven-seals-nail.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/eleven-seals-nail.md b/.changeset/eleven-seals-nail.md index e7ebbc112..7229efcda 100644 --- a/.changeset/eleven-seals-nail.md +++ b/.changeset/eleven-seals-nail.md @@ -2,4 +2,4 @@ '@microsoft/atlas-site': minor --- -Adding doc page for persona component. +Adding documentation page for persona component. From d68b2c00514df274035a84bbad0c45cab492b031 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Mon, 18 Sep 2023 16:50:19 -0700 Subject: [PATCH 08/15] More copy updates --- site/src/components/persona.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/site/src/components/persona.md b/site/src/components/persona.md index aa0fabd15..8f1b8973a 100644 --- a/site/src/components/persona.md +++ b/site/src/components/persona.md @@ -42,7 +42,7 @@ Below are examples of the most common persona component use-cases - one with an
``` -Persona component might contain a link to user's profile, and with help of the [`.stretched-link` component](../components/stretched-link.md) the whole area persona takes becomes clickable: +Persona's details may contain a link to user's profile, and with help of the [`.stretched-link` component](../components/stretched-link.md) the whole area persona takes becomes clickable: ```html
@@ -89,27 +89,27 @@ The following classes are available for resizing avatar:
- User name + username
- User name + username
- User name + username
- User name + username
- User name + username
@@ -150,7 +150,7 @@ Tablet and desktop versions of all classes are also available. Resize your brows ```html
- User name + username
``` From 598bd4284f35e97b637ea1ca2eabe209cae5f195 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Tue, 19 Sep 2023 15:00:20 -0700 Subject: [PATCH 09/15] More changes --- css/src/components/persona.scss | 157 ++++---------------------------- site/src/components/persona.md | 36 ++------ 2 files changed, 26 insertions(+), 167 deletions(-) diff --git a/css/src/components/persona.scss b/css/src/components/persona.scss index 5295f9131..212eb6654 100644 --- a/css/src/components/persona.scss +++ b/css/src/components/persona.scss @@ -1,10 +1,9 @@ -$persona-avatar-xs: 28px !default; -$persona-avatar-sm: 32px !default; -$persona-avatar-md: 36px !default; -$persona-avatar-lg: 42px !default; -$persona-avatar-xl: 48px !default; +$persona-font-size-xs: $font-size-9 !default; +$persona-font-size-sm: $font-size-8 !default; +$persona-font-size-md: $font-size-7 !default; +$persona-font-size-lg: $font-size-6 !default; +$persona-font-size-xl: $font-size-5 !default; -$persona-avatar-font-size: 0.45em; $persona-avatar-background-color: $alternate-background-medium !default; $persona-avatar-font-color: $text-invert !default; $persona-avatar-border-radius: $border-radius-rounded; @@ -21,18 +20,17 @@ $persona-gap-size: $layout-1 !default; display: flex; position: relative; gap: $persona-gap-size; - font-size: $persona-avatar-md; .persona-avatar { display: flex; align-items: center; justify-content: center; - width: $persona-avatar-md; - height: $persona-avatar-md; + width: 2.35em; + height: 2.35em; border-radius: $persona-avatar-border-radius; background-color: $persona-avatar-background-color; color: $persona-avatar-font-color; - font-size: $persona-avatar-font-size; + font-size: $persona-font-size-md; line-height: 1; text-transform: uppercase; @@ -62,142 +60,23 @@ $persona-gap-size: $layout-1 !default; // Sizes - &.persona-xs { - font-size: $persona-avatar-xs; - - .persona-avatar { - width: $persona-avatar-xs; - height: $persona-avatar-xs; - } + &.persona-xs .persona-avatar { + font-size: $persona-font-size-xs; } - &.persona-sm { - font-size: $persona-avatar-sm; - - .persona-avatar { - width: $persona-avatar-sm; - height: $persona-avatar-sm; - } + &.persona-sm .persona-avatar { + font-size: $persona-font-size-sm; } - &.persona-md { - font-size: $persona-avatar-md; - - .persona-avatar { - width: $persona-avatar-md; - height: $persona-avatar-md; - } - } - - &.persona-lg { - font-size: $persona-avatar-lg; - - .persona-avatar { - width: $persona-avatar-lg; - height: $persona-avatar-lg; - } - } - - &.persona-xl { - font-size: $persona-avatar-xl; - - .persona-avatar { - width: $persona-avatar-xl; - height: $persona-avatar-xl; - } + &.persona-md .persona-avatar { + font-size: $persona-font-size-md; } - @include tablet { - &.persona-xs-tablet { - font-size: $persona-avatar-xs; - - .persona-avatar { - width: $persona-avatar-xs; - height: $persona-avatar-xs; - } - } - - &.persona-sm-tablet { - font-size: $persona-avatar-sm; - - .persona-avatar { - width: $persona-avatar-sm; - height: $persona-avatar-sm; - } - } - - &.persona-md-tablet { - font-size: $persona-avatar-md; - - .persona-avatar { - width: $persona-avatar-md; - height: $persona-avatar-md; - } - } - - &.persona-lg-tablet { - font-size: $persona-avatar-lg; - - .persona-avatar { - width: $persona-avatar-lg; - height: $persona-avatar-lg; - } - } - - &.persona-xl-tablet { - font-size: $persona-avatar-xl; - - .persona-avatar { - width: $persona-avatar-xl; - height: $persona-avatar-xl; - } - } + &.persona-lg .persona-avatar { + font-size: $persona-font-size-lg; } - @include desktop { - &.persona-xs-desktop { - font-size: $persona-avatar-xs; - - .persona-avatar { - width: $persona-avatar-xs; - height: $persona-avatar-xs; - } - } - - &.persona-sm-desktop { - font-size: $persona-avatar-sm; - - .persona-avatar { - width: $persona-avatar-sm; - height: $persona-avatar-sm; - } - } - - &.persona-md-desktop { - font-size: $persona-avatar-md; - - .persona-avatar { - width: $persona-avatar-md; - height: $persona-avatar-md; - } - } - - &.persona-lg-desktop { - font-size: $persona-avatar-lg; - - .persona-avatar { - width: $persona-avatar-lg; - height: $persona-avatar-lg; - } - } - - &.persona-xl-desktop { - font-size: $persona-avatar-xl; - - .persona-avatar { - width: $persona-avatar-xl; - height: $persona-avatar-xl; - } - } + &.persona-xl .persona-avatar { + font-size: $persona-font-size-xl; } } diff --git a/site/src/components/persona.md b/site/src/components/persona.md index 8f1b8973a..460502cc6 100644 --- a/site/src/components/persona.md +++ b/site/src/components/persona.md @@ -12,9 +12,9 @@ classPrefixes: Persona component comes in handy for user's representation. It consists of two parts - user's avatar and details. Details has their name and optional metadata. -| Class pattern | Sizes | screensize | -| ------------------------- | ---------------------------------- | ------------------- | -| `.persona.persona-` | `xs` `sm` `md (default)` `lg` `xl` | `tablet`, `desktop` | +| Class pattern | Sizes | +| ------------------------- | ---------------------- | +| `.persona.persona-` | `xs`, `sm`, `lg`, `xl` | ## Usage @@ -23,7 +23,7 @@ Below are examples of the most common persona component use-cases - one with an ```html
- username + Avatar for Jane Doe

Jane Doe

@@ -33,7 +33,7 @@ Below are examples of the most common persona component use-cases - one with an
- JD + JD

John Doe

@@ -75,15 +75,7 @@ Persona might have both avatar and details parts presented at the same time or j ### Sizes -The following classes are available for resizing avatar: - -| Class | Avatar's size in px | -| ------------ | ------------------- | -| `persona-xs` | 28px | -| `persona-sm` | 32px | -| `persona-md` | 36px | -| `persona-lg` | 42px | -| `persona-xl` | 48px | +The following classes are available for resizing avatar: `persona-xs`, `persona-sm`, `persona-lg`, `persona-xl`. ```html
@@ -97,7 +89,7 @@ The following classes are available for resizing avatar: username
-
+
username
@@ -125,7 +117,7 @@ The following classes are available for resizing avatar: ww
-
+
ww
@@ -142,15 +134,3 @@ The following classes are available for resizing avatar:
``` - -### Responsive sizes - -Tablet and desktop versions of all classes are also available. Resize your browser window to see the differences in sizes. - -```html -
-
- username -
-
-``` From 8fbd3f2bcb59da57b3b7abece8263520ccd678d1 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Tue, 19 Sep 2023 16:19:01 -0700 Subject: [PATCH 10/15] Updating examples --- site/src/components/persona.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/site/src/components/persona.md b/site/src/components/persona.md index 460502cc6..9427a9ea4 100644 --- a/site/src/components/persona.md +++ b/site/src/components/persona.md @@ -47,7 +47,7 @@ Persona's details may contain a link to user's profile, and with help of the [`. ```html
- JD + JD
John Doe @@ -61,7 +61,7 @@ Persona might have both avatar and details parts presented at the same time or j ```html
- username + Avatar for Jane Doe
@@ -81,27 +81,27 @@ The following classes are available for resizing avatar: `persona-xs`, `persona-
- username + Avatar for Jane Doe
- username + Avatar for Jane Doe
- username + Avatar for Jane Doe
- username + Avatar for Jane Doe
- username + Avatar for Jane Doe
@@ -109,27 +109,27 @@ The following classes are available for resizing avatar: `persona-xs`, `persona-
- ww + ww
- ww + ww
- ww + ww
- ww + ww
- ww + ww
From 9e211ee2f81a74e00d7ac7acfc31f283e7a2c8a2 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya <57374379+ollips@users.noreply.github.com> Date: Mon, 25 Sep 2023 12:24:11 -0700 Subject: [PATCH 11/15] Copy update Co-authored-by: Will Bjorn <30843002+wibjorn@users.noreply.github.com> --- site/src/components/persona.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/persona.md b/site/src/components/persona.md index 9427a9ea4..71dd1cd08 100644 --- a/site/src/components/persona.md +++ b/site/src/components/persona.md @@ -10,7 +10,7 @@ classPrefixes: # Persona -Persona component comes in handy for user's representation. It consists of two parts - user's avatar and details. Details has their name and optional metadata. +We use the persona to represent users. It consists of two parts - user's avatar and details. Both subcomponents can be used independent of one another. Details has their name and optional metadata. | Class pattern | Sizes | | ------------------------- | ---------------------- | From b9cd79c8867212509f3b4ece5a65efa06857cd0e Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Mon, 25 Sep 2023 15:00:20 -0700 Subject: [PATCH 12/15] Removing initials option; updating sizes --- css/src/components/persona.scss | 40 +++++------------ site/src/components/persona.md | 78 +++++++++------------------------ 2 files changed, 33 insertions(+), 85 deletions(-) diff --git a/css/src/components/persona.scss b/css/src/components/persona.scss index 212eb6654..ba609dda5 100644 --- a/css/src/components/persona.scss +++ b/css/src/components/persona.scss @@ -1,36 +1,33 @@ -$persona-font-size-xs: $font-size-9 !default; -$persona-font-size-sm: $font-size-8 !default; -$persona-font-size-md: $font-size-7 !default; -$persona-font-size-lg: $font-size-6 !default; -$persona-font-size-xl: $font-size-5 !default; +$persona-font-size-sm: $font-size-9 !default; +$persona-font-size-md: $font-size-8 !default; +$persona-font-size-lg: $font-size-7 !default; $persona-avatar-background-color: $alternate-background-medium !default; $persona-avatar-font-color: $text-invert !default; $persona-avatar-border-radius: $border-radius-rounded; +$persona-details-font-color: $text-subtle !default; $persona-name-font-size: $font-size-7 !default; $persona-name-font-color: $text !default; -$persona-metadata-font-size: $font-size-9 !default; -$persona-metadata-font-color: $text-subtle !default; - $persona-gap-size: $layout-1 !default; .persona { display: flex; position: relative; gap: $persona-gap-size; + font-size: $persona-font-size-md; .persona-avatar { display: flex; + flex-shrink: 0; align-items: center; justify-content: center; - width: 2.35em; - height: 2.35em; + width: 2.7em; + height: 2.7em; border-radius: $persona-avatar-border-radius; background-color: $persona-avatar-background-color; color: $persona-avatar-font-color; - font-size: $persona-font-size-md; line-height: 1; text-transform: uppercase; @@ -46,11 +43,10 @@ $persona-gap-size: $layout-1 !default; .persona-details { align-self: center; - color: $persona-metadata-font-color; - font-size: $persona-metadata-font-size; + color: $persona-details-font-color; .persona-name { - font-size: $persona-name-font-size; + font-size: 1.35em; &:not(a) { color: $persona-name-font-color; @@ -60,23 +56,11 @@ $persona-gap-size: $layout-1 !default; // Sizes - &.persona-xs .persona-avatar { - font-size: $persona-font-size-xs; - } - - &.persona-sm .persona-avatar { + &.persona-sm { font-size: $persona-font-size-sm; } - &.persona-md .persona-avatar { - font-size: $persona-font-size-md; - } - - &.persona-lg .persona-avatar { + &.persona-lg { font-size: $persona-font-size-lg; } - - &.persona-xl .persona-avatar { - font-size: $persona-font-size-xl; - } } diff --git a/site/src/components/persona.md b/site/src/components/persona.md index 71dd1cd08..1b4acdb4c 100644 --- a/site/src/components/persona.md +++ b/site/src/components/persona.md @@ -12,13 +12,13 @@ classPrefixes: We use the persona to represent users. It consists of two parts - user's avatar and details. Both subcomponents can be used independent of one another. Details has their name and optional metadata. -| Class pattern | Sizes | -| ------------------------- | ---------------------- | -| `.persona.persona-` | `xs`, `sm`, `lg`, `xl` | +| Class pattern | Sizes | +| ------------------------- | ---------- | +| `.persona.persona-` | `sm`, `lg` | ## Usage -Below are examples of the most common persona component use-cases - one with an image avatar and another with user's initials. +Below is an example of the most common persona component use-case. ```html
@@ -30,27 +30,17 @@ Below are examples of the most common persona component use-cases - one with an

Software Engineer

- -
-
- JD -
-
-

John Doe

-

Software Engineer

-
-
``` Persona's details may contain a link to user's profile, and with help of the [`.stretched-link` component](../components/stretched-link.md) the whole area persona takes becomes clickable: ```html
-
- JD -
+
+ Avatar for Jane Doe +
- John Doe + Jane Doe

Software Engineer

@@ -75,61 +65,35 @@ Persona might have both avatar and details parts presented at the same time or j ### Sizes -The following classes are available for resizing avatar: `persona-xs`, `persona-sm`, `persona-lg`, `persona-xl`. +The following classes are available for resizing: `persona-sm`, `persona-lg`. ```html -
-
-
- Avatar for Jane Doe -
-
+
Avatar for Jane Doe
+
+

Jane Doe

+

Software Engineer

+
Avatar for Jane Doe
+
+

Jane Doe

+

Software Engineer

+
Avatar for Jane Doe
-
-
-
- Avatar for Jane Doe -
-
-
- -
-
-
- ww -
-
-
-
- ww -
-
-
-
- ww -
-
-
-
- ww -
-
-
-
- ww +
+

Jane Doe

+

Software Engineer

From ef29f86e19e34a1486337938fb9823b058482849 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Mon, 25 Sep 2023 15:41:48 -0700 Subject: [PATCH 13/15] Final updates --- css/src/components/persona.scss | 7 +++---- site/src/components/persona.md | 6 +++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/css/src/components/persona.scss b/css/src/components/persona.scss index ba609dda5..a48f40fd6 100644 --- a/css/src/components/persona.scss +++ b/css/src/components/persona.scss @@ -23,13 +23,12 @@ $persona-gap-size: $layout-1 !default; flex-shrink: 0; align-items: center; justify-content: center; - width: 2.7em; - height: 2.7em; + width: 2.6666em; + height: 2.6666em; border-radius: $persona-avatar-border-radius; background-color: $persona-avatar-background-color; color: $persona-avatar-font-color; line-height: 1; - text-transform: uppercase; img, svg { @@ -46,7 +45,7 @@ $persona-gap-size: $layout-1 !default; color: $persona-details-font-color; .persona-name { - font-size: 1.35em; + font-size: 1.3333em; &:not(a) { color: $persona-name-font-color; diff --git a/site/src/components/persona.md b/site/src/components/persona.md index 1b4acdb4c..a45e855cc 100644 --- a/site/src/components/persona.md +++ b/site/src/components/persona.md @@ -10,7 +10,7 @@ classPrefixes: # Persona -We use the persona to represent users. It consists of two parts - user's avatar and details. Both subcomponents can be used independent of one another. Details has their name and optional metadata. +We use the persona to represent users. It consists of two parts - a user's avatar and details. Both subcomponents can be used independent of one another. Details has their name and optional metadata. | Class pattern | Sizes | | ------------------------- | ---------- | @@ -46,7 +46,7 @@ Persona's details may contain a link to user's profile, and with help of the [`.
``` -Persona might have both avatar and details parts presented at the same time or just one of them. +Persona might have both avatar and details presented at the same time or just one of them. ```html
@@ -57,7 +57,7 @@ Persona might have both avatar and details parts presented at the same time or j
-

John Doe

+

Jane Doe

Software Engineer

From dc96eb669487709047da0d0054aec99c6d0317c1 Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Tue, 26 Sep 2023 12:00:52 -0700 Subject: [PATCH 14/15] CSS updates --- css/src/components/persona.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/css/src/components/persona.scss b/css/src/components/persona.scss index a48f40fd6..54f9d4a0f 100644 --- a/css/src/components/persona.scss +++ b/css/src/components/persona.scss @@ -19,24 +19,19 @@ $persona-gap-size: $layout-1 !default; font-size: $persona-font-size-md; .persona-avatar { - display: flex; flex-shrink: 0; - align-items: center; - justify-content: center; width: 2.6666em; height: 2.6666em; border-radius: $persona-avatar-border-radius; background-color: $persona-avatar-background-color; color: $persona-avatar-font-color; - line-height: 1; img, svg { - display: block; width: 100%; height: auto; - max-height: 100%; border-radius: $persona-avatar-border-radius; + aspect-ratio: 1 / 1; } } From 90411182593fde9560bcde9990312e1290b8d3ed Mon Sep 17 00:00:00 2001 From: Olga Lipskaya Date: Tue, 26 Sep 2023 14:35:45 -0700 Subject: [PATCH 15/15] Making name black all the time --- css/src/components/persona.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/css/src/components/persona.scss b/css/src/components/persona.scss index 54f9d4a0f..2116431fc 100644 --- a/css/src/components/persona.scss +++ b/css/src/components/persona.scss @@ -40,11 +40,8 @@ $persona-gap-size: $layout-1 !default; color: $persona-details-font-color; .persona-name { + color: $persona-name-font-color; font-size: 1.3333em; - - &:not(a) { - color: $persona-name-font-color; - } } }