User profile images

[carrenelloyd]

Catalog # 27

Link to Design

Maintainers Marion Brülls

Tasks

• [x] Initial review of design/existing code

Working in experimental package

• [x] Create a shell component which
  • [x] Create ComponentName/ComponentName.js component file that renders props in raw form (no styling or sub components, plain text OK)
  • [x] Adds prop-types with comments for DocGen to ComponentName/ComponentName.js
  • [x] Add Doc file e.g. ComponentName.mdx with a brief description of the component.
• [ ] First engineering review/playback

Continuing in experimental package

• [ ] Storybook - stories to cover design scenarios, story with long, min and max content, etc
• [ ] Doc tab in storybook derived from design docs with embedded stories where appropriate
• [ ] Code to include prop-types with comments for automated DocGen documentation
• [ ] Tests (written in React Test Library) to cover behavior from the documented in the components mdx file.

Review and promote

• [ ] Design review
• [ ] Add design review issues addressed, issues raised or discounted.
• [ ] Engineering review - Submit PR to promote component to production package
• [ ] All engineering issues addressed, issues raised or discounted.

[lee-chase]

Blocked as the status of the design it was set to 'status: refining' by @carrenelloyd

Invited Marion Brülls to join the conversation here.

[Levinson1]

Design completed and live

[lee-chase]

Dev thoughts.

1. Would 'Avatar' be a better name for the component? Calling it UserProfileImage may discourage group use and strictly speaking it may not be an image.

[lee-chase]

2. IBM Profiles ask the user to provide
   • First name
   • Inital (optional)
   • Last name
   • Display name

Would it not be better to use the first two capitalized letters should be used from the display name.

[qbi11y]

@lee-chase @carrenelloyd who do I need to speak with to come up to speed on this issue?

[andrea-island]

@qbi11y, Marion Brulls and Mitchell Bernstein (wish I could tag them...) own the pattern, but it is currently under discussion with Carmen Darlach for the dark/light theme switching, to determine what the behavior should be for light versus dark theme (map to lighter colors OR a white border around the circle). I've reached out to Carmen and will report back on what the decision is for the pattern. This decision will affect the CSS, but probably not much else.

[lee-chase]

Personally don’t like dark/light theme switches and think we should switch automatically based on theme. Unfortunately, it is only possible to take a best guess at the current Carbon theme based on the value of the background color.

[marion-bruells]

Copying from our slack conversation:

Marion: To your question @lee-chase :

IBM Profiles ask the user to provide
First name
Inital (optional)
Last name
Display name
Would it not be better to use the first two capitalized letters should be used from the display name.

We originally designed it with first and last name – how users also know from box and other applications. I know some applications use also the display name. What benefits are you seeing in using the display name instead on our platforms?

Lee: I felt the need to point out what is asked for elsewhere. If a display name is given I would expect it to be used over the users name.

[marion-bruells]

@lee-chase If display name is elsewhere used over the users name I think we can also follow that path.

[qbi11y]

@marion-bruells @lee-chase @andrea-gm I have run into an issue where the design calls for a size (64px) that Carbon does not support. Is this 64px only for profile images or should it be applied to icons and initials as well?

In regards to font size, the design calls for 8 and 10px. The lowest carbon support is a 12px token. Is there a plan for Carbon to support these lower sizes or should the implementation ignore Carbon token support and force the 8 and 10px sizes?

Responding to the display name conversation. My assumption is the component consumer would pass the entire display name to the component and the component would need to format the display name to fit in the display circle. Is this assumption correct?

[lee-chase]

@qbi11y $spacing-10 and $container-05 are undocumented 64px. $layout-05 is also 64px.

[qbi11y]

@lee-chase @andrea-gm this is ready for an initial engineering review. Please advise on how to proceed.

[andrea-island]

@qbi11y I can do an initial review. I'll schedule some time for us tomorrow (Monday)!

[matthewgallo]

Review for release

Readiness

