Skip to content

Commit

Permalink
WIP: rework user components and add 3xs size
Browse files Browse the repository at this point in the history
  • Loading branch information
@DakEnviy
DakEnviy committed Dec 12, 2024
1 parent 91e8cd3 commit 9c488e7
Show file tree
Hide file tree
Showing 33 changed files with 327 additions and 248 deletions.
84 changes: 52 additions & 32 deletions src/components/Avatar/Avatar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@ $block: '.#{variables.$ns}avatar';
#{$block} {
--_--size: #{avatar-variables.$default-size};
--_--background-color: var(--g-color-base-misc-light);
--_--border-width: 2px;
--_--inner-border-width: 3px;
--_--border-color: currentColor;
--_--color: var(--g-color-text-misc);
--_--font-weight: var(--g-text-body-font-weight);
--_--font-size: var(--g-text-body-1-font-size);
--_--line-height: var(--g-text-body-1-line-height);
--_--font-weight: var(--g-text-body-font-weight);

overflow: hidden;
display: inline-flex;
Expand All @@ -21,28 +23,6 @@ $block: '.#{variables.$ns}avatar';
border-radius: 50%;
background-color: var(--g-avatar-background-color, var(--_--background-color));

&__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

&__icon {
color: var(--g-avatar-color, var(--_--color));

& > svg {
display: block;
}
}

&__text {
color: var(--g-avatar-color, var(--_--color));
font-size: var(--g-avatar-font-size, var(--_--font-size));
line-height: var(--g-avatar-line-height, var(--_--line-height));
font-weight: var(--_--font-weight);
}

&_with-border,
&_view_outlined {
position: relative;
Expand All @@ -57,11 +37,13 @@ $block: '.#{variables.$ns}avatar';
}

&::before {
border: 3px solid var(--g-color-base-background);
border: var(--g-avatar-inner-border-width, var(--_--inner-border-width)) solid
var(--g-color-base-background);
}

&::after {
border: 2px solid var(--g-avatar-border-color, var(--_--border-color));
border: var(--g-avatar-border-width, var(--_--border-width)) solid
var(--g-avatar-border-color, var(--_--border-color));
}
}

Expand All @@ -72,30 +54,46 @@ $block: '.#{variables.$ns}avatar';
}
}

&_2xs {
&_3xs,
&_2xs,
&_xs {
--_--font-weight: var(--g-text-caption-font-weight);
--_--font-size: var(--g-text-caption-1-font-size);
--_--line-height: var(--g-text-caption-1-line-height);
--_--font-weight: var(--g-text-caption-font-weight);
}

&_xs,
&_s {
--_--font-size: var(--g-text-caption-1-font-size);
--_--line-height: var(--g-text-caption-1-line-height);
--_--font-weight: var(--g-text-caption-font-weight);
--_--font-size: var(--g-text-caption-2-font-size);
--_--line-height: var(--g-text-caption-2-line-height);
}

&_m,
&_l {
--_--font-weight: var(--g-text-subheader-font-weight);
--_--font-size: var(--g-text-subheader-1-font-size);
--_--line-height: var(--g-text-subheader-1-line-height);
--_--font-weight: var(--g-text-subheader-font-weight);
}

&_xl {
--_--font-weight: var(--g-text-subheader-font-weight);
--_--font-size: var(--g-text-subheader-2-font-size);
--_--line-height: var(--g-text-subheader-2-line-height);
--_--font-weight: var(--g-text-subheader-font-weight);
}

&_3xs,
&_2xs {
--_--border-width: 1.5px;
--_--inner-border-width: 2.5px;
}

&_xs,
&_s,
&_m,
&_l,
&_xl {
--_--border-width: 2px;
--_--inner-border-width: 3px;
}
}

Expand Down Expand Up @@ -130,4 +128,26 @@ $block: '.#{variables.$ns}avatar';
}
}
}

&__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

&__icon {
color: var(--g-avatar-color, var(--_--color));

& > svg {
display: block;
}
}

&__text {
color: var(--g-avatar-color, var(--_--color));
font-weight: var(--g-avatar-font-weight, var(--_--font-weight));
font-size: var(--g-avatar-font-size, var(--_--font-size));
line-height: var(--g-avatar-line-height, var(--_--line-height));
}
}
1 change: 1 addition & 0 deletions src/components/Avatar/AvatarIcon/AvatarIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type {AvatarSize} from '../types/common';
import type {AvatarIconProps} from './types';

