feat(Avatar): new component #2312

Barsnes · 2024-08-22T10:24:48Z

resolves #1098

In contrast to Badges overlap, we use square instead of rectangle. This is because the avatar is always a square.
The component does not support asChild, since elements such as button or a should wrap the element. Styling is up to the consumers to handle.
Font class will be removed later in favor of composes in modules

changeset-bot · 2024-08-22T10:24:52Z

🦋 Changeset detected

Latest commit: 574dbbd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@digdir/designsystemet-css	Patch
@digdir/designsystemet-react	Patch
@digdir/designsystemet	Patch
@digdir/designsystemet-theme	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-08-22T10:25:06Z

Preview deployments for this pull request:

📖 Storybook 2. Sep 2024 - 13:29 (Norwegian time)

See all deployments at https://dev.designsystemet.no

packages/react/src/components/Avatar/Avatar.tsx

packages/css/avatar.css

packages/react/src/components/Avatar/Avatar.tsx

packages/react/src/components/Avatar/Avatar.stories.tsx

mimarz · 2024-09-02T06:43:53Z

packages/react/src/components/Avatar/Avatar.mdx

+
+# Avatar
+
+`Avatar` er en komponent som viser et bilde, initialer eller ikon for en bruker eller profil.


Were we supposed to add info about recommendation for initals only being 2 characters?

packages/react/src/components/Avatar/Avatar.test.tsx

packages/react/src/components/Avatar/Avatar.stories.tsx

packages/react/src/components/Avatar/Avatar.mdx

Co-authored-by: Eirik Backer <eirik.backer@gmail.com>

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ # Releases ## @digdir/designsystemet-css@1.0.0-next.33 ### Patch Changes - Pagination: Use data attrs instead of class names ([#2395](#2395)) - Badge: Style using css attributes ([#2391](#2391)) - TableHeaderCell: Remove `sortable` prop, `sort` now handles this ([#2393](#2393)) - dropdownmenu: Style using data attributes ([#2387](#2387)) - Chip: Text color is now `accent` ([#2371](#2371)) - List: Remove `List.Root` and `List.Heading`, which changes API ([#2348](#2348)) - Alert, Avatar, Button, Divider, Link: Use data-attributes for variant, size and color and move icons to CSS ([#2313](#2313)) - Box: Remove component ([#2372](#2372)) - Popover: ([#2369](#2369)) - Rename `<Popover.Root>` to `<Popover.Context>` - use Popover API, allowing `<Popover>` to be used without `Popover.Context` - Remove `portal` prop - Tooltip: Only expose background css variable ([#2389](#2389)) - Switch: don't show check when not checked in readonly ([#2377](#2377)) - Select: Rename from `NativeSelect` ([#2404](#2404)) - Accordion: Now uses details and summary HTML elements ([`5d1c5062b526e6829c322ce66c6df08568bb9f63`](5d1c506)) - Spinner: Style using data attributes ([#2390](#2390)) - Avatar: new component ([#2312](#2312)) - Tag: Make neutral default color in CSS ([#2397](#2397)) - Card: Use data attrs ([#2398](#2398)) ## @digdir/designsystemet-react@1.0.0-next.33 ### Patch Changes - Pagination: Use data attrs instead of class names ([#2395](#2395)) - Badge: Style using css attributes ([#2391](#2391)) - TableHeaderCell: Remove `sortable` prop, `sort` now handles this ([#2393](#2393)) - dropdownmenu: Style using data attributes ([#2387](#2387)) - List: Remove `List.Root` and `List.Heading`, which changes API ([#2348](#2348)) - Alert, Avatar, Button, Divider, Link: Use data-attributes for variant, size and color and move icons to CSS ([#2313](#2313)) - Box: Remove component ([#2372](#2372)) - Popover: ([#2369](#2369)) - Rename `<Popover.Root>` to `<Popover.Context>` - use Popover API, allowing `<Popover>` to be used without `Popover.Context` - Remove `portal` prop - Select: Rename from `NativeSelect` ([#2404](#2404)) - Table: Set sort button type to prevent form submit ([#2402](#2402)) - Heading: default level is now 2 ([#2378](#2378)) - Select: ([#2415](#2415)) - Add Select.Option and Select.Optgroup compond components - Remove `multiple` prop - Accordion: Now uses details and summary HTML elements ([`5d1c5062b526e6829c322ce66c6df08568bb9f63`](5d1c506)) - Spinner: Style using data attributes ([#2390](#2390)) - Avatar: new component ([#2312](#2312)) - Tag: Make neutral default color in CSS ([#2397](#2397)) - Card: Use data attrs ([#2398](#2398)) - Combobox: fix virtual combobox having large gap between items ([#2376](#2376)) ## @digdir/designsystemet@1.0.0-next.33 ## @digdir/designsystemet-theme@1.0.0-next.33 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

