Skip to content

Commit 1381d9f

Browse files
authored
Merge pull request #175 from PRO-Robotech/feature/dev
Search Design
2 parents 2b575ad + 262aa0b commit 1381d9f

File tree

6 files changed

+43
-16
lines changed

6 files changed

+43
-16
lines changed

package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@prorobotech/openapi-k8s-toolkit",
3-
"version": "0.0.1-alpha.122",
3+
"version": "0.0.1-alpha.123",
44
"description": "ProRobotech OpenAPI k8s tools",
55
"main": "dist/openapi-k8s-toolkit.cjs.js",
66
"module": "dist/openapi-k8s-toolkit.es.js",

src/components/atoms/Icons/DownIcon.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import React, { FC } from 'react'
22

3-
export const DownIcon: FC = () => {
3+
type TDownIconProps = {
4+
size?: number
5+
}
6+
7+
export const DownIcon: FC<TDownIconProps> = ({ size }) => {
48
return (
5-
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
9+
<svg width={size ?? 12} height={size ?? 12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
610
<g clipPath="url(#clip0_186_11488)">
711
<path
812
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/UpIcon.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import React, { FC } from 'react'
22

3-
export const UpIcon: FC = () => {
3+
type TUpIconProps = {
4+
size?: number
5+
}
6+
7+
export const UpIcon: FC<TUpIconProps> = ({ size }) => {
48
return (
5-
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
9+
<svg width={size ?? 12} height={size ?? 12} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
610
<g clipPath="url(#clip0_186_9937)">
711
<path
812
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/molecules/Search/Search.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,13 @@ export const Search: FC<TSearchProps> = ({ theme, form, constants, kindsWithVers
5151
// kind
5252
// ),
5353
label: (
54-
<div>
54+
<Flex gap={8} align="center">
5555
{bgColor.length && <Styled.Abbr $bgColor={bgColor}>{abbr}</Styled.Abbr>}
56-
{kind}
57-
<br />
58-
{version.groupVersion}
59-
</div>
56+
<Flex gap={2} vertical>
57+
<Styled.OptionLabelKind>{kind}</Styled.OptionLabelKind>
58+
<Styled.OptionLabelVersion>{version.groupVersion}</Styled.OptionLabelVersion>
59+
</Flex>
60+
</Flex>
6061
),
6162
value: `${group}~${version.version}~${version.resource}`,
6263
}
@@ -113,8 +114,10 @@ export const Search: FC<TSearchProps> = ({ theme, form, constants, kindsWithVers
113114
const checked = selectedList.includes(option.value as string)
114115

115116
return (
116-
<Flex gap={8}>
117-
<Checkbox checked={checked} />
117+
<Flex gap={8} align="center">
118+
<div>
119+
<Checkbox checked={checked} />
120+
</div>
118121
<div>{option.label as React.ReactNode}</div>
119122
</Flex>
120123
)

src/components/molecules/Search/styled.ts

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,20 @@ const MaxTagPlacheolderLength = styled.span<TMaxTagPlaceholderLengthProps>`
3232
border-radius: 20px;
3333
`
3434

35+
const OptionLabelKind = styled.div`
36+
font-size: 14px;
37+
font-style: normal;
38+
font-weight: 400;
39+
line-height: 22px;
40+
`
41+
42+
const OptionLabelVersion = styled.div`
43+
font-size: 10px;
44+
font-style: italic;
45+
font-weight: 400;
46+
line-height: 14px; /* 140% */
47+
`
48+
3549
type TBackgroundContainerProps = {
3650
$colorBorder: string
3751
$colorBgLayout: string
@@ -48,7 +62,7 @@ const BackgroundContainer = styled.div<TBackgroundContainerProps>`
4862

4963
const FormContainer = styled.div`
5064
display: grid;
51-
grid-template-columns: 2fr 10fr;
65+
grid-template-columns: 3fr 9fr;
5266
gap: 8px;
5367
`
5468

@@ -119,7 +133,7 @@ const Abbr = styled.span<TAbbrProps>`
119133
background-color: ${({ $bgColor }) => $bgColor};
120134
border-radius: 13px;
121135
padding: 2px 5px;
122-
margin-right: 10px;
136+
height: min-content;
123137
`
124138

125139
const ClearButtonHolder = styled.div`
@@ -133,6 +147,8 @@ export const Styled = {
133147
SelectTagSpan,
134148
MaxTagPlacheolder,
135149
MaxTagPlacheolderLength,
150+
OptionLabelKind,
151+
OptionLabelVersion,
136152
BackgroundContainer,
137153
FormContainer,
138154
ResetedFormItem,

0 commit comments

Comments
 (0)