From da654299181388e249ec9b8480be061978986e45 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Thu, 5 Dec 2024 16:28:58 +0100
Subject: [PATCH] Prepend KCard class names with 'k'

to prevent from aggressive overrides
from global Vuetify styles in Studio,
for example when KCard's '.title' styles
were changed unexpectedly by the
Vuetify '.title' styles.
---
 lib/cards/KCard.vue     | 150 ++++++++++++++++++++--------------------
 lib/cards/KCardGrid.vue |   8 +--
 2 files changed, 79 insertions(+), 79 deletions(-)

diff --git a/lib/cards/KCard.vue b/lib/cards/KCard.vue
index a3f9581d4..913144b51 100644
--- a/lib/cards/KCard.vue
+++ b/lib/cards/KCard.vue
@@ -5,7 +5,7 @@
     to allow for @click.stop on buttons and similar
     rendered within a card via its slots -->
   <li
-    :class="['k-card', $slots.select ? 'with-selection-controls' : undefined]"
+    :class="['k-card', $slots.select ? 'k-with-selection-controls' : undefined]"
     :style="[gridItemStyle, focusStyle]"
     @focus="onFocus"
     @mouseenter="onHover"
@@ -14,11 +14,11 @@
     @keyup.enter="onEnter"
   >
     <div
-      :class="['card-area', ...cardAreaClasses ]"
+      :class="['k-card-area', ...cardAreaClasses ]"
       :style="{ backgroundColor: $themeTokens.surface }"
     >
-      <div class="upper-card-area">
-        <div class="around-title">
+      <div class="k-upper-card-area">
+        <div class="k-around-title">
           <!--
         Utilizing `visuallyhidden`, `aria-labelledby`,
         and `aria-hidden` to ensure:
@@ -27,12 +27,12 @@
         - Prevents undesired screen reader announcements
           when title is customized via the `title` slot
       -->
-          <span :id="`card-title-${_uid}`" class="visuallyhidden">
+          <span :id="`k-card-title-${_uid}`" class="visuallyhidden">
             {{ title }}
           </span>
           <component
             :is="headingElement"
-            class="heading"
+            class="k-heading"
             :style="{ color: $themeTokens.text }"
           >
             <!--
@@ -52,8 +52,8 @@
               event=""
               :to="to"
               draggable="false"
-              class="title"
-              :aria-labelledby="`card-title-${_uid}`"
+              class="k-title"
+              :aria-labelledby="`k-card-title-${_uid}`"
               @focus.native="onTitleFocus"
               @blur.native="onTitleBlur"
             >
@@ -82,8 +82,8 @@
               v-else
               tabindex="0"
               data-focus="true"
-              class="title"
-              :aria-labelledby="`card-title-${_uid}`"
+              class="k-title"
+              :aria-labelledby="`k-card-title-${_uid}`"
               @focus="onTitleFocus"
               @blur="onTitleBlur"
             >
@@ -106,7 +106,7 @@
           <div
             v-if="hasAboveTitleArea"
             data-test="aboveTitle"
-            class="above-title"
+            class="k-above-title"
           >
             <!-- @slot Places content to the area above the title. -->
             <slot name="aboveTitle"></slot>
@@ -115,7 +115,7 @@
           <div
             v-if="hasBelowTitleArea"
             data-test="belowTitle"
-            class="below-title"
+            class="k-below-title"
             :style="{ color: $themeTokens.annotation }"
           >
             <!-- @slot Places content to the area below the title. -->
@@ -125,7 +125,7 @@
 
         <div
           v-if="thumbnailDisplay !== ThumbnailDisplays.NONE"
-          class="thumbnail"
+          class="k-thumbnail"
         >
           <!-- 
             Render KImg even if thumbnailSrc is not provided since in that case
@@ -142,7 +142,7 @@
           />
           <span
             v-if="!thumbnailSrc || thumbnailError"
-            class="thumbnail-placeholder"
+            class="k-thumbnail-placeholder"
           >
             <!-- @slot Places content to the thumbnail placeholder area. -->
             <slot name="thumbnailPlaceholder"></slot>
@@ -153,7 +153,7 @@
       <div
         v-if="hasFooterArea"
         data-test="footer"
-        class="footer"
+        class="k-footer"
       >
         <!-- @slot Places content to the footer area. -->
         <slot name="footer"></slot>
@@ -166,7 +166,7 @@
     -->
     <div
       v-if="$slots.select"
-      class="selection-control"
+      class="k-selection-control"
       @keyup.enter.stop
       @click.stop
     >
