Migrate KTabList examples to DocsExample #956

mukulpythondev · 2025-03-10T07:56:54Z

Description

This PR migrates the KTabsList documentation to use the DocsExample component for better structure and maintainability. The change ensures that examples are properly organized while keeping the documentation concise and functional.

Issue addressed

Addresses #953

Before/after screenshots

Before:

After:

Changelog

Description: Migrated KTabsList documentation to use DocsExample.
Products impact: Documentation update (no API impact).
Addresses: Migrate KTabsList documentation to use DocsExample component #953
Components: KTabsList documentation.
Breaking: No
Impacts a11y: No
Guidance: No changes needed for consumers.

Steps to test

Open the KTabsList documentation page.
Verify that all examples load correctly using DocsExample.
Ensure the collapsible/toggle functionality works as expected.
Check that no examples are missing and the formatting remains intact.

(Optional) Implementation notes

At a high level, how did you implement this?

Moved example code to docs/examples/KTabsList/ directory.
Replaced inline examples with the DocsExample component.
Ensured documentation structure remained unchanged.

Does this introduce any tech-debt items?

No.

Testing checklist

Contributor has fully tested the PR manually.
If there are any front-end changes, before/after screenshots are included.
Documentation content remains functional and correctly formatted.

Reviewer guidance

Is the documentation correctly structured with DocsExample?
Are all previous examples accounted for and functional?
Is the example styling consistent with other components?

Comments

(Any additional notes for the reviewer.)

MisRob · 2025-03-13T05:35:54Z

Welcome and thanks @mukulpythondev, we will review.

EshaanAgg

Thanks @mukulpythondev for the contribution. I have added some comments as a preliminary review. Also it seems like all the files changed in this PR have not been properly linted. You can use the command yarn run lint-fix after making the necessary changes to automatically fix the formatting in all of the files. This would also help the CI/CD to pass before the final review.

Thanks for your contribution.

EshaanAgg · 2025-03-14T09:03:27Z

docs/examples/KTabsList/CustomStyling.vue

+  <div
+    :style="{
+      backgroundColor: $themePalette.grey.v_700,
+      padding: '10px 20px',
+      color: $themeTokens.textInverted,
+      display:'inline-block'
+    }"
+  >


Why are we adding this custom styling to this particular example? As far as I understand, we want to show the styling capabilities of the props in this example, and thus adding styles to the parent div kind of distracts the focus from the same.

Can we remove this parent div completely and just keep the KTabsList component in the template?

EshaanAgg · 2025-03-14T09:04:49Z

docs/examples/KTabsList/AppearanceOverrides.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>


Can we remove the wrapping div since it's empty anyhow (has no styling or functionality associated with it)?

EshaanAgg · 2025-03-14T09:05:25Z

docs/examples/KTabsList/CustomTabs.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>


Same comment about wrapping empty div.

EshaanAgg · 2025-03-14T09:06:40Z

docs/examples/KTabsList/Intro.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>


EshaanAgg · 2025-03-14T09:07:55Z

docs/pages/ktabslist.vue

+export default {
+  name: 'DocsKTabsList',
+  data() {
+    return {
+      tabs: [
+        { id: 'tabLessons', label: 'Lessons' },
+        { id: 'tabLearners', label: 'Learners' },
+        { id: 'tabGroups', label: 'Groups' },
+      ],
+      ex1activeTabId: 'tabLessons',
+      icons: {
+        tabLessons: 'lesson',
+        tabLearners: 'person',
+        tabGroups: 'people',
+      },
+    };
+  },
+};


Can we remove all these exported data members (as all of the examples and the code needed to run them has been migrated to individual files)?

EshaanAgg

Thanks for all the changes @mukulpythondev. They all seem on the right track and very close to as we would finally like them. I have left some minor comments, and would love it it you can address them.

Also the changes right now do not seem to be linted. Please do run the linting script to autofix all of them for you!

Feel free to request a review after making all the changes, or ask for clarifications if you need any. Thanks again for all your work.

EshaanAgg · 2025-03-19T11:21:54Z

docs/examples/KTabsList/AppearanceOverrides.vue

