Skip to content

Commit 77a9c29

Browse files
tenphitenphi
authored
fix(tasty): style merging while wrapping (#146)
1 parent 943dbc6 commit 77a9c29

File tree

10 files changed

+118
-32
lines changed

10 files changed

+118
-32
lines changed

‎.changeset/wicked-mails-sparkle.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@cube-dev/ui-kit": patch
3+
---
4+
5+
fix(tasty): style merging while wrapping
6+
feat(preset.style): add bold-font-weight token

‎src/components/forms/Form/Field.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import {
1616
} from '../../../shared';
1717
import { CubeFormInstance } from './useForm';
1818
import { FieldWrapper } from '../FieldWrapper';
19-
import { Styles, warn } from '../../../tasty';
19+
import { warn } from '../../../utils/warnings';
20+
import { Styles } from '../../../tasty';
2021

2122
const ID_MAP = {};
2223

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ export const DEFAULT_INPUT_STYLES: Styles = {
104104
};
105105

106106
const InputElement = tasty({
107+
qa: 'Input',
107108
styles: DEFAULT_INPUT_STYLES,
108109
});
109110

@@ -265,7 +266,6 @@ function TextInputBase(props: CubeTextInputBaseProps, ref) {
265266
{...wrapperProps}
266267
>
267268
<InputElement
268-
qa="Input"
269269
as={ElementType}
270270
{...mergeProps(inputProps, focusProps, hoverProps)}
271271
ref={inputRef}

‎src/tasty/__snapshots__/tasty.test.tsx.snap

+44-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,46 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`tasty() API should allow multiple wrapping 1`] = `
4+
.c0 {
5+
outline: none;
6+
}
7+
8+
.c0[hidden] {
9+
display: none !important;
10+
}
11+
12+
.c0 {
13+
position: static;
14+
}
15+
16+
.c0 {
17+
padding-top: calc(2 * var(--gap));
18+
}
19+
20+
.c0 {
21+
border: var(--border-width) solid var(--black-color);
22+
}
23+
24+
.c0 {
25+
color: var(--white-color,rgba(0,0,0,1));
26+
--current-color: var(--white-color,white);
27+
--current-color-rgb: var(--white-color-rgb);
28+
}
29+
30+
.c0 {
31+
display: -webkit-box;
32+
display: -webkit-flex;
33+
display: -ms-flexbox;
34+
display: flex;
35+
}
36+
37+
<div>
38+
<div
39+
class="c0"
40+
/>
41+
</div>
42+
`;
43+
344
exports[`tasty() API should be able to override styles 1`] = `
445
.c0 {
546
outline: none;
@@ -10,9 +51,9 @@ exports[`tasty() API should be able to override styles 1`] = `
1051
}
1152
1253
.c0 {
13-
color: rgba(var(--clear-color-rgb),0.1);
14-
--current-color: var(--clear-color,clear);
15-
--current-color-rgb: var(--clear-color-rgb);
54+
color: rgba(var(--black-color-rgb),0.1);
55+
--current-color: var(--black-color,black);
56+
--current-color-rgb: var(--black-color-rgb);
1657
}
1758
1859
<div>

‎src/tasty/styles/preset.ts

+27-22
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
11
import { parseStyle } from '../utils/styles';
2+
import { Styles } from './types';
3+
4+
function setCSSValue(
5+
styles: Styles,
6+
styleName: string,
7+
presetName: string,
8+
isPropOnly = false,
9+
) {
10+
styles[`--${styleName}`] =
11+
presetName === 'inherit'
12+
? 'inherit'
13+
: `var(--${presetName}-${styleName}, var(--default-${styleName}, inherit))`;
14+
15+
if (!isPropOnly) {
16+
styles[styleName] = styles[`--${styleName}`];
17+
}
18+
}
219

