@payloadcms/ui 3.78.0-canary.3 → 3.78.0-canary.5

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 (7) hide show
  1. package/dist/elements/Button/index.scss +46 -27
  2. package/dist/elements/Button/types.d.ts +1 -1
  3. package/dist/elements/Button/types.d.ts.map +1 -1
  4. package/dist/elements/Button/types.js.map +1 -1
  5. package/dist/elements/ListSelection/index.scss +0 -1
  6. package/dist/styles.css +1 -1
  7. package/package.json +4 -4
package/dist/elements/Button/index.scss CHANGED
@@ -22,7 +22,6 @@
22
22
  &--style-primary {
23
23
  --color: var(--theme-elevation-0);
24
24
  --bg-color: var(--theme-elevation-800);
25
- --box-shadow: none;
26
25
  --hover-bg: var(--theme-elevation-600);
27
26
  --hover-color: var(--color);
28
27
 
@@ -37,18 +36,34 @@
37
36
  &--style-secondary {
38
37
  --color: var(--theme-text);
39
38
  --bg-color: transparent;
40
- --box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
39
+ --btn-border: 1px solid var(--theme-elevation-800);
41
40
  --hover-color: var(--theme-elevation-600);
42
- --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
41
+ --hover-btn-border: 1px solid var(--theme-elevation-400);
43
42
 
44
43
  &.btn--disabled {
45
44
  --color: var(--theme-elevation-200);
46
- --box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
47
- --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
45
+ --btn-border: 1px solid var(--theme-elevation-200);
46
+ --hover-btn-border: 1px solid var(--theme-elevation-200);
48
47
  --hover-color: var(--color);
49
48
  }
50
49
  }
51
50
 
51
+ &--style-dashed {
52
+ --color: var(--theme-elevation-500);
53
+ --bg-color: transparent;
54
+ --hover-color: var(--theme-text);
55
+ --btn-border: 1px dashed var(--theme-elevation-200);
56
+ --hover-btn-border: 1px dashed var(--theme-elevation-400);
57
+
58
+ &.btn--disabled {
59
+ --color: var(--theme-elevation-250);
60
+ --hover-color: var(--color);
61
+ --hover-bg: transparent;
62
+ --btn-border: 1px dashed var(--theme-elevation-200);
63
+ --hover-btn-border: var(--btn-border);
64
+ }
65
+ }
66
+
52
67
  &--style-pill {
53
68
  --bg-color: var(--theme-elevation-150);
54
69
  --color: var(--theme-elevation-800);
@@ -86,12 +101,12 @@
86
101
  --color: var(--theme-text);
87
102
  --bg-color: var(--theme-elevation-100);
88
103
  --hover-bg: var(--theme-elevation-150);
89
- --box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
90
- --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-250);
104
+ --btn-border: 1px solid var(--theme-elevation-200);
105
+ --hover-btn-border: 1px solid var(--theme-elevation-250);
91
106
 
92
107
  &.btn--disabled {
93
108
  --color: var(--theme-elevation-450);
94
- --hover-box-shadow: var(--box-shadow);
109
+ --hover-btn-border: var(--btn-border);
95
110
  --hover-bg: var(--bg-color);
96
111
  --hover-color: var(--color);
97
112
  }
@@ -105,7 +120,6 @@
105
120
 
106
121
  &.btn--disabled {
107
122
  --btn-font-weight: 600;
108
- --hover-box-shadow: var(--box-shadow);
109
123
  --bg-color: var(--theme-elevation-100);
110
124
  --hover-bg: var(--bg-color);
111
125
  --hover-color: var(--color);
@@ -121,7 +135,7 @@
121
135
  .popup-button {
122
136
  color: var(--color, inherit);
123
137
  background-color: var(--bg-color);
124
- box-shadow: var(--box-shadow);
138
+ border: var(--btn-border, 1px solid transparent);
125
139
  border-radius: $style-radius-m;
126
140
  align-items: center;
127
141
 
@@ -143,7 +157,14 @@
143
157
  &:active {
144
158
  background-color: var(--hover-bg);
145
159
  color: var(--hover-color);
146
- box-shadow: var(--hover-box-shadow);
160
+ border: var(--hover-btn-border, 1px solid transparent);
161
+
162
+ .btn__icon .stroke {
163
+ stroke: var(--hover-color, currentColor);
164
+ }
165
+ .btn__icon .fill {
166
+ fill: var(--hover-color, currentColor);
167
+ }
147
168
  }
148
169
  }
149
170
  }
@@ -155,8 +176,8 @@
155
176
  &:focus,
156
177
  &:active {
157
178
  color: var(--hover-color);
158
- box-shadow: var(--hover-box-shadow);
159
179
  background-color: var(--hover-bg);
180
+ border: var(--hover-btn-border, var(--btn-border, 1px solid transparent));
160
181
  }
161
182
  }
162
183
 
@@ -176,7 +197,8 @@
176
197
  --btn-icon-padding: 0px; // This will be needed when we make icons go edge to edge instead of having built in padding in the svg code
177
198
  --btn-icon-content-gap: calc(var(--base) * 0.4);
