Add a dot next to unread items in an fdp-list

Is this a bug, enhancement, or feature request?

enhancement

Briefly describe your proposal.

Provide the possibility to add a dot to unread items in an fdp-list (next to the current feature of bolding unread items). Currently, to add a dot next to unread items in a list, we need to heavily use custom CSS which could easily break (see provided code below).

This is what we would like to use (it would be enough if the dot is provided by fundamental, while the color and size may be adjusted by custom CSS):

Which versions of Angular and Fundamental Library for Angular are affected? (If this is a feature request, use current version.)

current

Please provide relevant source code if applicable.

We use the following code to add a dot next to unread items: HTML:

              <fdp-list
                [dataSource]="displayRows | async"
                [...]
              >
                <fdp-standard-list-item
                  *fdpItemDef="let item"
                  [unRead]="true"
                  class="listItem"
                  [...]
                >
                  <div class="notification-wrapper">
                    <fd-icon
                      class="notification-icon sap-icon sap-icon--circle-task-2"
                    ></fd-icon>
                  </div>
                  [...]
                </fdp-standard-list-item>
              </fdp-list>

CSS:

.notification-wrapper {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%) scale(0.5) translateY(-6px);
  height: 6px;
  width: 6px;
}

.notification-icon {
  color: var(--sapAccentColor6) !important;
}

.fd-list__item {
  padding-left: 32px !important;
}

Is there anything else we should know?

As can be seen in the code, the dot we use is the sap icon circle-task-2

[burise]

Hi @InnaAtanasova, thanks for the reply. It looks good, I just could not find details about the specs of the blue dot. We have the following requirements:

color: --sapAccentColor6 
height: 6px
width: 6px
padding-left: 1rem
padding-right: 0.75rem

Would it be possible to use these specifications?

[burise]

I think the combinded padding-left should be 1rem, so when there is already a padding from the outer left border of the List item, no additional padding would be required from the left side. (And as mentioned, from the right side the padding should be 0.75rem).

Thanks again for your efforts, it is really appreciated!