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 <[email protected]> * 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 <[email protected]>
Kong · Oct 26, 2023 · 98a5488 · 98a5488
1 parent 5f39e44
commit 98a5488
Show file tree

Hide file tree

Showing 16 changed files with 912 additions and 429 deletions.
diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
@@ -485,6 +485,12 @@ const actionClickHandler = (closeDropdown: () => void): void => {
 </script>
 ```
 
+:::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.