From 835a008b7aad9fa89a4ff55c62f51550328e6683 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?= =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?= Date: Tue, 21 May 2024 08:12:10 +0300 Subject: [PATCH] fix(card): hide header container when it's empty (#1558) * fix(card): hide header container when it's empty Fixes #1383 * style: review --- .changeset/plenty-rabbits-scream.md | 4 ++++ elements/rh-card/rh-card.css | 10 ++++++---- 2 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 .changeset/plenty-rabbits-scream.md diff --git a/.changeset/plenty-rabbits-scream.md b/.changeset/plenty-rabbits-scream.md new file mode 100644 index 0000000000..c75425db2a --- /dev/null +++ b/.changeset/plenty-rabbits-scream.md @@ -0,0 +1,4 @@ +--- +"@rhds/elements": patch +--- +``: hide header, body, or footer regions when they have no content diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index b0edf1f367..4d4d5f291c 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -5,10 +5,6 @@ article { flex-direction: column; } -.empty { - display: none; -} - ::slotted(*) { line-height: inherit !important; } @@ -53,6 +49,12 @@ article { margin-inline: var(--rh-space-xl, 24px); } +#header.empty, +#footer.empty, +#body.empty { + display: none; +} + #header ::slotted(:is(h1, h2, h3, h4, h5, h6)), #body ::slotted(:is(h1, h2, h3, h4, h5, h6)) { font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "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);