From 9cbd20a67bd88b67b616b4acd866e7b2bcd7fb3e Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 9 Dec 2024 16:10:45 +0200 Subject: [PATCH 01/10] fix(tile): compact link icon layout --- .changeset/clever-webs-appear.md | 4 ++++ elements/rh-tile/demo/link-with-icon.html | 23 +++++++++++++++++++++++ elements/rh-tile/rh-tile.css | 6 +++++- 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 .changeset/clever-webs-appear.md create mode 100644 elements/rh-tile/demo/link-with-icon.html diff --git a/.changeset/clever-webs-appear.md b/.changeset/clever-webs-appear.md new file mode 100644 index 0000000000..c5aebbedd6 --- /dev/null +++ b/.changeset/clever-webs-appear.md @@ -0,0 +1,4 @@ +--- +"@rhds/elements": patch +--- +``: fixed layout of compact link tiles with icons diff --git a/elements/rh-tile/demo/link-with-icon.html b/elements/rh-tile/demo/link-with-icon.html new file mode 100644 index 0000000000..ce647cca76 --- /dev/null +++ b/elements/rh-tile/demo/link-with-icon.html @@ -0,0 +1,23 @@ + +

Compact link tile

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.

+ + + + + + + + diff --git a/elements/rh-tile/rh-tile.css b/elements/rh-tile/rh-tile.css index 59282ecaeb..2d399c98d0 100644 --- a/elements/rh-tile/rh-tile.css +++ b/elements/rh-tile/rh-tile.css @@ -19,7 +19,11 @@ #inner, #content { display: flex; - flex-flow: column; + flex-direction: column; +} + +.compact #inner { + flex-direction: row; } #outer, From d24cdf1a5c8cad945e98cdc0841779ebc4d5fa9b Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 9 Dec 2024 17:39:56 +0200 Subject: [PATCH 02/10] docs(tile): icon and image --- ...-icon.html => compact-link-with-icon.html} | 9 ++---- .../compact-link-with-image-and-icon.html | 32 +++++++++++++++++++ .../rh-tile/demo/compact-link-with-image.html | 18 +++++++++++ 3 files changed, 52 insertions(+), 7 deletions(-) rename elements/rh-tile/demo/{link-with-icon.html => compact-link-with-icon.html} (70%) create mode 100644 elements/rh-tile/demo/compact-link-with-image-and-icon.html create mode 100644 elements/rh-tile/demo/compact-link-with-image.html diff --git a/elements/rh-tile/demo/link-with-icon.html b/elements/rh-tile/demo/compact-link-with-icon.html similarity index 70% rename from elements/rh-tile/demo/link-with-icon.html rename to elements/rh-tile/demo/compact-link-with-icon.html index ce647cca76..2f68915fcd 100644 --- a/elements/rh-tile/demo/link-with-icon.html +++ b/elements/rh-tile/demo/compact-link-with-icon.html @@ -11,13 +11,8 @@

Compact link tile

diff --git a/elements/rh-tile/demo/compact-link-with-image-and-icon.html b/elements/rh-tile/demo/compact-link-with-image-and-icon.html new file mode 100644 index 0000000000..f721ee4069 --- /dev/null +++ b/elements/rh-tile/demo/compact-link-with-image-and-icon.html @@ -0,0 +1,32 @@ + + + + A placeholder image in a card header slot + + +

Compact link tile

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.

+ + + + + + + + + diff --git a/elements/rh-tile/demo/compact-link-with-image.html b/elements/rh-tile/demo/compact-link-with-image.html new file mode 100644 index 0000000000..2f68915fcd --- /dev/null +++ b/elements/rh-tile/demo/compact-link-with-image.html @@ -0,0 +1,18 @@ + +

Compact link tile

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.

