feat(ktruncate, kslideout, ktoaster): components reskin (#2020)

* feat(ktruncate): reskin component [KHCP-9009] (#2009) * feat(ktruncate): reskin component [KHCP-9009] * fix(ktruncate): apply PR feedback Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * fix: lint:fix * fix(ktruncate): address PR feedback [KHCP-9009] * fix(ktruncate): address PR feedback [KHCP-9009] * docs(truncate): minor tweak [KHCP-9009] --------- Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * feat(ktoaster): component reskin [KHCP-9005] (#2015) * chore(sandbox): setup ktoaster sandbox [KHCP-9005] * feat(ktoaster): refactor component [KHCP-9005] * test(ktoaster): fix component test [KHCP-9005] * fix(ktoaster): misc fixes [KHCP-9005] * docs(toaster): update component docs [KHCP-9005] * docs(toaster): address feedback [KHCP-9005] * fix(ktoaster): todo item [KHCP-9005] * fix(ktoaster): apply PR feedback Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * fix(ktoaster): address PR feedback [KHCP-9005] * test(ktoaster): fix component tests [KHCP-9005] * fix(ktoaster): minor fixes [KHCP-9005] --------- Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * feat(kslideout): component reskin [KHCP-9000] (#2012) * chore(sandbox): set up component sandbox [KHCP-9000] * feat(kslideout): reskin component [KHCP-9000] * fix(kslideout): minor fix [KHCP-9000] * test(kslideout): fix component tests [KHCP-9000] * docs(slideout): update component docs [KHCP-9000] * docs(slideout): minor fix [KHCP-9000] * docs: tweak migration guide [KHCP-9000] * docs: apply feedback Co-authored-by: Philipp Rudloff <philipp.rudloff@konghq.com> * fix(kslideout): apply PR feedback Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * fix(kslideout): address PR feedback [KHCP-9000] --------- Co-authored-by: Philipp Rudloff <philipp.rudloff@konghq.com> Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * fix(kslideout): adoption fixes (#2025) * fix(ktoaster): icon, title and message styling (#2028) * fix(ktoaster): icon, title and message styling * fix(ktoaster): minor fix * docs(toaster): address PR feedback * fix(ktoaster): minor fix * fix(kslideout): remove slotted title icon styling (#2029) * fix(*): fix keyboard events (#2033) --------- Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> Co-authored-by: Philipp Rudloff <philipp.rudloff@konghq.com>
Kong · Feb 27, 2024 · cb059fd · cb059fd
1 parent fc92dd1
commit cb059fd
Show file tree

Hide file tree

Showing 18 changed files with 1,366 additions and 770 deletions.
diff --git a/docs/components/slideout.md b/docs/components/slideout.md
diff --git a/docs/components/toaster.md b/docs/components/toaster.md
diff --git a/docs/components/truncate.md b/docs/components/truncate.md
@@ -1,6 +1,6 @@
 # Truncate
 
-**KTruncate** - A Kongponent that limits content to a specific number of lines and provides controls to show or hide the truncated content.
+KTruncate - a container that limits content to a specific number of lines and provides controls to show or hide the hidden items.
 
 <KCard>
   <KTruncate>
@@ -44,22 +44,22 @@ Number of rows to truncate content. Default value is `1`.
 </template>
 ```
 
-### isTextContent
+### truncateText
 
 By default the component treats anything passed through the `default` slot as collection of HTML elements. Use this prop if you want to truncate elements that only contain text, such as one or more paragraph `<p>` tags.
 
 When this prop is set to `true`, the component applies different logic; truncation is achieved via the `-webkit-line-clamp` CSS property, rather than assessing the height of child elements to determine the row height.
 
 <KCard>
-  <KTruncate is-text-content :rows="3">
-    <p>A good design decision to apply <a href="https://kongponents.konghq.com/components/truncate.html#istextcontent">text truncation</a> would be when displaying a <b>large amount of textual content</b>, such as a list of articles or product descriptions, in a limited space, such as a mobile screen or a small widget. By truncating the text to a short summary, it is possible to present the information in a more organized and readable manner, allowing the user to quickly scan and understand the main points of each item.</p>
-    <p>The truncated text can also serve as a teaser, encouraging the user to click or tap to view the full content.</p>
+  <KTruncate truncate-text :rows="3">
+    <p class="text-paragraph">A good design decision to apply <a href="https://kongponents.konghq.com/components/truncate.html#textcontent">text truncation</a> would be when displaying a <b>large amount of textual content</b>, such as a list of articles or product descriptions, in a limited space, such as a mobile screen or a small widget. By truncating the text to a short summary, it is possible to present the information in a more organized and readable manner, allowing the user to quickly scan and understand the main points of each item.</p>
+    <p class="text-paragraph">The truncated text can also serve as a teaser, encouraging the user to click or tap to view the full content.</p>
   </KTruncate>
 </KCard>
 
 ```html
 <template>
-  <KTruncate is-text-content :rows="3">
+  <KTruncate truncate-text :rows="3">
     <p>A good design decision to apply text truncation would be
       when displaying a <b>large amount of textual content</b>, such as a list
       of articles or product descriptions, in a limited space, such as
@@ -72,12 +72,12 @@ When this prop is set to `true`, the component applies different logic; truncati
 </template>
 ```
 
-### isExpanded
+### expanded
 
 When `true`, the component will not truncate the content and the collapse trigger will be visible.
 
 <KCard>
-  <KTruncate is-expanded>
+  <KTruncate expanded>
     <KBadge v-for="n in 25" :key="n">
       Item {{ n }}
     </KBadge>
@@ -86,7 +86,7 @@ When `true`, the component will not truncate the content and the collapse trigge
 
 ```html
 <template>
-  <KTruncate is-expanded>
+  <KTruncate expanded>
     <KBadge v-for="n in 25" :key="n">
       Item {{ n }}
     </KBadge>
@@ -99,14 +99,14 @@ When `true`, the component will not truncate the content and the collapse trigge
 Width of container element that wraps content passed through the `default` slot. Works just like `width` property in CSS. Default value is `100%`.
 
 <KCard>
-  <KTruncate is-text-content :rows="2" width="50%">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <KTruncate truncate-text :rows="2" width="50%">
+    <p class="text-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </KTruncate>
 </KCard>
 
 ```html
 <template>
-  <KTruncate is-text-content :rows="2" width="50%">
+  <KTruncate truncate-text :rows="2" width="50%">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </KTruncate>
 </template>
@@ -121,10 +121,10 @@ The content to truncate.
 **Note:** when using KTruncate for truncating collection of HTML elements (not text), to ensure the best experience with the component, please pass elements of equal height in the default slot. The component will base its guess for the height of the element on the height of each individual sibling, so passing elements of equal height will result in a more accurate and consistent output.
 
 :::tip TIP
-The component is reactive to its dimensions changes. To see this in action, try resizing your browser window and notice the behavior of the example below.
+The component is reactive to its dimensions changes. To see this in action, try resizing the container below.
 :::
 
-<KCard>
+<KCard class="resizable-card">
   <KTruncate :rows="3">
     <KBadge v-for="n in 30" :key="n">
       Item {{ n }}
@@ -136,7 +136,7 @@ The component is reactive to its dimensions changes. To see this in action, try
 
 Slot for a custom expand trigger element. Slot props:
 
-- `truncatedCount` (type: `Number`) - Number of elements that overflow. **Note**: this slot prop is only available when not `isTextContent`
+- `truncatedCount` (type: `Number`) - Number of elements that overflow. **Note**: this slot prop is only available when not `truncateText`
 - `expand` (type: `Function`) - Function to expand
 
 ### collapse-trigger
@@ -177,15 +177,27 @@ Example of using the `expand-trigger` and `collapse-trigger` slots for creating
 </template>
 ```
 
-<style lang="scss">
+<style lang="scss" scoped>
+.text-paragraph {
+  margin-top: $kui-space-0;
+  margin-bottom: $kui-space-40;
+}
+
+.resizable-card {
+  resize: horizontal;
+  overflow-x: auto;
+  min-width: 100px;
+  max-width: 90%;
+}
+
 .custom-trigger {
-  color: blue;
+  color: $kui-color-text-primary;
   text-decoration: underline;
   white-space: nowrap;
-  margin-left: 4px;
+  margin-left: $kui-space-20;
 
   &:hover {
-    color: darkblue;
+    color: $kui-color-text-primary-strong;
   }
 }
 </style>
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -533,6 +533,26 @@ 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 (you can use the newly added `title` slot instead)
+* `after-title` slot has been removed (you can use the newly added `title` slot instead)
+
+#### 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
+* `close-button-start` and `close-button-end` `data-testid` attributes have been removed. Use the `slideout-close-icon` `data-testid` attribute instead.
+* `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
 
@@ -570,6 +590,21 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 ### KToaster
 
+#### Attributes
+
+#### Structure
+
+* `toaster-container-outer` class has been replaced with `k-toaster`
+* `toaster-item` class has been replaced with `toaster`
+* `message` and `k-alert-msg` classes has been replaced with `toaster-message`
+
+#### Constants, Types & Interfaces
+
+* `toasterAppearances` constant has been renamed to `ToasterAppearances`
+* `Toast` interface changes:
+  * `title` property has been added
+  * `message` property became optional
+  * `appearances` property is no longer an instance of `AlertAppearance` type - instead it is an instance of new `ToasterAppearance` type
 
 ### KTooltip
 
@@ -591,6 +626,18 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 ### KTruncate
 
+#### Props
+
+* `isTextContent` prop has been changed to `truncateText`
+* `isExpanded` prop has been changed to `expanded`
+
+#### Structure
+
+* `k-truncate-content` class has been changed to `truncate-content`
+* `k-truncate-text` class has been changed to `truncate-text`
+* `k-truncate-expand-controls` class has been changed to `truncate-expand-controls`
+* `k-truncate-container` class has been changed to `truncate-container`
+* `k-truncate-collapse-controls` class has been changed to `truncate-collapse-controls`
 
 ### KView Switcher
 

diff --git a/sandbox/index.ts b/sandbox/index.ts
@@ -34,9 +34,11 @@ 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' } },
+  { name: 'KToaster', to: { name: 'toaster' } },
 ])
 
 // Provide the app links to the SandboxLayout components