feat(klabel): component reskinning [KHCP-8987] (#1764)

* chore(sandbox): set up component sandbox [KHCP-8987] * fix(klabel): remove unneeded props [KHCP-8987] * feat(klabel): reskin component [KHCP-8987] * test(klabel): fix component tests [KHCP-8987] * fix(*): fix components affected by klabel [KHCP-8987] * fix(*): misc fixes [KHCP-8987] * docs(label): update component docs [KHCP-8987] * fix(klabel): address PR feedback [KHCP-8987] * fix: minor fix [KHCP-8987] * chore(sandbox): minor fix [KHCP-8987] * fix(ktooltip): make tooltip trigger focusable [KHCP-8987] * fix(klabel): address PR feedback [KHCP-8987] * fix(deps): bump @kong/design-tokens [KHCP-8987]
Kong · Oct 17, 2023 · 5eef97d · 5eef97d
1 parent d28deb8
commit 5eef97d
Show file tree

Hide file tree

Showing 23 changed files with 221 additions and 173 deletions.
diff --git a/docs/components/input.md b/docs/components/input.md
@@ -48,15 +48,15 @@ Use the `labelAttributes` prop to configure the KLabel's [props](/components/lab
 
 You can add `tooltipAttributes` to configure the KTooltip's [props](/components/tooltip)
 
-<KInput label="Name" :label-attributes="{ help: 'I use the KLabel `help` prop', 'data-testid': 'test', tooltipAttributes: {
+<KInput label="Name" :label-attributes="{ info: 'I use the KLabel `info` prop', 'data-testid': 'test', tooltipAttributes: {
 maxWidth: '150px'
 } } "/>
 
 ```html
 <KInput
   label="Name"
   :label-attributes="{
-    help: 'I use the KLabel `help` prop',
+    info: 'I use the KLabel `info` prop',
     'data-testid': 'test'
     tooltipAttributes: {
         maxWidth: '150px'
@@ -147,7 +147,7 @@ You can pass any input attribute and it will get properly bound to the element.
 
 ### required
 
-KInput will display an asterisk next to the label to indicate a field is required if you set the `required` attribute and provide a `label` value. See KLabel's [`required`](/components/label#required) prop for more information.
+KInput will display a red dot next to the label to indicate a field is required if you set the `required` attribute and provide a `label` value. See KLabel's [`required`](/components/label#required) prop for more information.
 
 :::tip NOTE
 Text passed in for the `label` will automatically strip any trailing `*` when used with the `required` attribute to prevent duplicate visual indicators for required fields.

diff --git a/docs/components/label.md b/docs/components/label.md
@@ -1,46 +1,28 @@
 # Label
 
-**KLabel** provides a wrapper around general `label` tags.
+KLabel provides a wrapper around the native HTML `label` element.
 
-<KLabel>Input Title</KLabel>
+<KLabel>Input title</KLabel>
 
 ```html
-<KLabel>Input Title</KLabel>
+<KLabel>Input title</KLabel>
 ```
 
 ## Props
 
-### help
-
-Use the `help` prop to display helper tooltip text.
-
-<KLabel help="This is an example">Input Title</KLabel>
-
-```html
-<KLabel help="This is an example">Input Title</KLabel>
-```
-
-<KLabel help="This is a really long tooltip. Hopefully we won't have anything this long but we might. I wonder how it handles long inputs">Long Input Title</KLabel>
-
-```html
-<KLabel help="This is a really long tooltip. Hopefully we won't have anything this long but we might. I wonder how it handles long inputs">
-  Long Input Title
-</KLabel>
-```
-
 ### info
 
 Use the `info` prop to display information help text.
 
-<KLabel info="This is an example">Input Title</KLabel>
+<KLabel info="This is an example">Input title</KLabel>
 
 ```html
-<KLabel info="This is an example">Input Title</KLabel>
+<KLabel info="This is an example">Input title</KLabel>
 ```
 
 ### required
 
-Use the `required` prop to indicate requiredness of a field by displaying an `*` after the label.
+Use this prop on labels for required fields. Adds a red dot in front of a label.
 
 <KLabel required>Name</KLabel>
 
@@ -50,14 +32,14 @@ Use the `required` prop to indicate requiredness of a field by displaying an `*`
 
 ### tooltipAttributes
 
-Use the `tooltipAttributes` prop to configure the **KTooltip's** [props](/components/tooltip) if using the `help` or `info` props.
+Use the `tooltipAttributes` prop to configure the KTooltip's [props](/components/tooltip) if using the `info` prop.
 
-<KLabel :tooltip-attributes="{ placement: 'right', 'max-width': '200' }" help="This is a really long tooltip. Hopefully we won't have anything this long but we might. I wonder how it handles long inputs">With Tooltip Attributes</KLabel>
+<KLabel :tooltip-attributes="{ placement: 'right', 'max-width': '200' }" info="This is a really long tooltip. Hopefully we won't have anything this long but we might. I wonder how it handles long inputs">With Tooltip Attributes</KLabel>
 
 ```html
 <KLabel
   :tooltip-attributes="{ placement: 'right', 'max-width': '200' }"
