Merge pull request #175 from PRO-Robotech/feature/dev

Search Design

Author: typescreep

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@prorobotech/openapi-k8s-toolkit",
-  "version": "0.0.1-alpha.122",
+  "version": "0.0.1-alpha.123",
   "description": "ProRobotech OpenAPI k8s tools",
   "main": "dist/openapi-k8s-toolkit.cjs.js",
   "module": "dist/openapi-k8s-toolkit.es.js",

package.json

@@ -1,8 +1,12 @@
 import React, { FC } from 'react'
 
-export const DownIcon: FC = () => {
+type TDownIconProps = {
+  size?: number
+}
+
+export const DownIcon: FC<TDownIconProps> = ({ size }) => {
   return (
-    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={size ?? 12} height={size ?? 12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clipPath="url(#clip0_186_11488)">
         <path
           d="M5.66281 2.60223L0.947189 8.63973C0.934768 8.65551 0.92705 8.67447 0.924919 8.69443C0.922788 8.7144 0.926332 8.73456 0.935143 8.7526C0.943955 8.77064 0.957676 8.78583 0.974732 8.79643C0.991787 8.80702 1.01149 8.81259 1.03156 8.8125L2.06683 8.8125C2.13246 8.8125 2.1954 8.7817 2.23558 8.7308L6.00031 3.90937L9.76505 8.7308C9.80522 8.78303 9.86817 8.8125 9.9338 8.8125L10.9691 8.8125C11.0588 8.8125 11.1083 8.70937 11.0534 8.63973L6.33781 2.60223C6.29779 2.55092 6.24658 2.5094 6.1881 2.48085C6.12962 2.4523 6.06539 2.43746 6.00031 2.43746C5.93523 2.43746 5.87101 2.4523 5.81253 2.48085C5.75404 2.5094 5.70284 2.55092 5.66281 2.60223Z"

src/components/atoms/Icons/DownIcon.tsx

@@ -1,8 +1,12 @@
 import React, { FC } from 'react'
 
-export const UpIcon: FC = () => {
+type TUpIconProps = {
+  size?: number
+}
+
+export const UpIcon: FC<TUpIconProps> = ({ size }) => {
   return (
-    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={size ?? 12} height={size ?? 12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clipPath="url(#clip0_186_9937)">
         <path
           d="M6.33719 9.39777L11.0528 3.36027C11.0652 3.34449 11.073 3.32553 11.0751 3.30557C11.0772 3.2856 11.0737 3.26544 11.0649 3.2474C11.056 3.22936 11.0423 3.21417 11.0253 3.20357C11.0082 3.19298 10.9885 3.18741 10.9684 3.1875L9.93317 3.1875C9.86754 3.1875 9.8046 3.2183 9.76442 3.2692L5.99969 8.09063L2.23495 3.2692C2.19478 3.21697 2.13183 3.1875 2.0662 3.1875L1.03094 3.1875C0.941204 3.1875 0.89165 3.29063 0.946561 3.36027L5.66219 9.39777C5.70221 9.44908 5.75342 9.4906 5.8119 9.51915C5.87038 9.5477 5.93461 9.56254 5.99969 9.56254C6.06477 9.56254 6.12899 9.5477 6.18747 9.51915C6.24596 9.4906 6.29716 9.44908 6.33719 9.39777Z"

src/components/atoms/Icons/UpIcon.tsx

@@ -51,12 +51,13 @@ export const Search: FC<TSearchProps> = ({ theme, form, constants, kindsWithVers
         //   kind
         // ),
         label: (
-          <div>
+          <Flex gap={8} align="center">
             {bgColor.length && <Styled.Abbr $bgColor={bgColor}>{abbr}</Styled.Abbr>}
-            {kind}
-            <br />
-            {version.groupVersion}
-          </div>
+            <Flex gap={2} vertical>
+              <Styled.OptionLabelKind>{kind}</Styled.OptionLabelKind>
+              <Styled.OptionLabelVersion>{version.groupVersion}</Styled.OptionLabelVersion>
+            </Flex>
+          </Flex>
         ),
         value: `${group}~${version.version}~${version.resource}`,
       }
@@ -113,8 +114,10 @@ export const Search: FC<TSearchProps> = ({ theme, form, constants, kindsWithVers
     const checked = selectedList.includes(option.value as string)
 
     return (
-      <Flex gap={8}>
-        <Checkbox checked={checked} />
+      <Flex gap={8} align="center">
+        <div>
+          <Checkbox checked={checked} />
+        </div>
         <div>{option.label as React.ReactNode}</div>
       </Flex>
     )

src/components/molecules/Search/Search.tsx

@@ -32,6 +32,20 @@ const MaxTagPlacheolderLength = styled.span<TMaxTagPlaceholderLengthProps>`
   border-radius: 20px;
 `
 
+const OptionLabelKind = styled.div`
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+`
+
+const OptionLabelVersion = styled.div`
+  font-size: 10px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 14px; /* 140% */
+`
+
 type TBackgroundContainerProps = {
   $colorBorder: string
   $colorBgLayout: string
@@ -48,7 +62,7 @@ const BackgroundContainer = styled.div<TBackgroundContainerProps>`
 
 const FormContainer = styled.div`
   display: grid;
-  grid-template-columns: 2fr 10fr;
+  grid-template-columns: 3fr 9fr;
   gap: 8px;
 `
 
@@ -119,7 +133,7 @@ const Abbr = styled.span<TAbbrProps>`
   background-color: ${({ $bgColor }) => $bgColor};
   border-radius: 13px;
   padding: 2px 5px;
-  margin-right: 10px;
+  height: min-content;
 `
 
 const ClearButtonHolder = styled.div`
@@ -133,6 +147,8 @@ export const Styled = {
   SelectTagSpan,
   MaxTagPlacheolder,
   MaxTagPlacheolderLength,
+  OptionLabelKind,
+  OptionLabelVersion,
   BackgroundContainer,
   FormContainer,
   ResetedFormItem,