WIP: using subgrid for support sections w/o icon but bleed

agama-project · Oct 31, 2023 · 329ff49 · 329ff49
1 parent 62801ff
commit 329ff49
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 20 deletions.
diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss
@@ -3,23 +3,32 @@
 // section layouts.
 section:not([class^="pf-c"]) {
   display: grid;
-  grid-template-columns: min-content 1fr;
-  grid-template-areas:
-    "icon title"
-    ".... content";
+  grid-template-rows:
+    [header] auto
+    [body] auto
+  ;
+  grid-template-columns: [bleed] min-content [content] 1fr;
   gap: var(--spacer-small);
 }
 
 section:not(:last-child, [class^="pf-c"]) {
   margin-block-end: var(--spacer-large);
 }
 
-section > svg {
-  grid-area: icon;
-}
-
 section > h2 {
-  grid-area: title;
+  display: grid;
+  grid-area: header;
+  grid-template-columns: subgrid;
+  grid-column: bleed / content-end;
+
+  span[data-part="icon"] {
+    min-width: 32px;
+    grid-column: bleed / content;
+  }
+
+  span[data-part="title"] {
+    grid-column: content;
+  }
 
   button {
     border: none;
@@ -42,7 +51,9 @@ section > h2 {
 }
 
 section > .content {
-  grid-area: content;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: content;
 }
 
 // Custom selection list

diff --git a/web/src/components/core/Section.jsx b/web/src/components/core/Section.jsx
@@ -35,10 +35,13 @@ import { ValidationErrors } from "~/components/core";
  *
  * @return {React.ReactElement}
  */
-const SectionIcon = ({ name, size = 32 }) => {
-  if (!name) return null;
+const SectionIcon = ({ keepBleed = false, name, size = 32 }) => {
+  if (!name && !keepBleed) return null;
 
-  return <Icon name={name} size={size} aria-hidden />;
+  const Wrapper = ({ children }) => <span data-part="icon">{children}</span>;
+  const TheIcon = () => name && <Icon name={name} size={size} aria-hidden />;
+
+  return <Wrapper><TheIcon /></Wrapper>;
 };
 
 /**
@@ -52,7 +55,7 @@ const SectionIcon = ({ name, size = 32 }) => {
  *
  * @return {JSX.Element}
  */
-const SectionTitle = ({ id, text, path, openDialog }) => {
+const SectionTitle = ({ id, keepBleed, iconName, iconSize, text, path, openDialog }) => {
   let title = <>{text}</>;
 
   if (path && path !== "") {
@@ -64,7 +67,8 @@ const SectionTitle = ({ id, text, path, openDialog }) => {
 
   return (
     <h2 id={id}>
-      {title}
+      <SectionIcon keepBleed={keepBleed} name={iconName} size={iconSize} />
+      <span data-part="title">{title}</span>
     </h2>
   );
 };
@@ -142,6 +146,7 @@ export default function Section({
   loading,
   errors,
   children,
+  keepBleed = false,
   "aria-label": ariaLabel
 }) {
   const headerId = `${name || crypto.randomUUID()}-section-header`;
@@ -153,11 +158,10 @@ export default function Section({
   const SectionHeader = () => {
     if (!title) return;
 
+    const iconName = loading ? "loading" : icon;
+
     return (
-      <>
-        <SectionIcon name={loading ? "loading" : icon} />
-        <SectionTitle id={headerId} text={title} path={path} openDialog={openDialog} />
-      </>
+      <SectionTitle id={headerId} keepBleed={keepBleed} iconName={iconName} text={title} path={path} openDialog={openDialog} />
     );
   };
 

diff --git a/web/src/components/overview/SoftwareSection.jsx b/web/src/components/overview/SoftwareSection.jsx
@@ -142,8 +142,8 @@ export default function SoftwareSection({ showErrors }) {
     <Section
       key="software-section"
       // TRANSLATORS: page section
+      keepBleed
       title={_("Software")}
-      icon="apps"
       loading={state.busy}
       errors={errors}
       path="/software"