From 07eafc8c7804c7dcc9189a85d05bcdabd8d995af Mon Sep 17 00:00:00 2001 From: Maksym Portianoi Date: Fri, 8 Dec 2023 09:14:32 -0500 Subject: [PATCH] feat(kbadge, kinputswitch, kmethodbadge): components reskin (#1893) * feat(kinputswitch): reskin component [KHCP-8986] (#1871) * feat(kinputswitch): reskin component [KHCP-8986] * fix(kinputswitch): minor fix [KHCP-8986] * feat(kinputswitch): reskin component [KHCP-8986] * fix(kinputswitch): misc fixes [KHCP-8986] * test(kinputswitch): fix component tests [KHCP-8986] * fix(kinputswitch): misc fixes [KHCP-8986] * docs(kinputswitch): update component docs [KHCP-8986] * fix(kinputswitch): add back disabled tooltip text prop [KHCP-8986] * docs(kinputswitch): minor fix [KHCP-8986] * docs(kinputswitch): minor fix [KHCP-8986] * fix(kinputswitch): prevent scroll on space [KHCP-8986] * fix(kinputswitch): address PR feedback Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * fix(kinputswitch): address PR feedback [KHCP-8986] * fix(kinputswitch): add missing token [KHCP-8986] --------- Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * feat(kbadge): component reskin [KHCP-8968] (#1800) * feat(kbadge): reskin component - wip [KHCP-8968] * feat(kbadge): reskin component - wip [KHCP-8968] * fix(kbadge): styling fix [KHCP-8968] * chore(sandbox): comment out tooltips [KHCP-8968] * fix(kbadge): method styling [KHCP-8968] * fix(kbadge): icon slot [KHCP-8968] * fix(kbadge): tooltip props [KHCP-8968] * fix(kmethodbadge): remove type [KHCP-8968] * test(kbadge): fix component tests [KHCP-8968] * test(kbadge): test icon slot [KHCP-8968] * test(kmultiselect): fix component tests [KHCP-8968] * fix(kmultiselect): minor fix [KHCP-8968] * fix(*): misc kbadge fixes [KHCP-8968] * docs(badge): update component docs [KHCP-8968] * fix(kmultiselect): undo changes [KHCP-8968] * fix(kmultiselect): fix component [KHCP-8968] * fix(kbadge): fix neutral appearance [KHCP-8968] * fix(kbadge): misc fixes [KHCP-8968] * fix(kbadge): method badge min width [KHCP-8968] * fix(kbadge): minor fix [KHCP-8968] * fix(kmultiselect): component tests [KHCP-8968] * fix(kmultiselect): fix kbadge props [KHCP-8968] * fix(*): rebase [KHCP-8968] * fix: address PR feedback Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * fix(kbadge): address PR feedback [KHCP-8968] * fix(kbadge): address PR feedback Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * fix(kbadge): add decorative appearance [KHCP-8968] * docs(badge): minor tweak [KHCP-8968] * fix(kbadge): remove custom colors props [KHCP-8968] * test(kbadge): fix component tests [KHCP-8968] * fix: address PR feedback Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * fix(kbadge): address PR feedback [KHCP-8968] * fix(kbadge): remove legacy prop support [KHCP-8968] * fix(kbadge): component mixins [KHCP-8968] * docs(*): small tweaks [KHCP-8968] * fix(kbadge): small tweak [KHCP-8968] --------- Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * fix(kinputswitch): minor fix * fix(kmethodbadge): remove component [KHCP-8989] (#1899) * fix(kmethodbadge): remove component [KHCP-8989] * fix: remove kmethodbadge component exports [KHCP-8989] * docs: fix typo * docs: small tweaks * docs: minor fix * fix(ktruncate): minor fix --------- Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> --- docs/.vitepress/config.ts | 1 - docs/components/badge.md | 436 +++++++------ docs/components/dropdown.md | 4 +- docs/components/input-switch.md | 225 ++----- docs/components/input.md | 2 +- docs/components/method-badge.md | 103 --- docs/components/truncate.md | 90 ++- docs/guide/migrating-to-version-9.md | 47 +- sandbox/index.ts | 2 + sandbox/pages/SandboxBadge.vue | 434 +++++++++++++ sandbox/pages/SandboxInputSwitch.vue | 110 ++++ sandbox/router/sandbox-routes.ts | 12 + src/components/KBadge/KBadge.cy.ts | 85 +-- src/components/KBadge/KBadge.vue | 598 +++++------------- src/components/KButton/KButton.vue | 4 +- .../KInputSwitch/KInputSwitch.cy.ts | 12 +- src/components/KInputSwitch/KInputSwitch.vue | 350 ++++++---- .../KMethodBadge/KMethodBadge.cy.ts | 48 -- src/components/KMethodBadge/KMethodBadge.vue | 166 ----- .../KMultiselect/KMultiselect.cy.ts | 12 +- src/components/KMultiselect/KMultiselect.vue | 41 +- src/components/KTruncate/KTruncate.vue | 1 + src/components/index.ts | 1 - src/global-components.ts | 1 - src/styles/_mixins.scss | 15 +- src/styles/mixins/_badges.scss | 18 + src/types/badge.ts | 31 +- src/types/index.ts | 2 - src/types/input-switch.ts | 4 - src/types/method-badge.ts | 10 - 30 files changed, 1455 insertions(+), 1410 deletions(-) delete mode 100644 docs/components/method-badge.md create mode 100644 sandbox/pages/SandboxBadge.vue create mode 100644 sandbox/pages/SandboxInputSwitch.vue delete mode 100644 src/components/KMethodBadge/KMethodBadge.cy.ts delete mode 100644 src/components/KMethodBadge/KMethodBadge.vue create mode 100644 src/styles/mixins/_badges.scss delete mode 100644 src/types/input-switch.ts delete mode 100644 src/types/method-badge.ts diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 1b321e7064..94a82a1cbd 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -55,7 +55,6 @@ export default defineConfig({ { text: 'Input Switch', link: '/components/input-switch' }, { text: 'Label', link: '/components/label' }, { text: 'Menu', link: '/components/menu' }, - { text: 'Method Badge', link: '/components/method-badge' }, { text: 'Modal', link: '/components/modal' }, { text: 'Modal Fullscreen', link: '/components/modal-fullscreen' }, { text: 'Multiselect', link: '/components/multiselect' }, diff --git a/docs/components/badge.md b/docs/components/badge.md index a2716c51b0..f7e6659182 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -1,276 +1,326 @@ # Badge -**KBadge** - Badges, pills, or whatever you wanna call them. Slap it on something. +KBadge is a visual text label that presents small amount of information. -SUCCESS +Success ```html -SUCCESS +Success ``` ## Props ### appearance -The Badge component can take the following appearance values: - -- `success` -- `warning` -- `danger` -- `info` -- `default` -- `neutral` -- `custom` - -
- SUCCESS - WARNING - DANGER - INFO - NEUTRAL - DEFAULT -
- -```html -SUCCESS -WARNING -DANGER -INFO -NEUTRAL -DEFAULT -``` - -### isBordered - -Use the `isBordered` prop for bordered badges. The border color matches the text color by default. - -
- SUCCESS - WARNING - DANGER - INFO - NEUTRAL - DEFAULT +KBadge component takes one of the following appearance values: + +| Standard | Methods | +| ------------ | --------- | +| `info` | `connect` | +| `success` | `custom` | +| `warning` | `delete` | +| `danger` | `get` | +| `decorative` | `head` | +| `neutral` | `options` | +| | `patch` | +| | `post` | +| | `put` | +| | `trace` | + +:::tip TIP +Passing one of the methods appearances will apply `text-transform: uppercase` and set the `min-width` on the badge container. You may pass `custom` to apply method badge styling should you need a badge for your custom method. +::: + +
+
+ + Info + + + Success + + + Warning + + + Danger + + + Decorative + + + Neutral + +
+
+ + Connect + + + Custom + + + Delete + + + Get + + + Head + + + Options + + + Patch + + + Post + + + Put + + + Trace + +
```html -SUCCESS -WARNING -DANGER -INFO -NEUTRAL -DEFAULT +Info +Success +Warning +Danger +Decorative +Neutral +Connect +Custom +Delete +Get +Head +Options +Patch +Post +Put +Trace ``` -### shape +### tooltip -The Badge has two shapes that can be changed with a `shape` property. +Provide a `string` of tooltip text that will be shown on badge hover. -- `rounded` - Default -- `rectangular` - -
- Round - Rectangular -
+ + Published + ```html -Round -Rectangular + + Published + ``` -### color - -Use this prop to modify the badge text color - -### backgroundColor +### truncationTooltip -Use this prop to modify the background color of the badge +A `boolean` to conditionally display the [`tooltip`](#tooltip) only when the badge text is truncated. Defaults to `false`. See [`maxWidth` prop](#maxwidth) to learn more about badge truncation.
- Custom - Badge - Hello - Something - Long Badge 236bfb09-fe79-4cc9-99be-9361d6b1db64 aa07575b-bcd3-4bb2-bfd7-998224e3d31e 364b78fc-dba3-4b94-9134-388515496de5 + + Id: 8ba8840f-ded7-457a-adb9-0ef15b6fb919 + + + Last updated: null +
```html -Custom -Badge -Hello -Something -Long Badge 236bfb09-fe79-4cc9-99be-9361d6b1db64 aa07575b-bcd3-4bb2-bfd7-998224e3d31e 364b78fc-dba3-4b94-9134-388515496de5 -``` -### borderColor - -Use this prop in conjunction with the `is-bordered` prop to customize the color of the badge border. - - - Organization Admin + + Id: 8ba8840f-ded7-457a-adb9-0ef15b6fb919 - -```html - - Organization Admin + + Last updated: null ``` -### hoverColor +### maxWidth -Use this prop in conjunction with the `dismissable` prop to customize the color of the badge/dismiss button when hovered. +A `string`, in pixels, to limit the badge width and truncate the text. Works just like `max-width` property in CSS. Default value is `200px`. Text content that is wider than the provided value will be truncated. - - Production + + Very long text that should be truncated but isn't thanks to max-width="auto" ```html - - Production + + Very long text that should be truncated but isn't thanks to max-width="auto" ``` -The `hoverColor` is also utilized if you wrap the `KBadge` with an anchor tag, or add a `@click` listener directly to the component. +### iconBefore - - Anchor Tag - +The [`icon` slot](#icon) content is displayed before the badge text by default. Pass `false` to the `iconBefore` prop to render the icon after the badge text. -{{ myClicks }} clicks
-Click me! +
+ + Badge with icon + + + + + 4 + +
```html -Anchor Tag - -{{ myClicks }} clicks
- - Click me! + + Badge with icon + + + + + 4 ``` -### dismissable +## Slots + +### default -Use this prop if you want the badge to be dismissable. If the badge text is long enough to need truncation, the label will truncate; the dismiss button is always visible. -The color of the dismiss button is determined by the badge type and uses the same theming variables as the badge text. Clicking the dismiss button will trigger a `dismissed` event. +The badge content. -
- Close me - No, close me! -
+Success ```html -Close me -No, close me! +Success ``` -### truncationTooltip +### icon -Use this prop if you would like to conditionally display a tooltip when the badge text is truncated. +Used to pass an icon or (other element) into the badge. Positioning (whether this slot content is rendered before or after the badge content) is configured with the [`iconBefore` prop](#iconbefore).
- Truncation unnecessary - Hey! Let me see that awesome truncation + + + 4 + + + Badge with icon + +
```html -Truncation unnecessary -Hey! Let me see that awesome truncation -``` - -### forceTooltip - -If you want to show the tooltip regardless of whether the badge text is truncated, use this prop. - -Truncation unnecessary - -```html -Truncation unnecessary + + + 4 + + + Badge with icon + + ``` -### maxWidth - -Max width to apply truncation at. Works just like `width` property in CSS. Default value is `200px`. Is superseded by `--KBadgeMaxWidth` [CSS variable](#theming) if both present. - -Truncate early +:::tip TIP +To make an icon clickable, you **must** assign an attribute of `role="button"` and `tabindex="0"` attributes to the clickable element and bind an event handler. KBadge will take care of the state styling (hover, focus, and disabled). + +
+ + + Dismiss me + + + Reset + +
-```html -Truncate early -``` +```vue + -## Slots + +::: -```html -SUCCESS -``` +KBadge takes care of icon color, size and spacing as long as you use icons sourced from [@kong/icons](https://github.com/Kong/icons) package. -## Events +:::tip TIP +Should you decide to use your own custom icons, you can use design tokens exported by the [@kong/design-tokens](https://github.com/Kong/design-tokens) package to set icon size. The recommended icon size is `16px` or `kui-icon-size-30`. -| Event | Action | -| :---------- | :---------------------------------------------------------- | -| `dismissed` | When `dismissable` is true and you click the dismiss button | +We also recommend setting the icon style `color` property to a value of `currentColor` to utilize default KBadge styling for slotted content. +::: diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md index 34f8bacace..c1ab7def1d 100644 --- a/docs/components/dropdown.md +++ b/docs/components/dropdown.md @@ -486,9 +486,9 @@ 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 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 `tabindex="0"` 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. +If implemented as described here, KDropdownItem will take care of styling the different states (hover, focus, disabled). Also note that you will have to trigger closing the dropdown via the `closeDropdown()` slot prop. ::: ### Attribute Binding diff --git a/docs/components/input-switch.md b/docs/components/input-switch.md index 71ca0b14c5..a68cec5fc6 100644 --- a/docs/components/input-switch.md +++ b/docs/components/input-switch.md @@ -1,224 +1,133 @@ # Input Switch -**KInputSwitch** is used a like checkbox and is meant to toggle settings on and off. +KInputSwitch, similar to a checkbox, is used to toggle a value on and off. - + ```html - - - + ``` ## Props -### v-model - required +### v-model -Use `v-model` to bind to the `checked` state of the underlying ``. The `v-model` binds to the `value` prop of the component and sets current checked state of toggle switch. You can read more about passing values via `v-model` [here](https://vuejs.org/guide/components/events.html#usage-with-v-model). +Value to bind to the KInputSwitch. + + ```html - + ``` ### label -Will place label text to the right of the switch. Can also be [slotted](#slots). +A `string` of text to display as a label after the input switch. The label can also be [slotted](#slots). + + ```html - + ``` - +### labelBefore -### labelPosition +A `boolean` to place the label before the input switch. Defaults to `false`. -Position the label to the left or right of the switch, default to `right`. - - -
-
- + ```html - - + ``` -### disabled +### size + +KInputSwitch comes in two sizes: `small` (default) and `large`. -You can add `disabled` to the input to disallow interactivity. +
+ + +
```html - + + ``` - - ### disabledTooltipText -You can specify tooltip text to be displayed when the switch is disabled. +Use this prop to display tooltip text when KInputSwitch is disabled. + + ```html - + ``` - +### HTML Attributes -### enabledIcon - -Display a check icon when switch is enabled - -```html - -``` +#### disabled - +You can add the `disabled` attribute to disallow interactivity. -Display a check icon when switch is enabled with label positioned to the left + ```html - + ``` - - ## Slots -- `label` +### label + +Provide slotted content for the input switch label. This slot takes precedence over the `label` prop if both are provided. - -