docs(*): component api docs touchups [KHCP-9012] (#2175)

* docs(button): add events section [KHCP-9012]

* docs(kmodalfullscreen): remove component docs [KHCP-9012]

* fix(kmodalfullscreen): minor tweak [KHCP-9012]

* docs(label): default slot docs [KHCP-9012]

* test(kmodalfullscreen): fix component tests [KHCP-9012]

* docs: minor fix [KHCP-9012]

docs/.vitepress/config.ts

@@ -74,7 +74,6 @@ export default defineConfig({
             { text: 'Input Switch', link: '/components/input-switch' },
             { text: 'Label', link: '/components/label' },
             { text: 'Modal', link: '/components/modal' },
-            { text: 'Modal Fullscreen', link: '/components/modal-fullscreen' },
             { text: 'Multiselect', link: '/components/multiselect' },
             { text: 'Pagination', link: '/components/pagination' },
             { text: 'Popover', link: '/components/popover' },

docs/components/button.md

@@ -169,8 +169,42 @@ This slot is deprecated and will be removed in the `9.0.0-beta.0` release. Pleas
 </KButton>
 ```
 
+## Events
+
+KButton supports all events a native `button` and `a` elements do. Simply bind your event handler function to event with any modifiers.
+
+<form>
+  <KButton
+    type="submit"
+    @click.prevent="onButtonClick"
+    @keydown.enter.prevent="onButtonEnter"
+  >
+    Simple button
+  </KButton>
+</form>
+
+```html
+<form>
+  <KButton
+    type="submit"
+    @click.prevent="onButtonClick"
+    @keydown.enter.prevent="onButtonEnter"
+  >
+    Simple button
+  </KButton>
+</form>
+```
+
 <script setup lang="ts">
 import { WorldIcon, ChevronDownIcon } from '@kong/icons'
+
+const onButtonClick = () => {
+  alert('Button was clicked')
+}
+
+const onButtonEnter = () => {
+  alert('Enter was pressed')
+}
 </script>
 
 <style scoped lang="scss">

docs/components/label.md

@@ -61,6 +61,16 @@ Use the `for` attribute to bind a label to an input element for accessibility.
 
 ## Slots
 
+### default
+
+Label content.
+
+<KLabel>Label Text</KLabel>
+
+```html
+<KLabel>Label Text</KLabel>
+```
+
 ### tooltip
 
 Should you need to utilize HTML in the tooltip, you may use the `tooltip` slot.

docs/guide/migrating-to-version-9.md

@@ -548,6 +548,7 @@ This component has been removed. Please refer to KBadge component which has been
 
 ### KModalFullscreen
 
+This component is deprecated and will be removed in the next major release.
 
 ### KMultiselect
 

src/components/KModalFullscreen/KModalFullscreen.cy.ts

@@ -63,11 +63,9 @@ describe('KModalFullscreen', () => {
         cancelButtonText,
         bodyHeader,
         bodyHeaderDescription,
-        iconString: 'immunity',
       },
     })
 
-    cy.get('.k-modal-fullscreen-title .header-icon .kong-icon-immunity').should('be.visible')
     cy.get('.proceed-button').should('contain', actionButtonText)
     cy.get('.cancel-button').should('contain', cancelButtonText)
     cy.get('.k-modal-fullscreen-header').should('contain', title)

src/components/KModalFullscreen/KModalFullscreen.vue

@@ -47,7 +47,7 @@
           <div class="k-modal-fullscreen-title">
             <span class="header-icon">
               <slot name="header-icon">
-                <KIcon :icon="iconString" />
+                <KongIcon :color="KUI_COLOR_TEXT_DECORATIVE_AQUA" />
               </slot>
             </span>
             <span class="header-content">
@@ -104,8 +104,9 @@
 import type { PropType } from 'vue'
 import { watch, ref, computed, onMounted, onUnmounted, onBeforeUnmount, nextTick } from 'vue'
 import KButton from '@/components/KButton/KButton.vue'
-import KIcon from '@/components/KIcon/KIcon.vue'
 import type { ButtonAppearance } from '@/types'
+import { KongIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_DECORATIVE_AQUA } from '@kong/design-tokens'
 
 const props = defineProps({
   /**
@@ -165,7 +166,8 @@ const props = defineProps({
     default: 'secondary',
   },
   /**
-  *  Pass the type of icon for the header on the left
+  * @deprecated
+  * Pass the type of icon for the header on the left
   */
   iconString: {
     type: String,
@@ -217,7 +219,7 @@ const proceed = () => {
 onMounted(() => {
   document.addEventListener('keydown', handleKeydown)
 
-  console.warn("The Kongponents 'KFullScreenModal' component is deprecated and will be removed in the 9.0.0-beta.0 release.\nWe suggest using 'KModal' component instead.\nDocs: https://alpha--kongponents.netlify.app/components/modal.html#fullscreen")
+  console.warn("The Kongponents 'KFullScreenModal' component is deprecated and will be removed in the next major release.\nWe suggest using 'KModal' component instead.\nDocs: https://alpha--kongponents.netlify.app/components/modal.html#fullscreen")
 })
 
 onBeforeUnmount(() => {