@toptal/picasso-utils 1.0.4-alpha-fx-5525-container-4ebd3caa7.81 → 1.0.4-alpha-feature-tailwind-w21-dbc97c122.56

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 (2) hide show
  1. package/package.json +5 -5
  2. package/src/utils/Modal/__snapshots__/test.tsx.snap +45 -63
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-utils",
3
- "version": "1.0.4-alpha-fx-5525-container-4ebd3caa7.81+4ebd3caa7",
3
+ "version": "1.0.4-alpha-feature-tailwind-w21-dbc97c122.56+dbc97c122",
4
4
  "description": "Toptal UI components library - Utils",
5
5
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
6
6
  "bugs": {
@@ -26,13 +26,13 @@
26
26
  "prepublishOnly": "yarn build:package"
27
27
  },
28
28
  "dependencies": {
29
- "@toptal/picasso-shared": "15.0.1-alpha-fx-5525-container-4ebd3caa7.81+4ebd3caa7",
29
+ "@toptal/picasso-shared": "15.0.1-alpha-feature-tailwind-w21-dbc97c122.56+dbc97c122",
30
30
  "ap-style-title-case": "^1.1.2",
31
31
  "classnames": "^2.5.1"
32
32
  },
33
33
  "devDependencies": {
34
- "@toptal/picasso-provider": "4.2.2-alpha-fx-5525-container-4ebd3caa7.89+4ebd3caa7",
35
- "@toptal/picasso-test-utils": "1.1.2-alpha-fx-5525-container-4ebd3caa7.81+4ebd3caa7",
34
+ "@toptal/picasso-provider": "4.2.2-alpha-feature-tailwind-w21-dbc97c122.64+dbc97c122",
35
+ "@toptal/picasso-test-utils": "1.1.2-alpha-feature-tailwind-w21-dbc97c122.56+dbc97c122",
36
36
  "styled-components": "^6.1.1"
37
37
  },
38
38
  "peerDependencies": {
@@ -49,5 +49,5 @@
49
49
  "!dist-package/tsconfig.tsbuildinfo",
50
50
  "src"
51
51
  ],
52
- "gitHead": "4ebd3caa763220e28d7bfe67e6a63a05ea37599a"
52
+ "gitHead": "dbc97c122624701633cad6c831b906a0a85176a1"
53
53
  }
package/src/utils/Modal/__snapshots__/test.tsx.snap CHANGED
@@ -25,50 +25,44 @@ exports[`Modal useModal opens and closes modal 1`] = `
25
25
  </span>
26
26
  </button>
27
27
  <div
28
- class="MuiDialog-root PicassoModal-root"
28
+ class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
29
29
  role="presentation"
30
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
31
30
  >
32
31
  <div
33
32
  aria-hidden="true"
34
- class="MuiBackdrop-root"
35
- style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
33
+ class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
34
+ style="transition-duration: 300ms; opacity: 1;"
36
35
  />
37
36
  <div
38
- data-test="sentinelStart"
37
+ data-testid="sentinelStart"
39
38
  tabindex="0"
40
39
  />
41
40
  <div
42
- class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
43
- role="none presentation"
44
- style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
41
+ class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
42
+ role="dialog"
43
+ style="transition-duration: 300ms; opacity: 1;"
45
44
  tabindex="-1"
46
45
  >
47
- <div
48
- class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
49
- role="dialog"
46
+ <p>
47
+ Modal content
48
+ </p>
49
+ <button
50
+ aria-disabled="false"
51
+ class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
52
+ data-component-type="button"
53
+ role="button"
54
+ tabindex="0"
55
+ type="button"
50
56
  >
51
- <p>
52
- Modal content
53
- </p>
54
- <button
55
- aria-disabled="false"
56
- class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
57
- data-component-type="button"
58
- role="button"
59
- tabindex="0"
60
- type="button"
57
+ <span
58
+ class="items-center inline-flex font-semibold whitespace-nowrap text-button"
61
59
  >
62
- <span
63
- class="items-center inline-flex font-semibold whitespace-nowrap text-button"
64
- >
65
- Hide
66
- </span>
67
- </button>
68
- </div>
60
+ Hide
61
+ </span>
62
+ </button>
69
63
  </div>
70
64
  <div
71
- data-test="sentinelEnd"
65
+ data-testid="sentinelEnd"
72
66
  tabindex="0"
73
67
  />
74
68
  </div>
@@ -146,70 +140,58 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
146
140
  </button>
147
141
  <div
148
142
  aria-hidden="true"
149
- class="MuiDialog-root PicassoModal-root"
143
+ class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
150
144
  role="presentation"
151
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
152
145
  >
153
146
  <div
154
147
  aria-hidden="true"
155
- class="MuiBackdrop-root"
156
- style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
148
+ class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
149
+ style="transition-duration: 300ms; opacity: 1;"
157
150
  />
158
151
  <div
159
- data-test="sentinelStart"
152
+ data-testid="sentinelStart"
160
153
  tabindex="0"
161
154
  />
162
155
  <div
163
- class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
164
- role="none presentation"
165
- style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
156
+ class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
157
+ role="dialog"
158
+ style="transition-duration: 300ms; opacity: 1;"
166
159
  tabindex="-1"
167
160
  >
168
- <div
169
- class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
170
- role="dialog"
171
- >
172
- <p>
173
- First modal content
174
- </p>
175
- </div>
161
+ <p>
162
+ First modal content
163
+ </p>
176
164
  </div>
177
165
  <div
178
- data-test="sentinelEnd"
166
+ data-testid="sentinelEnd"
179
167
  tabindex="0"
180
168
  />
181
169
  </div>
182
170
  <div
183
- class="MuiDialog-root PicassoModal-root"
171
+ class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
184
172
  role="presentation"
185
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
186
173
  >
187
174
  <div
188
175
  aria-hidden="true"
189
- class="MuiBackdrop-root"
190
- style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
176
+ class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
177
+ style="transition-duration: 300ms; opacity: 1;"
191
178
  />
192
179
  <div
193
- data-test="sentinelStart"
180
+ data-testid="sentinelStart"
194
181
  tabindex="0"
195
182
  />
196
183
  <div
197
- class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
198
- role="none presentation"
199
- style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
184
+ class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
185
+ role="dialog"
186
+ style="transition-duration: 300ms; opacity: 1;"
200
187
  tabindex="-1"
201
188
  >
202
- <div
203
- class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
204
- role="dialog"
205
- >
206
- <p>
207
- Second modal content
208
- </p>
209
- </div>
189
+ <p>
190
+ Second modal content
191
+ </p>
210
192
  </div>
211
193
  <div
212
- data-test="sentinelEnd"
194
+ data-testid="sentinelEnd"
213
195
  tabindex="0"
214
196
  />
215
197
  </div>