-
+
+ GS
Guest
Create an account to save your settings.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 56ce89d336..5ffc4e701d 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))
- `[Calendar]` Added feature of updating legends and disabled dates on before render of month. ([#8248](https://github.com/infor-design/enterprise/issues/8248))
- `[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))
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;
}
}