178
199
  --margin-block: calc(var(--base) * 1.2);
179
- --btn-line-height: calc(var(--base) * 1.2);
200
+ --btn-line-height: calc(var(--base) * 1.1);
201
+ --btn-base-transition: 100ms cubic-bezier(0, 0.2, 0.2, 1);
180
202
 
181
203
  border-radius: var(--style-radius-s);
182
204
  font-size: var(--base-body-size);
@@ -184,17 +206,14 @@
184
206
  font-weight: var(--btn-font-weight, normal);
185
207
  margin-block: var(--margin-block);
186
208
  line-height: var(--btn-line-height);
187
- border: 0;
209
+ border: var(--btn-border, 1px solid transparent);
188
210
  cursor: pointer;
189
211
  text-decoration: none;
190
- transition-property: border, color, box-shadow, background;
191
- transition-duration: 100ms;
192
- transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
212
+ transition: border, color, background, var(--btn-base-transition);
193
213
  padding: var(--btn-padding-block-start) var(--btn-padding-inline-end)
194
214
  var(--btn-padding-block-end) var(--btn-padding-inline-start);
195
215
  color: var(--color, inherit);
196
216
  background-color: var(--bg-color, transparent);
197
- box-shadow: var(--box-shadow, none);
198
217
 
199
218
  &__icon {
200
219
  width: 100%;
@@ -271,11 +290,11 @@
271
290
  --btn-padding-inline-start: calc(var(--base) * 0.4);
272
291
  --btn-padding-block-end: 0;
273
292
 
274
- &.btn--icon-position-left {
293
+ &:not(.btn--icon-only).btn--icon-position-left {
275
294
  --btn-padding-inline-start: calc(var(--base) * 0.3);
276
295
  }
277
296
 
278
- &.btn--icon-position-right {
297
+ &:not(.btn--icon-only).btn--icon-position-right {
279
298
  --btn-padding-inline-end: calc(var(--base) * 0.3);
280
299
  }
281
300
 
@@ -292,10 +311,10 @@
292
311
  --btn-padding-inline-end: calc(var(--base) * 0.3);
293
312
  --btn-padding-inline-start: calc(var(--base) * 0.3);
294
313
  --btn-padding-block-end: 0;
295
- &.btn--icon-position-left {
314
+ &:not(.btn--icon-only).btn--icon-position-left {
296
315
  --btn-padding-inline-start: calc(var(--base) * 0.2);
297
316
  }
298
- &.btn--icon-position-right {
317
+ &:not(.btn--icon-only).btn--icon-position-right {
299
318
  --btn-padding-inline-end: calc(var(--base) * 0.2);
300
319
  }
301
320
  &.btn--icon-style-with-border {
@@ -305,18 +324,18 @@
305
324
 
306
325
  &--size-medium {
307
326
  // --btn-icon-padding: 0px;
308
- --btn-icon-size: calc(var(--base) * 1.2);
327
+ --btn-icon-size: calc(var(--base) * 1.1);
309
328
  --btn-icon-content-gap: calc(var(--base) * 0.2);
310
329
  --btn-padding-block-start: calc(var(--base) * 0.2);
311
330
  --btn-padding-inline-end: calc(var(--base) * 0.6);
312
331
  --btn-padding-block-end: calc(var(--base) * 0.2);
313
332
  --btn-padding-inline-start: calc(var(--base) * 0.6);
314
333
 
315
- &.btn--icon-position-left {
334
+ &:not(.btn--icon-only).btn--icon-position-left {
316
335
  --btn-padding-inline-start: calc(var(--base) * 0.4);
317
336
  }
318
337
 
319
- &.btn--icon-position-right {
338
+ &:not(.btn--icon-only).btn--icon-position-right {
320
339
  --btn-padding-inline-end: calc(var(--base) * 0.4);
321
340
  }
322
341
 
@@ -334,11 +353,11 @@
334
353
  --btn-padding-inline-start: calc(var(--base) * 0.8);
335
354
  --btn-padding-block-end: calc(var(--base) * 0.4);
336
355
 
337
- &.btn--icon-position-left {
356
+ &:not(.btn--icon-only).btn--icon-position-left {
338
357
  --btn-padding-inline-start: calc(var(--base) * 0.6);
339
358
  }
340
359
 
341
- &.btn--icon-position-right {
360
+ &:not(.btn--icon-only).btn--icon-position-right {
342
361
  --btn-padding-inline-end: calc(var(--base) * 0.6);
343
362
  }
344
363
 
package/dist/elements/Button/types.d.ts CHANGED
@@ -7,7 +7,7 @@ type secondaryAction = {
7
7
  export type Props = {
8
8
  'aria-label'?: string;
9
9
  buttonId?: string;
10
- buttonStyle?: 'error' | 'icon-label' | 'none' | 'pill' | 'primary' | 'secondary' | 'subtle' | 'tab' | 'transparent';
10
+ buttonStyle?: 'dashed' | 'error' | 'icon-label' | 'none' | 'pill' | 'primary' | 'secondary' | 'subtle' | 'tab' | 'transparent';
11
11
  children?: React.ReactNode;
12
12
  className?: string;
13
13
  disabled?: boolean;
package/dist/elements/Button/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EACR,OAAO,GACP,YAAY,GACZ,MAAM,GACN,MAAM,GACN,SAAS,GACT,WAAW,GACX,QAAQ,GACR,KAAK,GACL,aAAa,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,gBAAgB,CAAA;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACnE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAA;IACtD,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC9C,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACvE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EACR,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,MAAM,GACN,MAAM,GACN,SAAS,GACT,WAAW,GACX,QAAQ,GACR,KAAK,GACL,aAAa,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,gBAAgB,CAAA;IACrD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACnE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAA;IACtD,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC9C,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACvE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA"}
package/dist/elements/Button/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Button/types.ts"],"sourcesContent":["import type { ElementType, MouseEvent } from 'react'\nimport type React from 'react'\n\ntype secondaryAction = {\n label: string\n onClick: (event: MouseEvent) => void\n}\n\nexport type Props = {\n 'aria-label'?: string\n buttonId?: string\n buttonStyle?:\n | 'error'\n | 'icon-label'\n | 'none'\n | 'pill'\n | 'primary'\n | 'secondary'\n | 'subtle'\n | 'tab'\n | 'transparent'\n children?: React.ReactNode\n className?: string\n disabled?: boolean\n el?: 'anchor' | 'link' | ElementType\n /**\n * Setting to `true` will allow the submenu to be opened when the button is disabled\n */\n enableSubMenu?: boolean\n extraButtonProps?: Record<string, any>\n icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode\n iconPosition?: 'left' | 'right'\n iconStyle?: 'none' | 'with-border' | 'without-border'\n id?: string\n /**\n * @deprecated\n * This prop is deprecated and will be removed in the next major version.\n * Components now import their own `Link` directly from `next/link`.\n */\n Link?: React.ElementType\n margin?: boolean\n newTab?: boolean\n onClick?: (event: MouseEvent) => void\n onMouseDown?: (event: MouseEvent) => void\n /**\n * Enables form submission via an onClick handler. This is only needed if\n * type=\"submit\" does not trigger form submission, e.g. if the button DOM\n * element is not a direct child of the form element.\n *\n * @default false\n */\n programmaticSubmit?: boolean\n ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement | null>\n round?: boolean\n secondaryActions?: secondaryAction | secondaryAction[]\n size?: 'large' | 'medium' | 'small' | 'xsmall'\n SubMenuPopupContent?: (props: { close: () => void }) => React.ReactNode\n to?: string\n tooltip?: string\n type?: 'button' | 'submit'\n url?: string\n}\n"],"mappings":"AAQA","ignoreList":[]}
1
+ {"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Button/types.ts"],"sourcesContent":["import type { ElementType, MouseEvent } from 'react'\nimport type React from 'react'\n\ntype secondaryAction = {\n label: string\n onClick: (event: MouseEvent) => void\n}\n\nexport type Props = {\n 'aria-label'?: string\n buttonId?: string\n buttonStyle?:\n | 'dashed'\n | 'error'\n | 'icon-label'\n | 'none'\n | 'pill'\n | 'primary'\n | 'secondary'\n | 'subtle'\n | 'tab'\n | 'transparent'\n children?: React.ReactNode\n className?: string\n disabled?: boolean\n el?: 'anchor' | 'link' | ElementType\n /**\n * Setting to `true` will allow the submenu to be opened when the button is disabled\n */\n enableSubMenu?: boolean\n extraButtonProps?: Record<string, any>\n icon?: ['chevron' | 'edit' | 'plus' | 'x'] | React.ReactNode\n iconPosition?: 'left' | 'right'\n iconStyle?: 'none' | 'with-border' | 'without-border'\n id?: string\n /**\n * @deprecated\n * This prop is deprecated and will be removed in the next major version.\n * Components now import their own `Link` directly from `next/link`.\n */\n Link?: React.ElementType\n margin?: boolean\n newTab?: boolean\n onClick?: (event: MouseEvent) => void\n onMouseDown?: (event: MouseEvent) => void\n /**\n * Enables form submission via an onClick handler. This is only needed if\n * type=\"submit\" does not trigger form submission, e.g. if the button DOM\n * element is not a direct child of the form element.\n *\n * @default false\n */\n programmaticSubmit?: boolean\n ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement | null>\n round?: boolean\n secondaryActions?: secondaryAction | secondaryAction[]\n size?: 'large' | 'medium' | 'small' | 'xsmall'\n SubMenuPopupContent?: (props: { close: () => void }) => React.ReactNode\n to?: string\n tooltip?: string\n type?: 'button' | 'submit'\n url?: string\n}\n"],"mappings":"AAQA","ignoreList":[]}
package/dist/elements/ListSelection/index.scss CHANGED
@@ -16,7 +16,6 @@
16
16
  &__button {
17
17
  color: var(--theme-elevation-800);
18
18
  background: unset;
19
- border: none;
20
19
  text-decoration: underline;
21
20
  cursor: pointer;
22
21
  padding: 0;