const avatarSizeToIconSize: Record<AvatarSize, number> = {
'3xs': 10,
'2xs': 12,
xs: 14,
s: 16,
Expand Down
4 changes: 2 additions & 2 deletions src/components/Avatar/AvatarText/AvatarText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import React from 'react';
import type {AvatarTextProps} from './types';
import {getAvatarDisplayText} from './utils';

export const AvatarText = ({text, color, className}: AvatarTextProps) => {
export const AvatarText = ({text, color, size, className}: AvatarTextProps) => {
const style = {color};
const displayText = getAvatarDisplayText(text);
const displayText = getAvatarDisplayText(text, size);

return (
<div style={style} className={className}>
Expand Down
18 changes: 13 additions & 5 deletions src/components/Avatar/AvatarText/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
export const getAvatarDisplayText = (text: string) => {
const words = text.split(/\s+/);
const result =
words.length > 1 ? [words[0][0], words[1][0]].filter(Boolean).join('') : text.slice(0, 2);
import type {AvatarSize} from '../types/common';

return result.toUpperCase();
export const getAvatarDisplayText = (text: string, size: AvatarSize) => {
if (size === '3xs') {
return text[0].toUpperCase();
}

const words = text.split(/[^a-zA-Z]+/);

if (words.length <= 1) {
return text.slice(0, 2).toUpperCase();
}

return [words[0][0], words[1][0]].filter(Boolean).join('').toUpperCase();
};
49 changes: 27 additions & 22 deletions src/components/Avatar/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,12 +141,13 @@ LANDING_BLOCK-->

### Size

To control the size of the `Avatar` use the `size` property. The default size is `m`. Possible values: `2xs`, `xs`, `s`, `m`, `l`, `xl`.
To control the size of the `Avatar` use the `size` property. The default size is `m`. Possible values: `3xs`, `2xs`, `xs`, `s`, `m`, `l`, `xl`.

<!--LANDING_BLOCK
<ExampleBlock
code={`
<Avatar text="Charles Darwin" theme="brand" size="3xs" />
<Avatar text="Charles Darwin" theme="brand" size="2xs" />
<Avatar text="Charles Darwin" theme="brand" size="xs" />
<Avatar text="Charles Darwin" theme="brand" size="s" />
Expand All @@ -155,6 +156,7 @@ To control the size of the `Avatar` use the `size` property. The default size is
<Avatar text="Charles Darwin" theme="brand" size="xl" />
`}
>
<UIKit.Avatar text="Charles Darwin" theme="brand" size="3xs" />
<UIKit.Avatar text="Charles Darwin" theme="brand" size="2xs" />
<UIKit.Avatar text="Charles Darwin" theme="brand" size="xs" />
<UIKit.Avatar text="Charles Darwin" theme="brand" size="s" />
Expand All @@ -169,19 +171,19 @@ LANDING_BLOCK-->

### Common

| Name | Description | Type | Default |
| :-------------- | :-------------------------------------- | :-------------------------------------: | :------: |
| size | Avatar size | `'2xs'` `'xs'` `'s'` `'m'` `'l'` `'xl'` | `m` |
| theme | Avatar theme | `'normal'` `'brand'` | `normal` |
| view | Avatar view | `'filled'` `'outlined'` | `filled` |
| backgroundColor | Custom background color | `string` | |
| borderColor | Custom border color | `string` | |
| title | HTML `title` attributes | `string` | |
| aria-label | `aria-label` for avatar block | `string` | |
| aria-labelledby | `aria-labelledby` for avatar block | `string` | |
| className | Custom CSS class for root element | `string` | |
| style | HTML style attribute | `React.CSSProperties` | |
| qa | HTML `data-qa` attribute, used in tests | `string` | |
| Name | Description | Type | Default |
| :-------------- | :-------------------------------------- | :---------------------------------------------: | :------: |
| size | Avatar size | `'3xs'` `'2xs'` `'xs'` `'s'` `'m'` `'l'` `'xl'` | `m` |
| theme | Avatar theme | `'normal'` `'brand'` | `normal` |
| view | Avatar view | `'filled'` `'outlined'` | `filled` |
| backgroundColor | Custom background color | `string` | |
| borderColor | Custom border color | `string` | |
| title | HTML `title` attributes | `string` | |
| aria-label | `aria-label` for avatar block | `string` | |
| aria-labelledby | `aria-labelledby` for avatar block | `string` | |
| className | Custom CSS class for root element | `string` | |
| style | HTML style attribute | `React.CSSProperties` | |
| qa | HTML `data-qa` attribute, used in tests | `string` | |

### Image-specific

Expand Down Expand Up @@ -210,11 +212,14 @@ LANDING_BLOCK-->

## CSS API

| Name | Description |
| :---------------------------- | :---------------------- |
| `--g-avatar-size` | Size (width and height) |
| `--g-avatar-background-color` | Background color |
| `--g-avatar-border-color` | Border color |
| `--g-avatar-color` | Icon and text color |
| `--g-avatar-font-size` | Text font size |
| `--g-avatar-line-height` | Text line height |
| Name | Description |
| :------------------------------ | :---------------------- |
| `--g-avatar-size` | Size (width and height) |
| `--g-avatar-background-color` | Background color |
| `--g-avatar-border-width` | Border width |
| `--g-avatar-inner-border-width` | Inner border width |
| `--g-avatar-border-color` | Border color |
| `--g-avatar-color` | Icon and text color |
| `--g-avatar-font-weight` | Text font weight |
| `--g-avatar-font-size` | Text font size |
| `--g-avatar-line-height` | Text line height |
Binary file modified ...tar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...vatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-1-webkit-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 9c488e7

Please sign in to comment.