-  help="This is a really long tooltip. Hopefully we won't have anything this long but we might. I wonder how it handles long inputs"
+  info="This is a really long tooltip. Hopefully we won't have anything this long but we might. I wonder how it handles long inputs"
 >
   With Tooltip Attributes
 </KLabel>
@@ -69,30 +51,28 @@ Use the `tooltipAttributes` prop to configure the **KTooltip's** [props](/compon
 
 Use the `for` attribute to bind a label to an input element for accessibility.
 
-<KLabel for="service">Service Name</KLabel>
+<KLabel for="service" info="A service is an API that you want to offer">Service name</KLabel>
 <KInput id="service"/>
 
 ```html
-<KLabel for="service" help="A service is an API that you want to offer">Service Name</KLabel>
+<KLabel for="service" info="A service is an API that you want to offer">Service name</KLabel>
 <KInput id="service"/>
 ```
 
 ## Slots
 
-- `tooltip` - Rather than using the `help` or `info` props, if you need to utilize HTML in the tooltip, you may use the `tooltip` slot.
+### tooltip
 
-:::tip Note:
-When utilizing the `label-tooltip` slot, the `info` `KIcon` will be shown by default. To utilize the the `help` icon instead, set the `label-attributes` `help` property to any non-empty string value.
-:::
+Should you need to utilize HTML in the tooltip, you may use the `tooltip` slot.
 
