From 7318b0924ef73a6fb303ae1f61029461fa115649 Mon Sep 17 00:00:00 2001 From: portikM Date: Mon, 12 Feb 2024 16:03:35 -0500 Subject: [PATCH 01/10] chore(sandbox): set up component sandbox [KHCP-9000] --- sandbox/index.ts | 1 + sandbox/pages/SandboxSegmentedControl.vue | 2 +- sandbox/pages/SandboxSlideout.vue | 118 ++++++++++++++++++++++ sandbox/router/sandbox-routes.ts | 6 ++ 4 files changed, 126 insertions(+), 1 deletion(-) create mode 100644 sandbox/pages/SandboxSlideout.vue diff --git a/sandbox/index.ts b/sandbox/index.ts index 2ebcd5b4be..2816654d94 100644 --- a/sandbox/index.ts +++ b/sandbox/index.ts @@ -33,6 +33,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([ { name: 'KRadio', to: { name: 'radio' } }, { name: 'KSegmentedControl', to: { name: 'segmentedcontrol' } }, { name: 'KSelect', to: { name: 'select' } }, + { name: 'KSlideout', to: { name: 'slideout' } }, { name: 'KTable', to: { name: 'table' } }, { name: 'KTabs', to: { name: 'tabs' } }, { name: 'KTextarea', to: { name: 'textarea' } }, diff --git a/sandbox/pages/SandboxSegmentedControl.vue b/sandbox/pages/SandboxSegmentedControl.vue index 340c80bca0..af61871eea 100644 --- a/sandbox/pages/SandboxSegmentedControl.vue +++ b/sandbox/pages/SandboxSegmentedControl.vue @@ -100,7 +100,7 @@ /> - + + +
+ + + Figma + + + + + + + + + KSlideout + + + + + + + + + KSlideout + + + + + + + + + KSlideout + + + + + + + + + KSlideout + + + + + + + + + + + + KSlideout + + + + + +
+ + + + diff --git a/sandbox/router/sandbox-routes.ts b/sandbox/router/sandbox-routes.ts index 7ca0558f50..9d67119c96 100644 --- a/sandbox/router/sandbox-routes.ts +++ b/sandbox/router/sandbox-routes.ts @@ -116,6 +116,12 @@ const componentRoutes: RouteRecordRaw[] = [ meta: { title: 'Select Sandbox' }, component: () => import('../pages/SandboxSelect.vue'), }, + { + path: '/slideout', + name: 'slideout', + meta: { title: 'Slideout Sandbox' }, + component: () => import('../pages/SandboxSlideout.vue'), + }, { path: '/table', name: 'table', From d7e4e714637cff1a510612450e2e6c34d5af36f5 Mon Sep 17 00:00:00 2001 From: portikM Date: Tue, 13 Feb 2024 14:56:28 -0500 Subject: [PATCH 02/10] feat(kslideout): reskin component [KHCP-9000] --- docs/guide/migrating-to-version-9.md | 19 ++ sandbox/pages/SandboxSlideout.vue | 83 ++++++- src/components/KModal/KModal.vue | 4 +- src/components/KSlideout/KSlideout.vue | 309 +++++++++++-------------- src/styles/_transitions.scss | 23 +- 5 files changed, 260 insertions(+), 178 deletions(-) diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md index d6dcef37c1..2e684884f2 100644 --- a/docs/guide/migrating-to-version-9.md +++ b/docs/guide/migrating-to-version-9.md @@ -524,6 +524,25 @@ Removed as of `v9`. Use `KBreadcumbs` instead. ### KSlideout +#### Props + +* `isVisible` prop has been changed to `visible` +* `preventCloseOnBlur` prop has been removed in favor of new `closeOnBlur` prop +* `closeButtonAlignment` prop has been removed + +#### Slots + +* `before-title` slot has been removed +* `after-title` slot has been removed + +#### Structure + +* `panel` class has been replaced with `slideout-container` class +* `slideout-panel` `data-testid` attribute has been replaced with `slideout-container` +* `k-slideout-header-content` class has been replaced with `slideout-header` class +* `k-slideout-main-title` class and `k-slideout-title` class and `data-testid` attribute were been replaced with `slideout-title` +* `content` class has been replaced with `slideout-content` class +* `content-card` class has been removed ### KStepper diff --git a/sandbox/pages/SandboxSlideout.vue b/sandbox/pages/SandboxSlideout.vue index b0d4b0a626..2478caeaa5 100644 --- a/sandbox/pages/SandboxSlideout.vue +++ b/sandbox/pages/SandboxSlideout.vue @@ -44,7 +44,7 @@ @@ -87,7 +87,22 @@ - + + + KSlideout + + + + + + + + + + + KSlideout + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis. Netus et malesuada fames ac turpis. Donec massa sapien faucibus et molestie ac feugiat. Cursus turpis massa tincidunt dui. Eget nullam non nisi est sit amet facilisis magna. Porttitor eget dolor morbi non arcu risus quis. Tempus urna et pharetra pharetra massa massa ultricies mi. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Elit eget gravida cum sociis natoque penatibus et. Lobortis mattis aliquam faucibus purus in massa tempor nec. Aliquet eget sit amet tellus cras adipiscing enim eu. Diam vulputate ut pharetra sit amet aliquam. Ultricies mi quis hendrerit dolor magna eget est lorem. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Pellentesque habitant morbi tristique senectus et netus et. Aliquam ultrices sagittis orci a scelerisque purus.

+

Tincidunt dui ut ornare lectus sit amet. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Egestas erat imperdiet sed euismod nisi porta lorem. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Sit amet cursus sit amet dictum sit amet justo donec. Augue mauris augue neque gravida in fermentum. Tristique risus nec feugiat in. Purus viverra accumsan in nisl. Massa sapien faucibus et molestie ac feugiat. Pharetra magna ac placerat vestibulum. Consequat mauris nunc congue nisi vitae.

+

Turpis tincidunt id aliquet risus feugiat in ante. Congue nisi vitae suscipit tellus. Tincidunt id aliquet risus feugiat in ante. Tincidunt ornare massa eget egestas purus. Velit dignissim sodales ut eu sem. Suspendisse sed nisi lacus sed. At lectus urna duis convallis convallis tellus id interdum velit. Dignissim diam quis enim lobortis. Ullamcorper sit amet risus nullam eget. Id volutpat lacus laoreet non curabitur gravida arcu ac tortor.

+

Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Dui vivamus arcu felis bibendum ut. Enim neque volutpat ac tincidunt vitae semper. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Maecenas volutpat blandit aliquam etiam erat velit scelerisque. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Nulla aliquet enim tortor at auctor urna nunc id. Faucibus in ornare quam viverra orci sagittis eu volutpat. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Amet tellus cras adipiscing enim eu turpis. Aliquet risus feugiat in ante. Cursus in hac habitasse platea dictumst. Fringilla ut morbi tincidunt augue interdum. Elementum curabitur vitae nunc sed. Egestas dui id ornare arcu odio ut sem nulla. Nisi vitae suscipit tellus mauris a. Vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Tortor at risus viverra adipiscing at in tellus integer.

+

Porta lorem mollis aliquam ut porttitor leo a. Egestas diam in arcu cursus euismod quis viverra. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Sociis natoque penatibus et magnis dis parturient montes nascetur. Malesuada nunc vel risus commodo viverra maecenas. Viverra nam libero justo laoreet sit amet. Eu augue ut lectus arcu. Sagittis eu volutpat odio facilisis mauris. Etiam non quam lacus suspendisse faucibus interdum posuere. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare. Nulla porttitor massa id neque aliquam vestibulum morbi blandit. Ut enim blandit volutpat maecenas.

+

Gravida quis blandit turpis cursus in hac habitasse platea. Ornare quam viverra orci sagittis eu volutpat odio. Habitant morbi tristique senectus et netus. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Nec dui nunc mattis enim ut tellus. Nunc eget lorem dolor sed viverra ipsum nunc. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Varius vel pharetra vel turpis nunc eget lorem dolor. Cursus risus at ultrices mi tempus. Velit scelerisque in dictum non. Aliquet bibendum enim facilisis gravida neque convallis a.

+

Enim ut tellus elementum sagittis vitae et leo duis. Luctus venenatis lectus magna fringilla. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Vitae congue eu consequat ac felis donec et odio pellentesque. Purus viverra accumsan in nisl nisi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Vestibulum lectus mauris ultrices eros in cursus. Ipsum suspendisse ultrices gravida dictum fusce ut. Et netus et malesuada fames ac turpis egestas integer eget. Sed lectus vestibulum mattis ullamcorper.

+ + + + + + + KSlideout + + + + + + + @@ -115,4 +185,13 @@ import SandboxTitleComponent from '../components/SandboxTitleComponent.vue' import SandboxSectionComponent from '../components/SandboxSectionComponent.vue' import { inject } from 'vue' +import { KongIcon } from '@kong/icons' + + diff --git a/src/components/KModal/KModal.vue b/src/components/KModal/KModal.vue index dcde4a397a..98ea7abeac 100644 --- a/src/components/KModal/KModal.vue +++ b/src/components/KModal/KModal.vue @@ -46,6 +46,9 @@ tabindex="0" title="Close" @click="$emit('cancel')" + @keydown.space.prevent + @keyup.enter="$emit('cancel')" + @keyup.space="$emit('cancel')" />
props.visible, async (visible: boolean): Promise => { }, { immediate: true }) onUnmounted(() => { - document.removeEventListener('keydown', handleKeydown) toggleEventListeners(false) }) diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue index ac8f8fdc3c..95ce7938d4 100644 --- a/src/components/KSlideout/KSlideout.vue +++ b/src/components/KSlideout/KSlideout.vue @@ -1,79 +1,58 @@ diff --git a/src/styles/_transitions.scss b/src/styles/_transitions.scss index 553cbef66d..930ce0f5b5 100644 --- a/src/styles/_transitions.scss +++ b/src/styles/_transitions.scss @@ -1,6 +1,6 @@ @import "vars"; -/* +/* Kongponents Transitions Styles for transitions using Vue native component. @@ -9,6 +9,8 @@ You don't need to import this file directly, it is imported by styles.scss, ther All transitions names must follow `kongponents--transition` pattern to avoid any conflicts with styles defined by the consuming apps. */ +// fade transition + .kongponents-fade-transition-enter-active, .kongponents-fade-transition-leave-active { transition: opacity $kongponentsTransitionDurTimingFunc; @@ -18,3 +20,22 @@ All transitions names must follow `kongponents--transition` pattern to avo .kongponents-fade-transition-leave-to { opacity: 0; } + +// slide in transition/animation + +@keyframes kongponents-slide-in-animation { + 0% { + transform: translateX(100%); + } + 100% { + transform: translateX(0%); + } +} + +.kongponents-slide-in-transition-enter-active { + animation: kongponents-slide-in-animation $kongponentsTransitionDurTimingFunc; +} + +.kongponents-slide-in-transition-leave-active { + animation: kongponents-slide-in-animation $kongponentsTransitionDurTimingFunc reverse; +} From 225ff919b940f0d23f52308435997e332d9c57f0 Mon Sep 17 00:00:00 2001 From: portikM Date: Tue, 13 Feb 2024 14:57:32 -0500 Subject: [PATCH 03/10] fix(kslideout): minor fix [KHCP-9000] --- src/components/KSlideout/KSlideout.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue index 95ce7938d4..1ece17eeb0 100644 --- a/src/components/KSlideout/KSlideout.vue +++ b/src/components/KSlideout/KSlideout.vue @@ -170,8 +170,7 @@ onUnmounted(() => { height: calc(100vh - v-bind('offsetTopValue')); max-width: v-bind('props.maxWidth'); overflow-y: auto; - padding: var(--kui-space-70, $kui-space-70); - padding-right: var(--kui-space-0, $kui-space-0); // remove padding-right so header and content containers set their own so that scroll bar is all the way to the right + padding: var(--kui-space-70, $kui-space-70) var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0) var(--kui-space-70, $kui-space-70); position: fixed; right: 0; top: v-bind('offsetTopValue'); From d9b7a60d0a8d0180585fb484521f8cddb2edcb15 Mon Sep 17 00:00:00 2001 From: portikM Date: Tue, 13 Feb 2024 15:34:18 -0500 Subject: [PATCH 04/10] test(kslideout): fix component tests [KHCP-9000] --- src/components/KSlideout/KSlideout.cy.ts | 44 +++++++++++------------- src/components/KSlideout/KSlideout.vue | 1 + 2 files changed, 21 insertions(+), 24 deletions(-) diff --git a/src/components/KSlideout/KSlideout.cy.ts b/src/components/KSlideout/KSlideout.cy.ts index 13307b96ab..eb1e17221d 100644 --- a/src/components/KSlideout/KSlideout.cy.ts +++ b/src/components/KSlideout/KSlideout.cy.ts @@ -4,56 +4,52 @@ import { h } from 'vue' describe('KSlideout', () => { it('renders default slot', () => { + const contentHeading = 'What\'s up default slot' + const contentSentence = 'Default slots are the easiest' + mount(KSlideout, { props: { - isVisible: true, + visible: true, }, slots: { default: () => h('div', {}, [ - h('h1', {}, 'What\'s up default slot'), - h('p', {}, 'Default slots are the easiest'), + h('h1', {}, contentHeading), + h('p', {}, contentSentence), ]), }, }) - cy.get('h1').should('be.visible') - cy.get('p').should('be.visible') + cy.get('h1').should('be.visible').should('have.text', contentHeading) + cy.get('p').should('be.visible').should('have.text', contentSentence) }) it('renders props when passed', () => { const titleProp = 'Hello!' - const closeButtonAlignmentProp = 'end' mount(KSlideout, { props: { - isVisible: true, + visible: true, title: titleProp, - closeButtonAlignment: closeButtonAlignmentProp, }, }) - cy.getTestId('k-slideout-title').should('exist') - cy.getTestId('k-slideout-title').should('be.visible') + cy.getTestId('slideout-title').should('be.visible').should('have.text', titleProp) }) - it('renders cancel button on right when prop is used', () => { - const closeButtonAlignmentProp = 'end' - + it('renders close icon on right', () => { mount(KSlideout, { props: { - isVisible: true, - closeButtonAlignment: closeButtonAlignmentProp, + visible: true, }, }) - cy.getTestId('close-button-end').should('exist') - cy.getTestId('close-button-end').should('be.visible') + cy.getTestId('slideout-close-icon').should('be.visible') }) - it('emits close when panel-background is clicked', () => { + it('emits close event when backdrop is clicked', () => { mount(KSlideout, { props: { - isVisible: true, + visible: true, onClose: cy.spy().as('onCloseSpy'), }, }).then(({ wrapper }) => wrapper) @@ -64,16 +60,16 @@ describe('KSlideout', () => { cy.get('@onCloseSpy').should('have.been.called') - cy.get('.panel-background').click({ force: true }) + cy.get('.slideout-backdrop').click() .then(() => { cy.get('@onCloseSpy').should('have.been.called') }) }) - it('emits close when esc key pressed', () => { + it('emits close event when esc key pressed', () => { mount(KSlideout, { props: { - isVisible: true, + visible: true, }, }) @@ -82,10 +78,10 @@ describe('KSlideout', () => { }) }) - it('does not emit close event when persist prop is true', () => { + it('does not emit close event when closeOnBlur prop is false', () => { mount(KSlideout, { props: { - isVisible: true, + visible: true, preventCloseOnBlur: true, }, }).then(({ wrapper }) => wrapper) diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue index 1ece17eeb0..e6b698c57c 100644 --- a/src/components/KSlideout/KSlideout.vue +++ b/src/components/KSlideout/KSlideout.vue @@ -18,6 +18,7 @@
{{ title }} From e160f33bced90768f8cda56f48803c513fc44ce1 Mon Sep 17 00:00:00 2001 From: portikM Date: Tue, 13 Feb 2024 17:21:51 -0500 Subject: [PATCH 05/10] docs(slideout): update component docs [KHCP-9000] --- docs/components/slideout.md | 550 ++++++++++++++++++++---------------- 1 file changed, 302 insertions(+), 248 deletions(-) diff --git a/docs/components/slideout.md b/docs/components/slideout.md index b9196ab18c..6086b873fb 100644 --- a/docs/components/slideout.md +++ b/docs/components/slideout.md @@ -1,299 +1,353 @@ # Slideout -**KSlideout** - provides a container/wrapper to show content that may not always be important to show all of the time. It is a user-initiated component and should only show with a click. - -Below we demonstrate wrapping `KSlideout` in the [`KToggle`](/components/renderless/toggle) component. This allows us to easily toggle the open state without needing to set a data prop in the parent component. - - -
- Toggle Panel - -
-

Not only can you put any html in here like the paragraph below but you can also use other components

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-
- Buttons - - - - - -
- +KSlideout is a slide-out container with optional backdrop overlay that opens on top of main content area. + + + + Slideout + + + + + + + + + + ```html - -
- Toggle Panel - -
-

Not only can you put any html in here like the paragraph below but you can also use other components

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-
- Buttons - - - - - -
- + + + + + + + ``` ## Props -### isVisible - -* **Type**: `boolean` -* **Required**: no -* **Default**: `false` - -Tells the component whether or not to render the open panel. +### visible + +Boolean to show/hide the slideout. Defaults to `false`. + + + + Slideout + + + + + +```vue + + + +``` -### closeButtonAlignment +### title -* **Type**: `'start' | 'end'` -* **Required**: no -* **Default**: `'start'` +A string to be displayed as slideout title. Can also be [slotted](#title-1). + + + + Slideout + + + + -Controls the close button alignment, can be `start` (default) or `end`. +```html + +``` ### offsetTop -* **Type**: `number | string` -* **Required**: no -* **Default**: `0` +Allows a host app to define the offset from the top of the page. If the value is a number, it will be treated as a pixel value (e.g. `60` becomes `'60px'`); otherwise, it will be used as-is. Defaults to `0`. + + + + Slideout + + + + -Allows a host app to define the offset from the top of the page. If the value is a number, it will be treated as a pixel value (e.g. `60` becomes `'60px'`); otherwise, it will be used as-is. +```html + +``` ### hasOverlay -* **Type**: `boolean` -* **Required**: no -* **Default**: `true` - -Tells the component whether or not to enable / disable overlay when the slideout content is visible, defaults to `true`. - - -
- Toggle Panel With Disabled Overlay - -
-

Not only can you put any html in here like the paragraph below but you can also use other components

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-
- Buttons - - - - - -
- +A boolean whether or not the slideout should have background overlay. Defaults to `true`. + + + + Slideout + + + + ```html - -
- Toggle Panel - -
-

Not only can you put any html in here like the paragraph below but you can also use other components

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-
- Buttons - - - - - -
- + ``` -### preventCloseOnBlur +### closeOnBlur -* **Type**: `boolean` -* **Required**: no -* **Default**: `false` +A boolean whether on not the slideout should close when user clicks outside the slideout content area. Defaults to `true`. -Persists the slideout, ignoring clicks outside of the panel. Defaults to `false`. + + + Slideout + - -
- Toggle persistent Panel - -
-

Lorem ipsum turkey bacon

-

This panel can only be closed via Escape key, or the Close button in the upper right.

-
- -
- + + ```html - -
- Toggle persistent Panel - -
-

Lorem ipsum turkey bacon

-

This panel can only be closed via Escape key, or the Close button in the upper right.

-
- -
- + ``` -### title +### maxWidth -* **Type**: `string` -* **Required**: no -* **Default**: `''` - -This prop takes a string that will be displayed as the title of the slide-out. - - -
- Toggle Panel With Title - -
-

Not only can you put any html in here like the paragraph below but you can also use other components

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-
- Buttons - - - - - -
- +Controls width of the slideout content area. Default value is `500px`. + + + + Slideout + + + + ```html - -
- Toggle Panel With Title - -
-

Not only can you put any html in here like the paragraph below but you can also use other components

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-
- Buttons - - - - - -
- + ``` -### maxWidth +## Slots -* **Type**: `string` -* **Required**: no -* **Default**: `500px` - - -
- Toggle Panel Custom Width - -
-

Not only can you put any html in here like the paragraph below but you can also use other components

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-
- Buttons - - - - - -
- +### default + +Slot for slideout content. The component container will have a scrollbar, should the content overflow. + + + + Slideout + + + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis. Netus et malesuada fames ac turpis. Donec massa sapien faucibus et molestie ac feugiat. Cursus turpis massa tincidunt dui. Eget nullam non nisi est sit amet facilisis magna. Porttitor eget dolor morbi non arcu risus quis. Tempus urna et pharetra pharetra massa massa ultricies mi. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Elit eget gravida cum sociis natoque penatibus et. Lobortis mattis aliquam faucibus purus in massa tempor nec. Aliquet eget sit amet tellus cras adipiscing enim eu. Diam vulputate ut pharetra sit amet aliquam. Ultricies mi quis hendrerit dolor magna eget est lorem. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Pellentesque habitant morbi tristique senectus et netus et. Aliquam ultrices sagittis orci a scelerisque purus.

+

Tincidunt dui ut ornare lectus sit amet. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Egestas erat imperdiet sed euismod nisi porta lorem. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Sit amet cursus sit amet dictum sit amet justo donec. Augue mauris augue neque gravida in fermentum. Tristique risus nec feugiat in. Purus viverra accumsan in nisl. Massa sapien faucibus et molestie ac feugiat. Pharetra magna ac placerat vestibulum. Consequat mauris nunc congue nisi vitae.

+

Turpis tincidunt id aliquet risus feugiat in ante. Congue nisi vitae suscipit tellus. Tincidunt id aliquet risus feugiat in ante. Tincidunt ornare massa eget egestas purus. Velit dignissim sodales ut eu sem. Suspendisse sed nisi lacus sed. At lectus urna duis convallis convallis tellus id interdum velit. Dignissim diam quis enim lobortis. Ullamcorper sit amet risus nullam eget. Id volutpat lacus laoreet non curabitur gravida arcu ac tortor.

+

Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Dui vivamus arcu felis bibendum ut. Enim neque volutpat ac tincidunt vitae semper. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Maecenas volutpat blandit aliquam etiam erat velit scelerisque. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Nulla aliquet enim tortor at auctor urna nunc id. Faucibus in ornare quam viverra orci sagittis eu volutpat. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Amet tellus cras adipiscing enim eu turpis. Aliquet risus feugiat in ante. Cursus in hac habitasse platea dictumst. Fringilla ut morbi tincidunt augue interdum. Elementum curabitur vitae nunc sed. Egestas dui id ornare arcu odio ut sem nulla. Nisi vitae suscipit tellus mauris a. Vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Tortor at risus viverra adipiscing at in tellus integer.

+

Porta lorem mollis aliquam ut porttitor leo a. Egestas diam in arcu cursus euismod quis viverra. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Sociis natoque penatibus et magnis dis parturient montes nascetur. Malesuada nunc vel risus commodo viverra maecenas. Viverra nam libero justo laoreet sit amet. Eu augue ut lectus arcu. Sagittis eu volutpat odio facilisis mauris. Etiam non quam lacus suspendisse faucibus interdum posuere. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Maecenas ultricies mi eget mauris pharetra et ultrices neque ornare. Nulla porttitor massa id neque aliquam vestibulum morbi blandit. Ut enim blandit volutpat maecenas.

+

Gravida quis blandit turpis cursus in hac habitasse platea. Ornare quam viverra orci sagittis eu volutpat odio. Habitant morbi tristique senectus et netus. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Nec dui nunc mattis enim ut tellus. Nunc eget lorem dolor sed viverra ipsum nunc. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Varius vel pharetra vel turpis nunc eget lorem dolor. Cursus risus at ultrices mi tempus. Velit scelerisque in dictum non. Aliquet bibendum enim facilisis gravida neque convallis a.

+

Enim ut tellus elementum sagittis vitae et leo duis. Luctus venenatis lectus magna fringilla. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Vitae congue eu consequat ac felis donec et odio pellentesque. Purus viverra accumsan in nisl nisi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Vestibulum lectus mauris ultrices eros in cursus. Ipsum suspendisse ultrices gravida dictum fusce ut. Et netus et malesuada fames ac turpis egestas integer eget. Sed lectus vestibulum mattis ullamcorper.

+
+ + ```html - -
- Toggle Panel Custom Width - -
-

Not only can you put any html in here like the paragraph below but you can also use other components

-

Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.

-
- Buttons - - - - - -
- + +

Lorem ipsum dolor sit amet... + ``` -## Slots +### title -- `default` - used to place content into the slideout panel +Slot for custom title. + + + + Slideout + + + + + + ```html - -

-

Default Slot

-

Anything here will render in the panel

-
+ + ``` -- `before-title` - used to customize the header to add content before title -- `after-title` - used to customize the header to add content after title - ## Events -- `close` - Emitted when the close button is clicked, anything outside the panel is clicked, or the `esc` key is pressed. +### close + +Emitted when the close button is clicked, anything outside the slideout content area is clicked (when [`closeOnBlur` prop](#closeonblur) is set to `false`), or the `esc` key is pressed. + + From c6f4686bb7d7631b8f6f8f4489181eae590cee40 Mon Sep 17 00:00:00 2001 From: portikM Date: Tue, 13 Feb 2024 17:25:35 -0500 Subject: [PATCH 06/10] docs(slideout): minor fix [KHCP-9000] --- docs/components/slideout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/slideout.md b/docs/components/slideout.md index 6086b873fb..dbdd11b787 100644 --- a/docs/components/slideout.md +++ b/docs/components/slideout.md @@ -338,7 +338,7 @@ Slot for custom title. ### close -Emitted when the close button is clicked, anything outside the slideout content area is clicked (when [`closeOnBlur` prop](#closeonblur) is set to `false`), or the `esc` key is pressed. +Emitted when the close icon is clicked, anything outside the slideout content area is clicked (when [`closeOnBlur` prop](#closeonblur) is set to `false`), or the `esc` key is pressed.