Skip to content

Commit 5fc5800

Browse files
pd-redispd-redis
authored
RI-7070: RI-7072 replace eui text, eui colortext
* add/refactor text components * replace EuiText, EuiTextColor
1 parent e98b604 commit 5fc5800

File tree

213 files changed

+1530
-1382
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

213 files changed

+1530
-1382
lines changed

‎redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
import React, { useEffect, useState } from 'react'
2-
import {
3-
EuiIcon,
4-
EuiPopover,
5-
EuiSwitch,
6-
EuiTextColor,
7-
EuiToolTip,
8-
} from '@elastic/eui'
2+
import { EuiIcon, EuiPopover, EuiSwitch, EuiToolTip } from '@elastic/eui'
93
import cx from 'classnames'
104
import { ChevronDownIcon, RefreshIcon } from 'uiSrc/components/base/icons'
115
import {
@@ -18,6 +12,7 @@ import InlineItemEditor from 'uiSrc/components/inline-item-editor'
1812
import { localStorageService } from 'uiSrc/services'
1913
import { BrowserStorageItem } from 'uiSrc/constants'
2014
import { IconButton } from 'uiSrc/components/base/forms/buttons'
15+
import { ColorText } from 'uiSrc/components/base/text'
2116
import {
2217
DEFAULT_REFRESH_RATE,
2318
DURATION_FIRST_REFRESH_TIME,
@@ -209,7 +204,7 @@ const AutoRefresh = ({
209204
})}
210205
data-testid={getDataTestid('auto-refresh-container')}
211206
>
212-
<EuiTextColor className={styles.summary}>
207+
<ColorText className={styles.summary}>
213208
{displayText && (
214209
<span data-testid={getDataTestid('refresh-message-label')}>
215210
{enableAutoRefresh ? 'Auto refresh:' : 'Last refresh:'}
@@ -225,7 +220,7 @@ const AutoRefresh = ({
225220
{` ${enableAutoRefresh ? refreshRateMessage : refreshMessage}`}
226221
</span>
227222
)}
228-
</EuiTextColor>
223+
</ColorText>
229224

230225
<EuiToolTip
231226
title={!disabled && 'Last Refresh'}
@@ -282,7 +277,7 @@ const AutoRefresh = ({
282277
<div className={styles.inputContainer}>
283278
<div className={styles.inputLabel}>Refresh rate:</div>
284279
{!editingRate && (
285-
<EuiTextColor
280+
<ColorText
286281
color="subdued"
287282
className={styles.refreshRateText}
288283
onClick={() => setEditingRate(true)}
@@ -292,7 +287,7 @@ const AutoRefresh = ({
292287
<div className={styles.refreshRatePencil}>
293288
<EuiIcon type="pencil" />
294289
</div>
295-
</EuiTextColor>
290+
</ColorText>
296291
)}
297292
{editingRate && (
298293
<>
@@ -311,7 +306,7 @@ const AutoRefresh = ({
311306
onApply={(value) => handleApplyAutoRefreshRate(value)}
312307
/>
313308
</div>
314-
<EuiTextColor color="subdued">{' s'}</EuiTextColor>
309+
<ColorText color="subdued">{' s'}</ColorText>
315310
</>
316311
)}
317312
</div>

‎redisinsight/ui/src/components/base/layout/spacer/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export { Spacer } from './spacer'
2+
export type { SpacerSize } from './spacer.styles'

‎redisinsight/ui/src/components/base/text/ColorText.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import cn from 'classnames'
3+
import {
4+
ColorTextProps,
5+
StyledColorText,
6+
} from 'uiSrc/components/base/text/text.styles'
7+
8+
export const ColorText = ({
9+
color,
10+
component = 'span',
11+
className,
12+
...rest
13+
}: ColorTextProps) => (
14+
<StyledColorText
15+
{...rest}
16+
component={component}
17+
$color={color}
18+
className={cn(className, { [`color__${color}`]: !!color }, 'RI-color-text')}
19+
/>
20+
)

‎redisinsight/ui/src/components/base/text/Health.tsx‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎redisinsight/ui/src/components/base/text/HealthText.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react'
2+
import { Typography } from '@redis-ui/components'
3+
import cn from 'classnames'
4+
import { Row } from 'uiSrc/components/base/layout/flex'
5+
import { BodyProps, Indicator } from 'uiSrc/components/base/text/text.styles'
6+
7+
type ColorType = BodyProps['color'] | (string & {})
8+
export type HealthProps = Omit<BodyProps, 'color'> & {
9+
color?: ColorType
10+
}
11+
12+
export const HealthText = ({
13+
color,
14+
size = 'S',
15+
className,
16+
...rest
17+
}: HealthProps) => (
18+
<Row align="center" gap="m" justify="start">
19+
<Indicator
20+
$color={color}
21+
className={cn(`color__${color}`, 'RI-health-indicator')}
22+
/>
23+
<Typography.Body
24+
{...rest}
25+
component="div"
26+
size={size}
27+
className={cn(className, 'RI-health-text')}
28+
/>
29+
</Row>
30+
)

‎redisinsight/ui/src/components/base/text/Text.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react'
2+
import cn from 'classnames'
3+
import { BodySizesType } from '@redis-ui/components/dist/Typography/components/Body/Body.types'
4+
import { StyledText, TextProps } from 'uiSrc/components/base/text/text.styles'
5+
6+
export const Text = ({
7+
className,
8+
color,
9+
size,
10+
textAlign,
11+
...rest
12+
}: TextProps) => {
13+
const sizeMap = {
14+
size,
15+
}
16+
if (size === 'm') {
17+
sizeMap.size = 'M'
18+
} else if (size === 's') {
19+
sizeMap.size = 'S'
20+
} else if (size === 'xs') {
21+
sizeMap.size = 'XS'
22+
}
23+
return (
24+
<StyledText
25+
{...rest}
26+
className={cn(className, 'RI-text')}
27+
$color={color}
28+
$align={textAlign}
29+
size={sizeMap.size as BodySizesType}
30+
/>
31+
)
32+
}

‎redisinsight/ui/src/components/base/text/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { Text } from './Text'
2+
export { ColorText } from './ColorText'
3+
export { HealthText } from './HealthText'

‎redisinsight/ui/src/components/base/text/text.styles.ts‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React, { HTMLAttributes } from 'react'
2+
import { useTheme } from '@redis-ui/styles'
3+
import { Typography } from '@redis-ui/components'
4+
import styled, { css } from 'styled-components'
5+
import { CommonProps } from 'uiSrc/components/base/theme/types'
6+
7+
export type BodyProps = React.ComponentProps<typeof Typography.Body>
8+
9+
export type EuiColorNames =
10+
| 'default'
11+
| 'subdued'
12+
| 'danger'
13+
| 'ghost'
14+
| 'accent'
15+
| 'warning'
16+
| 'success'
17+
export type ColorType = BodyProps['color'] | EuiColorNames | (string & {})
18+
export interface MapProps extends HTMLAttributes<HTMLElement> {
19+
$color?: ColorType
20+
$align?: 'left' | 'center' | 'right'
21+
}
22+
23+
export type ColorTextProps = Omit<BodyProps, 'color' | 'size' | 'component'> & {
24+
color?: ColorType
25+
component?: 'div' | 'span'
26+
}
27+
28+
export type TextProps = Omit<
29+
React.ComponentProps<typeof Typography.Body>,
30+
'color' | 'size'
31+
> &
32+
CommonProps & {
33+
color?: ColorType
34+
size?:
35+
| React.ComponentProps<typeof Typography.Body>['size']
36+
| 'm'
37+
| 's'
38+
| 'xs'
39+
textAlign?: 'left' | 'center' | 'right'
40+
}
41+
42+
export const useColorTextStyles = ({ $color }: MapProps = {}) => {
43+
const theme = useTheme()
44+
const colors = theme.semantic.color
45+
// @ts-ignore
46+
const typographyColors = theme.components.typography.colors as Record<
47+
'primary' | 'secondary',
48+
string
49+
>
50+
const getColorValue = (color?: ColorType) => {
51+
if (!color) {
52+
return 'inherit'
53+
}
54+
switch (color) {
55+
case 'default':
56+
case 'primary':
57+
return typographyColors?.primary || colors.text.neutral800
58+
case 'secondary':
59+
return typographyColors?.secondary || colors.text.neutral700
60+
case 'subdued':
61+
return colors.text.informative400
62+
case 'danger':
63+
return colors.text.danger600
64+
case 'ghost':
65+
return colors.text.neutral600
66+
case 'accent':
67+
return colors.text.notice600
68+
case 'warning':
69+
return colors.text.attention600
70+
case 'success':
71+
return colors.text.success600
72+
default:
73+
return color // any supported color value e.g #fff
74+
}
75+
}
76+
77+
return css`
78+
color: ${getColorValue($color)};
79+
`
80+
}
81+
82+
const getAlignValue = (align?: MapProps['$align']) => {
83+
switch (align) {
84+
case 'left':
85+
return 'text-align: left'
86+
case 'center':
87+
return 'text-align: center'
88+
case 'right':
89+
return 'text-align: right'
90+
default:
91+
return ''
92+
}
93+
}
94+
95+
export const StyledColorText = styled(Typography.Body)<MapProps>`
96+
${useColorTextStyles}
97+
`
98+
export const StyledText = styled(Typography.Body)<MapProps>`
99+
${useColorTextStyles};
100+
${({ $align }) => getAlignValue($align)};
101+
`
102+
export const Indicator = styled.div<
103+
{
104+
$color: ColorType
105+
} & CommonProps
106+
>`
107+
width: 0.8rem;
108+
height: 0.8rem;
109+
border-radius: 50%;
110+
background-color: ${({ $color }) => $color || 'inherit'};
111+
`

‎redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from 'react'
22
import { useDispatch } from 'react-redux'
33
import { useParams } from 'react-router-dom'
4-
import { EuiText, EuiIcon } from '@elastic/eui'
4+
import { EuiIcon } from '@elastic/eui'
55

66
import {
77
toggleCli,
@@ -16,6 +16,7 @@ import { OnboardingTour } from 'uiSrc/components'
1616
import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
1717

1818
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
19+
import { Text } from 'uiSrc/components/base/text'
1920
import { WindowControlGroup } from 'uiSrc/components/base/shared/WindowControlGroup'
2021
import styles from './styles.module.scss'
2122

@@ -70,7 +71,7 @@ const CliHeader = () => {
7071
anchorPosition="upLeft"
7172
panelClassName={styles.cliOnboardPanel}
7273
>
73-
<EuiText>CLI</EuiText>
74+
<Text>CLI</Text>
7475
</OnboardingTour>
7576
</FlexItem>
7677
<FlexItem grow />

‎redisinsight/ui/src/components/command-helper/CommandHelper/CommandHelper.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React, { ReactElement } from 'react'
2-
import { EuiLink, EuiText, EuiTextColor } from '@elastic/eui'
2+
import { EuiLink } from '@elastic/eui'
33
import { useDispatch } from 'react-redux'
44
import { CommandGroup } from 'uiSrc/constants'
55
import { goBackFromCommand } from 'uiSrc/slices/cli/cli-settings'
66
import { getDocUrlForCommand } from 'uiSrc/utils'
7+
import { ColorText, Text } from 'uiSrc/components/base/text'
78

89
import CHCommandInfo from '../components/command-helper-info'
910
import CHSearchWrapper from '../components/command-helper-search'
@@ -78,31 +79,31 @@ const CommandHelper = (props: Props) => {
7879
onBackClick={handleBackClick}
7980
/>
8081
{summary && (
81-
<EuiText
82+
<Text
8283
className={styles.summary}
8384
color="subdued"
8485
data-testid="cli-helper-summary"
8586
>
8687
<span style={{ paddingRight: 5 }}>{summary}</span>{' '}
8788
{readMore(commandLine)}
88-
</EuiText>
89+
</Text>
8990
)}
9091
{!!argList.length && (
9192
<div
9293
className={styles.field}
9394
data-testid="cli-helper-arguments"
9495
>
95-
<EuiText color="subdued" className={styles.fieldTitle}>
96+
<Text color="subdued" className={styles.fieldTitle}>
9697
Arguments:
97-
</EuiText>
98+
</Text>
9899
{argList}
99100
</div>
100101
)}
101102
{since && (
102103
<div className={styles.field} data-testid="cli-helper-since">
103-
<EuiText color="subdued" className={styles.fieldTitle}>
104+
<Text color="subdued" className={styles.fieldTitle}>
104105
Since:
105-
</EuiText>
106+
</Text>
106107
{since}
107108
</div>
108109
)}
@@ -111,23 +112,23 @@ const CommandHelper = (props: Props) => {
111112
className={styles.field}
112113
data-testid="cli-helper-complexity"
113114
>
114-
<EuiText color="subdued" className={styles.fieldTitle}>
115+
<Text color="subdued" className={styles.fieldTitle}>
115116
Complexity:
116-
</EuiText>
117+
</Text>
117118
{complexity}
118119
</div>
119120
)}
120121
</div>
121122
)}
122123
{!commandLine && (
123-
<EuiTextColor
124+
<ColorText
124125
color="subdued"
125126
className={styles.defaultScreen}
126127
data-testid="cli-helper-default"
127128
>
128129
Enter any command in CLI or use search to see detailed
129130
information.
130-
</EuiTextColor>
131+
</ColorText>
131132
)}
132133
</div>
133134
)}

0 commit comments

Comments
 (0)