@@ -395,7 +395,7 @@
           this.thumbnailDisplay === ThumbnailDisplays.LARGE
         ) {
           return {
-            cardAreaClasses: ['vertical-with-large-thumbnail'],
+            cardAreaClasses: ['k-vertical-with-large-thumbnail'],
             thumbnailAspectRatio: undefined,
             thumbnailStyles: {
               ...thumbnailCommonStyles,
@@ -409,7 +409,7 @@
           this.thumbnailDisplay === ThumbnailDisplays.SMALL
         ) {
           return {
-            cardAreaClasses: ['vertical-with-small-thumbnail'],
+            cardAreaClasses: ['k-vertical-with-small-thumbnail'],
             thumbnailAspectRatio: undefined,
             thumbnailStyles: {
               ...thumbnailCommonStyles,
@@ -423,7 +423,7 @@
           this.thumbnailDisplay === ThumbnailDisplays.NONE
         ) {
           return {
-            cardAreaClasses: ['vertical-with-none-thumbnail'],
+            cardAreaClasses: ['k-vertical-with-none-thumbnail'],
             thumbnailAspectRatio: undefined,
             thumbnailStyles: undefined,
           };
@@ -435,8 +435,8 @@
         ) {
           return {
             cardAreaClasses: [
-              'horizontal-with-large-thumbnail',
-              `thumbnail-align-${this.thumbnailAlign}`,
+              'k-horizontal-with-large-thumbnail',
+              `k-thumbnail-align-${this.thumbnailAlign}`,
             ],
             thumbnailAspectRatio: undefined,
             thumbnailStyles: {
@@ -452,8 +452,8 @@
         ) {
           return {
             cardAreaClasses: [
-              'horizontal-with-small-thumbnail',
-              `thumbnail-align-${this.thumbnailAlign}`,
+              'k-horizontal-with-small-thumbnail',
+              `k-thumbnail-align-${this.thumbnailAlign}`,
             ],
             thumbnailAspectRatio: '1:1',
             thumbnailStyles: {
@@ -468,7 +468,7 @@
           this.thumbnailDisplay === ThumbnailDisplays.NONE
         ) {
           return {
-            cardAreaClasses: ['horizontal-with-none-thumbnail'],
+            cardAreaClasses: ['k-horizontal-with-none-thumbnail'],
             thumbnailAspectRatio: undefined,
             thumbnailStyles: undefined,
           };
@@ -560,18 +560,18 @@
     list-style-type: none;
     cursor: pointer;
 
-    &.with-selection-controls {
+    &.k-with-selection-controls {
       display: flex;
       flex-direction: row-reverse;
       align-items: center;
 
-      .selection-control {
+      .k-selection-control {
         margin-right: 20px;
       }
     }
   }
 
-  .card-area {
+  .k-card-area {
     @extend %dropshadow-2dp;
 
     display: flex;
@@ -589,13 +589,13 @@
     }
   }
 
-  .heading {
+  .k-heading {
     font-size: 16px;
     font-weight: 600;
     line-height: 1.5;
   }
 
-  .title {
+  .k-title {
     display: inline-block; // allows title placeholder in the skeleton card
     width: 100%; // allows title placeholder in the skeleton card
     color: inherit;
@@ -607,19 +607,19 @@
   // are grouped together in all layoyts, abstract them
   // into one whole here. Simplifies common spacing
   // styles as well as layout-specific styles.
-  .around-title {
+  .k-around-title {
     display: flex;
     flex-direction: column;
 
-    .heading {
+    .k-heading {
       order: 2;
     }
 
-    .above-title {
+    .k-above-title {
       order: 1;
     }
 
-    .below-title {
+    .k-below-title {
       order: 3;
     }
   }
@@ -627,42 +627,42 @@
   /************* Spacing *************/
 
   // first reset
-  .around-title,
-  .heading,
-  .above-title,
-  .below-title,
-  .footer {
+  .k-around-title,
+  .k-heading,
+  .k-above-title,
+  .k-below-title,
+  .k-footer {
     padding: 0;
     margin: 0;
   }
 
   /* stylelint-disable no-duplicate-selectors */
-  .around-title {
+  .k-around-title {
     padding: $spacer;
   }
   /* stylelint-enable no-duplicate-selectors */
 
-  .footer {
+  .k-footer {
     padding: 0 $spacer $spacer $spacer;
   }
 
-  .above-title {
+  .k-above-title {
     padding-bottom: calc(#{$spacer} / 2);
   }
 
-  .below-title {
+  .k-below-title {
     padding-top: calc(#{$spacer} / 2);
   }
 
   /************* Thumbnail **************/
 
   /* stylelint-disable no-duplicate-selectors */
-  .thumbnail {
+  .k-thumbnail {
     position: relative; /* for absolute positioning of .thumbnail-placeholder  */
   }
   /* stylelint-enable no-duplicate-selectors */
 
-  .thumbnail-placeholder {
+  .k-thumbnail-placeholder {
     position: absolute;
     top: 0;
     right: 0;
@@ -677,86 +677,86 @@
 
   /************* Layout-specific styles *************/
 
-  .vertical-with-large-thumbnail {
-    .upper-card-area {
+  .k-vertical-with-large-thumbnail {
+    .k-upper-card-area {
       display: flex;
       flex-direction: column;
     }
 
-    .thumbnail {
+    .k-thumbnail {
       order: 1;
       height: 180px;
     }
 
-    .around-title {
+    .k-around-title {
       order: 2;
     }
   }
 
-  .vertical-with-small-thumbnail {
+  .k-vertical-with-small-thumbnail {
     /* stylelint-disable scss/at-extend-no-missing-placeholder */
-    @extend .vertical-with-large-thumbnail;
+    @extend .k-vertical-with-large-thumbnail;
     /* stylelint-enable scss/at-extend-no-missing-placeholder */
 
-    .thumbnail {
+    .k-thumbnail {
       height: calc(180px - #{$spacer});
       margin: $spacer $spacer 0;
     }
   }
 
-  .horizontal-with-small-thumbnail {
-    .upper-card-area {
+  .k-horizontal-with-small-thumbnail {
+    .k-upper-card-area {
       display: flex;
       flex-direction: row;
       align-items: flex-start;
     }
 
-    .thumbnail {
+    .k-thumbnail {
       width: 30%;
       margin-top: $spacer;
       margin-bottom: $spacer;
     }
 
-    .around-title {
+    .k-around-title {
       width: 70%;
     }
 
-    &.thumbnail-align-left {
-      .thumbnail {
+    &.k-thumbnail-align-left {
+      .k-thumbnail {
         order: 1;
         margin-left: $spacer;
       }
 
-      .around-title {
+      .k-around-title {
         order: 2;
       }
     }
 
-    &.thumbnail-align-right {
-      .thumbnail {
+    &.k-thumbnail-align-right {
+      .k-thumbnail {
         order: 2;
         margin-right: $spacer;
       }
 
-      .around-title {
+      .k-around-title {
         order: 1;
       }
     }
   }
 
-  .horizontal-with-large-thumbnail {
+  .k-horizontal-with-large-thumbnail {
     // override few styles from .horizontal-with-small-thumbnail
     // to stretch the thumbnail to the full height of the card
 
     /* stylelint-disable scss/at-extend-no-missing-placeholder */
-    @extend .horizontal-with-small-thumbnail;
+    @extend .k-horizontal-with-small-thumbnail;
     /* stylelint-enable scss/at-extend-no-missing-placeholder */
 
-    &.card-area {
+    &.k-card-area {
       position: relative; /* for absolute positioning of .thumbnail  */
     }
 
-    .thumbnail {
+    .k-thumbnail {
       position: absolute;
       width: 40%;
       height: 100%;
@@ -764,31 +764,31 @@
       margin-bottom: 0;
     }
 
-    .around-title,
-    .footer {
+    .k-around-title,
+    .k-footer {
       width: 60%;
     }
 
-    &.thumbnail-align-left {
-      .thumbnail {
+    &.k-thumbnail-align-left {
+      .k-thumbnail {
         left: 0;
         margin-left: 0;
       }
 
-      .around-title,
-      .footer {
+      .k-around-title,
+      .k-footer {
         margin-left: auto;
       }
     }
 
-    &.thumbnail-align-right {
-      .thumbnail {
+    &.k-thumbnail-align-right {
+      .k-thumbnail {
         right: 0;
         margin-right: 0;
       }
 
-      .around-title,
-      .footer {
+      .k-around-title,
+      .k-footer {
         margin-right: auto;
       }
     }
diff --git a/lib/cards/KCardGrid.vue b/lib/cards/KCardGrid.vue
index d7ef459bc..c03029517 100644
--- a/lib/cards/KCardGrid.vue
+++ b/lib/cards/KCardGrid.vue
@@ -2,7 +2,7 @@
 
   <div
     v-if="showGrid"
-    class="card-grid"
+    class="k-card-grid"
   >
     <transition name="fade" mode="out-in" appear>
       <ul
@@ -31,7 +31,7 @@
 
     <div
       v-if="debug"
-      class="debug"
+      class="k-debug"
     >
       <div>DEBUG</div>
       <div>breakpoint: {{ windowBreakpoint }}</div>
@@ -194,7 +194,7 @@
     opacity: 0;
   }
 
-  .card-grid {
+  .k-card-grid {
     position: relative; // for '.debug' absolute positioning
   }
 
@@ -208,7 +208,7 @@
     list-style: none;
   }
 
-  .debug {
+  .k-debug {
     position: absolute;
     top: 0;
     left: 0;