resolves #1098 In contrast to `Badge`s `overlap`, we use `square` instead of `rectangle`. This is because the avatar is **always** a square. The component does not support `asChild`, since elements such as `button` or `a` should wrap the element. Styling is up to the consumers to handle. Font class will be removed later in favor of `composes` in modules --------- Co-authored-by: Michael Marszalek <mimarz@gmail.com> Co-authored-by: Eirik Backer <eirik.backer@gmail.com>

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ # Releases ## @digdir/designsystemet-css@1.0.0-next.33 ### Patch Changes - Pagination: Use data attrs instead of class names ([#2395](#2395)) - Badge: Style using css attributes ([#2391](#2391)) - TableHeaderCell: Remove `sortable` prop, `sort` now handles this ([#2393](#2393)) - dropdownmenu: Style using data attributes ([#2387](#2387)) - Chip: Text color is now `accent` ([#2371](#2371)) - List: Remove `List.Root` and `List.Heading`, which changes API ([#2348](#2348)) - Alert, Avatar, Button, Divider, Link: Use data-attributes for variant, size and color and move icons to CSS ([#2313](#2313)) - Box: Remove component ([#2372](#2372)) - Popover: ([#2369](#2369)) - Rename `<Popover.Root>` to `<Popover.Context>` - use Popover API, allowing `<Popover>` to be used without `Popover.Context` - Remove `portal` prop - Tooltip: Only expose background css variable ([#2389](#2389)) - Switch: don't show check when not checked in readonly ([#2377](#2377)) - Select: Rename from `NativeSelect` ([#2404](#2404)) - Accordion: Now uses details and summary HTML elements ([`5d1c5062b526e6829c322ce66c6df08568bb9f63`](5d1c506)) - Spinner: Style using data attributes ([#2390](#2390)) - Avatar: new component ([#2312](#2312)) - Tag: Make neutral default color in CSS ([#2397](#2397)) - Card: Use data attrs ([#2398](#2398)) ## @digdir/designsystemet-react@1.0.0-next.33 ### Patch Changes - Pagination: Use data attrs instead of class names ([#2395](#2395)) - Badge: Style using css attributes ([#2391](#2391)) - TableHeaderCell: Remove `sortable` prop, `sort` now handles this ([#2393](#2393)) - dropdownmenu: Style using data attributes ([#2387](#2387)) - List: Remove `List.Root` and `List.Heading`, which changes API ([#2348](#2348)) - Alert, Avatar, Button, Divider, Link: Use data-attributes for variant, size and color and move icons to CSS ([#2313](#2313)) - Box: Remove component ([#2372](#2372)) - Popover: ([#2369](#2369)) - Rename `<Popover.Root>` to `<Popover.Context>` - use Popover API, allowing `<Popover>` to be used without `Popover.Context` - Remove `portal` prop - Select: Rename from `NativeSelect` ([#2404](#2404)) - Table: Set sort button type to prevent form submit ([#2402](#2402)) - Heading: default level is now 2 ([#2378](#2378)) - Select: ([#2415](#2415)) - Add Select.Option and Select.Optgroup compond components - Remove `multiple` prop - Accordion: Now uses details and summary HTML elements ([`5d1c5062b526e6829c322ce66c6df08568bb9f63`](5d1c506)) - Spinner: Style using data attributes ([#2390](#2390)) - Avatar: new component ([#2312](#2312)) - Tag: Make neutral default color in CSS ([#2397](#2397)) - Card: Use data attrs ([#2398](#2398)) - Combobox: fix virtual combobox having large gap between items ([#2376](#2376)) ## @digdir/designsystemet@1.0.0-next.33 ## @digdir/designsystemet-theme@1.0.0-next.33 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

feat(Avatar): new component

9a841bb

Barsnes added 15 commits August 22, 2024 13:37

add stories, misc work

66f5a2f

add subtle and strong colors

7f44431

defaults, neutral color

79b584a

no padding in code, stories

f9ce508

padding only on icon

fffdf53

circle and square variant

41ea9a5

add image

79080ef

fix initials getter

50303a4

typography map

a62dd7a

size on sm

22d3650

trim and easier children check

15181ed

better icon handling

3eeb7cd

padding in sm

1e6ad3f

fix initials supporting one

a4819ed

dropdown example

cede7b8

