Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Avatar status icon makes the whole component taller #31

@tomasiser

Description

@tomasiser

Bug Report

Steps

Try modifying the <List /> example:
https://stardust-ui.github.io/react/components/list#types-list

  <List
    items={[
      {
        key: 'irving',
        media: <Avatar src="public/images/avatar/small/matt.jpg" />,
        header: 'Irving Kuhic',
        headerMedia: '7:26:56 AM',
        content: 'Program the sensor to the SAS alarm through the haptic SQL card!',
      },
      {
        key: 'skyler',
        media: <Avatar src="public/images/avatar/small/steve.jpg" status="Available" />,
        header: 'Skyler Parks',
        headerMedia: '11:30:17 PM',
        content: 'Use the online FTP application to input the multi-byte application!',
      },
      {
        key: 'dante',
        media: <Avatar src="public/images/avatar/small/nom.jpg" />,
        header: 'Dante Schneider',
        headerMedia: '5:22:40 PM',
        content: 'The GB pixel is down, navigate the virtual interface!',
      },
    ]}
  />

Expected Result

All three avatars should have the same height, aligning perfectly in the list.

Actual Result

The avatar with the status icon is taller and messes up the alignment.
image

With status icon (height 45.98px):

image

Without status icon (height 31.98px):

image

Version

0.2.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions