@toptal/picasso-checkbox 3.0.5 → 3.0.6

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.
Files changed (11) hide show
  1. package/dist-package/src/Checkbox/Checkbox.d.ts.map +1 -1
  2. package/dist-package/src/Checkbox/Checkbox.js +4 -1
  3. package/dist-package/src/Checkbox/Checkbox.js.map +1 -1
  4. package/dist-package/src/Checkbox/styles.d.ts +1 -1
  5. package/dist-package/src/Checkbox/styles.d.ts.map +1 -1
  6. package/dist-package/src/Checkbox/styles.js +0 -10
  7. package/dist-package/src/Checkbox/styles.js.map +1 -1
  8. package/package.json +2 -2
  9. package/src/Checkbox/Checkbox.tsx +6 -2
  10. package/src/Checkbox/__snapshots__/test.tsx.snap +16 -16
  11. package/src/Checkbox/styles.ts +0 -11
package/dist-package/src/Checkbox/Checkbox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EACT,cAAc,EACf,MAAM,wBAAwB,CAAA;AAE/B,OAAO,KAAK,EAAkB,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAM9D,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IACvC,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,oBAAoB;IACpB,UAAU,CAAC,EAAE,aAAa,CAAA;IAC1B,8FAA8F;IAC9F,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;IACT,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,QAAQ,oGAgFpB,CAAA;AAUD,eAAe,QAAQ,CAAA"}
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,mBAAmB,EACnB,SAAS,EACT,cAAc,EACf,MAAM,wBAAwB,CAAA;AAE/B,OAAO,KAAK,EAAkB,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAO9D,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IACvC,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,kCAAkC;IAClC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,oBAAoB;IACpB,UAAU,CAAC,EAAE,aAAa,CAAA;IAC1B,8FAA8F;IAC9F,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;IACT,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,QAAQ,oGAmFpB,CAAA;AAUD,eAAe,QAAQ,CAAA"}
package/dist-package/src/Checkbox/Checkbox.js CHANGED
@@ -15,6 +15,7 @@ import cx from 'classnames';
15
15
  import React, { forwardRef } from 'react';
16
16
  import { Container } from '@toptal/picasso-container';
17
17
  import { FormControlLabel } from '@toptal/picasso-form';
18
+ import { twJoin } from '@toptal/picasso-tailwind-merge';
18
19
  import styles from './styles';
19
20
  const useStyles = makeStyles(styles, { name: 'PicassoCheckbox' });