320
export function presetStyle({
421
preset,
@@ -18,50 +35,38 @@ export function presetStyle({
1835

1936
const name = mods[0] || 'default';
2037

21-
const styles: Record<string, any> = {};
38+
const styles: Styles = {};
2239

2340
if (!fontSize) {
24-
styles['font-size'] = styles[
25-
'--font-size'
26-
] = `var(--${name}-font-size, var(--initial-font-size, inherit))`;
41+
setCSSValue(styles, 'font-size', name);
2742
}
2843

2944
if (!lineHeight) {
30-
styles['line-height'] = styles[
31-
'--line-height'
32-
] = `var(--${name}-line-height, var(--initial-line-height, 1.5))`;
45+
setCSSValue(styles, 'line-height', name);
3346
}
3447

3548
if (!letterSpacing) {
36-
styles['letter-spacing'] = styles[
37-
'--letter-spacing'
38-
] = `var(--${name}-letter-spacing, var(--initial-letter-spacing, 0))`;
49+
setCSSValue(styles, 'letter-spacing', name);
3950
}
4051

4152
if (!fontWeight) {
42-
styles['font-weight'] = styles[
43-
'--font-weight'
44-
] = `var(--${name}-font-weight, var(--initial-font-weight, 400))`;
53+
setCSSValue(styles, 'font-weight', name);
4554
}
4655

4756
if (!fontStyle) {
48-
styles['font-style'] = styles[
49-
'--font-style'
50-
] = `var(--${name}-font-style, var(--initial-font-style, normal))`;
57+
setCSSValue(styles, 'font-style', name);
5158
}
5259

5360
if (!textTransform) {
54-
styles['text-transform'] = styles[
55-
'--text-transform'
56-
] = `var(--${name}-text-transform, var(--initial-text-transform, none))`;
61+
setCSSValue(styles, 'text-transform', name);
5762
}
5863

5964
if (!font) {
60-
styles['font-family'] = styles[
61-
'--font-family'
62-
] = `var(--${name}-font-family, var(--font))`;
65+
setCSSValue(styles, 'font-family', name);
6366
}
6467

68+
setCSSValue(styles, 'bold-font-weight', name, true);
69+
6570
return styles;
6671
}
6772

‎src/tasty/styles/types.ts

+4
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@ export interface StylesInterface
8383
* Whether the element has styled scrollbar.
8484
*/
8585
styledScrollbar?: boolean;
86+
/**
87+
* Set font weight for bold texts.
88+
*/
89+
boldFontWeight?: number;
8690
/**
8791
* Whether the element is hidden using `display: none`.
8892
*/

‎src/tasty/tasty.test.tsx

+28-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { tasty } from './tasty';
33
import { Button } from '../components/actions';
44
import { Block } from '../components/Block';
55
import { CONTAINER_STYLES } from './styles/list';
6-
import { Card } from '../components/content/Card/Card';
76

87
describe('tasty() API', () => {
98
beforeEach(() => {
@@ -124,4 +123,32 @@ describe('tasty() API', () => {
124123

125124
expect(container).toMatchSnapshot();
126125
});
126+
127+
it('should allow multiple wrapping', () => {
128+
const Block = tasty({
129+
styles: {
130+
position: 'relative',
131+
padding: '1x top',
132+
border: true,
133+
},
134+
styleProps: CONTAINER_STYLES,
135+
});
136+
const SecondBlock = tasty(Block, {
137+
styles: {
138+
border: false,
139+
},
140+
});
141+
const ThirdBlock = tasty(SecondBlock, {
142+
styles: {
143+
position: 'static',
144+
padding: '2x top',
145+
color: '#white',
146+
border: '#black',
147+
},
148+
});
149+
150+
const { container } = render(<ThirdBlock display="flex" />);
151+
152+
expect(container).toMatchSnapshot();
153+
});
127154
});

‎src/tasty/tasty.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ function tasty<K extends StyleList, C = Record<string, unknown>>(
109109
const mergedStylesMap: Styles | undefined = useMemo(() => {
110110
return propsWithStyles.reduce((map, prop) => {
111111
if (restProps[prop] != null && defaultProps[prop] != null) {
112-
map[prop] = mergeStyles(restProps[prop], defaultProps[prop]);
112+
map[prop] = mergeStyles(defaultProps[prop], restProps[prop]);
113113
} else {
114114
map[prop] = restProps[prop] || defaultProps[prop];
115115
}

‎src/tasty/utils/styles.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -616,12 +616,11 @@ export function extractStyles(
616616

617617
Object.keys(props).forEach((prop) => {
618618
const propName = propMap ? propMap[prop] || prop : prop;
619-
const isPropExist = prop in props;
620619
const value = props[prop];
621620

622621
if (ignoreList && ignoreList.includes(prop)) {
623622
// do nothing
624-
} else if (styleList.includes(propName) && isPropExist) {
623+
} else if (styleList.includes(propName)) {
625624
styles[propName] = value;
626625
}
627626
}, {});

‎src/tokens.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ const TOKENS = {
123123
// h6 (unused)
124124
'h6-font-size': '14px',
125125
'h6-line-height': '20px',
126+
'h6-letter-spacing': '0',
126127
'h6-font-weight': '700',
127128
// t1
128129
't1-font-size': '18px',
@@ -207,7 +208,8 @@ const TOKENS = {
207208
'strong-letter-spacing': 'inherit',
208209
'strong-font-family': 'inherit',
209210
'strong-font-style': 'inherit',
210-
'strong-font-weight': 600,
211+
'strong-font-weight':
212+
'var(--bold-font-weight, var(--default-bold-font-weight, 600))',
211213
// em
212214
'em-font-size': 'inherit',
213215
'em-line-height': 'inherit',
@@ -220,6 +222,7 @@ const TOKENS = {
220222
'default-line-height': 'var(--t3-line-height)',
221223
'default-letter-spacing': 'var(--t3-letter-spacing)',
222224
'default-font-weight': 'var(--t3-font-weight)',
225+
'default-bold-font-weight': '600',
223226
// scrollbar colors
224227
'scrollbar-width': '1.5x',
225228
'scrollbar-outline-width': '1ow',

0 commit comments

Comments
 (0)