+ + + + + + + + From 66603c0ea126c7f2c62611625950da65efed498e Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 9 Dec 2024 17:42:20 +0200 Subject: [PATCH 03/10] docs(tile): compact icon and fullwidth image --- ...ct-link-with-fullwidth-image-and-icon.html | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 elements/rh-tile/demo/compact-link-with-fullwidth-image-and-icon.html diff --git a/elements/rh-tile/demo/compact-link-with-fullwidth-image-and-icon.html b/elements/rh-tile/demo/compact-link-with-fullwidth-image-and-icon.html new file mode 100644 index 0000000000..2eead25e20 --- /dev/null +++ b/elements/rh-tile/demo/compact-link-with-fullwidth-image-and-icon.html @@ -0,0 +1,32 @@ + + + + A placeholder image in a card header slot + + +

Compact link tile

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit set est egestat, a sollicitudn mauris tincidunt.

+ + + + + + + + + From 0992e8ffde394b902529fc1ae4c995226df72b08 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 11 Dec 2024 08:54:37 +0200 Subject: [PATCH 04/10] fix(tile): layout for default slot content --- elements/rh-tile/rh-tile.css | 56 ++++++++++++++++++++---------------- 1 file changed, 32 insertions(+), 24 deletions(-) diff --git a/elements/rh-tile/rh-tile.css b/elements/rh-tile/rh-tile.css index 2d399c98d0..55a6512872 100644 --- a/elements/rh-tile/rh-tile.css +++ b/elements/rh-tile/rh-tile.css @@ -69,45 +69,57 @@ & .palette-darkest { --rh-color-surface: var(--rh-color-surface-darkest, #151515); } & ::slotted(*) { - margin-top: 0; - margin-bottom: var(--_margin); + margin-block: 0 var(--_margin); } & ::slotted(:last-child), & #body ::slotted(:last-of-type) { - margin-bottom: 0; + margin-block-end: 0; } & ::slotted(:first-child), & #body ::slotted(:first-of-type) { - margin-top: 0; + margin-block-start: 0; } & ::slotted(a) { color: var(--_link-color) !important; } - & ::slotted([slot='image']) { - max-width: 100%; - margin-top: 0; - margin-bottom: var(--_padding); + & #image { + --_bleed: calc(0px - var(--_padding)); + + & > *, + &::slotted(*) { + max-width: 100%; + margin: 0 var(--_padding); + } } - & ::slotted([slot='icon']) { - width: 100%; - margin: 0 0 var(--_padding); - max-width: var(--rh-size-icon-05, 48px); + & #icon { + & > *, + &::slotted(*) { + width: 100%; + margin: 0 0 var(--_padding); + max-width: var(--rh-size-icon-05, 48px); + } } - & ::slotted([slot='title']) { - text-transform: uppercase; - font-size: var(--rh-font-size-body-text-md, 1rem) !important; + & #title { + & > *, + &::slotted(*) { + text-transform: uppercase; + font-size: var(--rh-font-size-body-text-md, 1rem) !important; + } } - & ::slotted([slot='headline']) { - margin-block-end: var(--_margin) !important; - font-size: var(--rh-font-size-heading-xs, 1.25rem) !important; - font-weight: var(--rh-font-weight-body-text-medium, 500) !important; + & #headline { + & > *, + &::slotted(*) { + margin-block-end: var(--_margin) !important; + font-size: var(--rh-font-size-heading-xs, 1.25rem) !important; + font-weight: var(--rh-font-weight-body-text-medium, 500) !important; + } } &.dark { @@ -119,10 +131,6 @@ var(--rh-color-surface-dark, #383838)); } - & #image { - --_bleed: calc(0px - var(--_padding)); - } - &.bleed #image { margin: var(--_bleed) var(--_bleed) 0; } @@ -234,7 +242,7 @@ grid-column: 2 / 3; grid-row: 1 / 3; place-self: flex-start flex-end; - margin-bottom: var(--_margin); + margin-block-end: var(--_margin); margin-inline-start: var(--_margin); accent-color: var(--_interactive-color); } From 047b75c67946a84d37a20d3925b68f5a882eddee Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 11 Dec 2024 08:54:49 +0200 Subject: [PATCH 05/10] docs(tile): elaborate on slots --- elements/rh-tile/docs/20-guidelines.md | 237 ++++++++++--------------- elements/rh-tile/rh-tile.ts | 8 +- 2 files changed, 100 insertions(+), 145 deletions(-) diff --git a/elements/rh-tile/docs/20-guidelines.md b/elements/rh-tile/docs/20-guidelines.md index 450337dbb5..e60e91c5c6 100644 --- a/elements/rh-tile/docs/20-guidelines.md +++ b/elements/rh-tile/docs/20-guidelines.md @@ -1,43 +1,42 @@ - ## Usage -A tile can be used when a clickable container is needed to provide one call to action or show one form input option. It can be grouped with similarly-structured and styled tiles in a tile group. There are two types, link tiles and selectable tiles. Both can be used in groups or individually, except for a selectable tile with a radio button, which always has to be grouped. - +A tile can be used when a clickable container is needed to provide one call to action or show one form input option. It can be grouped with similarly-structured and styled tiles in a tile group. There +are two types, link tiles and selectable tiles. Both can be used in groups or individually, except for a selectable tile with a radio button, which always has to be grouped. ### Tile vs. card -The primary distinguishing factor between a tile and a card is that each tile can perform only one action because the whole surface is clickable. A tile also has the ability to be used as selectable items in a form. Tiles can be grouped together like card, however. - +The primary distinguishing factor between a tile and a card is that each tile can perform only one action because the whole surface is clickable. A tile also has the ability to be used as selectable +items in a form. Tiles can be grouped together like card, however. ## Variants ### Link tiles -A link tile has many different use cases, but it is especially helpful to use in place of a card group that would have repetitive calls to action. They can also be used in place of Brick calls to action if adding icons or images is necessary. - +A link tile has many different use cases, but it is especially helpful to use in place of a card group that would have repetitive calls to action. They can also be used in place of Brick calls to +action if adding icons or images is necessary. #### Compact link tile -A link tile has a compact variant that can be used in sections that need a denser concentration of information. To further condense each tile, a compact link tile does not have a title slot and the icon appears to the left of content, rather than above it. - +A link tile has a compact variant that can be used in sections that need a denser concentration of information. To further condense each tile, a compact link tile does not have a title slot and the +icon appears to the left of content, rather than above it. #### Desaturated heading -The desaturated heading variant is best used for pages with many link tiles. For example, it can help prevent a blue heading from appearing visually overwhelming on a search results page, especially if each tile includes a logo. Other than the heading color, the hover, focus, and active states look the same as a default link tile and the arrow will always be blue. - +The desaturated heading variant is best used for pages with many link tiles. For example, it can help prevent a blue heading from appearing visually overwhelming on a search results page, especially +if each tile includes a logo. Other than the heading color, the hover, focus, and active states look the same as a default link tile and the arrow will always be blue. #### Image sizes -For a link tile, there are two image sizes available. The Default size has spacing around the entire image. The Full-width image size bleeds to the top, left, and right edges. The default image size is recommended for logos, while illustrations or photos would work well as a full-width image. +For a link tile, there are two image sizes available. The Default size has spacing around the entire image. The Full-width image size bleeds to the top, left, and right edges. The default image size +is recommended for logos, while illustrations or photos would work well as a full-width image. - Examples of a logo in a tile with the default image size and a photo in a tile with the full-width image size + Examples of a logo in a tile with the default image size and a photo in a tile with the full-width image size - ### Selectable tiles @@ -45,102 +44,59 @@ For a link tile, there are two image sizes available. The Default size has spaci

A selectable tile with a radio button must be used in a group. If there is only one choice listed, use a checkbox.

 -A selectable tile is a form element and can be used as either a radio button or a checkbox. The radio button should be used if only one option can be selected. A selectable tile with checkboxes should be used when a user can select more than one option. +A selectable tile is a form element and can be used as either a radio button or a checkbox. The radio button should be used if only one option can be selected. A selectable tile with checkboxes should +be used when a user can select more than one option. ## Writing content -The four content slots within a tile are title, heading, body, and footer. +The four content slots within a tile are **title**, **heading**, **body**, and **footer**. - - - - - - - - - - - - - - - - - - - - - - - - - -
SlotContent
TitleA title provides secondary descriptive context. A selectable tile does not have title slots.
HeadingIn a link tile, the heading should indicate what clicking on the tile will do. In a selectable tile, the heading labels the radio button or checkbox.
BodyThe body text expands on heading content and gives the user more information.
FooterFooter text should be brief and be used for supplementary information only.
- +| Slot | Content | +|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------| +| Title | A title provides secondary descriptive context. A selectable tile does not have title slots. | +| Heading | In a link tile, the heading should indicate what clicking on the tile will do. In a selectable tile, the heading labels the radio button or checkbox. | +| Body | The body text expands on heading content and gives the user more information. | +| Footer | Footer text should be brief and be used for supplementary information only. | + + ### Character count The recommended character counts below include spaces. Line counts are based on a default link tile at minimum width. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementCharacter countLine count
Title text201
Heading text643
Body text1607
Footer text251
- +| Element | Character count | Line count | +|--------------|-----------------|------------| +| Title text | 20 | 1 | +| Heading text | 64 | 3 | +| Body text | 160 | 7 | +| Footer text | 25 | 1 | + + ## Layouts Like a card, the default tile should have a minimum width of four grid columns, so there is a maximum of three default link tiles in one row. - Three default link tiles in a row + Three default link tiles in a row The compact link tiles or selectable tiles can condense to a minimum width of three grid columns or a max of four compact tiles in a row. - Four compact link tiles in a row + Four compact link tiles in a row - ## Behavior ### Vertical height @@ -148,13 +104,12 @@ The compact link tiles or selectable tiles can condense to a minimum width of th The vertical height of a tile will increase as more content is added. The vertical height of multiple tiles in one row matches the height of the tallest tile. - Three link tiles with different amounts of content have the same height + Three link tiles with different amounts of content have the same height - ## Best practices ### One action per tile @@ -162,20 +117,20 @@ The vertical height of a tile will increase as more content is added. The vertic
- Link tile with one link and selectable tile with radio button + Link tile with one link and selectable tile with radio button

Each tile should go to only one destination or have one action.

 - Link tile with a CTA and a selectable tile with a 'Learn more' link + Link tile with a CTA and a selectable tile with a 'Learn more' link

Do not use a tile if you need to include more than one link or action.

 @@ -186,20 +141,20 @@ The vertical height of a tile will increase as more content is added. The vertic
- Link tile with a link to the 'Talk to a Red Hatter' form and description + Link tile with a link to the 'Talk to a Red Hatter' form and description

Link tiles should navigate users to another page or section.

 - Link tile that uses 'Submit' as the heading text + Link tile that uses 'Submit' as the heading text

A link tile should not be used as a button.

 @@ -209,10 +164,10 @@ The vertical height of a tile will increase as more content is added. The vertic - Two selectable tiles in a group + Two selectable tiles in a group

Use the same variants for a tile group.

@@ -220,10 +175,10 @@ The vertical height of a tile will increase as more content is added. The vertic - A default link tile and a compact link tile in a group + A default link tile and a compact link tile in a group

Avoid using different variants or sub-variants in one tile group.

@@ -233,10 +188,10 @@ The vertical height of a tile will increase as more content is added. The vertic - Two link tiles with headings and body copy + Two link tiles with headings and body copy

When grouped, use the same number of content slots to make them easy to scan.

@@ -244,10 +199,10 @@ The vertical height of a tile will increase as more content is added. The vertic - One link tile with a heading and body copy and one link tile with an image, title, heading, and body copy + One link tile with a heading and body copy and one link tile with an image, title, heading, and body copy

Do not use a different number of content slots in grouped tiles.

@@ -257,10 +212,10 @@ The vertical height of a tile will increase as more content is added. The vertic - Two link tiles with images that have the same height + Two link tiles with images that have the same height

If grouped tiles have images, the images should have the same height. This will keep the headings of each tile aligned, which helps users scan more easily.

@@ -268,10 +223,10 @@ The vertical height of a tile will increase as more content is added. The vertic - Two link tiles, one with a large image and one with a small image + Two link tiles, one with a large image and one with a small image

Images for tiles in a group should not be different heights.

@@ -282,21 +237,21 @@ The vertical height of a tile will increase as more content is added. The vertic
- Link tile with a tag in the footer + Link tile with a tag in the footer

The footer of a tile can include non-interactive elements, like unlinked tags or badges. Ideally, footer content should be able to fit on one line, but it can wrap to two when necessary.

 - Link tile with a link in the footer + Link tile with a link in the footer

Do not use a tile if you need to include more than one link or action.

 -
\ No newline at end of file +
diff --git a/elements/rh-tile/rh-tile.ts b/elements/rh-tile/rh-tile.ts index e6cc5017d3..945dfc1aa7 100644 --- a/elements/rh-tile/rh-tile.ts +++ b/elements/rh-tile/rh-tile.ts @@ -31,10 +31,10 @@ export class TileSelectEvent extends Event { * @fires {TileSelectEvent} select - when tile is clicked * @slot image - optional image on top of tile * @slot icon - optional icon - * @slot title - optional title - * @slot headline - optional headline / link title - * @slot - optional body content - * @slot footer - optional footer + * @slot title - A title provides secondary descriptive context. Selectable and compact tiles do not have title slots + * @slot headline - In a link tile, the heading should indicate what clicking on the tile will do. In a selectable tile, the heading labels the radio button or checkbox. + * @slot - The body text expands on heading content and gives the user more information. + * @slot footer - Footer text should be brief and be used for supplementary information only. * @cssprop [--rh-tile-text-color=var(--rh-color-text-primary-on-light, #151515)] - Color of text.
Could cause accessibility issues; prefer to use `--rh-color-text-primary-on-light` and `--rh-color-text-primary-on-dark` for theming. * @cssprop [--rh-tile-text-color-secondary=var(--rh-color-text-secondary-on-light, #4d4d4d)] - Disabled text and icons.
Could cause accessibility issues; prefer to use `--rh-color-text-secondary-on-light` and `--rh-color-text-secondary-on-dark` for theming. * @cssprop [--rh-tile-interactive-color=var(--rh-color-border-interactive-on-light, #0066cc)] - Color of interactive elements.
Could cause accessibility issues; prefer to use `--rh-color-border-interactive-on-light` and `--rh-color-border-interactive-on-dark` for theming. From 0ba8da4fb7413a94c94f620f6420d0372962d6d2 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 11 Dec 2024 08:54:56 +0200 Subject: [PATCH 06/10] style(tile): whitespace --- elements/rh-tile/rh-tile.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/elements/rh-tile/rh-tile.ts b/elements/rh-tile/rh-tile.ts index 945dfc1aa7..c643b04f68 100644 --- a/elements/rh-tile/rh-tile.ts +++ b/elements/rh-tile/rh-tile.ts @@ -244,7 +244,10 @@ export class RhTile extends LitElement { if (this.checkable) { return ''; } else if (this.disabled) { - return html``; + return html` + + + `; } else if (this.link === 'private') { return html``; } else if (this.link === 'external') { From 3eb8ca6b9bb7081cf2d756076ca5896a7cc0bf5e Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 11 Dec 2024 08:55:03 +0200 Subject: [PATCH 07/10] docs(tile): demo --- elements/rh-tile/demo/color-context.html | 99 +++++++++++++++++-- ...ct-link-with-fullwidth-image-and-icon.html | 2 +- elements/rh-tile/demo/compact.html | 12 ++- .../rh-tile/demo/desaturated-heading.html | 5 +- elements/rh-tile/demo/form-control.html | 8 +- elements/rh-tile/demo/icon.html | 9 +- elements/rh-tile/demo/logo-red-hat.svg | 1 - 7 files changed, 117 insertions(+), 19 deletions(-) delete mode 100644 elements/rh-tile/demo/logo-red-hat.svg diff --git a/elements/rh-tile/demo/color-context.html b/elements/rh-tile/demo/color-context.html index 7ff372acd6..4ee5c5e784 100644 --- a/elements/rh-tile/demo/color-context.html +++ b/elements/rh-tile/demo/color-context.html @@ -2,7 +2,19 @@

Basic

- 296 X 50 placeholder image + + A placeholder image in a tile image slot + +
Title

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -20,7 +32,19 @@

Link

Full-width images

- 300 X 200 placeholder image + + A placeholder image in a tile image slot + +
Title

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -28,7 +52,19 @@

Link

 - 300 X 170 placeholder image + + A placeholder image in a tile image slot + +

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -39,7 +75,10 @@

Link

Desaturated heading

- Red Hat + + + +
Title

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -66,19 +105,37 @@

Link

 - Red Hat + + + +

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse eu turpis elementum
 - Red Hat + + + +

Link

 - 300 X 50 placeholder image + + A placeholder image in a tile image slot + +

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -86,7 +143,19 @@

Link

 - 300 X 50 placeholder image + + A placeholder image in a tile image slot + +

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse eu turpis elementum
@@ -94,7 +163,19 @@

Link

- 300 X 50 placeholder image + + A placeholder image in a tile image slot + +
diff --git a/elements/rh-tile/demo/compact-link-with-fullwidth-image-and-icon.html b/elements/rh-tile/demo/compact-link-with-fullwidth-image-and-icon.html index 2eead25e20..29ddc97e55 100644 --- a/elements/rh-tile/demo/compact-link-with-fullwidth-image-and-icon.html +++ b/elements/rh-tile/demo/compact-link-with-fullwidth-image-and-icon.html @@ -1,7 +1,7 @@ - A placeholder image in a card header slot + A placeholder image in a tile image slot Link - Red Hat + + Red Hat + + +

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse eu turpis elementum
 - Red Hat + + Red Hat + + +

Link

 diff --git a/elements/rh-tile/demo/desaturated-heading.html b/elements/rh-tile/demo/desaturated-heading.html index d514a5561f..f488c37c08 100644 --- a/elements/rh-tile/demo/desaturated-heading.html +++ b/elements/rh-tile/demo/desaturated-heading.html @@ -1,5 +1,8 @@ - Red Hat + + + +
Title

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/elements/rh-tile/demo/form-control.html b/elements/rh-tile/demo/form-control.html index 764dfaabc7..0743e3b938 100644 --- a/elements/rh-tile/demo/form-control.html +++ b/elements/rh-tile/demo/form-control.html @@ -1,11 +1,11 @@
- Radio 1 - Radio 2 + Radio 1 + Radio 2 - Check 1 - Check 2 + Check 1 + Check 2 Submit diff --git a/elements/rh-tile/demo/icon.html b/elements/rh-tile/demo/icon.html index 45fa6337eb..e21d771fd7 100644 --- a/elements/rh-tile/demo/icon.html +++ b/elements/rh-tile/demo/icon.html @@ -1,6 +1,13 @@ - + + A placeholder image in a tile icon slot +
Title

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/elements/rh-tile/demo/logo-red-hat.svg b/elements/rh-tile/demo/logo-red-hat.svg deleted file mode 100644 index 7ccfd89b73..0000000000 --- a/elements/rh-tile/demo/logo-red-hat.svg +++ /dev/null @@ -1 +0,0 @@ - From 24722c208af806e4bbb95c6dfce20d07803fcafe Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 12 Dec 2024 11:45:23 +0200 Subject: [PATCH 08/10] docs(tile): clarify some js in demo --- elements/rh-tile/demo/form-control.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/elements/rh-tile/demo/form-control.html b/elements/rh-tile/demo/form-control.html index 0743e3b938..45b6b7e537 100644 --- a/elements/rh-tile/demo/form-control.html +++ b/elements/rh-tile/demo/form-control.html @@ -18,9 +18,11 @@ form.addEventListener('submit', function(event) { event.preventDefault(); const data = new FormData(form); - form.output.value = JSON.stringify(Array.from(data.entries()).reduce((acc, [k, v]) => ({ - ...acc, [k]: k in acc ? [acc[k], v].flat() : v, - }), {}), null, 2); + const mergedFormData = Array.from(data.entries()) + .reduce((acc, [k, v]) => ({ + ...acc, [k]: k in acc ? [acc[k], v].flat() : v, + }), {}); + form.output.value = JSON.stringify(mergedFormData, null, 2); }); From 8316b73b12d7ea5bd5b0318ba35c05c23f5e834c Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 7 Jan 2025 12:50:32 +0200 Subject: [PATCH 09/10] fix(tile): compact layouts --- elements/rh-tile/rh-tile.css | 24 +++++++++++++----------- elements/rh-tile/rh-tile.ts | 30 +++++++++++------------------- 2 files changed, 24 insertions(+), 30 deletions(-) diff --git a/elements/rh-tile/rh-tile.css b/elements/rh-tile/rh-tile.css index 55a6512872..c3f3e20ab0 100644 --- a/elements/rh-tile/rh-tile.css +++ b/elements/rh-tile/rh-tile.css @@ -1,7 +1,7 @@ :host { - font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); + font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-md, 1rem); - font-weight: var(--rh-font-weight-heading-regular, 300); + font-weight: var(--rh-font-weight-heading-regular, 400); line-height: var(--rh-line-height-body-text, 1.5); } @@ -92,16 +92,24 @@ & > *, &::slotted(*) { max-width: 100%; - margin: 0 var(--_padding); + margin-block: 0 var(--_padding); } } & #icon { + --_size: var(--rh-size-icon-05, 48px); + + &:is(.compact, .checkable) { + --_size: var(--rh-size-icon-03, 32px); + --_padding: var(--rh-space-lg, 16px); + } + & > *, &::slotted(*) { width: 100%; - margin: 0 0 var(--_padding); - max-width: var(--rh-size-icon-05, 48px); + margin: 0 var(--_padding) 0 0; + max-width: var(--_size); + max-height: var(--_size); } } @@ -184,12 +192,6 @@ width: 100%; } - & ::slotted([slot='icon']) { - margin-inline-end: var(--_margin); - max-width: var(--rh-size-icon-03, 32px); - max-height: var(--rh-size-icon-03, 32px); - } - & ::slotted([slot='headline']) { font-size: var(--rh-font-size-body-text-lg, 1.125rem) !important; } diff --git a/elements/rh-tile/rh-tile.ts b/elements/rh-tile/rh-tile.ts index c643b04f68..9ce68f69f6 100644 --- a/elements/rh-tile/rh-tile.ts +++ b/elements/rh-tile/rh-tile.ts @@ -194,6 +194,12 @@ export class RhTile extends LitElement { const { bleed, compact, checkable, checked, colorPalette, desaturated, on = 'light' } = this; const disabled = this.disabledGroup || this.disabled || this.#internals.formDisabled; const hasSlottedIcon = this.#slots.hasSlotted('icon'); + const linkIcon = + this.checkable ? '' + : this.disabled ? 'ban' + : this.link === 'private' ? 'lock' + : this.link === 'external' ? 'external-link' + : 'arrow-right'; return html`
- + ${this.icon !== undefined ? html`` : html``} @@ -232,7 +241,7 @@ export class RhTile extends LitElement {
@@ -240,23 +249,6 @@ export class RhTile extends LitElement { `; } - #renderLinkIcon() { - if (this.checkable) { - return ''; - } else if (this.disabled) { - return html` - - - `; - } else if (this.link === 'private') { - return html``; - } else if (this.link === 'external') { - return html``; - } else { - return html``; - } - } - async formDisabledCallback() { await this.updateComplete; this.requestUpdate(); From 23d2be7f730f38304adf5988984280cc67cbc5ea Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 7 Jan 2025 12:50:39 +0200 Subject: [PATCH 10/10] docs(tile): compact layouts --- elements/rh-tile/demo/compact.html | 44 +++++++++++++++++++++++++++--- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/elements/rh-tile/demo/compact.html b/elements/rh-tile/demo/compact.html index f8bc5b33e5..0abedd0a40 100644 --- a/elements/rh-tile/demo/compact.html +++ b/elements/rh-tile/demo/compact.html @@ -25,15 +25,39 @@

Link

 - 300 X 50 placeholder image - + + A placeholder image in a tile image slot + + +

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse eu turpis elementum
 - 300 X 50 placeholder image + + A placeholder image in a tile image slot + +

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse eu turpis elementum
@@ -41,7 +65,19 @@

Link

- 300 X 50 placeholder image + + A placeholder image in a tile image slot + +