Skip to content

Commit a6ac3cb

Browse files
tenphitenphi
committed
fix: focus state
1 parent 03288f4 commit a6ac3cb

File tree

7 files changed

+87
-83
lines changed

7 files changed

+87
-83
lines changed

‎.changeset/early-hotels-rule.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cube-dev/ui-kit": patch
3+
---
4+
5+
Fix focus state for multiple input components.

‎src/components/fields/Checkbox/Checkbox.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,10 @@ const CheckboxElement = tasty({
9595
width: '(2x - 2bw)',
9696
height: '(2x - 2bw)',
9797
outline: {
98-
'': '#purple-03.0',
99-
focused: '#purple-03',
98+
'': '#purple-text.0',
99+
focused: '1bw #purple-text',
100100
},
101+
outlineOffset: 1,
101102
transition: 'theme',
102103
},
103104
});

‎src/components/fields/RadioGroup/Radio.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,9 +101,10 @@ const RadioButtonElement = tasty({
101101
disabled: 0.5,
102102
},
103103
outline: {
104-
'': '#purple-03.0',
105-
focused: '#purple-03',
104+
'': '#purple-text.0',
105+
focused: '1bw #purple-text',
106106
},
107+
outlineOffset: 1,
107108
transition: 'theme',
108109
whiteSpace: 'nowrap',
109110
},
@@ -133,9 +134,10 @@ const RadioNormalElement = tasty({
133134
width: '2x',
134135
height: '2x',
135136
outline: {
136-
'': '#purple-03.0',
137-
focused: '#purple-03',
137+
'': '#purple-text.0',
138+
focused: '1bw #purple-text',
138139
},
140+
outlineOffset: 1,
139141
transition: 'theme',
140142
whiteSpace: 'nowrap',
141143

‎src/components/fields/Select/Select.tsx‎

Lines changed: 64 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,33 @@ import {
4343
import { mergeProps, useCombinedRefs } from '../../../utils/react/index';
4444
import { useFocus } from '../../../utils/react/interactions';
4545
import { getOverlayTransitionCSS } from '../../../utils/transitions';
46-
import { DEFAULT_BUTTON_STYLES } from '../../actions/index';
46+
import {
47+
DANGER_CLEAR_STYLES,
48+
DANGER_LINK_STYLES,
49+
DANGER_NEUTRAL_STYLES,
50+
DANGER_OUTLINE_STYLES,
51+
DANGER_PRIMARY_STYLES,
52+
DANGER_SECONDARY_STYLES,
53+
DEFAULT_BUTTON_STYLES,
54+
DEFAULT_CLEAR_STYLES,
55+
DEFAULT_LINK_STYLES,
56+
DEFAULT_NEUTRAL_STYLES,
57+
DEFAULT_OUTLINE_STYLES,
58+
DEFAULT_PRIMARY_STYLES,
59+
DEFAULT_SECONDARY_STYLES,
60+
SPECIAL_CLEAR_STYLES,
61+
SPECIAL_LINK_STYLES,
62+
SPECIAL_NEUTRAL_STYLES,
63+
SPECIAL_OUTLINE_STYLES,
64+
SPECIAL_PRIMARY_STYLES,
65+
SPECIAL_SECONDARY_STYLES,
66+
SUCCESS_CLEAR_STYLES,
67+
SUCCESS_LINK_STYLES,
68+
SUCCESS_NEUTRAL_STYLES,
69+
SUCCESS_OUTLINE_STYLES,
70+
SUCCESS_PRIMARY_STYLES,
71+
SUCCESS_SECONDARY_STYLES,
72+
} from '../../actions/index';
4773
import { useFieldProps, useFormProps, wrapWithField } from '../../form';
4874
import { OverlayWrapper } from '../../overlays/OverlayWrapper';
4975
import { InvalidIcon } from '../../shared/InvalidIcon';
@@ -108,70 +134,45 @@ const SelectWrapperElement = tasty({
108134
},
109135
});
110136

137+
type VariantType =
138+
| 'default.primary'
139+
| 'default.secondary'
140+
| 'default.outline'
141+
| 'default.neutral'
142+
| 'default.clear'
143+
| 'default.link'
144+
| 'special.primary'
145+
| 'special.secondary'
146+
| 'special.outline'
147+
| 'special.neutral'
148+
| 'special.clear'
149+
| 'special.link';
150+
111151
const SelectElement = tasty({
112152
as: 'button',
113153
qa: 'Button',
114154
styles: {
115155
...INPUT_WRAPPER_STYLES,
116156
...DEFAULT_BUTTON_STYLES,
117-
preset: 't3m',
118-
cursor: 'pointer',
119-
padding: '0',
120-
gap: '0',
121-
border: {
122-
'': true,
123-
valid: '#success-text.50',
124-
invalid: '#danger-text.50',
125-
'[data-type="primary"]': '#clear',
126-
'[data-type="clear"]': '#clear',
127-
'[data-theme="special"] & [data-type="secondary"] & pressed': '#white.44',
128-
disabled: true,
129-
},
130-
fill: {
131-
'': '#clear',
132-
'[data-type="primary"]': '#purple',
133-
'[data-type="primary"] & pressed': '#purple',
134-
'[data-type="primary"] & hovered': '#purple-text',
135-
136-
'[data-type="secondary"]': '#dark.0',
137-
'[data-type="secondary"] & hovered': '#dark.04',
138-
'[data-type="secondary"] & pressed': '#dark.05',
139-
140-
'[disabled]': '#dark.04',
141-
142-
'([data-type="clear"] | [data-type="outline"])': '#purple.0',
143-
'([data-type="clear"] | [data-type="outline"]) & hovered': '#purple.16',
144-
'([data-type="clear"] | [data-type="outline"]) & pressed': '#purple.10',
145-
'([data-type="clear"] | [data-type="outline"]) & [disabled]': '#purple.0',
146-
147-
// special
148-
'[data-theme="special"] & [data-type="secondary"]': '#white.12',
149-
150-
'[data-theme="special"] & [data-type="clear"]': '#white',
151-
'[data-theme="special"] & [data-type="clear"] & hovered': '#white.94',
152-
'[data-theme="special"] & [data-type="clear"] & pressed': '#white',
153-
154-
'[data-theme="special"] & [disabled]': '#white.12',
155-
156-
'[data-theme="special"] & [data-type="clear"] & [disabled]': '#white.0',
157-
},
158-
color: {
159-
'': '#white',
160-
161-
'[data-type="secondary"]': '#dark-02',
162-
'[data-type="secondary"] & hovered': '#dark-02',
163-
'[data-type="clear"]': '#purple-text',
164-
'[data-type="secondary"] & pressed': '#purple',
165-
166-
'[disabled]': '#dark.30',
167-
168-
// special
169-
'[data-theme="special"]': '#white',
170-
'[data-theme="special"] & [data-type="clear"]': '#purple',
171-
172-
// other
173-
'[data-theme="special"] & [disabled]': '#white.30',
174-
},
157+
padding: 0,
158+
gap: 0,
159+
},
160+
variants: {
161+
// Default theme
162+
'default.primary': DEFAULT_PRIMARY_STYLES,
163+
'default.secondary': DEFAULT_SECONDARY_STYLES,
164+
'default.outline': DEFAULT_OUTLINE_STYLES,
165+
'default.neutral': DEFAULT_NEUTRAL_STYLES,
166+
'default.clear': DEFAULT_CLEAR_STYLES,
167+
'default.link': DEFAULT_LINK_STYLES,
168+
169+
// Special theme
170+
'special.primary': SPECIAL_PRIMARY_STYLES,
171+
'special.secondary': SPECIAL_SECONDARY_STYLES,
172+
'special.outline': SPECIAL_OUTLINE_STYLES,
173+
'special.neutral': SPECIAL_NEUTRAL_STYLES,
174+
'special.clear': SPECIAL_CLEAR_STYLES,
175+
'special.link': SPECIAL_LINK_STYLES,
175176
},
176177
});
177178

@@ -255,8 +256,9 @@ export interface CubeSelectBaseProps<T>
255256
direction?: 'top' | 'bottom';
256257
shouldFlip?: boolean;
257258
inputProps?: Props;
258-
type?: 'secondary' | 'clear' | 'primary' | (string & {});
259+
type?: 'outline' | 'clear' | 'primary' | (string & {});
259260
suffixPosition?: 'before' | 'after';
261+
theme?: 'default' | 'special';
260262
}
261263

262264
export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
@@ -317,7 +319,7 @@ function Select<T extends object>(
317319
tooltip,
318320
size,
319321
styles,
320-
type = 'secondary',
322+
type = 'outline',
321323
theme = 'default',
322324
labelSuffix,
323325
ellipsis,
@@ -424,6 +426,7 @@ function Select<T extends object>(
424426
{...mergeProps(buttonProps, hoverProps, focusProps)}
425427
ref={triggerRef}
426428
styles={inputStyles}
429+
variant={`${theme}.${type}` as VariantType}
427430
data-theme={theme}
428431
data-size={size}
429432
data-type={type}

‎src/components/fields/Slider/elements.ts‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,17 @@ export const SliderThumbElement = tasty({
1313
disabled: '#dark-04',
1414
},
1515
cursor: 'pointer',
16-
boxShadow: '@focus-shadow, @dragged-shadow, @drop-shadow',
16+
outline: {
17+
'': '#purple-text.0',
18+
focused: '1bw #purple-text',
19+
},
20+
outlineOffset: 1,
1721
radius: '50%',
1822
transition: 'theme',
1923
zIndex: {
2024
'': 0,
2125
'collapsed & !stuck': 1,
2226
},
23-
24-
'@drop-shadow': '0px 2px 4px #dark.2',
25-
'@focus-shadow': {
26-
'': '0 0 0 0 #purple-03.80',
27-
focused: '0 0 0 3px #purple-03.80',
28-
},
29-
'@dragged-shadow': {
30-
'': 'inset 0 0 0 0 #purple-text',
31-
dragged: 'inset 0 0 0 2px #purple-text',
32-
},
3327
},
3428
});
3529

‎src/components/fields/Switch/Switch.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,10 @@ const SwitchElement = tasty({
7272
'[data-size="small"]': '2.5x 2.5x',
7373
},
7474
outline: {
75-
'': '#purple-03.0',
76-
focused: '#purple-03',
75+
'': '#purple-text.0',
76+
focused: '1bw #purple-text',
7777
},
78+
outlineOffset: 1,
7879
transition: 'theme',
7980
cursor: 'pointer',
8081
shadow: {

‎src/components/fields/TextInput/TextInputBase.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,16 +58,14 @@ export const INPUT_WRAPPER_STYLES: Styles = {
5858
},
5959
border: {
6060
'': true,
61-
focused: true,
61+
focused: '#purple-text',
6262
valid: '#success-text.50',
6363
invalid: '#danger-text.50',
6464
disabled: true,
6565
},
6666
outline: {
6767
'': '#purple-03.0',
68-
focused: '#purple-03',
6968
'invalid & focused': '#danger.50',
70-
'valid & focused': '#success.50',
7169
},
7270
radius: true,
7371
cursor: 'text',

0 commit comments

Comments
 (0)