+
+export default {
+  data() {
+    return sharedExampleData; // Use shared data


Nice thinking here @mukulpythondev trying to minimise the code duplication across examples.

I would welcome this change if it were in some other part of the codebase, but here I feel the verbosity of having the data copied in each example file it worth it. There are actually a couple of reasons for it:

The whole point of these documentation examples is to be standalone and capable of independent rendering. If we reference constants from other files, the same defeats the spirit of the same.

If we add the tab data to each example, then the documentation viewers would actually see that data, it's structure and it's direct correspondance with the component when they view the script part of the example. However if we make use of an import like this, the actual structure of the imported data may never visible to them, which would kind of defeat the purpose of this documentation.

Thus I would favour the copying and pasting of the shared data in each of the examples seperately.

EshaanAgg · 2025-03-19T11:22:09Z

docs/examples/KTabsList/CustomStyling.vue

+
+
+<script>
+import { sharedExampleData } from '../../pages/ktabslist.vue';


EshaanAgg · 2025-03-19T11:22:18Z

docs/examples/KTabsList/CustomTabs.vue

+
+
+<script>
+import { sharedExampleData } from '../../pages/ktabslist.vue';


EshaanAgg · 2025-03-19T11:22:32Z

docs/examples/KTabsList/Intro.vue

+
+
+<script>
+import { sharedExampleData } from '../../pages/ktabslist.vue';


EshaanAgg · 2025-03-19T11:24:30Z

docs/pages/ktabslist.vue

-          :activeTabId="ex1activeTabId"
-        />
-      </DocsShow>
+      <DocsExample


We recently merged #965 into the codebase which make changes to the way the DocsExample component renders. You may need to add the 'block' attribute to the same post the migration to preserve the look of the page.

Please do pull the latest changes from the KDS repository and then make the next set of changes to avoid any merge conflicts.

MisRob · 2025-04-01T14:27:49Z

Hi @mukulpythondev, just checking in, is all feedback resolved or would you need more time?

mukulpythondev · 2025-04-01T14:53:48Z

@MisRob All fix and working fine only 1 UI difference one background color because first i do with directly with the css but it is not aligning with our previous code and i can not find any method to do that.
Rate my Approach to fix this give one more prop for the docsexample component.
if any help from mentor (@EshaanAgg ) or contributors.

Current on Website :

My PR :

MisRob mentioned this pull request Mar 10, 2025

[Visual Testing] Allow object component rendering and unmount previoius component on render #937

Merged

EshaanAgg reviewed Mar 14, 2025

View reviewed changes

mukulpythondev requested a deployment to percy_tests March 17, 2025 17:17 — with GitHub Actions Waiting

EshaanAgg suggested changes Mar 19, 2025

View reviewed changes

mukulpythondev added 3 commits March 21, 2025 09:00

Migrate KTabList examples to DocsExample

d5da0b9

Added the shared data function , remove the dis

eaeb373

Added script to the each docsexample

0461531

mukulpythondev force-pushed the migrate-ktabslist-to-docsexample branch from d094d28 to 0461531 Compare March 21, 2025 03:33

mukulpythondev requested a deployment to percy_tests March 21, 2025 03:33 — with GitHub Actions Waiting

MisRob requested a review from EshaanAgg April 1, 2025 14:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate KTabList examples to DocsExample #956

Migrate KTabList examples to DocsExample #956

mukulpythondev commented Mar 10, 2025 •

edited

Loading

MisRob commented Mar 13, 2025

EshaanAgg left a comment

EshaanAgg Mar 14, 2025

EshaanAgg Mar 14, 2025

EshaanAgg Mar 14, 2025

EshaanAgg Mar 14, 2025

EshaanAgg Mar 14, 2025

EshaanAgg left a comment

EshaanAgg Mar 19, 2025

EshaanAgg Mar 19, 2025

EshaanAgg Mar 19, 2025

EshaanAgg Mar 19, 2025

EshaanAgg Mar 19, 2025

MisRob commented Apr 1, 2025

mukulpythondev commented Apr 1, 2025 •

edited

Loading



		<script>
		import { sharedExampleData } from '../../pages/ktabslist.vue';

Migrate KTabList examples to DocsExample #956

Are you sure you want to change the base?

Migrate KTabList examples to DocsExample #956

Conversation

mukulpythondev commented Mar 10, 2025 • edited Loading

Description

Issue addressed

Before/after screenshots

Changelog

Steps to test

(Optional) Implementation notes

At a high level, how did you implement this?

Does this introduce any tech-debt items?

Testing checklist

Reviewer guidance

Comments

MisRob commented Mar 13, 2025

EshaanAgg left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EshaanAgg left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MisRob commented Apr 1, 2025

mukulpythondev commented Apr 1, 2025 • edited Loading

mukulpythondev commented Mar 10, 2025 •

edited

Loading

mukulpythondev commented Apr 1, 2025 •

edited

Loading