From 98a54889fdf67a497d7a3263ee32c122e1788d76 Mon Sep 17 00:00:00 2001 From: Maksym Portianoi Date: Thu, 26 Oct 2023 12:18:54 -0400 Subject: [PATCH] feat(kradio): component reskinning [KHCP-8996] (#1781) * chore(sandbox): setup component sandbox [KHCP-8996] * feat(kradio): reskin component - wip [KHCP-8996] * fix(kradio, kinput): new token states [KHCP-8996] * fix(kradio): fix states styling [KHCP-8996] * feat(kradio): reskin component [KHCP-8996] * test(kradio): fix component tests [KHCP-8996] * docs(radio): update component docs [KHCP-8996] * docs(*): minor tweaks [KHCP-8996] * docs: minor fix [KHCP-8996] * fix(kradio): minor tweaks [KHCP-8996] * docs: minor tweak [KHCP-8996] * fix(*): address PR feedback [KHCP-8996] * fix(kradio): rename input class [KHCP-8996] * fix(*): address PR feedback [KHCP-8996] * fix(kradio): classes cleanup [KHCP-8996] * fix(kradio): organize styles into mixins [KHCP-8996] * fix(kradio): minor fixes [KHCP-8996] * fix(kradio): minor fix [KHCP-8996] * fix(kradio): misc fixes [KHCP-8996] * fix(kradio): add card styling note [KHCP-8996] * fix(kradio): rename boolean props [KHCP-8996] * fix(kradio): address PR feedback [KHCP-8996] * fix(kradio): address PR feedback Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * fix(kradio): address PR feedback [KHCP-8996] * test(kradio): fix test [KHCP-8996] * fix(kradio): address PR feedback [KHCP-8996] --------- Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> --- docs/components/dropdown.md | 6 + docs/components/radio.md | 383 +++++++++-------- docs/guide/migrating-to-version-9.md | 19 + sandbox/components/SandboxNavComponent.vue | 1 + sandbox/pages/SandboxRadio.vue | 253 ++++++++++++ sandbox/router.ts | 6 + src/components/KInput/KInput.vue | 12 +- src/components/KLabel/KLabel.vue | 7 +- src/components/KRadio/KRadio.cy.ts | 34 +- src/components/KRadio/KRadio.vue | 409 ++++++++++++------- src/styles/_mixins.scss | 53 +-- src/styles/mixins/_input-radio-checkbox.scss | 78 ++++ src/styles/mixins/_input-text.scss | 54 +++ src/styles/mixins/_inputs.scss | 14 + src/styles/mixins/_labels.scss | 9 + src/types/radio.ts | 3 +- 16 files changed, 912 insertions(+), 429 deletions(-) create mode 100644 sandbox/pages/SandboxRadio.vue create mode 100644 src/styles/mixins/_input-radio-checkbox.scss create mode 100644 src/styles/mixins/_input-text.scss create mode 100644 src/styles/mixins/_inputs.scss create mode 100644 src/styles/mixins/_labels.scss diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md index dcb3f5e9f0..bfdfd54707 100644 --- a/docs/components/dropdown.md +++ b/docs/components/dropdown.md @@ -485,6 +485,12 @@ const actionClickHandler = (closeDropdown: () => void): void => { ``` +:::tip TIP +If you want to make an icon slotted into KDropdownItem clickable (like the one next to button with action in the example above), you can assign `role="button"` and appropriate `tabindex` attributes to that element and bind an event handler (note that you will have to use `.stop` [event modifier](https://vuejs.org/guide/essentials/event-handling.html#event-modifiers)). + +If implemented as described here, KDropdownItem will take care of styling the different states (hover, active, disabled). Also note that you will have to trigger closing the dropdown via the `closeDropdown()` slot prop. +::: + ### Attribute Binding You can pass any attribute to the KDropdownItem and it will get properly bound to the element. diff --git a/docs/components/radio.md b/docs/components/radio.md index b6648149b8..50250822a4 100644 --- a/docs/components/radio.md +++ b/docs/components/radio.md @@ -1,161 +1,98 @@ # Radio -**KRadio** - KRadio is a wrapper around a Kong styled radio input. - - - - - -```html +KRadio is a wrapper for native input type `radio` elements. + +
+ Selected: {{ radioValue }} +
+ Boolean + String + Object A + Object B +
+
+ +```vue - ``` ## Props -### v-model - required +### v-model -Use `v-model` to bind the `checked` state of the underlying ``. The `v-model` binds to the `modelValue` prop of the component and sets the current checked state of the input. You can read more about passing values via `v-model` [here](https://vuejs.org/guide/components/events.html#usage-with-v-model). +Use `v-model` to bind the `checked` state of the underlying `` element. The `v-model` binds to the `modelValue` prop of the component and sets the current checked state of the input. You can read more about passing values via `v-model` [here](https://vuejs.org/guide/components/events.html#usage-with-v-model). -### selectedValue - required +### selectedValue -The value of the `KRadio` option that will be emitted by the `change` and `update:modelValue` events. +The value of the KRadio option that will be emitted by the `change` and `update:modelValue` events. ### label Will place label text to the right of the radio. Can also be [slotted](#slots). - + ```html - + ``` -### description +### labelAttributes -Will place description text under the radio label. Can also be [slotted](#slots). + KRadio has an instance of KLabel for supporting tooltip text. Use the `labelAttributes` prop to configure the KLabel's [props](/components/label). This example shows using the `labelAttributes` to set up a tooltip. Tooltip content can also be [slotted](#slots). - + ```html ``` -### type - -Controls appearance of radio input element. Accepted values: - -- `radio` (default) -- `card` - -::: warning NOTE -The `label` and `description` props, as well as the `description` slot, are ignored when `type` prop is `card`. - -You can only define content of a card via the `default` slot. -::: +### description -::: tip TIP -You can choose to utilize the `.k-radio-label` and `.k-radio-description` classes within the `default` slot as shown in the example below to leverage preconfigured styles. -::: +Will place description text under the radio label. Can also be [slotted](#slots). - - - + ```html - - - + ``` -### labelAttributes +### error - `KRadio` has an instance of `KLabel` for supporting tooltip text. Use the `labelAttributes` prop to configure the **KLabel's** [props](/components/label). This example shows using the `label-attributes` to set up a tooltip, see the [slot](#slots) section if you want to slot HTML into the tooltip rather than use plain text. +Use this prop to apply error styling to the component. - + ```html ``` @@ -164,11 +101,7 @@ export default defineComponent({ Any valid attribute will be added to the input. You can read more about `$attrs` [here](https://vuejs.org/api/composition-api-setup.html#setup-context). - - - +Disabled radio ```html ``` -## Slots +### card -- `default` - Anything passed in to the default slot will replace the `label` prop text. +:::danger NOTE +KRadio card styling is to be revisited in the next `9.0.0-alpha.x` release as design is being finalized. +::: - - - + + + + +
Selected: {{ cardRadio || 'none' }}
+ + +```vue + + + +``` + +## Slots + +### default + +Content passed in to the `default` slot will be shown as the label content. The slot content takes precedence over the `label` prop. + + + Label goes here. The radio is {{ defaultSlotModelValue ? 'selected' : 'not selected' }} + ```html ``` +:::warning NOTE +To preserve a valid HTML structure, avoid slotting in block-level elements such as a `div` into the `default` slot as it will be rendered inside a `label` element. This also applies to card-style radio. +::: -- `description` - Anything passed in to this slot will replace the `description` prop text. +:::tip TIP +When `card` prop is true, the content passed to the `default` slot will render directly above the label. Should you want to customize the layout inside the card you can omit using the `label` and `description` props and style content passed through the `default` slot yourself. +::: - -