20
21
  export const Checkbox = forwardRef(function Checkbox(props, ref) {
@@ -37,7 +38,9 @@ export const Checkbox = forwardRef(function Checkbox(props, ref) {
37
38
  onMouseLeave: rest.onMouseLeave,
38
39
  onMouseOver: rest.onMouseOver,
39
40
  };
40
- return (React.createElement(FormControlLabel, Object.assign({}, externalEventListeners, { style: labelStyle, ref: ref, classes: Object.assign(Object.assign({}, rootClasses), { label: classes.label }), control: muiCheckbox, requiredDecoration: requiredDecoration, disabled: disabled, label: label, titleCase: titleCase, className: 'picasso-checkbox', "data-private": dataPrivate })));
41
+ return (React.createElement(FormControlLabel, Object.assign({}, externalEventListeners, { style: labelStyle, ref: ref, classes: {
42
+ label: twJoin('max-w-[calc(100%_-_1.5em_+_1px)]', 'ml-[0.5em]', disabled && 'text-gray-500'),
43
+ }, control: muiCheckbox, requiredDecoration: requiredDecoration, disabled: disabled, label: label, titleCase: titleCase, className: 'picasso-checkbox', "data-private": dataPrivate })));
41
44
  });
42
45
  Checkbox.defaultProps = {
43
46
  disabled: false,
package/dist-package/src/Checkbox/Checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
package/dist-package/src/Checkbox/styles.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import type { Theme } from '@material-ui/core/styles';
2
- declare const _default: ({ palette, sizes, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "disabled" | "withLabel" | "focused" | "checkedIcon" | "uncheckedIcon" | "indeterminateIcon" | "label" | "labelWithRightSpacing" | "checkboxWrapper">;
2
+ declare const _default: ({ palette, sizes, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "disabled" | "withLabel" | "focused" | "checkedIcon" | "uncheckedIcon" | "indeterminateIcon" | "labelWithRightSpacing" | "checkboxWrapper">;
3
3
  export default _default;
4
4
  //# sourceMappingURL=styles.d.ts.map
package/dist-package/src/Checkbox/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Checkbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;0DAsBJ,KAAK;AAAtD,wBAmHI"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Checkbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;0DAmBJ,KAAK;AAAtD,wBA2GI"}
package/dist-package/src/Checkbox/styles.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import { createStyles } from '@material-ui/core/styles';
2
2
  import { mix, outline } from '@toptal/picasso-shared';
3
3
  import { PicassoProvider } from '@toptal/picasso-provider';
4
- const controlWidth = '1em';
5
- const labelMargin = '0.5em';
6
4
  PicassoProvider.override(() => ({
7
5
  MuiCheckbox: {
8
6
  root: {
@@ -37,9 +35,6 @@ export default ({ palette, sizes, transitions }) => createStyles({
37
35
  '&:hover $uncheckedIcon': {
38
36
  border: `${sizes.borderWidth} solid ${palette.grey.main}`,
39
37
  },
40
- '& $label': {
41
- color: palette.grey.main,
42
- },
43
38
  },
44
39
  focused: {
45
40
  '& $uncheckedIcon': Object.assign({}, outline(palette.primary.main)),
@@ -103,11 +98,6 @@ export default ({ palette, sizes, transitions }) => createStyles({
103
98
  transform: 'translate(-50%, -50%)',
104
99
  },
105
100
  },
106
- label: {
107
- marginLeft: labelMargin,
108
- // 1px is needed for safari
109
- maxWidth: `calc(100% - ${controlWidth} - ${labelMargin} + 1px)`,
110
- },
111
101
  labelWithRightSpacing: {},
112
102
  checkboxWrapper: {
113
103
  alignSelf: 'flex-start',
package/dist-package/src/Checkbox/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Checkbox/styles.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Checkbox/styles.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-checkbox",
3
- "version": "3.0.5",
3
+ "version": "3.0.6",
4
4
  "description": "Toptal UI components library - Checkbox",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -23,7 +23,7 @@
23
23
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
24
24
  "dependencies": {
25
25
  "@toptal/picasso-container": "2.0.0",
26
- "@toptal/picasso-form": "4.1.2",
26
+ "@toptal/picasso-form": "4.1.3",
27
27
  "@toptal/picasso-grid": "4.0.1",
28
28
  "@toptal/picasso-shared": "15.0.0",
29
29
  "@toptal/picasso-utils": "1.0.3",
package/src/Checkbox/Checkbox.tsx CHANGED
@@ -12,6 +12,7 @@ import React, { forwardRef } from 'react'
12
12
  import { Container } from '@toptal/picasso-container'
13
13
  import { FormControlLabel } from '@toptal/picasso-form'
14
14
  import type { RequiredDecoration } from '@toptal/picasso-form'
15
+ import { twJoin } from '@toptal/picasso-tailwind-merge'
15
16
 
16
17
  import styles from './styles'
17
18
 
@@ -111,8 +112,11 @@ export const Checkbox = forwardRef<HTMLButtonElement | HTMLLabelElement, Props>(
111
112
  style={labelStyle}
112
113
  ref={ref as React.ForwardedRef<HTMLLabelElement>}
113
114
  classes={{
114
- ...rootClasses,
115
- label: classes.label,
115
+ label: twJoin(
116
+ 'max-w-[calc(100%_-_1.5em_+_1px)]',
117
+ 'ml-[0.5em]',
118
+ disabled && 'text-gray-500'
119
+ ),
116
120
  }}
117
121
  control={muiCheckbox}
118
122
  requiredDecoration={requiredDecoration}
package/src/Checkbox/__snapshots__/test.tsx.snap CHANGED
@@ -15,7 +15,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
15
15
  class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
16
16
  >
17
17
  <label
18
- class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
18
+ class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
19
19
  >
20
20
  <span
21
21
  class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -40,7 +40,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
40
40
  </span>
41
41
  </span>
42
42
  <span
43
- class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
43
+ class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
44
44
  >
45
45
  <span
46
46
  class="align-top text-[0.8125rem]"
@@ -54,7 +54,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
54
54
  class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
55
55
  >
56
56
  <label
57
- class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
57
+ class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
58
58
  >
59
59
  <span
60
60
  class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -79,7 +79,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
79
79
  </span>
80
80
  </span>
81
81
  <span
82
- class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
82
+ class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
83
83
  >
84
84
  <span
85
85
  class="align-top text-[0.8125rem]"
@@ -93,7 +93,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
93
93
  class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
94
94
  >
95
95
  <label
96
- class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
96
+ class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
97
97
  >
98
98
  <span
99
99
  class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -118,7 +118,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
118
118
  </span>
119
119
  </span>
120
120
  <span
121
- class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
121
+ class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
122
122
  >
123
123
  <span
124
124
  class="align-top text-[0.8125rem]"
@@ -132,7 +132,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
132
132
  class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
133
133
  >
134
134
  <label
135
- class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
135
+ class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
136
136
  >
137
137
  <span
138
138
  class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -157,7 +157,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
157
157
  </span>
158
158
  </span>
159
159
  <span
160
- class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
160
+ class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
161
161
  >
162
162
  <span
163
163
  class="align-top text-[0.8125rem]"
@@ -171,7 +171,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
171
171
  class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
172
172
  >
173
173
  <label
174
- class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
174
+ class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
175
175
  >
176
176
  <span
177
177
  class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -196,7 +196,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
196
196
  </span>
197
197
  </span>
198
198
  <span
199
- class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
199
+ class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
200
200
  >
201
201
  <span
202
202
  class="align-top text-[0.8125rem]"
@@ -210,7 +210,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
210
210
  class="box-border m-0 p-[8px] sm:basis-4/12 sm:max-w leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
211
211
  >
212
212
  <label
213
- class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
213
+ class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
214
214
  >
215
215
  <span
216
216
  class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -235,7 +235,7 @@ exports[`Checkbox Checkbox.Group renders checkbox in a grid group 1`] = `
235
235
  </span>
236
236
  </span>
237
237
  <span
238
- class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
238
+ class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
239
239
  >
240
240
  <span
241
241
  class="align-top text-[0.8125rem]"
@@ -257,7 +257,7 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
257
257
  class="Picasso-root"
258
258
  >
259
259
  <label
260
- class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
260
+ class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
261
261
  >
262
262
  <span
263
263
  class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -282,7 +282,7 @@ exports[`Checkbox checkbox interaction should render checked checkbox 1`] = `
282
282
  </span>
283
283
  </span>
284
284
  <span
285
- class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
285
+ class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
286
286
  >
287
287
  <span
288
288
  class="align-top text-[0.8125rem]"
@@ -458,7 +458,7 @@ exports[`Checkbox should render default checkbox with label 1`] = `
458
458
  class="Picasso-root"
459
459
  >
460
460
  <label
461
- class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
461
+ class="inline-flex items-center max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer picasso-checkbox"
462
462
  >
463
463
  <span
464
464
  class="inline-flex PicassoCheckbox-checkboxWrapper"
@@ -483,7 +483,7 @@ exports[`Checkbox should render default checkbox with label 1`] = `
483
483
  </span>
484
484
  </span>
485
485
  <span
486
- class="inline-block leading-[1em] mb-0 text-graphite PicassoFormControlLabel-label PicassoCheckbox-label"
486
+ class="inline-block leading-[1em] mb-0 text-graphite max-w-[calc(100%_ ml-[0.5em]"
487
487
  >
488
488
  <span
489
489
  class="align-top text-[0.8125rem]"
package/src/Checkbox/styles.ts CHANGED
@@ -3,9 +3,6 @@ import { createStyles } from '@material-ui/core/styles'
3
3
  import { mix, outline } from '@toptal/picasso-shared'
4
4
  import { PicassoProvider } from '@toptal/picasso-provider'
5
5
 
6
- const controlWidth = '1em'
7
- const labelMargin = '0.5em'
8
-
9
6
  PicassoProvider.override(() => ({
10
7
  MuiCheckbox: {
11
8
  root: {
@@ -51,9 +48,6 @@ export default ({ palette, sizes, transitions }: Theme) =>
51
48
  '&:hover $uncheckedIcon': {
52
49
  border: `${sizes.borderWidth} solid ${palette.grey.main}`,
53
50
  },
54
- '& $label': {
55
- color: palette.grey.main,
56
- },
57
51
  },
58
52
  focused: {
59
53
  '& $uncheckedIcon': {
@@ -125,11 +119,6 @@ export default ({ palette, sizes, transitions }: Theme) =>
125
119
  transform: 'translate(-50%, -50%)',
126
120
  },
127
121
  },
128
- label: {
129
- marginLeft: labelMargin,
130
- // 1px is needed for safari
131
- maxWidth: `calc(100% - ${controlWidth} - ${labelMargin} + 1px)`,
132
- },
133
122
  labelWithRightSpacing: {},
134
123
  checkboxWrapper: {
135
124
  alignSelf: 'flex-start',