@toptal/picasso-utils 1.0.3-alpha-fx-4584-drawer-6762471c2.22 → 1.0.3-alpha-fx-4589-migrate-typography-34a78df8a.23

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 +61 -43
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-utils",
3
- "version": "1.0.3-alpha-fx-4584-drawer-6762471c2.22+6762471c2",
3
+ "version": "1.0.3-alpha-fx-4589-migrate-typography-34a78df8a.23+34a78df8a",
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": "14.0.2-alpha-fx-4584-drawer-6762471c2.22+6762471c2",
29
+ "@toptal/picasso-shared": "14.0.2-alpha-fx-4589-migrate-typography-34a78df8a.23+34a78df8a",
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.1.1-alpha-fx-4584-drawer-6762471c2.44+6762471c2",
35
- "@toptal/picasso-test-utils": "1.0.3-alpha-fx-4584-drawer-6762471c2.22+6762471c2",
34
+ "@toptal/picasso-provider": "4.1.1-alpha-fx-4589-migrate-typography-34a78df8a.45+34a78df8a",
35
+ "@toptal/picasso-test-utils": "1.1.1-alpha-fx-4589-migrate-typography-34a78df8a.15+34a78df8a",
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": "6762471c24491803ddff6a542c0cfcde511c8f5c"
52
+ "gitHead": "34a78df8a2413cce5ce39d40f7d9539df2bfd8aa"
53
53
  }
package/src/utils/Modal/__snapshots__/test.tsx.snap CHANGED
@@ -23,42 +23,48 @@ exports[`Modal useModal opens and closes modal 1`] = `
23
23
  </span>
24
24
  </button>
25
25
  <div
26
- class="base-Modal fixed z-modal inset-0 flex flex-col text-lg justify-center items-center"
26
+ class="MuiDialog-root PicassoModal-root"
27
27
  role="presentation"
28
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
28
29
  >
29
30
  <div
30
31
  aria-hidden="true"
31
- class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
32
- style="transition-duration: 300ms; opacity: 1;"
32
+ class="MuiBackdrop-root"
33
+ 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
34
  />
34
35
  <div
35
- data-testid="sentinelStart"
36
+ data-test="sentinelStart"
36
37
  tabindex="0"
37
38
  />
38
39
  <div
39
- class="bg-white shadow-2 transition-shadow 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%_"
40
- role="dialog"
41
- style="transition-duration: 300ms; opacity: 1;"
40
+ class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
41
+ role="none presentation"
42
+ 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;"
42
43
  tabindex="-1"
43
44
  >
44
- <p>
45
- Modal content
46
- </p>
47
- <button
48
- class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
49
- data-component-type="button"
50
- tabindex="0"
51
- type="button"
45
+ <div
46
+ class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
47
+ role="dialog"
52
48
  >
53
- <span
54
- class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
49
+ <p>
50
+ Modal content
51
+ </p>
52
+ <button
53
+ class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root"
54
+ data-component-type="button"
55
+ tabindex="0"
56
+ type="button"
55
57
  >
56
- Hide
57
- </span>
58
- </button>
58
+ <span
59
+ class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
60
+ >
61
+ Hide
62
+ </span>
63
+ </button>
64
+ </div>
59
65
  </div>
60
66
  <div
61
- data-testid="sentinelEnd"
67
+ data-test="sentinelEnd"
62
68
  tabindex="0"
63
69
  />
64
70
  </div>
@@ -130,58 +136,70 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
130
136
  </button>
131
137
  <div
132
138
  aria-hidden="true"
133
- class="base-Modal fixed z-modal inset-0 flex flex-col text-lg justify-center items-center"
139
+ class="MuiDialog-root PicassoModal-root"
134
140
  role="presentation"
141
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
135
142
  >
136
143
  <div
137
144
  aria-hidden="true"
138
- class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
139
- style="transition-duration: 300ms; opacity: 1;"
145
+ class="MuiBackdrop-root"
146
+ 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;"
140
147
  />
141
148
  <div
142
- data-testid="sentinelStart"
149
+ data-test="sentinelStart"
143
150
  tabindex="0"
144
151
  />
145
152
  <div
146
- class="bg-white shadow-2 transition-shadow 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%_"
147
- role="dialog"
148
- style="transition-duration: 300ms; opacity: 1;"
153
+ class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
154
+ role="none presentation"
155
+ 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;"
149
156
  tabindex="-1"
150
157
  >
151
- <p>
152
- First modal content
153
- </p>
158
+ <div
159
+ class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
160
+ role="dialog"
161
+ >
162
+ <p>
163
+ First modal content
164
+ </p>
165
+ </div>
154
166
  </div>
155
167
  <div
156
- data-testid="sentinelEnd"
168
+ data-test="sentinelEnd"
157
169
  tabindex="0"
158
170
  />
159
171
  </div>
160
172
  <div
161
- class="base-Modal fixed z-modal inset-0 flex flex-col text-lg justify-center items-center"
173
+ class="MuiDialog-root PicassoModal-root"
162
174
  role="presentation"
175
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
163
176
  >
164
177
  <div
165
178
  aria-hidden="true"
166
- class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
167
- style="transition-duration: 300ms; opacity: 1;"
179
+ class="MuiBackdrop-root"
180
+ 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;"
168
181
  />
169
182
  <div
170
- data-testid="sentinelStart"
183
+ data-test="sentinelStart"
171
184
  tabindex="0"
172
185
  />
173
186
  <div
174
- class="bg-white shadow-2 transition-shadow 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%_"
175
- role="dialog"
176
- style="transition-duration: 300ms; opacity: 1;"
187
+ class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
188
+ role="none presentation"
189
+ 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;"
177
190
  tabindex="-1"
178
191
  >
179
- <p>
180
- Second modal content
181
- </p>
192
+ <div
193
+ class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
194
+ role="dialog"
195
+ >
196
+ <p>
197
+ Second modal content
198
+ </p>
199
+ </div>
182
200
  </div>
183
201
  <div
184
- data-testid="sentinelEnd"
202
+ data-test="sentinelEnd"
185
203
  tabindex="0"
186
204
  />
187
205
  </div>