[feat]: <rh-tile> ready for development

markcaron commented 1 year ago

Tag Name

rh-tile

Purpose

RH Tile is singular linked/clickable "card"-like layout component.

Distinguishing factors

RH Tile is a new component that is simpler and often smaller, and it must be grouped together with other tiles to convey a larger message.

The entire surface of a tile is clickable and should not contain a CTA or button. This means that each tile performs only one action.

Mockup: https://xd.adobe.com/view/925ed24c-3ddf-4111-bacf-2a42e5249f7a-c70d/ Design issue: https://github.com/RedHat-UX/red-hat-design-system/issues/235

Where will it be used?

RH Tile will be used throughout content pages and SERPs

End user

All users

Intended end use

RH Tile provides a single clickable element for use on content pages and SERPs

Properties

No response

Page Builder

[ ] My component will be part of a page-builder experience
[X] I'm not sure

Accessibility Features

[X] Color: Color should not be the primary visual means of communicating information (1.4.1)
[X] Content or microcopy Text in any language should be clear, meaningful, structured, etc.
[X] Text Contrast: Small text should have a contrast ratio of at least 4.5:1 (1.4.3)
[X] Text Contrast: Large text should have a contrast ratio of at least 3:1 (1.4.3)
[X] Resizable Text: Text should have the ability to be resized up to 200% without losing content or functionality (for example, horizontal scrolling) (1.4.4)
[X] Alt Text: Non-text elements should have concise text descriptions (a.k.a. alt text) (1.1.1)
[X] Keyboard: Descriptions of how interactive elements behave when a key is pressed should be included (2.1.1) (for example, the Esc key closes a navigation menu)
[X] Focus Appearance: Colors between focused states should have a contrast ratio of at least 3.1 (2.4.11)
[X] Focus Appearance: Borders should have a thickness of at least 2px (2.4.11)
[X] Focus Order: It should be logical how a user moves focus from one element to another (2.4.3)
[X] Motion Animation: Controls should be available to disable an animation triggered by an interaction (2.3.3)
[X] Mobile: Interactive elements should be reachable for touching, scrolling, or dismissing

MVP Requirements

[X] Correct styles and neccessary sizes, orientations, variants, spacers, and themes
[X] Responsive sizes and page layout examples placed on screenshots
[X] Functionality guidance and static animation frames or prototypes with motion
[X] Interaction and Selected states
[X] Alignment options, character counts, and necessary translations
[X] Clear and structured content, acceptable text contrast, and logical keyboard events

Appearance

[X] Foundations are represented as tokens or variables (border, color, font, opacity, spacing, shadow, etc.) [Consult with the assigned developer to ensure you are both working with the correct styles and values]
[X] Foundations are applied to elements (backgrounds, buttons, fields, icons, links, etc.)
[X] Size (Standard, Compact, Mini, etc.)
[X] Orientations (horizontal or vertical)
[X] Position in relation to trigger (top, right, bottom, left, etc.)
[X] Hierarchy and decoration variants (Primary and Secondary CTAs, Earth and Wind variant Tabs, etc.)
[X] Decorations (borders, logos, UI icons, etc.)
[X] Desktop and mobile scale spacers (visit the Spacing and Typography pages for examples)
[X] Themes (light, dark, high-contrast, custom color, etc.)
[X] Edge cases or limitations (accessibility, brand extensions, horizontal scrolling, missing images, etc.) [It is not required to include all of these specs, but keep them in mind]
[X] Fallback (if a browser does not support the original design) [Consult with the assigned developer first to determine if this is necessary to design]

Page Layout

[ ] Location on page (navigation, hero, band, card, footer, etc.)
[ ] Grid (fixed width inside the grid, full-width or outside of the grid)
[ ] Position on page (inline, overlay, toast)
[ ] Stacking (space in between each instance if your component is meant to be repeatable)
[ ] Responsive screen sizes (desktop, tablet, mobile, etc.)
[ ] Content degradation (becomes hidden, reduces in size, truncates due to length, etc.)
[ ] Scrolling behavior (fixed, sticky, content scrolls inside; visit this page for examples)

Behavior

[ ] Functionality (collapse, expand, navigate, play, submit, etc.)
[ ] Animation or motion (hover, jump, slide, stack, toggle, etc.)
[ ] Overflow (when content exceeds a defined boundary; visit the Tabs page for examples)
[ ] Other effects (blur, cover, shuffle, etc.)

States

[ ] Interaction (default, focus, hover, active, disabled, dragged, etc.)
[ ] Selected (if a user needs to distinguish between active or inactive content)
[ ] Steps (if a user needs to move through steps toward the completion of a task)
[ ] Error (if a user needs to complete a task or fix an issue before proceeding)
[ ] Severity (if a range of status options need to be communicated to a user)
[ ] Boolean (if on or off are the only actions available to a user, literally or semantically)
[ ] Skeleton loading (if a component might load slower for a user than expected)
[ ] Empty (if data cannot be displayed without user input; visit this page for examples)
[ ] Fallback (if JavaScript is disabled or it fails to load) [Consult with the assigned developer first to determine if this is necessary to design]

Content

[ ] Alignment options (left, center, or both)
[ ] Character counts (minimum and maximum)
[ ] Links (which links are inline, external, redirects, etc.)
[ ] Translations (German, Japanese, Hebrew, etc.)
[ ] Edge cases or limitations (overflow, truncate, wrap, etc.) [It is not required to include all of these specs, but keep them in mind]

bennypowers commented 1 year ago

can tile function as a radio button in a radio group? if so, does that depend on context?

brianferry commented 1 year ago

Are we expecting that this component will be on it's own or will we be creating a grouped component as well to handle the bit about making sure there are only ever three per line? It seems like a design guideline instead of something built into the component but wanted to make sure.

marionnegp commented 1 year ago

@coreyvickery, the rh-tile file in the Element explorations > 2022 folder is up-to-date with some mockups with arrows in the bottom right corner.

nikkimk commented 1 year ago

Note to self: See also #235

marionnegp commented 1 year ago

@nikkimk, I've updated the mockup link. Mark said he also spoke to you about adding a way to change the background color for those blue and green tiles on the Customer Portal homepage.

markcaron commented 1 year ago

Closing this so we can track on a single issue: #235

RedHat-UX / red-hat-design-system