Added DocsExample #836

chetan21122004 · 2024-11-20T16:47:55Z

Description
I’ve added the DocsExample component that allows toggling between an example and its code.

Issue Addressed
Fixes #826.

Changelog
-Description: Added DocsExample component to toggle between example and code.
-Products Impact: -
-Addresses: #826.
-Components: DocsExample.

Guidance: The new component enhances the documentation UI by toggling code visibility.

Steps to Test
1.Navigate to the KCardGrid documentation page.
2.Verify that the example and code toggle correctly with a slide-up/slide-down animation.

Implementation Notes
-The DocsExample component uses a #code slot to accept code snippets in multiple languages.
-Slide toggle animation is applied when showing/hiding the code.

chetan21122004 · 2024-11-20T16:51:46Z

Hi @MisRob,
I’ve implemented the DocsExample component and applied it to KCardGrid for one example. Could you review the changes and let me know if further modifications are needed? Should I apply it to all KCardGrid components or just one for now?

KCardGrid.-.Kolibri.Design.System.-.Google.Chrome.2024-11-21.00-13-45.mp4

MisRob · 2024-11-21T07:34:38Z

Hi @chetan21122004, thanks a lot! We will review, likely during the next week.

MisRob · 2024-11-21T20:57:00Z

Hello @chetan21122004, even though I may chime in occasionally, my colleague-friend @ozer550 will be primarily reviewing and coordinating with you when he's back at work some time next week. Thank you @ozer550 :)

chetan21122004 · 2024-11-22T06:21:52Z

Hi @MisRob ,
Thanks for the update! I'll wait for feedback from @ozer550 once they're back. Please let me know if there's anything I can improve or fix in the meantime.

Thanks again for your support!

ozer550

Hi @chetan21122004 this is good work! Just conveyed some of the changes after talking with the team. The changes include:

Changes to Toggle button.
Enchancements in the DocsExample component.

Feel free to ask any questions you have!

ozer550 · 2024-11-27T10:49:27Z

docs/common/DocsExample.vue

+
+    <div class="code-toggle-button">
+      <button @click="toggleCodeVisibility">
+        <span>&lt;/&gt;</span>


Instead of this, we could use KIconButton component. After discussing with the team mainly there are three things that we need to do here.

We need to add the new icon for code toggle, instructions for which are written here. You can download the required svg file from here.

Currently once we click on the toggle button the symbol of code does not change. It’s clear that the </> represents code but its not sure that pressing that symbol again would change it back to the visual example. So to improve this experience we would want to change the symbol of the code icon to chevronUp. Meanning we want to change the code icon to chevronUp when they click to see the code and then again revert back to code icon when they want to just see the visual example.

The KIconButton also has a tooltip prop. We want to add a tooltip for the toggle button for better user experience too. It should say something like 'show/hide code'.

ozer550 · 2024-11-27T11:32:58Z

docs/common/DocsExample.vue

+    </div>
+
+        <!-- Toggle code  -->
+    <div v-if="isCodeVisible" class="code-container">


Also If we could change the v-if here to v-show as elements shown with v-show are mounted once and remain in the DOM.

Hi @ozer550,

Thanks for the detailed feedback! I’ve made the changes based on your suggestions. Here's a summary of what I’ve done:

Replaced the toggle button with KIconButton: I've updated the button to use the new component.

Updated the toggle icon: The icon now switches between < > and chevronUp when toggling the code visibility.

Added tooltip: The tooltip for the toggle button now says "Show/Hide Code" for better user experience.

Changed v-if to v-show: I've updated this to ensure the element remains in the DOM after being toggled.

newDocExample.mp4

chetan21122004 · 2024-11-28T10:02:35Z

Hi @ozer550, I’ve completed the task but mistakenly commented in the conversation instead of a new one. Please review!

ozer550 · 2024-11-29T05:40:45Z

Hi @ozer550, I’ve completed the task but mistakenly commented in the conversation instead of a new one. Please review!