• [x] One or more scenarios for a design pattern have been identified as a useful unit of functionality to publish.
• [x] A functioning component or components delivering those scenarios have been delivered and merged to master.
• [ ] Design maintainer has approved the implementation for those scenarios (via a comment on the relevant issue/epic) (See issue #623).

Engineering review

• [x] Breaking changes have only been introduced with prior approval, discussion and documented in release notes. Ideally deprecation notices in the prior major version must have been added in a timely fashion.
• [x] The implementation takes into account, and does not impair, remaining and anticipated design scenarios.
• [ ] Public component features (names, props, etc) are consistent with Carbon-defined conventions and are consistent internally. Where there isn't an existing convention to apply, ensure robust precedents are being established. #623 opened
• [ ] The UI produced is accessible, responsive, translatable, cross-browser, and responds to the currently set Carbon theme #623 opened
• [x] Components are functional components using hooks.
• [x] Public components which produce DOM structures support className.
• [x] Public components support a ref (via React.forwardRef).
• [ ] All significant DOM elements have meaningful classes. #623 opened
• [x] Additional attributes that are not identified as props (such as title, aria-*, etc) are passed through to an appropriate DOM node of the component as HTML attributes.
• [x] No warnings, errors or log messages in the console.
• [x] Each public component JS is exported in /src/components/index.js, each public component SCSS is included in /src/components/_index.scss, and each public component has a flag in package-settings.js.

Standards

• [x] No linter warnings or errors are produced.
• [ ] Carbon tokens (theme, layout, motion) are used unless the design specifies otherwise. #623 opened
• [x] Code is formatted according to prettier rules (no use of //prettier-ignore).
• [x] Code is clear, maintainable and follows standard React practices and the code guidelines.
• [ ] Copyright header in every source file (js, css, scss etc.) with the appropriate years. #623 opened

Testing

• [ ] There is a set of test cases for the components.
• [ ] The tests exercise all inputs (props, slots, etc) and verify appropriate outputs.
• [ ] The tests validate the behaviors and interactions defined in the design where practical.
• [ ] The tests achieve 100% coverage. Usage of istanbul ignore is appropriate and not extensive.
• [ ] No warnings, errors or log messages in the test output.

Documentation

• [x] Source code is satisfactorily commented and provides DocGen comments for all public components and their props.
• [x] There is a story for each design scenario. The stories expose all relevant props and actions, and additional usage documentation and code samples are available on the 'Docs' tab along with the props table.
• [ ] There is a sandbox (or multiple sandboxes if appropriate) on CodeSandbox for the components.

[qbi11y]

@marion-bruells can you please review the component from a design perspective: https://ibm-cloud-cognitive.netlify.app/?path=/story/cloud-cognitive-canary-userprofileimage--default

[marion-bruells]

I reviewed in the storybook - overall it looks great. I found some accessibility issues. Here is my feedback:

Text and icon color dark mode

• Text and icon color on light colors should be dark instead of white for sequence 30 and 50 to ensure accessibility (color contrast ratio). Current implementation:

  Please check again based on to those guidelines To-be:

  

Remove small sizes

• We should get rid of the sizes sm and xs. The text and icon is not fitting in that size also I wonder if an icon really should be used in that size. Mitchell and I have to update this in the guidance. Seeing this implemented it isn’t accessible enough in that size. Text and icon is too squeezed. Current implementation:

  To-be: remove xs and sm size - we should only support 64px (xl), 32px (lg), 24px (md)

Add alt-text

• Add alt-text, if used as image-only to ensure accessibility (screenreader). Text should be the user or group’s display name. We have two use cases here:
  1. When we only display the image in the UI (without a full text string next to it): Here we have to add descriptive alt-text to the image. I suggest that in this case the user also can hover on the image to see the full string (user or group’s display name) in a tooltip.

2. In cases where a text label is in addition to the image in the UI, it doesn’t require this - here the screenreader just reads the text next to it and the user doesn’t require a tooltip on hovering the image either, as the name is placed next to it already. Having alt-text in addition here would just repeat the same meaning - which can be annoying.

We should consider those two use cases and support this alt-text for 1 - but make sure it can be disabled for case 2.

[qbi11y]

@marion-bruells I removed the small sizes as asked. As far as the text color. Since we are unable to detect the theme, the dev needs to pass the theme into the component. If you didn't update the theme switcher and the theme control on the component would not display correctly in storybook. If you want to see how the component looks on the dark theme, set the theme to 'dark' on the component controls tab and also set it to dark on the theme switcher tab. You should then see the correct colors.

In regards to the tooltip. I see there is conversation about the tooltip component vs browser tooltip. I have currently added the browser tooltip. It's not as visually appealing as the component but it sounds to me it is the best option. If you would like to switch to the component please let me know.

[dcwarwick]

Closed by #758