Docs UX fixes (#3673)

* Enhance code documentation and UI: add auto-collapse to sidebar, replace CodeIcon with image, and improve button styles

* bump uilib-docs version

---------

Co-authored-by: Miki Leib <[email protected]>

Author: ethanshar

docuilib/docusaurus.config.js

@@ -128,6 +128,11 @@ const darkCodeTheme = themes.dracula;
         },
         colorMode: {
           disableSwitch: true
+        },
+        docs: {
+          sidebar: {
+            autoCollapseCategories: true
+          }
         }
       })
   }

docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.21.0",
+  "version": "3.22.0",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",

docuilib/src/assets/icons/code.png

@@ -21,8 +21,8 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
 
   const containerStyle = useMemo<ComponentProps<'div'>['style']>(() => {
     return {
-      fontSize,
-      maxWidth: printWidth * fontSize
+      fontSize
+      // maxWidth: printWidth * fontSize
     };
   }, [fontSize, printWidth]);
 
@@ -31,7 +31,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
       <ThemeCodeBlock
         className={styles.codeBlock}
         language={language ?? 'jsx'}
-        showLineNumbers={showLineNumbers ?? true}
+        showLineNumbers={showLineNumbers}
         {...others}
       >
         {code}

docuilib/src/assets/icons/code.tsx

@@ -1,13 +1,23 @@
 .showCodeButton {
   position: absolute;
-  border: 0;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 4px;
   background: none;
-  color: rgb(56, 153, 236);
   cursor: pointer;
   display: flex;
   align-items: center;
-  right: 0px;
-  top: 0px;
+  right: 4px;
+  top: 4px;
+
+  &:hover {
+    background: #eee;
+  }
+
+  img {
+    filter: grayscale(100%);
+    opacity: 0.8;
+  }
 }
 
 .blocker {

docuilib/src/components/CodeBlock.tsx

@@ -4,8 +4,8 @@ import {LiveProvider, LivePreview} from 'react-live';
 import styles from './ContentItem.module.scss';
 import ReactLiveScope from '../../theme/ReactLiveScope';
 import CodeBlock from '../CodeBlock';
-import CodeIcon from '../../assets/icons/code';
 import {isComponentSupported} from '../../utils/componentUtils';
+const showCodeIcon = require('../../assets/icons/code.png');
 
 type ComponentItemProps = {
   componentName: string;
@@ -71,8 +71,8 @@ const ComponentItem = (props: ComponentItemProps) => {
       {content}
       {showCodeButton && (
         <button onClick={toggleCode} className={styles.showCodeButton}>
-          <CodeIcon/>
-          {showCode ? 'Hide' : 'Show'} code
+          <img src={showCodeIcon} width={20}/>
+          {/* {showCode ? 'Hide' : 'Show'} code */}
         </button>
       )}
     </div>

docuilib/src/components/pageComponents/ContentItem.module.scss

@@ -33,6 +33,12 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
 
+/* Markdown pages */
+
+.container {
+  padding: 0 48px;
+}
+
 /** Docusaurus Navbar */
 
 .navbar {
@@ -58,7 +64,7 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   letter-spacing: 0.3px;
   line-height: 38px;
   border-bottom: 2px solid transparent;
-  transition: all 0.2s ease-out;
+  transition: all 0.18s ease-out;
 }
 .navbar__link--active {
   font-weight: 700;
@@ -207,8 +213,10 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   border-bottom: 2px solid #F0F2F5;
 }
 .single-tab {
-  font-size: 20px;
+  font-size: 18px;
+  font-weight: 500;
   color: #6E7881;
+  border-bottom-width: 2px;
 }
 .single-tab[aria-selected='true'] {
   border-bottom-color: #20303C;