@toptal/picasso 15.1.1 → 16.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Indicator/Indicator.d.ts +1 -1
- package/Indicator/styles.d.ts +1 -1
- package/Indicator/styles.js +5 -5
- package/Indicator/styles.js.map +1 -1
- package/Select/hooks/use-highlighted-index/use-highlighted-index.js +3 -1
- package/Select/hooks/use-highlighted-index/use-highlighted-index.js.map +1 -1
- package/Tag/Tag.d.ts +1 -1
- package/Tag/Tag.js +3 -3
- package/Tag/Tag.js.map +1 -1
- package/Tag/styles.d.ts +1 -1
- package/Tag/styles.js +5 -5
- package/Tag/styles.js.map +1 -1
- package/TagCheckable/TagCheckable.js +1 -1
- package/TagCheckable/TagCheckable.js.map +1 -1
- package/TagRectangular/TagRectangular.d.ts +1 -1
- package/TagRectangular/TagRectangular.js +3 -3
- package/TagRectangular/TagRectangular.js.map +1 -1
- package/TagRectangular/styles.d.ts +1 -1
- package/TagRectangular/styles.js +5 -5
- package/TagRectangular/styles.js.map +1 -1
- package/package.json +2 -2
package/Indicator/Indicator.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BaseProps } from '@toptal/picasso-shared';
|
|
3
|
-
declare type ColorType = '
|
|
3
|
+
declare type ColorType = 'red' | 'yellow' | 'blue' | 'green' | 'light-grey';
|
|
4
4
|
export interface Props extends BaseProps {
|
|
5
5
|
/** Indicator color */
|
|
6
6
|
color: ColorType;
|
package/Indicator/styles.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { Theme } from '@material-ui/core/styles';
|
|
2
|
-
declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "
|
|
2
|
+
declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "blue" | "green" | "red" | "yellow" | "root" | "light-grey">;
|
|
3
3
|
export default _default;
|
package/Indicator/styles.js
CHANGED
|
@@ -5,19 +5,19 @@ export default ({ palette }) => createStyles({
|
|
|
5
5
|
height: '0.5rem',
|
|
6
6
|
borderRadius: '50%'
|
|
7
7
|
},
|
|
8
|
-
|
|
8
|
+
red: {
|
|
9
9
|
background: palette.red.main
|
|
10
10
|
},
|
|
11
|
-
|
|
11
|
+
yellow: {
|
|
12
12
|
background: palette.yellow.main
|
|
13
13
|
},
|
|
14
|
-
|
|
14
|
+
blue: {
|
|
15
15
|
background: palette.blue.main
|
|
16
16
|
},
|
|
17
|
-
|
|
17
|
+
green: {
|
|
18
18
|
background: palette.green.dark
|
|
19
19
|
},
|
|
20
|
-
light: {
|
|
20
|
+
'light-grey': {
|
|
21
21
|
background: palette.grey.light2
|
|
22
22
|
}
|
|
23
23
|
});
|
package/Indicator/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Indicator/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,QAAQ;QAChB,YAAY,EAAE,KAAK;KACpB;IACD,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Indicator/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,QAAQ;QAChB,YAAY,EAAE,KAAK;KACpB;IACD,GAAG,EAAE;QACH,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;KAC7B;IACD,MAAM,EAAE;QACN,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;KAChC;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KAC9B;IACD,KAAK,EAAE;QACL,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI;KAC/B;IACD,YAAY,EAAE;QACZ,UAAU,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KAChC;CACF,CAAC,CAAA"}
|
|
@@ -6,7 +6,9 @@ const useHighlightedIndex = ({ flatOptions, isOpen, selection }) => {
|
|
|
6
6
|
const handleChange = useCallback((nextIndex) => !flatOptions[nextIndex].disabled && setHighlightedIndex(nextIndex), [flatOptions]);
|
|
7
7
|
// Reset index on close/options change
|
|
8
8
|
useEffect(() => {
|
|
9
|
-
const
|
|
9
|
+
const hasSelectedAndNonDisabledOption = selectedIndicies.length === 1 &&
|
|
10
|
+
!flatOptions[selectedIndicies[0]].disabled;
|
|
11
|
+
const nextHighlightedIndex = hasSelectedAndNonDisabledOption
|
|
10
12
|
? selectedIndicies[0]
|
|
11
13
|
: nonDisabledIndicies[0];
|
|
12
14
|
setHighlightedIndex(nextHighlightedIndex);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-highlighted-index.js","sourceRoot":"","sources":["../../../../src/Select/hooks/use-highlighted-index/use-highlighted-index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAUjE,MAAM,mBAAmB,GAAG,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAS,EAAE,EAAE;IACxE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAE3D,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CACH,WAAW,CAAC,MAAM,CAChB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CACrB,SAAS,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAC5D,EAAc,CACf,EACH,CAAC,SAAS,EAAE,WAAW,CAAC,CACzB,CAAA;IAED,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CACH,WAAW,CAAC,MAAM,CAChB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAClE,EAAc,CACf,EACH,CAAC,WAAW,CAAC,CACd,CAAA;IAED,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAAiB,EAAE,EAAE,CACpB,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,QAAQ,IAAI,mBAAmB,CAAC,SAAS,CAAC,EACpE,CAAC,WAAW,CAAC,CACd,CAAA;IAED,sCAAsC;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,
|
|
1
|
+
{"version":3,"file":"use-highlighted-index.js","sourceRoot":"","sources":["../../../../src/Select/hooks/use-highlighted-index/use-highlighted-index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAUjE,MAAM,mBAAmB,GAAG,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAS,EAAE,EAAE;IACxE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAE3D,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CACH,WAAW,CAAC,MAAM,CAChB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CACrB,SAAS,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAC5D,EAAc,CACf,EACH,CAAC,SAAS,EAAE,WAAW,CAAC,CACzB,CAAA;IAED,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CACH,WAAW,CAAC,MAAM,CAChB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAClE,EAAc,CACf,EACH,CAAC,WAAW,CAAC,CACd,CAAA;IAED,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAAiB,EAAE,EAAE,CACpB,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,QAAQ,IAAI,mBAAmB,CAAC,SAAS,CAAC,EACpE,CAAC,WAAW,CAAC,CACd,CAAA;IAED,sCAAsC;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,+BAA+B,GACnC,gBAAgB,CAAC,MAAM,KAAK,CAAC;YAC7B,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;QAE5C,MAAM,oBAAoB,GAAG,+BAA+B;YAC1D,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;YACrB,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAA;QAE1B,mBAAmB,CAAC,oBAAoB,CAAC,CAAA;QAEzC,uDAAuD;IACzD,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAA;IAEzB,OAAO,CAAC,gBAAgB,EAAE,YAAY,CAAU,CAAA;AAClD,CAAC,CAAA;AAED,eAAe,mBAAmB,CAAA"}
|
package/Tag/Tag.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export interface Props extends BaseProps, TextLabelProps, DivOrAnchorProps {
|
|
|
16
16
|
*/
|
|
17
17
|
onDelete?: () => void;
|
|
18
18
|
/** Variant of the `Tag` */
|
|
19
|
-
variant?: 'light' | '
|
|
19
|
+
variant?: 'light-grey' | 'blue' | 'green' | 'yellow' | 'red';
|
|
20
20
|
/** ReactNode rendered after label */
|
|
21
21
|
endAdornment?: ReactNode;
|
|
22
22
|
hovered?: boolean;
|
package/Tag/Tag.js
CHANGED
|
@@ -24,7 +24,7 @@ import TagCheckable from '../TagCheckable';
|
|
|
24
24
|
const useStyles = makeStyles(styles, { name: 'PicassoLabel' });
|
|
25
25
|
// eslint-disable-next-line react/display-name
|
|
26
26
|
export const Tag = forwardRef(function Tag(props, ref) {
|
|
27
|
-
const { as = 'div', className, disabled, endAdornment, hovered, children, icon, onDelete, style, titleCase: propsTitleCase, variant = 'light' } = props, rest = __rest(props
|
|
27
|
+
const { as = 'div', className, disabled, endAdornment, hovered, children, icon, onDelete, style, titleCase: propsTitleCase, variant = 'light-grey' } = props, rest = __rest(props
|
|
28
28
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
29
29
|
, ["as", "className", "disabled", "endAdornment", "hovered", "children", "icon", "onDelete", "style", "titleCase", "variant"]);
|
|
30
30
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -52,7 +52,7 @@ export const Tag = forwardRef(function Tag(props, ref) {
|
|
|
52
52
|
[classes.disabled]: disabled
|
|
53
53
|
}), style: style, icon: icon
|
|
54
54
|
? React.cloneElement(icon, {
|
|
55
|
-
color: disabled ? 'grey' : '
|
|
55
|
+
color: disabled ? 'grey' : 'dark-grey'
|
|
56
56
|
})
|
|
57
57
|
: undefined, label: label, deleteIcon: React.createElement("span", { "aria-label": 'delete icon', role: 'button', className: classes.deleteIcon },
|
|
58
58
|
React.createElement(CloseMinor16, null)), component: as, onDelete: onDelete ? handleDelete : undefined, "aria-disabled": disabled })));
|
|
@@ -60,7 +60,7 @@ export const Tag = forwardRef(function Tag(props, ref) {
|
|
|
60
60
|
Tag.defaultProps = {
|
|
61
61
|
as: 'div',
|
|
62
62
|
children: '',
|
|
63
|
-
variant: 'light'
|
|
63
|
+
variant: 'light-grey'
|
|
64
64
|
};
|
|
65
65
|
Tag.displayName = 'Tag';
|
|
66
66
|
export { useStyles };
|
package/Tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EAOX,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAA6B,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,WAAW,MAAM,wBAAwB,CAAA;AAChD,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAC5C,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAyB1C,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAA;AAErE,8CAA8C;AAC9C,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAAwB,SAAS,GAAG,CAAC,KAAK,EAAE,GAAG;IAC1E,MAAM,EACJ,EAAE,GAAG,KAAK,EACV,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EAAE,cAAc,EACzB,OAAO,GAAG,
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"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"}
|
package/Tag/styles.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { Theme } from '@material-ui/core/styles';
|
|
2
2
|
import '../Chip/styles';
|
|
3
|
-
declare const _default: ({ palette, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "
|
|
3
|
+
declare const _default: ({ palette, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "blue" | "green" | "red" | "yellow" | "disabled" | "label" | "root" | "hovered" | "clickable" | "deleteIcon" | "innerLabel" | "connection" | "checkable">;
|
|
4
4
|
export default _default;
|
package/Tag/styles.js
CHANGED
|
@@ -5,19 +5,19 @@ export default ({ palette, transitions }) => createStyles({
|
|
|
5
5
|
fontSize: '1rem',
|
|
6
6
|
maxWidth: '100%'
|
|
7
7
|
},
|
|
8
|
-
|
|
8
|
+
blue: {
|
|
9
9
|
color: palette.blue.main,
|
|
10
10
|
borderColor: palette.blue.main
|
|
11
11
|
},
|
|
12
|
-
|
|
12
|
+
green: {
|
|
13
13
|
color: palette.green.dark,
|
|
14
14
|
borderColor: palette.green.dark
|
|
15
15
|
},
|
|
16
|
-
|
|
16
|
+
yellow: {
|
|
17
17
|
color: palette.yellow.main,
|
|
18
18
|
borderColor: palette.yellow.main
|
|
19
19
|
},
|
|
20
|
-
|
|
20
|
+
red: {
|
|
21
21
|
color: palette.red.main,
|
|
22
22
|
borderColor: palette.red.main
|
|
23
23
|
},
|
|
@@ -51,7 +51,7 @@ export default ({ palette, transitions }) => createStyles({
|
|
|
51
51
|
'&:focus': {
|
|
52
52
|
backgroundColor: palette.common.white
|
|
53
53
|
},
|
|
54
|
-
'&$
|
|
54
|
+
'&$green': {
|
|
55
55
|
'&:hover, &$hovered': {
|
|
56
56
|
borderColor: palette.red.main,
|
|
57
57
|
color: palette.red.main
|
package/Tag/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Tag/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,gBAAgB,CAAA;AAEvB,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAS,EAAE,EAAE,CACjD,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,MAAM;KACjB;IACD,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Tag/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,gBAAgB,CAAA;AAEvB,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAS,EAAE,EAAE,CACjD,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,MAAM;KACjB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACxB,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KAC/B;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI;QACzB,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI;KAChC;IACD,MAAM,EAAE;QACN,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;QAC1B,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;KACjC;IACD,GAAG,EAAE;QACH,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;QACvB,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;KAC9B;IACD,QAAQ,EAAE;QACR,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ;QAClC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACxB,aAAa,EAAE,MAAM;KACtB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,CAAC;KACZ;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;QACjB,kBAAkB,EAAE;YAClB,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;YACrC,MAAM,EAAE,SAAS;SAClB;QACD,4BAA4B,EAAE;YAC5B,MAAM,EAAE,SAAS;YACjB,oBAAoB,EAAE;gBACpB,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;gBAC9B,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;gBACrC,UAAU,EAAE,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,MAAM,WAAW,CAAC,MAAM,CAAC,SAAS,EAAE;aAClF;YACD,SAAS,EAAE;gBACT,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;aACtC;YACD,SAAS,EAAE;gBACT,oBAAoB,EAAE;oBACpB,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;oBAC7B,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;iBACxB;aACF;SACF;KACF;IACD,KAAK,EAAE;QACL,GAAG,EAAE,QAAQ;KACd;IACD,OAAO,EAAE,EAAE;IACX,uBAAuB;IACvB,UAAU,EAAE;QACV,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,KAAK;QACV,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;QACzB,0BAA0B,EAAE;YAC1B,KAAK,EAAE,SAAS;SACjB;KACF;IAED,eAAe;IACf,SAAS,EAAE,EAAE;CACd,CAAC,CAAA"}
|
|
@@ -20,7 +20,7 @@ const TagCheckable = forwardRef(function TagCheckable(_a, ref) {
|
|
|
20
20
|
onChange === null || onChange === void 0 ? void 0 : onChange(!checked);
|
|
21
21
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
22
22
|
};
|
|
23
|
-
const variant = checked ? '
|
|
23
|
+
const variant = checked ? 'green' : 'light-grey';
|
|
24
24
|
return (React.createElement(Tag, Object.assign({ className: cx(className, classes.checkable), icon: icon, onClick: handleClick, ref: ref, variant: variant }, rest), children));
|
|
25
25
|
});
|
|
26
26
|
export default TagCheckable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagCheckable.js","sourceRoot":"","sources":["../../src/TagCheckable/TagCheckable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAAE,EAAmC,UAAU,EAAE,MAAM,OAAO,CAAA;AAG1E,OAAO,GAAG,MAAM,QAAQ,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAmBtC,MAAM,YAAY,GAAG,UAAU,CAAwB,SAAS,YAAY,CAC1E,EAA0E,EAC1E,GAAG;QADH,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAAxE,mEAA0E,CAAF;IAGxE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,WAAW,GAAG,CAAC,CAA4C,EAAE,EAAE;QACnE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,OAAO,CAAC,CAAA;QACpB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAA;IACd,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"TagCheckable.js","sourceRoot":"","sources":["../../src/TagCheckable/TagCheckable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAAE,EAAmC,UAAU,EAAE,MAAM,OAAO,CAAA;AAG1E,OAAO,GAAG,MAAM,QAAQ,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAmBtC,MAAM,YAAY,GAAG,UAAU,CAAwB,SAAS,YAAY,CAC1E,EAA0E,EAC1E,GAAG;QADH,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAAxE,mEAA0E,CAAF;IAGxE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,WAAW,GAAG,CAAC,CAA4C,EAAE,EAAE;QACnE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,OAAO,CAAC,CAAA;QACpB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAA;IACd,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAA;IAEhD,OAAO,CACL,oBAAC,GAAG,kBACF,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAC3C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,IACZ,IAAI,GAEP,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,YAAY,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { HTMLAttributes, AnchorHTMLAttributes } from 'react';
|
|
2
2
|
import { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
|
|
3
3
|
import { IndicatorProps } from '../Indicator';
|
|
4
|
-
export declare type VariantType = '
|
|
4
|
+
export declare type VariantType = 'red' | 'yellow' | 'dark-grey' | 'light-grey' | 'green';
|
|
5
5
|
export declare type DivOrAnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & HTMLAttributes<HTMLDivElement>;
|
|
6
6
|
interface VariantOnlyProps extends BaseProps, TextLabelProps, DivOrAnchorProps {
|
|
7
7
|
/** Variant of the rectangular `Tag`, can not be used with the `indicator` property at the same time. */
|
|
@@ -23,7 +23,7 @@ const useStyles = makeStyles(styles, {
|
|
|
23
23
|
export const TagRectangular = forwardRef(function TagRectangular(props, ref) {
|
|
24
24
|
const {
|
|
25
25
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
26
|
-
color, children, style, className, titleCase: propsTitleCase, variant = 'light', indicator } = props, rest = __rest(props, ["color", "children", "style", "className", "titleCase", "variant", "indicator"]);
|
|
26
|
+
color, children, style, className, titleCase: propsTitleCase, variant = 'light-grey', indicator } = props, rest = __rest(props, ["color", "children", "style", "className", "titleCase", "variant", "indicator"]);
|
|
27
27
|
const classes = useStyles();
|
|
28
28
|
const titleCase = useTitleCase(propsTitleCase);
|
|
29
29
|
return (React.createElement(Chip, Object.assign({}, rest, { ref: ref, classes: {
|
|
@@ -31,11 +31,11 @@ export const TagRectangular = forwardRef(function TagRectangular(props, ref) {
|
|
|
31
31
|
label: classes.label,
|
|
32
32
|
icon: classes.icon
|
|
33
33
|
}, className: className, style: style, icon: indicator ? React.createElement(Indicator, { color: indicator }) : undefined, label: React.createElement("span", { className: cx(classes.innerLabel, {
|
|
34
|
-
[classes.innerLabelDarkText]: variant === 'light'
|
|
34
|
+
[classes.innerLabelDarkText]: variant === 'light-grey'
|
|
35
35
|
}) }, titleCase ? toTitleCase(children) : children) })));
|
|
36
36
|
});
|
|
37
37
|
TagRectangular.defaultProps = {
|
|
38
|
-
variant: 'light'
|
|
38
|
+
variant: 'light-grey'
|
|
39
39
|
};
|
|
40
40
|
TagRectangular.displayName = 'TagRectangular';
|
|
41
41
|
export default TagRectangular;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagRectangular.js","sourceRoot":"","sources":["../../src/TagRectangular/TagRectangular.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAwC,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAA6B,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,SAA6B,MAAM,cAAc,CAAA;AACxD,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,WAAW,MAAM,wBAAwB,CAAA;AAChD,OAAO,MAAM,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"TagRectangular.js","sourceRoot":"","sources":["../../src/TagRectangular/TagRectangular.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAwC,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAA6B,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,SAA6B,MAAM,cAAc,CAAA;AACxD,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,WAAW,MAAM,wBAAwB,CAAA;AAChD,OAAO,MAAM,MAAM,UAAU,CAAA;AA6B7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,uBAAuB;CAC9B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CACtC,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAChC,MAAM;IACJ,6DAA6D;IAC7D,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAS,EAAE,cAAc,EACzB,OAAO,GAAG,YAAY,EACtB,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,gFAUL,CAAQ,CAAA;IAET,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAE9C,OAAO,CACL,oBAAC,IAAI,oBACC,IAAI,IACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE;YACP,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;YACxC,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,IAAI,EAAE,OAAO,CAAC,IAAI;SACnB,EACD,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,oBAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,CAAC,CAAC,CAAC,SAAS,EAC7D,KAAK,EACH,8BACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE;gBAChC,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,OAAO,KAAK,YAAY;aACvD,CAAC,IAED,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CACxC,IAET,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,cAAc,CAAC,YAAY,GAAG;IAC5B,OAAO,EAAE,YAAY;CACtB,CAAA;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAE7C,eAAe,cAAc,CAAA"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { Theme } from '@material-ui/core/styles';
|
|
2
|
-
declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "
|
|
2
|
+
declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "green" | "red" | "yellow" | "icon" | "label" | "root" | "light-grey" | "dark-grey" | "innerLabel" | "innerLabelDarkText">;
|
|
3
3
|
export default _default;
|
package/TagRectangular/styles.js
CHANGED
|
@@ -6,19 +6,19 @@ export default ({ palette }) => createStyles({
|
|
|
6
6
|
height: '1rem',
|
|
7
7
|
border: '0'
|
|
8
8
|
},
|
|
9
|
-
|
|
9
|
+
red: {
|
|
10
10
|
backgroundColor: palette.red.main
|
|
11
11
|
},
|
|
12
|
-
|
|
12
|
+
yellow: {
|
|
13
13
|
backgroundColor: palette.yellow.main
|
|
14
14
|
},
|
|
15
|
-
dark: {
|
|
15
|
+
'dark-grey': {
|
|
16
16
|
backgroundColor: palette.grey.darker
|
|
17
17
|
},
|
|
18
|
-
light: {
|
|
18
|
+
'light-grey': {
|
|
19
19
|
backgroundColor: palette.grey.lighter2
|
|
20
20
|
},
|
|
21
|
-
|
|
21
|
+
green: {
|
|
22
22
|
backgroundColor: palette.green.dark
|
|
23
23
|
},
|
|
24
24
|
label: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/TagRectangular/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAChB,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,GAAG;KACZ;IACD,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/TagRectangular/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAChB,YAAY,EAAE,SAAS;QACvB,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,GAAG;KACZ;IACD,GAAG,EAAE;QACH,eAAe,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;KAClC;IACD,MAAM,EAAE;QACN,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;KACrC;IACD,WAAW,EAAE;QACX,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KACrC;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ;KACvC;IACD,KAAK,EAAE;QACL,eAAe,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI;KACpC;IACD,KAAK,EAAE;QACL,OAAO,EAAE,UAAU;KACpB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,GAAG;QACf,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;KAC5B;IACD,kBAAkB,EAAE;QAClB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KAC3B;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,SAAS;QACrB,WAAW,EAAE,GAAG;KACjB;CACF,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "16.0.0",
|
|
4
4
|
"description": "Toptal UI components library",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"react-helmet": "6.1.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@toptal/picasso-provider": "
|
|
33
|
+
"@toptal/picasso-provider": "0.4.1",
|
|
34
34
|
"@toptal/picasso-shared": "^7.0.2",
|
|
35
35
|
"ap-style-title-case": "^1.1.2",
|
|
36
36
|
"classnames": "^2.3.1",
|