Hi @chetan21122004! Thanks for the changes will review this ASAP.

ozer550

Hi @chetan21122004! We would need to rework on this PR as I see some unwanted changes from your last commit probably due to some misconfiguration or formatting tool that you are using locally.

I see a lot of changes to files in precompiled-icons/le/files. This should not have happened. We would need to revert them.
Big diffs in files like kcardgrid.vue and iconDefinitions.js. This is probably due to formatting tool that you are using or some misconfiguration with it.

We need to do the following things to fix it:

Revert the changes and trying adding the icon again and see if the script still makes those unwanted changes.
Resolve the linting check failure and run 'yarn lint-fix'.

Please feel free to ask any follow up questions necessary.

ozer550 · 2024-12-09T08:01:12Z

docs/common/DocsExample.vue

+
+
+<script>
+  import KiconButton from "../../lib/buttons-and-links/KiconButton.vue"; 


This import seems to be broken. It should be KIconButton instead.

ozer550 · 2024-12-09T10:33:34Z

lib/KIcon/precompiled-icons/le/a11y.vue

@@ -7,6 +7,6 @@

 <script>

-  export default {"name":"icon-40bcababd163c5d974599a8102319c63"}
+  export default {"name":"icon-90cbb33ba1b625a32a6da324f4db40b2"}


We should not see changes to the files in precompiled-icons/le folder. Idk why this happened. We would need to revert them back. The only change that should be present is lib/KIcon/precompiled-icons/le/codeToggle.vue. Could you revert the commit and try adding the icon again and see if the script generates the same results?

ozer550 · 2024-12-09T10:38:24Z

docs/pages/kcardgrid.vue

@@ -1,907 +1,950 @@
-<template>


This is a huge diff which should not be present. This is probably due to some local formatting tool? Could you first resolve the linting check fails and then run yarn lint-fix.

ozer550 · 2024-12-09T10:40:19Z

lib/KIcon/iconDefinitions.js

@@ -1,579 +1,582 @@
-import { themePalette, themeTokens } from '../styles/theme';


Same case here too!

chetan21122004 · 2024-12-11T15:15:40Z

Hi @ozer550 , Apologies for the confusion! I accidentally deleted the branch and close the issue, but I've restored the branch. I’ve also addressed the requested changes , including reverting the unwanted changes and fixing the linting errors. Thanks for your support!

chetan21122004 · 2024-12-11T15:38:07Z

Hi @ozer550 , I am facing few issues in DocsExample branch can i just make new branch and submit a PR

MisRob · 2024-12-13T03:59:37Z

Hi @chetan21122004, thanks for checking on it - yes feel free to open a new branch if it's easier. I'd ask you to reference this PR in the new PR's description so we can track the review.

MisRob · 2024-12-13T10:54:06Z

Also @chetan21122004, after you start the new branch from the latest develop, due to some larger updates, you will then need to follow #839 (comment).

ozer550 · 2024-12-13T11:02:58Z

Hi @ozer550 , Apologies for the confusion! I accidentally deleted the branch and close the issue, but I've restored the branch. I’ve also addressed the requested changes , including reverting the unwanted changes and fixing the linting errors. Thanks for your support!

No worries @chetan21122004! Looking at the new changes we are almost there!

chetan21122004 · 2024-12-15T08:16:33Z

Hi @ozer550 , i have revoked the changes and added icon #873 , do i also need to make changes in CHANGELOG.md ? because i did , looking forward for your feedback

MisRob · 2024-12-16T12:16:19Z

I will close this in favor of @chetan21122004's #873 where I responded the comments and posted further feedback.

Added DocsExample

6695e59

MisRob requested a review from ozer550 November 21, 2024 20:57

MisRob assigned MisRob and ozer550 Nov 21, 2024

MisRob added TODO: needs review Waiting for review category: supporting code Implementation of the system labels Nov 21, 2024

