[WIP] abstract below and above title, and title

areas into one whole to allow easier styling.
MisRob · Nov 19, 2024 · ae53834 · ae53834
1 parent 6ecb5f9
commit ae53834
Showing 1 changed file with 92 additions and 84 deletions.
diff --git a/lib/cards/KCard.vue b/lib/cards/KCard.vue
@@ -17,13 +17,14 @@
       :class="['card-area', ...cardAreaClasses ]"
       :style="{ backgroundColor: $themeTokens.surface }"
     >
-      <component
-        :is="headingElement"
-        v-if="title || $slots.title"
-        class="heading"
-        :style="{ color: $themeTokens.text }"
-      >
-        <!--
+      <div class="around-title">
+        <component
+          :is="headingElement"
+          v-if="title || $slots.title"
+          class="heading"
+          :style="{ color: $themeTokens.text }"
+        >
+          <!--
           `event=""` prevents router-link click event
           (technique used by Vue community because
           the usual ways don't work for router-link).
@@ -35,48 +36,15 @@
                   the title text (see the feature for allowing
                   selecting card's content in `onClick`)
         -->
-        <router-link
-          v-if="to"
-          event=""
-          :to="to"
-          draggable="false"
-          class="title"
-          @focus.native="onTitleFocus"
-          @blur.native="onTitleBlur"
-        >
-          <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
-          <slot 
-            v-if="$slots.title"
-            name="title"
-          ></slot>
-          <KTextTruncator
-            v-else
-            :text="title"
-            :maxLines="titleMaxLines"
-          />
-        </router-link>
-        <!--
-          Set tabindex to 0 to make title focusable so we
-          can use the same focus ring logic like when title
-          is a router-link. Relatedly set data-focus so that
-          the trackInputModality can set modality to keyboard
-          to make the focus ring display correctly.
-
-          `aria-label` is needed in this mode otherwise some
-          screenreaders don't announce the text in KTextTruncator,
-          for mysterious reasons (likely some internal screenreader logic)
-          -->
-        <span
-          v-else
-          tabindex="0"
-          data-focus="true"
-          class="title"
-          :aria-label="title"
-          @focus="onTitleFocus"
-          @blur="onTitleBlur"
-        >
-          <!-- since we're using `aria-label`, hide all unnecessary elements -->
-          <span aria-hidden="true">
+          <router-link
+            v-if="to"
+            event=""
+            :to="to"
+            draggable="false"
+            class="title"
+            @focus.native="onTitleFocus"
+            @blur.native="onTitleBlur"
+          >
             <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
             <slot 
               v-if="$slots.title"
@@ -87,9 +55,60 @@
               :text="title"
               :maxLines="titleMaxLines"
             />
+          </router-link>
+          <!--
+          Set tabindex to 0 to make title focusable so we
+          can use the same focus ring logic like when title
+          is a router-link. Relatedly set data-focus so that
+          the trackInputModality can set modality to keyboard
+          to make the focus ring display correctly.
+
+          `aria-label` is needed in this mode otherwise some
+          screenreaders don't announce the text in KTextTruncator,
+          for mysterious reasons (likely some internal screenreader logic)
+          -->
+          <span
+            v-else
+            tabindex="0"
+            data-focus="true"
+            class="title"
+            :aria-label="title"
+            @focus="onTitleFocus"
+            @blur="onTitleBlur"
+          >
+            <!-- since we're using `aria-label`, hide all unnecessary elements -->
+            <span aria-hidden="true">
+              <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
+              <slot 
+                v-if="$slots.title"
+                name="title"
+              ></slot>
+              <KTextTruncator
+                v-else
+                :text="title"
+                :maxLines="titleMaxLines"
+              />
+            </span>
           </span>
-        </span>
-      </component>
+        </component>
+        <div
+          v-if="hasAboveTitleArea"
+          data-test="aboveTitle"
+          class="above-title"
+        >
+          <!-- @slot Places content to the area above the title. -->
+          <slot name="aboveTitle"></slot>
+        </div>
+        <div
+          v-if="hasBelowTitleArea"
+          data-test="belowTitle"
+          class="below-title"
+          :style="{ color: $themeTokens.annotation }"
+        >
+          <!-- @slot Places content to the area below the title. -->
+          <slot name="belowTitle"></slot>
+        </div>
+      </div>
 
       <div
         v-if="thumbnailDisplay !== ThumbnailDisplays.NONE"
@@ -116,23 +135,7 @@
           <slot name="thumbnailPlaceholder"></slot>
         </span>
       </div>
-      <div
-        v-if="hasAboveTitleArea"
-        data-test="aboveTitle"
-        class="above-title"
-      >
-        <!-- @slot Places content to the area above the title. -->
-        <slot name="aboveTitle"></slot>
-      </div>
-      <div
-        v-if="hasBelowTitleArea"
-        data-test="belowTitle"
-        class="below-title"
-        :style="{ color: $themeTokens.annotation }"
-      >
-        <!-- @slot Places content to the area below the title. -->
-        <slot name="belowTitle"></slot>
-      </div>
+
       <div
         v-if="hasFooterArea"
         data-test="footer"
@@ -584,8 +587,25 @@
     }
   }
 
+  .around-title {
+    display: flex;
+    flex-direction: column;
+    order: 2;
+
+    .heading {
+      order: 2;
+    }
+
+    .above-title {
+      order: 1;
+    }
+
+    .below-title {
+      order: 3;
+    }
+  }
+
   .heading {
-    order: 3;
     font-size: 16px;
     font-weight: 600;
     line-height: 1.5;
@@ -596,16 +616,8 @@
     order: 1;
   }
 
-  .above-title {
-    order: 2;
-  }
-
-  .below-title {
-    order: 4;
-  }
-
   .footer {
-    order: 5;
+    order: 3;
   }
 
   .thumbnail-placeholder {
@@ -702,9 +714,7 @@
       height: 100%;
     }
 
-    .heading,
-    .above-title,
-    .below-title,
+    .around-title,
     .footer {
       width: calc(100% - #{$thumbnail-width} - 2 * #{$spacer});
     }
@@ -768,9 +778,7 @@
       top: $spacer;
     }
 
-    .heading,
-    .above-title,
-    .below-title {
+    .around-title {
       width: calc(100% - #{$thumbnail-width} - 3 * #{$spacer});
     }