From d63b2565de701bd70f9d195777f7ee6038906047 Mon Sep 17 00:00:00 2001
From: Konv Suu <2583695112@qq.com>
Date: Wed, 9 Aug 2023 18:02:52 +0800
Subject: [PATCH 1/2] docs: add icon search input

---
 site/src/layouts/header/SearchBox.vue         |  2 +-
 .../template/IconDisplay/CopyableIcon.vue     |  4 +-
 site/src/theme/template/IconDisplay/index.jsx | 42 +++++++++++++------
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/site/src/layouts/header/SearchBox.vue b/site/src/layouts/header/SearchBox.vue
index c26e10020e..ad0456bed3 100644
--- a/site/src/layouts/header/SearchBox.vue
+++ b/site/src/layouts/header/SearchBox.vue
@@ -5,7 +5,7 @@
       ref="inputRef"
       :placeholder="searchPlaceholder"
       @focus="triggerFocus(true)"
-      @blue="triggerFocus(false)"
+      @blur="triggerFocus(false)"
     ></a-input>
   </div>
 </template>
diff --git a/site/src/theme/template/IconDisplay/CopyableIcon.vue b/site/src/theme/template/IconDisplay/CopyableIcon.vue
index ee63dcf8ae..a6124ae25f 100644
--- a/site/src/theme/template/IconDisplay/CopyableIcon.vue
+++ b/site/src/theme/template/IconDisplay/CopyableIcon.vue
@@ -22,8 +22,8 @@ const allIcons = AntdIcons;
 const kebabCase = function kebabCase(str) {
   return str
     .split(/(?=[A-Z])/)
-    .join('-')
-    .toLowerCase();
+    .map(s => s.replace(s[0], s[0].toUpperCase()))
+    .join('');
 };
 
 export default defineComponent({
diff --git a/site/src/theme/template/IconDisplay/index.jsx b/site/src/theme/template/IconDisplay/index.jsx
index 216590f0f2..1476715729 100644
--- a/site/src/theme/template/IconDisplay/index.jsx
+++ b/site/src/theme/template/IconDisplay/index.jsx
@@ -24,6 +24,7 @@ const IconDisplay = defineComponent({
   data() {
     return {
       theme: ThemeType.Outlined,
+      searchVal: '',
     };
   },
   methods: {
@@ -42,7 +43,10 @@ const IconDisplay = defineComponent({
             category: key,
             icons: iconList
               .map(iconName => iconName + theme)
-              .filter(iconName => allIcons[iconName]),
+              .filter(iconName => {
+                if (iconName.toLowerCase().includes(this.searchVal.trim().toLowerCase()))
+                  return allIcons[iconName];
+              }),
           };
         })
         .filter(({ icons }) => !!icons.length)
@@ -62,18 +66,30 @@ const IconDisplay = defineComponent({
     return (
       <div>
         <h3 style="margin: 1.6em 0 .6em;">{this.$t('app.docs.components.icon.pick-theme')}</h3>
-        <a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
-          <a-radio-button value={ThemeType.Outlined}>
-            <Icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
-          </a-radio-button>
-          <a-radio-button value={ThemeType.Filled}>
-            <Icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
-          </a-radio-button>
-          <a-radio-button value={ThemeType.TwoTone}>
-            <Icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
-          </a-radio-button>
-        </a-radio-group>
-        {this.renderCategories()}
+        <div style="display: flex;">
+          <a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
+            <a-radio-button value={ThemeType.Outlined}>
+              <Icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
+            </a-radio-button>
+            <a-radio-button value={ThemeType.Filled}>
+              <Icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
+            </a-radio-button>
+            <a-radio-button value={ThemeType.TwoTone}>
+              <Icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
+            </a-radio-button>
+          </a-radio-group>
+           {' '}
+          <a-input-search
+            style="flex: 1 1 0%; margin-inline-start: 16px;"
+            placeholder={this.$t('app.docs.components.icon.search.placeholder')}
+            v-model:value={this.searchVal}
+          />
+        </div>
+        {this.renderCategories().length === 0 ? (
+          <a-empty style="padding: 12px 0;" />
+        ) : (
+          this.renderCategories()
+        )}
       </div>
     );
   },

From 35e3c01d4a6c4f6eaa324c72ddca5dce4c77fc10 Mon Sep 17 00:00:00 2001
From: Konv Suu <2583695112@qq.com>
Date: Thu, 10 Aug 2023 09:04:39 +0800
Subject: [PATCH 2/2] docs: add affix for search input

---
 site/src/theme/static/common.less             |  5 ---
 site/src/theme/static/icons.less              | 14 ++++++
 site/src/theme/template/IconDisplay/index.jsx | 44 ++++++++++---------
 3 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/site/src/theme/static/common.less b/site/src/theme/static/common.less
index 8bdd553cf7..d0be99440b 100644
--- a/site/src/theme/static/common.less
+++ b/site/src/theme/static/common.less
@@ -46,11 +46,6 @@ a {
   &:hover &-inner {
     overflow-y: auto;
   }
-
-  > div,
-  > div > div {
-    height: 100%;
-  }
 }
 
 .aside-container {
diff --git a/site/src/theme/static/icons.less b/site/src/theme/static/icons.less
index 0440d22d5a..91f463e391 100644
--- a/site/src/theme/static/icons.less
+++ b/site/src/theme/static/icons.less
@@ -86,3 +86,17 @@ ul.anticons-list {
   background: #f5f5f5;
   border-radius: 2px;
 }
+
+.icons-affix {
+  display: flex;
+  justify-content: space-between;
+  transition: all 0.25s;
+}
+
+.icons-affixed {
+  padding: 12px;
+  margin: -8px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color-base);
+  background-color: var(--body-background);
+}
diff --git a/site/src/theme/template/IconDisplay/index.jsx b/site/src/theme/template/IconDisplay/index.jsx
index 1476715729..66c5dc3807 100644
--- a/site/src/theme/template/IconDisplay/index.jsx
+++ b/site/src/theme/template/IconDisplay/index.jsx
@@ -25,13 +25,16 @@ const IconDisplay = defineComponent({
     return {
       theme: ThemeType.Outlined,
       searchVal: '',
+      searchBarAffixed: false,
     };
   },
   methods: {
     handleChangeTheme(e) {
       this.theme = e.target.value;
     },
-
+    handleAffixChange(affixed) {
+      this.searchBarAffixed = affixed;
+    },
     renderCategories() {
       const { theme } = this;
 
@@ -66,25 +69,26 @@ const IconDisplay = defineComponent({
     return (
       <div>
         <h3 style="margin: 1.6em 0 .6em;">{this.$t('app.docs.components.icon.pick-theme')}</h3>
-        <div style="display: flex;">
-          <a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
-            <a-radio-button value={ThemeType.Outlined}>
-              <Icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
-            </a-radio-button>
-            <a-radio-button value={ThemeType.Filled}>
-              <Icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
-            </a-radio-button>
-            <a-radio-button value={ThemeType.TwoTone}>
-              <Icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
-            </a-radio-button>
-          </a-radio-group>
-           {' '}
-          <a-input-search
-            style="flex: 1 1 0%; margin-inline-start: 16px;"
-            placeholder={this.$t('app.docs.components.icon.search.placeholder')}
-            v-model:value={this.searchVal}
-          />
-        </div>
+        <a-affix offset-top={32} onChange={this.handleAffixChange}>
+          <div class={this.searchBarAffixed ? 'icons-affix icons-affixed' : 'icons-affix'}>
+            <a-radio-group value={this.theme} onChange={this.handleChangeTheme}>
+              <a-radio-button value={ThemeType.Outlined}>
+                <Icon component={OutlinedIcon} /> {this.$t('app.docs.components.icon.outlined')}
+              </a-radio-button>
+              <a-radio-button value={ThemeType.Filled}>
+                <Icon component={FilledIcon} /> {this.$t('app.docs.components.icon.filled')}
+              </a-radio-button>
+              <a-radio-button value={ThemeType.TwoTone}>
+                <Icon component={TwoToneIcon} /> {this.$t('app.docs.components.icon.two-tone')}
+              </a-radio-button>
+            </a-radio-group>
+            <a-input-search
+              style="flex: 1 1 0%; margin-inline-start: 16px;"
+              placeholder={this.$t('app.docs.components.icon.search.placeholder')}
+              v-model:value={this.searchVal}
+            />
+          </div>
+        </a-affix>
         {this.renderCategories().length === 0 ? (
           <a-empty style="padding: 12px 0;" />
         ) : (