eirikbacker reviewed Aug 23, 2024

View reviewed changes

packages/react/src/components/Avatar/Avatar.tsx Outdated Show resolved Hide resolved

eirikbacker reviewed Aug 23, 2024

View reviewed changes

packages/react/src/components/Avatar/Avatar.tsx Outdated Show resolved Hide resolved

Barsnes added 2 commits August 23, 2024 14:19

misc before weeeekend

232e49e

css changes

123ce5a

eirikbacker reviewed Aug 26, 2024

View reviewed changes

packages/css/avatar.css Outdated Show resolved Hide resolved

eirikbacker reviewed Aug 26, 2024

View reviewed changes

packages/react/src/components/Avatar/Avatar.tsx Outdated Show resolved Hide resolved

Barsnes added 6 commits August 26, 2024 12:15

add tests, fix some css and misc

6cfb76a

remove unused class, better calc

6bcbcbe

test for aria hidden

cefd2be

use sizing, and change xs to 7

1b8e793

update avatar colors

27888c5

better initials handling

15948e7

mimarz reviewed Sep 2, 2024

View reviewed changes

packages/react/src/components/Avatar/Avatar.tsx Outdated Show resolved Hide resolved

mimarz reviewed Sep 2, 2024

View reviewed changes

packages/react/src/components/Avatar/Avatar.tsx Outdated Show resolved Hide resolved

mimarz reviewed Sep 2, 2024

View reviewed changes

packages/react/src/components/Avatar/Avatar.tsx Outdated Show resolved Hide resolved

mimarz reviewed Sep 2, 2024

View reviewed changes

packages/react/src/components/Avatar/Avatar.tsx Outdated Show resolved Hide resolved

mimarz requested changes Sep 2, 2024

View reviewed changes

mimarz added 8 commits September 2, 2024 08:58

Update packages/react/src/components/Avatar/Avatar.tsx

42e4e8f

Update packages/react/src/components/Avatar/Avatar.tsx

de7bca3

Update packages/react/src/components/Avatar/Avatar.tsx

4be892f

Update packages/react/src/components/Avatar/Avatar.tsx

19fef5a

Update packages/react/src/components/Avatar/Avatar.tsx

80466f9

Update packages/react/src/components/Avatar/Avatar.test.tsx

333a040

fix empty labels

af8160b

cleaned some code

f2016de

eirikbacker self-requested a review September 2, 2024 10:34

eirikbacker reviewed Sep 2, 2024

View reviewed changes

packages/react/src/components/Avatar/Avatar.stories.tsx Outdated Show resolved Hide resolved

eirikbacker reviewed Sep 2, 2024

View reviewed changes

packages/react/src/components/Avatar/Avatar.mdx Outdated Show resolved Hide resolved

mimarz and others added 2 commits September 2, 2024 12:40

Update packages/react/src/components/Avatar/Avatar.mdx

443b70f

Co-authored-by: Eirik Backer <eirik.backer@gmail.com>

fix withImage a11y

98c351b

eirikbacker approved these changes Sep 2, 2024

View reviewed changes

mimarz added 2 commits September 2, 2024 12:52

omit aria-label to avoid confusion

3d15e65

fix css var prefix

18076bb

eirikbacker approved these changes Sep 2, 2024

View reviewed changes

Merge branch 'next' into feat/avatar

574dbbd

mimarz approved these changes Sep 2, 2024

View reviewed changes

mimarz merged commit b884fda into next Sep 2, 2024
5 checks passed

github-actions bot mentioned this pull request Sep 2, 2024

chore: new release candidate (next) #2361

Merged

mimarz deleted the feat/avatar branch September 9, 2024 08:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Avatar): new component #2312

feat(Avatar): new component #2312

Barsnes commented Aug 22, 2024 •

edited

Loading

changeset-bot bot commented Aug 22, 2024 •

edited

Loading

github-actions bot commented Aug 22, 2024 •

edited

Loading

mimarz Sep 2, 2024


		# Avatar

		`Avatar` er en komponent som viser et bilde, initialer eller ikon for en bruker eller profil.

feat(Avatar): new component #2312

feat(Avatar): new component #2312

Conversation

Barsnes commented Aug 22, 2024 • edited Loading

changeset-bot bot commented Aug 22, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Aug 22, 2024 • edited Loading

mimarz Sep 2, 2024

Choose a reason for hiding this comment

Barsnes commented Aug 22, 2024 •

edited

Loading

changeset-bot bot commented Aug 22, 2024 •

edited

Loading

github-actions bot commented Aug 22, 2024 •

edited

Loading