fix(*): doc fixes (#593)

- `KAlert` - add `Events` section to docs, descope child styles - `KButton` - add margin between button examples, fix `Theming` example - `KCard` - descope child styles - `KIcon` - bind attrs to parent `span` - `KInputSwitch` - don't emit duplicate events, added `Events` section to docs - `KLabel` - doc should have `Props` section and camelcase props - `KModal` - fix `Theming` example - `KToaster` - fix spelling errors/spacing between toaster buttons
Kong · Apr 19, 2022 · 23b38fc · 23b38fc
1 parent da56d12
commit 23b38fc
Show file tree

Hide file tree

Showing 10 changed files with 217 additions and 160 deletions.
diff --git a/docs/components/alert.md b/docs/components/alert.md
@@ -263,6 +263,11 @@ Fixes KAlert to the top of the container.
 </KAlert>
 ```
 
+## Events
+
+- `@closed` - emitted when the dismiss button is clicked
+- `@proceed` - emitted when a default action button is clicked
+
 ## Variations
 
 ### Long Content / Prose

diff --git a/docs/components/button.md b/docs/components/button.md
@@ -30,12 +30,12 @@ The Button component can take 1 of 6 appearance values:
 <KButton class="mr-2 mb-2" appearance='btn-link'>btn-link</KButton>
 
 ```vue
-<KButton class="mr-2 mb-2" appearance='primary'>Primary</KButton>
-<KButton class="mr-2 mb-2" appearance="secondary">Secondary</KButton>
-<KButton class="mr-2 mb-2" appearance='outline'>Outline</KButton>
-<KButton class="mr-2 mb-2" appearance='danger'>Danger</KButton>
-<KButton class="mr-2 mb-2" appearance="creation">Creation</KButton>
-<KButton class="mr-2 mb-2" appearance='btn-link'>btn-link</KButton>
+<KButton appearance='primary'>Primary</KButton>
+<KButton appearance="secondary">Secondary</KButton>
+<KButton appearance='outline'>Outline</KButton>
+<KButton appearance='danger'>Danger</KButton>
+<KButton appearance="creation">Creation</KButton>
+<KButton appearance='btn-link'>btn-link</KButton>
 ```
 
 ### size
@@ -46,9 +46,9 @@ We support `small`, `medium`, and `large` sizes, default to `medium`.
 - `medium`
 - `large`
 
-<KButton appearance="secondary" size="small">Small</KButton>
+<KButton class="mr-2" appearance="secondary" size="small">Small</KButton>
 
-<KButton appearance="secondary" size="medium">Medium</KButton>
+<KButton class="mr-2" appearance="secondary" size="medium">Medium</KButton>
 
 <KButton appearance="secondary" size="large">Large</KButton>
 
@@ -80,7 +80,7 @@ KButton can display a dropdown caret to the right hand side. This is useful for
 
 The buttons are rounded by default. This can be disabled by setting `isRounded` prop to `false`.
 
-<KButton appearance="primary" :isRounded="false">I'm a button</KButton>
+<KButton class="mr-2" appearance="primary" :isRounded="false">I'm a button</KButton>
 <KButton appearance="primary" >I'm a button</KButton>
 
 ```vue
@@ -95,7 +95,7 @@ A string for the `KIcon` name to be displayed to the left of the button's conten
 If the disable state of the button can be changed, it is recommended to use the `icon` property instead of the slot, as using the prop will apply correct
 coloring to the icon depending on the `disabled` state of the button.
 
-<KButton appearance="primary" icon="spinner">I'm a button</KButton>
+<KButton class="mr-2" appearance="primary" icon="spinner">I'm a button</KButton>
 <KButton appearance="primary" icon="spinner" disabled>I'm a button</KButton>
 
 ```vue
@@ -133,7 +133,7 @@ KButton also supports the disabled attribute with both Button and Anchor types.
 
 KButton supports using an icon either before the text or without text. If you are using the slot you must maintain the icon color yourself when the button is enabled or disabled.
 
-<KButton appearance="secondary">
+<KButton class="mr-2" appearance="secondary">
   <template v-slot:icon>
     <KIcon icon="externalLink" color="var(--KButtonSecondaryColor, #003694)"/>
   </template>
@@ -187,13 +187,10 @@ KButton supports using an icon either before the text or without text. If you ar
 | `--KButtonPaddingX`| Button horizontal (left and right) padding
 | `--KButtonRadius` | Button corner radius
 
-\
 An Example of changing the primary KButton variant to purple instead of blue might
 look like.
 
-<template>
-  <KButton class="purple-button" appearance="primary">PURPLE!</KButton>
-</template>
+<KButton class="purple-button" appearance="primary">PURPLE!</KButton>
 
 ```vue
 <template>

diff --git a/docs/components/input-switch.md b/docs/components/input-switch.md
@@ -139,6 +139,47 @@ export default defineComponent({
 </script>
 ```
 
+## Events
+
+To listen for changes to the `KInputSwitch` value, you can bind to the `@input`, `@change`, or `@update:modelValue` events:
+
+<KComponent :data="{eventsSwitchEnabled: false}" v-slot="{ data }">
+  <div>
+    <KInputSwitch
+      v-model="data.eventsSwitchEnabled"
+      :label="data.eventsSwitchEnabled ? 'Enabled' : 'Disabled'"
+    />
+  </div>
+</KComponent>
+
+```vue
+<template>
+  <KInputSwitch
+    :model-value="false"
+    :label="eventsSwitchEnabled ? 'Enabled' : 'Disabled'"
+    @update:modelValue="newValue => eventsSwitchEnabled = newValue"
+  />
+</template>
+```
+
+`KInputSwitch` transparently binds to events:
+
+<KComponent :data="{eventsSwitchEnabled2: true, changeCount: 0}" v-slot="{ data }">
+  <div>
+    <KInputSwitch v-model="data.eventsSwitchEnabled2" @change="e => (data.changeCount++)" label="Toggle Me" />
+    <div class="mt-2">You've toggled me {{ data.changeCount }} time(s)</div>
+  </div>
+</KComponent>
+
+```vue
+<template>
+  <div>
+    <KInputSwitch v-model="eventsSwitchEnabled2" @change="e => (changeCount++)" label="Toggle Me" />
+    <div>You've toggled me {{ changeCount }} time(s)</div>
+  </div>
+</template>
+```
+
 ## Theming
 
 | Variable                   | Purpose                           |

diff --git a/docs/components/label.md b/docs/components/label.md
@@ -2,28 +2,24 @@
 
 **KLabel** provides a wrapper around general `label` tags.
 
-## Standard Input
-
-<br />
-
 <KLabel>Input Title</KLabel>
 
 ```vue
 <KLabel>Input Title</KLabel>
 ```
 
-## With Help
+## Props
+
+### help
 
-<br />
+Use the `help` prop to display helper tooltip text.
 
 <KLabel help="This is an example">Input Title</KLabel>
 
 ```vue
 <KLabel help="This is an example">Input Title</KLabel>
 ```
 
-<br />
-
 <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>
 
 ```vue
@@ -32,19 +28,21 @@
 </KLabel>
 ```
 
-## With Info
+### info
 
-<br />
+Use the `info` prop to display information help text.
 
 <KLabel info="This is an example">Input Title</KLabel>
 
 ```vue
 <KLabel info="This is an example">Input Title</KLabel>
 ```
 
-## With for attribute
+## Attribute Binding
+
+### for
 
-<br />
+Use the `for` attribute to bind a label to an input element for accessibility.
 
 <KLabel for="service">Service Name</KLabel>
 <KInput id="service"/>
@@ -53,15 +51,3 @@
 <KLabel for="service" help="A service is an API that you want to offer">Service Name</KLabel>
 <KInput id="service"/>
 ```
-
-## Sample input with a tooltip
-
-<br />
-
-<KLabel help="A service is an API that you want to offer">Service Name</KLabel>
-<KInput />
-
-```vue
-<KLabel help="A service is an API that you want to offer">Service Name</KLabel>
-<KInput />
-```
diff --git a/docs/components/modal.md b/docs/components/modal.md
@@ -140,16 +140,15 @@ Notice that even though we are using the `header-content` slot we still specify
 An Example of changing the the colors of KModal might look like.
 > Note: We are scoping the overrides to a wrapper in this example
 
-<template>
-  <div class="modal-wrapper">
-    <KModal
-      :isVisible="themeIsOpen"
-      title="Look Mah!"
-      content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan tincidunt velit ac vulputate. Aliquam turpis odio, elementum a hendrerit id, pellentesque quis ligula."
-      @canceled="themeIsOpen = false" />
-    <KButton @click="themeIsOpen = true">Open Modal</KButton>
-  </div>
-</template>
+<KButton @click="themeIsOpen = true">Open Modal</KButton>
+
+<div class="modal-wrapper">
+  <KModal
+    :isVisible="themeIsOpen"
+    title="Look Mah!"
+    content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan tincidunt velit ac vulputate. Aliquam turpis odio, elementum a hendrerit id, pellentesque quis ligula."
+    @canceled="themeIsOpen = false" />
+</div>
 
 ```vue
 <template>

diff --git a/docs/components/toaster.md b/docs/components/toaster.md
@@ -78,10 +78,10 @@ The default argument passed to the toaster is the message.
 
 The Toaster uses the same appearance values as [KAlert](/components/alert) and are applied the same way.
 
-<KButton appearance="primary" @click="openNotification({'appearance': 'info', 'message':'This toaster is a info appeareance'})">Open Toaster</KButton>
-<KButton class="success" appearance="primary" @click="openNotification({'appearance': 'success', 'message':'This toaster is a success appeareance'})">Open Toaster</KButton>
-<KButton appearance="danger" @click="openNotification({'appearance': 'danger', 'message':'This toaster is a danger appeareance'})">Open Toaster</KButton>
-<KButton class="warning" appearance="primary" @click="openNotification({'appearance': 'warning', 'message':'This toaster is a warning appeareance'})">Open Toaster</KButton>
+<KButton class="mr-2" appearance="primary" @click="openNotification({'appearance': 'info', 'message':'This toaster has info appearance'})">Open Toaster</KButton>
+<KButton class="success mr-2" appearance="primary" @click="openNotification({'appearance': 'success', 'message':'This toaster has success appearance'})">Open Toaster</KButton>
+<KButton class="mr-2" appearance="danger" @click="openNotification({'appearance': 'danger', 'message':'This toaster has danger appearance'})">Open Toaster</KButton>
+<KButton class="warning mr-2" appearance="primary" @click="openNotification({'appearance': 'warning', 'message':'This toaster has warning appearance'})">Open Toaster</KButton>
 
 ```vue
 <template>
@@ -148,8 +148,8 @@ export default defineComponent({
 
 You can view the current state of active toasters by calling `this.$toaster.toasters`. Click the buttons below to watch the state change
 
-<KButton class="success" appearance="primary" @click="openNotification({timeoutMilliseconds: 10000, message: 'Success Notification', appearance: 'success'})">Open Toaster</KButton>
-<KButton appearance="danger" @click="openNotification({'appearance': 'danger', 'message': 'Danger Notification'})">Open Toaster</KButton>
+<KButton class="success mr-2" appearance="primary" @click="openNotification({timeoutMilliseconds: 10000, message: 'Success Notification', appearance: 'success'})">Open Toaster</KButton>
+<KButton appearance="danger" @click="openNotification({'appearance': 'danger', 'message': 'Danger Notification'})" class="mr-2">Open Toaster</KButton>
 <KButton @click="openNotification('Basic Notification')">Open Toaster</KButton>
 
 <pre class="language-json">
@@ -189,7 +189,7 @@ export default defineComponent({
 ### Long Content
 
 <br>
-<KButton @click="openNotification(`Before you release that email you're writing to spin up a new centralized decision-making group, it's worth talking about the four ways these groups consistently fail. They tend to be domineering, bottlenecked, status-oriented, or inert.`)">Prose</KButton>
+<KButton @click="openNotification(`Before you release that email you're writing to spin up a new centralized decision-making group, it's worth talking about the four ways these groups consistently fail. They tend to be domineering, bottlenecked, status-oriented, or inert.`)" class="mr-2">Prose</KButton>
 
 <KButton @click="openNotification({message:`Proxy error: Could not proxy request /api/service_packages?fields=&s=%7B%22%24and%22%3A%5B%7B%22name%22%3A%7B%22%24contL%22%3A%22%22%7D%7D%5D%7D&filter=&or=&sort=created_at%2CDESC&join=&limit=100&offset=0&page=1 from localhost:8080 to http://localhost:3000 (ECONNREFUSED).`, appearance: 'danger'})">Raw error message</KButton>