-<KLabel help="true">
+<KLabel>
   My Tooltip
   <template #tooltip>Brings all the <code>devs</code> to the yard</template>
 </KLabel>
 <KInput />
 
 ```html
-<KLabel help="true">
+<KLabel>
   My Tooltip
   <template #tooltip>Brings all the <code>devs</code> to the yard</template>
 </KLabel>

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -153,6 +153,16 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 ### KLabel
 
+#### Structure
+
+* `k-input-label` class has been renamed to `k-label`
+
+#### Constants, Types & Interfaces
+
+#### Props
+
+* `help` prop has been removed
+* `testMode` prop has been removed
 
 ### KMenu
 

diff --git a/package.json b/package.json
@@ -78,7 +78,7 @@
     "@cypress/vite-dev-server": "^5.0.6",
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.5.1",
-    "@kong/design-tokens": "^1.11.3",
+    "@kong/design-tokens": "^1.11.4",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/inquirer": "^9.0.3",

diff --git a/sandbox/components/SandboxNavComponent.vue b/sandbox/components/SandboxNavComponent.vue
@@ -32,9 +32,10 @@ const links = computed((): SandboxNavItem[] => (
     { name: 'KButton', to: { name: 'button' } },
     { name: 'KCatalog', to: { name: 'catalog' } },
     { name: 'KInput', to: { name: 'input' } },
-    { name: 'KTabs', to: { name: 'tabs' } },
-    { name: 'KTable', to: { name: 'table' } },
+    { name: 'KLabel', to: { name: 'label' } },
     { name: 'KMultiselect', to: { name: 'multiselect' } },
+    { name: 'KTable', to: { name: 'table' } },
+    { name: 'KTabs', to: { name: 'tabs' } },
   ]
 ))
 </script>

diff --git a/sandbox/components/SandboxSectionComponent.vue b/sandbox/components/SandboxSectionComponent.vue
@@ -55,10 +55,21 @@ const hasDescription = computed((): boolean => !!(props.description || slots.des
     .section-title {
       color: $kui-color-text;
       margin: $kui-space-0;
+      margin-left: $kui-space-50;
+      position: relative;
 
       & + .section-description {
         margin-top: $kui-space-50;
       }
+
+      &::before {
+        bottom: 2px;
+        color: $kui-color-text-neutral;
+        content: '#';
+        font-size: $kui-font-size-20;
+        left: -12px;
+        position: absolute;
+      }
     }
 
     .section-description {

diff --git a/sandbox/components/SandboxTitleComponent.vue b/sandbox/components/SandboxTitleComponent.vue
@@ -3,6 +3,7 @@
     <component
       :is="isSubtitle ? 'h3' : 'h2'"
       class="title"
+      :class="{ 'subtitle': isSubtitle }"
     >
       {{ title }}
     </component>
@@ -52,6 +53,20 @@ const hasDescription = computed((): boolean => !!(props.description || slots.des
     & + .description {
       margin-top: $kui-space-50;
     }
+
+    &.subtitle {
+      margin-left: $kui-space-50;
+      position: relative;
+
+      &::before {
+        bottom: 2px;
+        color: $kui-color-text-primary;
+        content: '#';
+        font-size: $kui-font-size-30;
+        left: -12px;
+        position: absolute;
+      }
+    }
   }
 
   .description {

diff --git a/sandbox/pages/SandboxInput.vue b/sandbox/pages/SandboxInput.vue
@@ -159,7 +159,11 @@
       </KInput>
     </SandboxSectionComponent>
     <SandboxSectionComponent title="label-tooltip">
-      <KInput label="Label" />
+      <KInput label="Label">
+        <template #label-tooltip>
+          Brings all the <code>devs</code> to the yard
+        </template>
+      </KInput>
     </SandboxSectionComponent>
     <SandboxTitleComponent
       is-subtitle

diff --git a/sandbox/pages/SandboxLabel.vue b/sandbox/pages/SandboxLabel.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="klabel-sandbox">
+    <SandboxTitleComponent
+      title="KLabel"
+    >
+      <template #description>
+        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=418%3A15878&mode=dev">
+          Figma
+        </KExternalLink>
+      </template>
+    </SandboxTitleComponent>
+
+    <KLabel>
+      This is a label
+    </KLabel>
+
+    <!-- Props -->
+    <SandboxTitleComponent
+      is-subtitle
+      title="Props"
+    />
+    <SandboxSectionComponent title="info">
+      <KLabel
+        info="This is an info text"
+      >
+        Label
+      </KLabel>
+    </SandboxSectionComponent>
+    <SandboxSectionComponent title="required">
+      <KLabel required>
+        Required label
+      </KLabel>
+    </SandboxSectionComponent>
+    <SandboxSectionComponent title="required with info">
+      <KLabel
+        info="This is an info text"
+        required
+      >
+        Required label
+      </KLabel>
+    </SandboxSectionComponent>
+
+    <!-- Props -->
+    <SandboxTitleComponent
+      is-subtitle
+      title="Usage"
+    />
+    <SandboxSectionComponent title="KInput">
+      <KInput
+        label="Label"
+        :label-attributes="{
+          info: 'KLabel info prop.',
+        }"
+        required
+      />
+    </SandboxSectionComponent>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import { KExternalLink, KLabel, KInput } from '@/components'
+</script>
diff --git a/sandbox/router.ts b/sandbox/router.ts
@@ -28,30 +28,36 @@ export default createRouter({
           meta: { title: 'Catalog Sandbox' },
           component: () => import('./pages/SandboxCatalog.vue'),
         },
-        {
-          path: 'tabs',
-          name: 'tabs',
-          meta: { title: 'Tabs Sandbox' },
-          component: () => import('./pages/SandboxTabs.vue'),
-        },
         {
           path: 'input',
           name: 'input',
           meta: { title: 'Input Sandbox' },
           component: () => import('./pages/SandboxInput.vue'),
         },
         {
-          path: 'table',
-          name: 'table',
-          meta: { title: 'Table Sandbox' },
-          component: () => import('./pages/SandboxTable.vue'),
+          path: 'label',
+          name: 'label',
+          meta: { title: 'Label Sandbox' },
+          component: () => import('./pages/SandboxLabel.vue'),
         },
         {
           path: 'multiselect',
           name: 'multiselect',
           meta: { title: 'Multiselect Sandbox' },
           component: () => import('./pages/SandboxMultiselect.vue'),
         },
+        {
+          path: 'table',
+          name: 'table',
+          meta: { title: 'Table Sandbox' },
+          component: () => import('./pages/SandboxTable.vue'),
+        },
+        {
+          path: 'tabs',
+          name: 'tabs',
+          meta: { title: 'Tabs Sandbox' },
+          component: () => import('./pages/SandboxTabs.vue'),
+        },
       ],
     },
   ],