implemented DoscExample component with all kcardgrid component

8d2e301

ozer550 requested changes Nov 27, 2024

View reviewed changes

MisRob mentioned this pull request Nov 29, 2024

Further improve DocsExample visual output and API #845

Open

ozer550 requested changes Dec 9, 2024

View reviewed changes

resolved errors in DocsExample

fad3c15

chetan21122004 force-pushed the DocsExample branch from 8bab16c to fad3c15 Compare December 11, 2024 14:45

chetan21122004 closed this Dec 11, 2024

chetan21122004 deleted the DocsExample branch December 11, 2024 14:56

chetan21122004 restored the DocsExample branch December 11, 2024 15:06

updated changelog.md

dea80ef

chetan21122004 reopened this Dec 11, 2024

MisRob requested a review from ozer550 December 13, 2024 03:58

chetan21122004 closed this Dec 13, 2024

chetan21122004 deleted the DocsExample branch December 13, 2024 11:08

chetan21122004 restored the DocsExample branch December 13, 2024 11:14

chetan21122004 reopened this Dec 13, 2024

chetan21122004 mentioned this pull request Dec 13, 2024

Add DocsExample #873

Open

MisRob closed this Dec 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added DocsExample #836

Added DocsExample #836

chetan21122004 commented Nov 20, 2024

chetan21122004 commented Nov 20, 2024 •

edited

Loading

MisRob commented Nov 21, 2024

MisRob commented Nov 21, 2024

chetan21122004 commented Nov 22, 2024

ozer550 left a comment

ozer550 Nov 27, 2024

ozer550 Nov 27, 2024

chetan21122004 Nov 27, 2024

chetan21122004 commented Nov 28, 2024

ozer550 commented Nov 29, 2024

ozer550 left a comment

ozer550 Dec 9, 2024

ozer550 Dec 9, 2024

ozer550 Dec 9, 2024

ozer550 Dec 9, 2024

chetan21122004 commented Dec 11, 2024 •

edited

Loading

chetan21122004 commented Dec 11, 2024

MisRob commented Dec 13, 2024

MisRob commented Dec 13, 2024

ozer550 commented Dec 13, 2024

chetan21122004 commented Dec 15, 2024

MisRob commented Dec 16, 2024



		<script>
		import KiconButton from "../../lib/buttons-and-links/KiconButton.vue";

		@@ -1,579 +1,582 @@
		import { themePalette, themeTokens } from '../styles/theme';

Added DocsExample #836

Added DocsExample #836

Conversation

chetan21122004 commented Nov 20, 2024

chetan21122004 commented Nov 20, 2024 • edited Loading

MisRob commented Nov 21, 2024

MisRob commented Nov 21, 2024

chetan21122004 commented Nov 22, 2024

ozer550 left a comment

Choose a reason for hiding this comment

ozer550 Nov 27, 2024

Choose a reason for hiding this comment

ozer550 Nov 27, 2024

Choose a reason for hiding this comment

chetan21122004 Nov 27, 2024

Choose a reason for hiding this comment

chetan21122004 commented Nov 28, 2024

ozer550 commented Nov 29, 2024

ozer550 left a comment

Choose a reason for hiding this comment

ozer550 Dec 9, 2024

Choose a reason for hiding this comment

ozer550 Dec 9, 2024

Choose a reason for hiding this comment

ozer550 Dec 9, 2024

Choose a reason for hiding this comment

ozer550 Dec 9, 2024

Choose a reason for hiding this comment

chetan21122004 commented Dec 11, 2024 • edited Loading

chetan21122004 commented Dec 11, 2024

MisRob commented Dec 13, 2024

MisRob commented Dec 13, 2024

ozer550 commented Dec 13, 2024

chetan21122004 commented Dec 15, 2024

MisRob commented Dec 16, 2024

chetan21122004 commented Nov 20, 2024 •

edited

Loading

chetan21122004 commented Dec 11, 2024 •

edited

Loading