From 2b52c30e98b6d1c8ba4464dcb1e6f561fc5b4d56 Mon Sep 17 00:00:00 2001 From: Tim McConechy Date: Wed, 24 Jan 2024 15:10:50 -0500 Subject: [PATCH] Add new avatar component --- .../components/images/example-avatar.html | 59 +++++++++++++++++++ .../components/images/example-photos.html | 51 ---------------- .../example-hide-show-sections.html | 15 +++-- docs/CHANGELOG.md | 1 + src/components/cards/_cards.scss | 4 ++ src/components/images/_images.scss | 47 ++++++++++++--- src/components/images/readme.md | 17 +++++- .../module-nav/module-nav.guest.scss | 3 +- 8 files changed, 130 insertions(+), 67 deletions(-) create mode 100644 app/views/components/images/example-avatar.html delete mode 100644 app/views/components/images/example-photos.html diff --git a/app/views/components/images/example-avatar.html b/app/views/components/images/example-avatar.html new file mode 100644 index 0000000000..f8afec14e6 --- /dev/null +++ b/app/views/components/images/example-avatar.html @@ -0,0 +1,59 @@ +
+
+
MN
     +
MN
+

+
AC
     +
Ac
     +

+
AC
     +
Ac
+

+
mon
     +
mon
+

+ Photo of Evyn +

+ +
+ Photo of Evyn + +
+

+ +
+ Photo of Evyn + +
+

+ +
+ Photo of Evyn + +
+

+ +
+ Photo of Evyn + +
+

+ +
+ Photo of Evyn + +
+

+
+
+ diff --git a/app/views/components/images/example-photos.html b/app/views/components/images/example-photos.html deleted file mode 100644 index d5893f8b65..0000000000 --- a/app/views/components/images/example-photos.html +++ /dev/null @@ -1,51 +0,0 @@ - -
-
-
MN
-

- - Photo of Evyn -

- -
- Photo of Evyn - -
-

- -
- Photo of Evyn - -
-

- -
- Photo of Evyn - -
-

- -
- Photo of Evyn - -
-

- -
- Photo of Evyn - -
-

- -
-
diff --git a/app/views/components/module-nav/example-hide-show-sections.html b/app/views/components/module-nav/example-hide-show-sections.html index aab28a2c97..0b201ec432 100644 --- a/app/views/components/module-nav/example-hide-show-sections.html +++ b/app/views/components/module-nav/example-hide-show-sections.html @@ -289,12 +289,15 @@
- + +
GS
Guest Create an account to save your settings. diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 1043f3483c..9d29014110 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -4,6 +4,7 @@ ## v4.92.0 Features +- `[Avatar]` Added a new `avatar` class that can show initials and can be used in the module nav guest area. ([#8374](https://github.com/infor-design/enterprise/issues/8374)) - `[Datagrid]` Added option to disable tooltip in columns. ([#8252](https://github.com/infor-design/enterprise/issues/8252)) - `[Header]` Added an example configuration with both a hamburger and a back button. ([#8327](https://github.com/infor-design/enterprise/issues/8327)) - `[Icons]` Added new icons which are more substantial in look. ([#8129](https://github.com/infor-design/enterprise/issues/8129)) diff --git a/src/components/cards/_cards.scss b/src/components/cards/_cards.scss index 7d6a70067e..43205100d8 100644 --- a/src/components/cards/_cards.scss +++ b/src/components/cards/_cards.scss @@ -534,6 +534,10 @@ $card-header-section: '.card-header-section', '.widget-header-section'; &:hover .icon { color: $card-actions-toolbar-button-hover-color !important; } + + &.go-back { + margin-top: -2px; + } } &:not(.has-toolbar) { diff --git a/src/components/images/_images.scss b/src/components/images/_images.scss index 120698eddc..c062698b72 100644 --- a/src/components/images/_images.scss +++ b/src/components/images/_images.scss @@ -74,6 +74,10 @@ $images-size: ( height: 48px; width: 48px; + &.round { + border-radius: 50%; + } + &:focus { @include focus-state(); } @@ -93,24 +97,53 @@ $images-size: ( } // Initials for when photo is absent -.image-initials { - background: $ids-color-palette-amethyst-50; +.image-initials, +.avatar { + background: $ids-color-palette-emerald-50; border: 1px solid transparent; // to prevent jump on focus - border-radius: 50%; + border-radius: 8px; color: $ids-color-palette-white; display: inline-block; - font-size: $ids-size-font-lg; - height: 4.8rem; - line-height: 4.8rem; + font-size: 14px; + font-weight: 600; + height: 32px; + line-height: 30px; text-align: center; + text-transform: uppercase; vertical-align: middle; - width: 4.8rem; + width: 32px; + user-select: none; + + &.three-char { + text-transform: capitalize; + } + + &.large { + height: 48px; + font-size: 20px; + line-height: 48px; + width: 48px; + } + + &.round { + border-radius: 50%; + } &:focus { @include focus-state(); } } +@each $name in $color-names { + $i: index($color-names, $name); + $color: nth($color-vars, $i); + + //Classes for Tags + .avatar.#{$name} { + background: nth($color-vars, $i); + } +} + .actionable { cursor: pointer; diff --git a/src/components/images/readme.md b/src/components/images/readme.md index d83dc2821c..7c29a07a75 100644 --- a/src/components/images/readme.md +++ b/src/components/images/readme.md @@ -8,8 +8,8 @@ demo: pages: - name: A Pattern showing a toolbar over a list of Images slug: example-image-list - - name: People Photos and initials - slug: example-photos + - name: People, avatars and initials + slug: example-avatar --- The image component is a CSS only component to handle placeholder images, empty images, and the various sizes of images that can appear in an application. Placeholder images can be in sizes `image-lg`, `image-md`, and `image-sm`. @@ -27,6 +27,19 @@ This example shows how to invoke a small sized placeholder image.
``` +This example shows how to create an initials avatar + +```html +
AC
+
Ac
+``` + +For the avatar class you can use the following classes. + +- `round` To make it round, or else it has a small border radius. The top level items in module nav should have the border radius. The guest area and other legacy areas should use the fully round one. +- `none` or `large` To adjust the size to be larger add class `large`. Normal size is used in module nav and the app nav area and other legacy areas should use the `large` one. +- `<0-9>` To set the background color, the color name is from the colors palette. For example `azure05, emerald05` depending on contrast should avoid 0-4 and use 5-8 range. When in doubt follow the designs. + ## Accessibility - For images always use an `alt` tag, which is read by screen readers diff --git a/src/components/module-nav/module-nav.guest.scss b/src/components/module-nav/module-nav.guest.scss index 616f2a34b7..79751f775c 100644 --- a/src/components/module-nav/module-nav.guest.scss +++ b/src/components/module-nav/module-nav.guest.scss @@ -24,7 +24,8 @@ .mode-expanded .module-nav-guest a { justify-content: flex-start; - svg { + svg, + .avatar { margin-inline-start: 4px; } }