@toptal/picasso-forms 70.0.11 → 71.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.
Files changed (3) hide show
  1. package/package.json +23 -22
  2. package/src/Checkbox/__snapshots__/test.tsx.snap +7 -7
  3. package/src/Form/__snapshots__/test.tsx.snap +6 -34
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-forms",
3
- "version": "70.0.11",
3
+ "version": "71.0.0",
4
4
  "description": "Picasso form components",
5
5
  "author": "Toptal",
6
6
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-forms#readme",
@@ -23,34 +23,35 @@
23
23
  },
24
24
  "peerDependencies": {
25
25
  "@toptal/picasso-shared": "^15.0.0",
26
+ "@toptal/picasso-tailwind": ">=2.7",
26
27
  "react": ">=16.12.0 < 19.0.0",
27
28
  "react-dom": ">=16.12.0 < 19.0.0",
28
29
  "typescript": "~4.7.0"
29
30
  },
30
31
  "dependencies": {
31
- "@toptal/picasso-container": "1.0.3",
32
- "@toptal/picasso-input": "2.0.8",
33
- "@toptal/picasso-dropzone": "2.0.2",
34
- "@toptal/picasso-button": "2.1.1",
35
- "@toptal/picasso-password-input": "2.0.12",
36
- "@toptal/picasso-radio": "2.0.7",
37
- "@toptal/picasso-rating": "1.0.8",
32
+ "@toptal/picasso-container": "2.0.0",
33
+ "@toptal/picasso-input": "3.0.0",
34
+ "@toptal/picasso-dropzone": "3.0.0",
35
+ "@toptal/picasso-button": "3.0.0",
36
+ "@toptal/picasso-password-input": "3.0.0",
37
+ "@toptal/picasso-radio": "3.0.0",
38
+ "@toptal/picasso-rating": "2.0.0",
38
39
  "@toptal/picasso-icons": "1.5.0",
39
- "@toptal/picasso-form": "3.0.7",
40
- "@toptal/picasso-file-input": "1.0.26",
41
- "@toptal/picasso-checkbox": "2.0.7",
42
- "@toptal/picasso-outlined-input": "1.1.5",
43
- "@toptal/picasso-number-input": "1.0.26",
44
- "@toptal/picasso-switch": "2.0.3",
45
- "@toptal/picasso-tagselector": "1.0.33",
46
- "@toptal/picasso-timepicker": "1.0.26",
47
- "@toptal/picasso-autocomplete": "1.0.30",
48
- "@toptal/picasso-select": "1.0.30",
49
- "@toptal/picasso-avatar-upload": "1.0.26",
50
- "@toptal/picasso-date-picker": "1.1.1",
51
- "@toptal/picasso-rich-text-editor": "13.0.16",
40
+ "@toptal/picasso-form": "4.0.0",
41
+ "@toptal/picasso-file-input": "2.0.0",
42
+ "@toptal/picasso-checkbox": "3.0.0",
43
+ "@toptal/picasso-outlined-input": "2.0.0",
44
+ "@toptal/picasso-number-input": "2.0.0",
45
+ "@toptal/picasso-switch": "2.0.4",
46
+ "@toptal/picasso-tagselector": "2.0.0",
47
+ "@toptal/picasso-timepicker": "2.0.0",
48
+ "@toptal/picasso-autocomplete": "2.0.0",
49
+ "@toptal/picasso-select": "2.0.0",
50
+ "@toptal/picasso-avatar-upload": "1.0.27",
51
+ "@toptal/picasso-date-picker": "2.0.0",
52
+ "@toptal/picasso-rich-text-editor": "14.0.0",
52
53
  "@toptal/picasso-utils": "1.0.3",
53
- "@toptal/picasso-notification": "2.0.16",
54
+ "@toptal/picasso-notification": "3.0.0",
54
55
  "classnames": "^2.5.1",
55
56
  "debounce": "^1.2.1",
56
57
  "detect-browser": "^5.3.0",
package/src/Checkbox/__snapshots__/test.tsx.snap CHANGED
@@ -27,20 +27,20 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
27
27
  </span>
28
28
  </label>
29
29
  <div
30
- class="MuiFormGroup-root PicassoCheckboxGroup-root PicassoCheckboxGroup-root"
30
+ class="flex flex-col flex-wrap -mr -mb"
31
31
  name="checkbox-group"
32
32
  >
33
33
  <div
34
34
  class="box-border flex w-full flex-col flex-wrap items-start justify-start mt-0 mb-0"
35
35
  >
36
36
  <div
37
- class="box-border m-0 leading-none [&&]:pt-0 [&&]:pb-0"
37
+ class="box-border m-0 leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
38
38
  >
39
39
  <label
40
40
  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
41
41
  >
42
42
  <span
43
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
43
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
44
44
  >
45
45
  <span
46
46
  aria-disabled="false"
@@ -74,13 +74,13 @@ exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
74
74
  </label>
75
75
  </div>
76
76
  <div
77
- class="box-border m-0 leading-none [&&]:pt-0 [&&]:pb-0"
77
+ class="box-border m-0 leading-none pt-0 pb-0 [&>.picasso-checkbox]:mb-[0.5em]"
78
78
  >
79
79
  <label
80
80
  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
81
81
  >
82
82
  <span
83
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
83
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
84
84
  >
85
85
  <span
86
86
  aria-disabled="false"
@@ -142,7 +142,7 @@ exports[`Form.Checkbox default render for single checkbox 1`] = `
142
142
  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
143
143
  >
144
144
  <span
145
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
145
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
146
146
  >
147
147
  <span
148
148
  aria-disabled="false"
@@ -202,7 +202,7 @@ exports[`Form.Checkbox required with asterisk single checkbox 1`] = `
202
202
  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
203
203
  >
204
204
  <span
205
- class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
205
+ class="inline-flex PicassoCheckbox-checkboxWrapper"
206
206
  >
207
207
  <span
208
208
  aria-disabled="false"
package/src/Form/__snapshots__/test.tsx.snap CHANGED
@@ -17,32 +17,18 @@ exports[`Form renders 1`] = `
17
17
  data-field-has-error="false"
18
18
  >
19
19
  <div
20
- class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
20
+ class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-blue hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit]"
21
21
  >
22
22
  <input
23
23
  aria-invalid="false"
24
24
  autocomplete="none"
25
- class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
25
+ class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
26
26
  id="test"
27
27
  name="test"
28
28
  placeholder="test input"
29
29
  type="text"
30
30
  value=""
31
31
  />
32
- <fieldset
33
- aria-hidden="true"
34
- class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
35
- style="padding-left: 8px;"
36
- >
37
- <legend
38
- class="PrivateNotchedOutline-legend"
39
- style="width: 0.01px;"
40
- >
41
- <span>
42
- ​
43
- </span>
44
- </legend>
45
- </fieldset>
46
32
  </div>
47
33
  </div>
48
34
  <button
@@ -54,7 +40,7 @@ exports[`Form renders 1`] = `
54
40
  type="submit"
55
41
  >
56
42
  <span
57
- class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
43
+ class="items-center inline-flex font-semibold whitespace-nowrap text-button"
58
44
  >
59
45
  Submit
60
46
  </span>
@@ -82,32 +68,18 @@ exports[`Form renders with an error 1`] = `
82
68
  data-field-has-error="true"
83
69
  >
84
70
  <div
85
- class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium PicassoOutlinedInput-error PicassoOutlinedInput-error Mui-error Mui-error MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
71
+ class="base-Input base- base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 h-8 w-[18.75rem] bg-white after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-red [&:has(input:focus)]:after:border-red after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-red text-black cursor-[inherit]"
86
72
  >
87
73
  <input
88
74
  aria-invalid="true"
89
75
  autocomplete="none"
90
- class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
76
+ class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
91
77
  id="test"
92
78
  name="test"
93
79
  placeholder="test input"
94
80
  type="text"
95
81
  value=""
96
82
  />
97
- <fieldset
98
- aria-hidden="true"
99
- class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline"
100
- style="padding-left: 8px;"
101
- >
102
- <legend
103
- class="PrivateNotchedOutline-legend"
104
- style="width: 0.01px;"
105
- >
106
- <span>
107
- ​
108
- </span>
109
- </legend>
110
- </fieldset>
111
83
  </div>
112
84
  <div
113
85
  class=""
@@ -132,7 +104,7 @@ exports[`Form renders with an error 1`] = `
132
104
  type="submit"
133
105
  >
134
106
  <span
135
- class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
107
+ class="items-center inline-flex font-semibold whitespace-nowrap text-button"
136
108
  >
137
109
  Submit
138
110
  </span>