@box/blueprint-web 12.95.1 → 12.97.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.
- package/dist/lib-esm/breadcrumb/breadcrumb.js +49 -37
- package/dist/lib-esm/breadcrumb/breadcrumb.module.js +1 -1
- package/dist/lib-esm/breadcrumb/page-link.d.ts +15 -0
- package/dist/lib-esm/breadcrumb/page-link.js +49 -0
- package/dist/lib-esm/breadcrumb/types.d.ts +4 -2
- package/dist/lib-esm/index.css +278 -225
- package/dist/lib-esm/modal/constants.d.ts +1 -0
- package/dist/lib-esm/modal/constants.js +3 -0
- package/dist/lib-esm/modal/index.d.ts +1 -1
- package/dist/lib-esm/modal/modal-loading.d.ts +2 -0
- package/dist/lib-esm/modal/modal-loading.js +63 -0
- package/dist/lib-esm/modal/modal.d.ts +1 -0
- package/dist/lib-esm/modal/modal.js +2 -0
- package/dist/lib-esm/modal/modal.module.js +1 -1
- package/dist/lib-esm/modal/types.d.ts +8 -0
- package/package.json +1 -1
|
@@ -1,35 +1,38 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { FolderTree, PointerRight } from '@box/blueprint-web-assets/icons/Fill';
|
|
4
|
+
import { Ellipsis } from '@box/blueprint-web-assets/icons/Medium';
|
|
4
5
|
import { Home } from '@box/blueprint-web-assets/icons/MediumFilled';
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
6
|
+
import noop from 'lodash/noop';
|
|
7
|
+
import { IconButton } from '../primitives/icon-button/icon-button.js';
|
|
8
|
+
import { PageLink } from './page-link.js';
|
|
7
9
|
import styles from './breadcrumb.module.js';
|
|
8
10
|
|
|
9
11
|
const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
10
12
|
const {
|
|
11
13
|
crumbs,
|
|
14
|
+
truncatedLinksIconAriaLabel,
|
|
12
15
|
rootIconAriaLabel,
|
|
13
16
|
rootIconVariant,
|
|
14
17
|
isInteractive = true,
|
|
15
18
|
size = 'medium',
|
|
16
19
|
truncationMethod = 'ellipsis',
|
|
17
|
-
|
|
20
|
+
onPageLinkClick = noop,
|
|
18
21
|
...rest
|
|
19
22
|
} = props;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
};
|
|
23
|
+
// If there are more than 7 crumbs, break up crumbs into first link, ellipsis icon button, and current page ancestor
|
|
24
|
+
const shouldTruncateCrumbs = crumbs?.length > 7;
|
|
25
|
+
const shouldUseEllipsisTruncation = truncationMethod === 'ellipsis' && shouldTruncateCrumbs && crumbs;
|
|
25
26
|
return (
|
|
26
27
|
// Add aria-label: breadcrumb https://jira.inside-box.net/browse/UXF-427
|
|
27
28
|
jsx("nav", {
|
|
28
29
|
ref: forwardedRef,
|
|
29
|
-
className: styles.
|
|
30
|
+
className: styles.container,
|
|
30
31
|
...rest,
|
|
31
32
|
children: jsxs("ol", {
|
|
33
|
+
className: styles.breadcrumb,
|
|
32
34
|
children: [rootIconVariant && jsxs("li", {
|
|
35
|
+
className: styles.pageLink,
|
|
33
36
|
children: [rootIconVariant === 'home' ? jsx(Home, {
|
|
34
37
|
"aria-label": rootIconAriaLabel
|
|
35
38
|
}) : jsx(FolderTree, {
|
|
@@ -38,35 +41,44 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
38
41
|
className: styles.separator,
|
|
39
42
|
role: "presentation"
|
|
40
43
|
})]
|
|
41
|
-
}),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
44
|
+
}), shouldUseEllipsisTruncation && jsxs(Fragment, {
|
|
45
|
+
children: [jsx(PageLink, {
|
|
46
|
+
crumb: crumbs[0],
|
|
47
|
+
isInteractive: isInteractive,
|
|
48
|
+
isLast: false,
|
|
49
|
+
onPageLinkClick: onPageLinkClick
|
|
50
|
+
}), jsxs("li", {
|
|
51
|
+
className: styles.pageLink,
|
|
52
|
+
children: [jsx(IconButton, {
|
|
53
|
+
"aria-label": truncatedLinksIconAriaLabel,
|
|
54
|
+
className: styles.iconButtonInline,
|
|
55
|
+
icon: Ellipsis,
|
|
56
|
+
size: "small"
|
|
57
|
+
}), jsx(PointerRight, {
|
|
58
|
+
className: styles.separator,
|
|
59
|
+
role: "presentation"
|
|
60
|
+
})]
|
|
61
|
+
}), jsx(PageLink, {
|
|
62
|
+
crumb: crumbs[crumbs.length - 2],
|
|
63
|
+
isInteractive: isInteractive,
|
|
64
|
+
isLast: false,
|
|
65
|
+
onPageLinkClick: onPageLinkClick
|
|
66
|
+
}), jsx(PageLink, {
|
|
67
|
+
crumb: crumbs[crumbs.length - 1],
|
|
68
|
+
isInteractive: isInteractive,
|
|
69
|
+
isLast: true,
|
|
70
|
+
onPageLinkClick: onPageLinkClick
|
|
58
71
|
})]
|
|
59
|
-
},
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}, crumb.id)), jsx("li", {
|
|
72
|
+
}), !shouldUseEllipsisTruncation && crumbs?.map((crumb, index) => {
|
|
73
|
+
return jsx(PageLink, {
|
|
74
|
+
crumb: crumb,
|
|
75
|
+
isInteractive: isInteractive,
|
|
76
|
+
isLast: index === crumbs.length - 1,
|
|
77
|
+
onPageLinkClick: onPageLinkClick
|
|
78
|
+
}, crumb.id);
|
|
79
|
+
}), jsx("li", {
|
|
68
80
|
children: jsxs("span", {
|
|
69
|
-
children: [size, " size breadcrumb
|
|
81
|
+
children: [size, " size breadcrumb"]
|
|
70
82
|
})
|
|
71
83
|
})]
|
|
72
84
|
})
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"breadcrumb":"bp_breadcrumb_module_breadcrumb--
|
|
2
|
+
var styles = {"container":"bp_breadcrumb_module_container--ce1b6","breadcrumb":"bp_breadcrumb_module_breadcrumb--ce1b6","pageLink":"bp_breadcrumb_module_pageLink--ce1b6","pageLinkInteractive":"bp_breadcrumb_module_pageLinkInteractive--ce1b6","separator":"bp_breadcrumb_module_separator--ce1b6"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { type Crumb } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* A page link represents a combination of an optional folder icon, a single crumb, and a separator.
|
|
4
|
+
*/
|
|
5
|
+
export interface PageLinkProps {
|
|
6
|
+
/** The crumb to display in the page link. */
|
|
7
|
+
crumb: Crumb;
|
|
8
|
+
/** Whether the page link is the last crumb in the breadcrumb. */
|
|
9
|
+
isLast: boolean;
|
|
10
|
+
/** Whether the page link is interactive. */
|
|
11
|
+
isInteractive: boolean;
|
|
12
|
+
/** The callback to call when the page link is clicked. */
|
|
13
|
+
onPageLinkClick: (id: string) => void;
|
|
14
|
+
}
|
|
15
|
+
export declare const PageLink: ({ crumb, isLast, isInteractive, onPageLinkClick }: PageLinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
import { PointerRight } from '@box/blueprint-web-assets/icons/Fill';
|
|
4
|
+
import { Link } from '../primitives/link/link.js';
|
|
5
|
+
import { Text } from '../text/text.js';
|
|
6
|
+
import styles from './breadcrumb.module.js';
|
|
7
|
+
|
|
8
|
+
const PageLink = ({
|
|
9
|
+
crumb,
|
|
10
|
+
isLast,
|
|
11
|
+
isInteractive,
|
|
12
|
+
onPageLinkClick
|
|
13
|
+
}) => {
|
|
14
|
+
const handlePageLinkClick = useCallback(() => {
|
|
15
|
+
onPageLinkClick(crumb.id);
|
|
16
|
+
}, [onPageLinkClick, crumb.id]);
|
|
17
|
+
if (isLast) {
|
|
18
|
+
return jsx("li", {
|
|
19
|
+
className: styles.pageLink,
|
|
20
|
+
children: jsx(Text, {
|
|
21
|
+
"aria-current": "page",
|
|
22
|
+
as: "span",
|
|
23
|
+
color: "textOnLightDefault",
|
|
24
|
+
variant: "bodyLarge",
|
|
25
|
+
children: crumb.name
|
|
26
|
+
})
|
|
27
|
+
}, crumb.id);
|
|
28
|
+
}
|
|
29
|
+
return jsxs("li", {
|
|
30
|
+
className: styles.pageLink,
|
|
31
|
+
children: [isInteractive ?
|
|
32
|
+
// Add hover behavior https://jira.inside-box.net/browse/UXF-428
|
|
33
|
+
jsx(Link, {
|
|
34
|
+
className: styles.pageLinkInteractive,
|
|
35
|
+
inheritFont: true,
|
|
36
|
+
onClick: handlePageLinkClick,
|
|
37
|
+
variant: "standalone",
|
|
38
|
+
children: crumb.name
|
|
39
|
+
}) : jsx(Text, {
|
|
40
|
+
as: "span",
|
|
41
|
+
children: crumb.name
|
|
42
|
+
}), jsx(PointerRight, {
|
|
43
|
+
className: styles.separator,
|
|
44
|
+
role: "presentation"
|
|
45
|
+
})]
|
|
46
|
+
}, crumb.id);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export { PageLink };
|
|
@@ -10,10 +10,12 @@ export type BreadcrumbProps = {
|
|
|
10
10
|
crumbs: Crumb[];
|
|
11
11
|
/** Controls whether individual crumbs (items) and icons are interactive, or clickable. */
|
|
12
12
|
isInteractive?: boolean;
|
|
13
|
+
/** Callback for breadcrumb click. Used to trigger navigation to the clicked folder. */
|
|
14
|
+
onPageLinkClick?: (id: string) => void;
|
|
13
15
|
/** Controls the height and width of icons and crumbs. */
|
|
14
16
|
size?: 'xsmall' | 'small' | 'medium' | 'large';
|
|
15
|
-
/**
|
|
16
|
-
|
|
17
|
+
/** Aria label for the icon button when breadcrumb is truncated. */
|
|
18
|
+
truncatedLinksIconAriaLabel: string;
|
|
17
19
|
/** Controls behavior when there are too many crumbs to display.
|
|
18
20
|
* Ellipsis shows the crumbs at the beginning and end, with an ellipsis icon in between.
|
|
19
21
|
* Folder shows only the last crumb, preceded by a folder tree icon.
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -1824,6 +1824,155 @@
|
|
|
1824
1824
|
.bp_base_badge_module_numericBadgeMoreDigits--c8c81{
|
|
1825
1825
|
padding:1px 3px;
|
|
1826
1826
|
}
|
|
1827
|
+
.bp_icon_button_module_iconButton--06ef3[data-modern=false]{
|
|
1828
|
+
--icon-button-radius:var(--radius-2);
|
|
1829
|
+
--icon-button-surface-disabled:var(--surface-cta-surface-icon-disabled);
|
|
1830
|
+
--icon-button-gray:var(--gray-50);
|
|
1831
|
+
--icon-button-border:var(--border-2);
|
|
1832
|
+
--icon-button-outline:var(--outline-focus-on-light);
|
|
1833
|
+
--icon-button-surface:var(--surface-cta-surface-icon);
|
|
1834
|
+
--icon-button-icon:var(--icon-cta-icon);
|
|
1835
|
+
--icon-button-surface-hover:var(--surface-cta-surface-icon-hover);
|
|
1836
|
+
--icon-button-icon-hover:var(--icon-cta-icon-hover);
|
|
1837
|
+
--icon-button-surface-pressed:var(--surface-cta-surface-icon-pressed);
|
|
1838
|
+
--icon-button-icon-pressed:var(--icon-cta-icon-pressed);
|
|
1839
|
+
--icon-button-icon-on-color:var(--icon-cta-icon-on-color);
|
|
1840
|
+
--icon-button-icon-on-color-hover:var(--icon-cta-icon-on-color-hover);
|
|
1841
|
+
--icon-button-icon-on-color-pressed:var(--icon-cta-icon-on-color-pressed);
|
|
1842
|
+
--icon-button-surface-utility:var(--surface-cta-surface-icon-utility);
|
|
1843
|
+
--icon-button-icon-utility:var(--icon-cta-icon-utility);
|
|
1844
|
+
--icon-button-surface-utility-hover:var(--surface-cta-surface-icon-utility-hover);
|
|
1845
|
+
--icon-button-icon-utility-hover:var(--icon-cta-icon-utility-hover);
|
|
1846
|
+
--icon-button-surface-utility-pressed:var(--surface-cta-surface-icon-utility-pressed);
|
|
1847
|
+
--icon-button-icon-utility-pressed:var(--icon-cta-icon-utility-pressed);
|
|
1848
|
+
--icon-button-size-large:var(--size-10);
|
|
1849
|
+
--icon-button-size-small:var(--size-8);
|
|
1850
|
+
--icon-button-size-x-small:var(--size-6);
|
|
1851
|
+
}
|
|
1852
|
+
|
|
1853
|
+
.bp_icon_button_module_iconButton--06ef3[data-modern=true]{
|
|
1854
|
+
--icon-button-radius:var(--bp-radius-10);
|
|
1855
|
+
--icon-button-surface-disabled:var(--bp-surface-cta-surface-icon);
|
|
1856
|
+
--icon-button-gray:var(--bp-gray-50);
|
|
1857
|
+
--icon-button-border:var(--bp-border-02);
|
|
1858
|
+
--icon-button-outline:var(--bp-outline-focus-on-light);
|
|
1859
|
+
--icon-button-surface:var(--bp-surface-cta-surface-icon);
|
|
1860
|
+
--icon-button-icon:var(--bp-icon-cta-icon);
|
|
1861
|
+
--icon-button-surface-hover:var(--bp-surface-cta-surface-icon-hover);
|
|
1862
|
+
--icon-button-icon-hover:var(--bp-icon-cta-icon-hover);
|
|
1863
|
+
--icon-button-surface-pressed:var(--bp-surface-cta-surface-icon-pressed);
|
|
1864
|
+
--icon-button-icon-pressed:var(--bp-icon-cta-icon-pressed);
|
|
1865
|
+
--icon-button-icon-high-contrast:var(--bp-icon-cta-icon-high-contrast);
|
|
1866
|
+
--icon-button-icon-high-contrast-hover:var(--bp-icon-cta-icon-high-contrast-hover);
|
|
1867
|
+
--icon-button-icon-high-contrast-pressed:var(--bp-icon-cta-icon-high-contrast-pressed);
|
|
1868
|
+
--icon-button-surface-utility:var(--bp-surface-cta-surface-icon-utility);
|
|
1869
|
+
--icon-button-icon-utility:var(--bp-icon-cta-icon-utility);
|
|
1870
|
+
--icon-button-surface-utility-hover:var(--bp-surface-cta-surface-icon-utility-hover);
|
|
1871
|
+
--icon-button-icon-utility-hover:var(--bp-icon-cta-icon-utility-hover);
|
|
1872
|
+
--icon-button-surface-utility-pressed:var(--bp-surface-cta-surface-icon-utility-pressed);
|
|
1873
|
+
--icon-button-icon-utility-pressed:var(--bp-icon-cta-icon-utility-pressed);
|
|
1874
|
+
--icon-button-size-large:var(--bp-size-100);
|
|
1875
|
+
--icon-button-size-small:var(--bp-size-080);
|
|
1876
|
+
--icon-button-size-x-small:var(--bp-size-060);
|
|
1877
|
+
}
|
|
1878
|
+
|
|
1879
|
+
.bp_icon_button_module_iconButton--06ef3{
|
|
1880
|
+
align-items:center;
|
|
1881
|
+
border-radius:var(--icon-button-radius);
|
|
1882
|
+
border-style:none;
|
|
1883
|
+
cursor:pointer;
|
|
1884
|
+
display:flex;
|
|
1885
|
+
justify-content:center;
|
|
1886
|
+
padding:0;
|
|
1887
|
+
}
|
|
1888
|
+
.bp_icon_button_module_iconButton--06ef3[aria-disabled=true]{
|
|
1889
|
+
background:var(--icon-button-surface-disabled);
|
|
1890
|
+
opacity:.3;
|
|
1891
|
+
}
|
|
1892
|
+
.bp_icon_button_module_iconButton--06ef3[aria-disabled=true] .bp_icon_button_module_icon--06ef3 *{
|
|
1893
|
+
fill:var(--icon-button-gray);
|
|
1894
|
+
}
|
|
1895
|
+
.bp_icon_button_module_iconButton--06ef3:focus-visible{
|
|
1896
|
+
outline:none;
|
|
1897
|
+
}
|
|
1898
|
+
.bp_icon_button_module_iconButton--06ef3[data-focus-visible]{
|
|
1899
|
+
outline:var(--icon-button-border) solid var(--icon-button-outline);
|
|
1900
|
+
}
|
|
1901
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3{
|
|
1902
|
+
background:var(--icon-button-surface);
|
|
1903
|
+
}
|
|
1904
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3 .bp_icon_button_module_icon--06ef3 *{
|
|
1905
|
+
fill:var(--icon-button-icon);
|
|
1906
|
+
}
|
|
1907
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3:hover,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3[data-focus-visible]{
|
|
1908
|
+
background:var(--icon-button-surface-hover);
|
|
1909
|
+
}
|
|
1910
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3:hover .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3[data-focus-visible] .bp_icon_button_module_icon--06ef3 *{
|
|
1911
|
+
fill:var(--icon-button-icon-hover);
|
|
1912
|
+
}
|
|
1913
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3:active,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3[data-active]{
|
|
1914
|
+
background:var(--icon-button-surface-pressed);
|
|
1915
|
+
}
|
|
1916
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3:active .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3[data-active] .bp_icon_button_module_icon--06ef3 *{
|
|
1917
|
+
fill:var(--icon-button-icon-pressed);
|
|
1918
|
+
}
|
|
1919
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3{
|
|
1920
|
+
background:var(--icon-button-surface);
|
|
1921
|
+
}
|
|
1922
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3:hover,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3[data-focus-visible]{
|
|
1923
|
+
background:var(--icon-button-surface-hover);
|
|
1924
|
+
}
|
|
1925
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3:active,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3[data-active]{
|
|
1926
|
+
background:var(--icon-button-surface-pressed);
|
|
1927
|
+
}
|
|
1928
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3{
|
|
1929
|
+
background:var(--icon-button-surface);
|
|
1930
|
+
}
|
|
1931
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3 .bp_icon_button_module_icon--06ef3 *{
|
|
1932
|
+
fill:var(--icon-button-icon-high-contrast);
|
|
1933
|
+
}
|
|
1934
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3:hover,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3[data-focus-visible]{
|
|
1935
|
+
background:var(--icon-button-surface-hover);
|
|
1936
|
+
}
|
|
1937
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3:hover .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3[data-focus-visible] .bp_icon_button_module_icon--06ef3 *{
|
|
1938
|
+
fill:var(--icon-button-icon-high-contrast-hover);
|
|
1939
|
+
}
|
|
1940
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3:active,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3[data-active]{
|
|
1941
|
+
background:var(--icon-button-surface-pressed);
|
|
1942
|
+
}
|
|
1943
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3:active .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3[data-active] .bp_icon_button_module_icon--06ef3 *{
|
|
1944
|
+
fill:var(--icon-button-icon-high-contrast-pressed);
|
|
1945
|
+
}
|
|
1946
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3{
|
|
1947
|
+
background:var(--icon-button-surface-utility);
|
|
1948
|
+
}
|
|
1949
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3 .bp_icon_button_module_icon--06ef3 *{
|
|
1950
|
+
fill:var(--icon-button-icon-utility);
|
|
1951
|
+
}
|
|
1952
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3:hover,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3[data-focus-visible]{
|
|
1953
|
+
background:var(--icon-button-surface-utility-hover);
|
|
1954
|
+
}
|
|
1955
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3:hover .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3[data-focus-visible] .bp_icon_button_module_icon--06ef3 *{
|
|
1956
|
+
fill:var(--icon-button-icon-utility-hover);
|
|
1957
|
+
}
|
|
1958
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3:active,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3[data-active]{
|
|
1959
|
+
background:var(--icon-button-surface-utility-pressed);
|
|
1960
|
+
}
|
|
1961
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3:active .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3[data-active] .bp_icon_button_module_icon--06ef3 *{
|
|
1962
|
+
fill:var(--icon-button-icon-utility-pressed);
|
|
1963
|
+
}
|
|
1964
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_large--06ef3{
|
|
1965
|
+
height:var(--icon-button-size-large);
|
|
1966
|
+
width:var(--icon-button-size-large);
|
|
1967
|
+
}
|
|
1968
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small--06ef3{
|
|
1969
|
+
height:var(--icon-button-size-small);
|
|
1970
|
+
width:var(--icon-button-size-small);
|
|
1971
|
+
}
|
|
1972
|
+
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_x-small--06ef3{
|
|
1973
|
+
height:var(--icon-button-size-x-small);
|
|
1974
|
+
width:var(--icon-button-size-x-small);
|
|
1975
|
+
}
|
|
1827
1976
|
.bp_link_module_link--3786a{
|
|
1828
1977
|
color:var(--text-cta-link);
|
|
1829
1978
|
}
|
|
@@ -1888,30 +2037,27 @@
|
|
|
1888
2037
|
text-decoration-thickness:auto;
|
|
1889
2038
|
text-underline-offset:auto;
|
|
1890
2039
|
}
|
|
1891
|
-
|
|
1892
|
-
align-items:center;
|
|
2040
|
+
.bp_breadcrumb_module_container--ce1b6{
|
|
1893
2041
|
color:var(--bp-text-text-on-light-tertiary);
|
|
1894
|
-
display:flex;
|
|
1895
2042
|
font-size:var(--bp-font-size-06);
|
|
1896
|
-
gap:var(--bp-size-010);
|
|
1897
2043
|
line-height:var(--bp-size-060);
|
|
1898
2044
|
}
|
|
1899
|
-
|
|
2045
|
+
.bp_breadcrumb_module_container--ce1b6 .bp_breadcrumb_module_breadcrumb--ce1b6{
|
|
2046
|
+
align-items:center;
|
|
2047
|
+
display:flex;
|
|
2048
|
+
gap:var(--bp-size-010);
|
|
1900
2049
|
list-style:none;
|
|
1901
2050
|
}
|
|
1902
|
-
|
|
1903
|
-
|
|
2051
|
+
.bp_breadcrumb_module_container--ce1b6 .bp_breadcrumb_module_pageLink--ce1b6{
|
|
2052
|
+
align-items:center;
|
|
2053
|
+
display:flex;
|
|
2054
|
+
gap:var(--bp-size-010);
|
|
1904
2055
|
}
|
|
1905
|
-
|
|
2056
|
+
.bp_breadcrumb_module_container--ce1b6 .bp_breadcrumb_module_pageLink--ce1b6 .bp_breadcrumb_module_pageLinkInteractive--ce1b6{
|
|
1906
2057
|
color:inherit;
|
|
1907
2058
|
}
|
|
1908
|
-
|
|
1909
|
-
color:var(--bp-text-text-on-light);
|
|
1910
|
-
}
|
|
1911
|
-
nav.bp_breadcrumb_module_breadcrumb--f04e8 li .bp_breadcrumb_module_separator--f04e8{
|
|
2059
|
+
.bp_breadcrumb_module_container--ce1b6 .bp_breadcrumb_module_pageLink--ce1b6 .bp_breadcrumb_module_separator--ce1b6{
|
|
1912
2060
|
height:var(--bp-size-030);
|
|
1913
|
-
margin-left:var(--bp-size-010);
|
|
1914
|
-
margin-right:var(--bp-size-010);
|
|
1915
2061
|
width:var(--bp-size-030);
|
|
1916
2062
|
}
|
|
1917
2063
|
.bp_button_wrapper_module_buttonWrapper--b0897{
|
|
@@ -2333,155 +2479,6 @@ nav.bp_breadcrumb_module_breadcrumb--f04e8 li .bp_breadcrumb_module_separator--f
|
|
|
2333
2479
|
.bp_checkbox_module_option--1a6e7.bp_checkbox_module_disabled--1a6e7 .bp_checkbox_module_label--1a6e7{
|
|
2334
2480
|
cursor:default;
|
|
2335
2481
|
}
|
|
2336
|
-
.bp_icon_button_module_iconButton--06ef3[data-modern=false]{
|
|
2337
|
-
--icon-button-radius:var(--radius-2);
|
|
2338
|
-
--icon-button-surface-disabled:var(--surface-cta-surface-icon-disabled);
|
|
2339
|
-
--icon-button-gray:var(--gray-50);
|
|
2340
|
-
--icon-button-border:var(--border-2);
|
|
2341
|
-
--icon-button-outline:var(--outline-focus-on-light);
|
|
2342
|
-
--icon-button-surface:var(--surface-cta-surface-icon);
|
|
2343
|
-
--icon-button-icon:var(--icon-cta-icon);
|
|
2344
|
-
--icon-button-surface-hover:var(--surface-cta-surface-icon-hover);
|
|
2345
|
-
--icon-button-icon-hover:var(--icon-cta-icon-hover);
|
|
2346
|
-
--icon-button-surface-pressed:var(--surface-cta-surface-icon-pressed);
|
|
2347
|
-
--icon-button-icon-pressed:var(--icon-cta-icon-pressed);
|
|
2348
|
-
--icon-button-icon-on-color:var(--icon-cta-icon-on-color);
|
|
2349
|
-
--icon-button-icon-on-color-hover:var(--icon-cta-icon-on-color-hover);
|
|
2350
|
-
--icon-button-icon-on-color-pressed:var(--icon-cta-icon-on-color-pressed);
|
|
2351
|
-
--icon-button-surface-utility:var(--surface-cta-surface-icon-utility);
|
|
2352
|
-
--icon-button-icon-utility:var(--icon-cta-icon-utility);
|
|
2353
|
-
--icon-button-surface-utility-hover:var(--surface-cta-surface-icon-utility-hover);
|
|
2354
|
-
--icon-button-icon-utility-hover:var(--icon-cta-icon-utility-hover);
|
|
2355
|
-
--icon-button-surface-utility-pressed:var(--surface-cta-surface-icon-utility-pressed);
|
|
2356
|
-
--icon-button-icon-utility-pressed:var(--icon-cta-icon-utility-pressed);
|
|
2357
|
-
--icon-button-size-large:var(--size-10);
|
|
2358
|
-
--icon-button-size-small:var(--size-8);
|
|
2359
|
-
--icon-button-size-x-small:var(--size-6);
|
|
2360
|
-
}
|
|
2361
|
-
|
|
2362
|
-
.bp_icon_button_module_iconButton--06ef3[data-modern=true]{
|
|
2363
|
-
--icon-button-radius:var(--bp-radius-10);
|
|
2364
|
-
--icon-button-surface-disabled:var(--bp-surface-cta-surface-icon);
|
|
2365
|
-
--icon-button-gray:var(--bp-gray-50);
|
|
2366
|
-
--icon-button-border:var(--bp-border-02);
|
|
2367
|
-
--icon-button-outline:var(--bp-outline-focus-on-light);
|
|
2368
|
-
--icon-button-surface:var(--bp-surface-cta-surface-icon);
|
|
2369
|
-
--icon-button-icon:var(--bp-icon-cta-icon);
|
|
2370
|
-
--icon-button-surface-hover:var(--bp-surface-cta-surface-icon-hover);
|
|
2371
|
-
--icon-button-icon-hover:var(--bp-icon-cta-icon-hover);
|
|
2372
|
-
--icon-button-surface-pressed:var(--bp-surface-cta-surface-icon-pressed);
|
|
2373
|
-
--icon-button-icon-pressed:var(--bp-icon-cta-icon-pressed);
|
|
2374
|
-
--icon-button-icon-high-contrast:var(--bp-icon-cta-icon-high-contrast);
|
|
2375
|
-
--icon-button-icon-high-contrast-hover:var(--bp-icon-cta-icon-high-contrast-hover);
|
|
2376
|
-
--icon-button-icon-high-contrast-pressed:var(--bp-icon-cta-icon-high-contrast-pressed);
|
|
2377
|
-
--icon-button-surface-utility:var(--bp-surface-cta-surface-icon-utility);
|
|
2378
|
-
--icon-button-icon-utility:var(--bp-icon-cta-icon-utility);
|
|
2379
|
-
--icon-button-surface-utility-hover:var(--bp-surface-cta-surface-icon-utility-hover);
|
|
2380
|
-
--icon-button-icon-utility-hover:var(--bp-icon-cta-icon-utility-hover);
|
|
2381
|
-
--icon-button-surface-utility-pressed:var(--bp-surface-cta-surface-icon-utility-pressed);
|
|
2382
|
-
--icon-button-icon-utility-pressed:var(--bp-icon-cta-icon-utility-pressed);
|
|
2383
|
-
--icon-button-size-large:var(--bp-size-100);
|
|
2384
|
-
--icon-button-size-small:var(--bp-size-080);
|
|
2385
|
-
--icon-button-size-x-small:var(--bp-size-060);
|
|
2386
|
-
}
|
|
2387
|
-
|
|
2388
|
-
.bp_icon_button_module_iconButton--06ef3{
|
|
2389
|
-
align-items:center;
|
|
2390
|
-
border-radius:var(--icon-button-radius);
|
|
2391
|
-
border-style:none;
|
|
2392
|
-
cursor:pointer;
|
|
2393
|
-
display:flex;
|
|
2394
|
-
justify-content:center;
|
|
2395
|
-
padding:0;
|
|
2396
|
-
}
|
|
2397
|
-
.bp_icon_button_module_iconButton--06ef3[aria-disabled=true]{
|
|
2398
|
-
background:var(--icon-button-surface-disabled);
|
|
2399
|
-
opacity:.3;
|
|
2400
|
-
}
|
|
2401
|
-
.bp_icon_button_module_iconButton--06ef3[aria-disabled=true] .bp_icon_button_module_icon--06ef3 *{
|
|
2402
|
-
fill:var(--icon-button-gray);
|
|
2403
|
-
}
|
|
2404
|
-
.bp_icon_button_module_iconButton--06ef3:focus-visible{
|
|
2405
|
-
outline:none;
|
|
2406
|
-
}
|
|
2407
|
-
.bp_icon_button_module_iconButton--06ef3[data-focus-visible]{
|
|
2408
|
-
outline:var(--icon-button-border) solid var(--icon-button-outline);
|
|
2409
|
-
}
|
|
2410
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3{
|
|
2411
|
-
background:var(--icon-button-surface);
|
|
2412
|
-
}
|
|
2413
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3 .bp_icon_button_module_icon--06ef3 *{
|
|
2414
|
-
fill:var(--icon-button-icon);
|
|
2415
|
-
}
|
|
2416
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3:hover,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3[data-focus-visible]{
|
|
2417
|
-
background:var(--icon-button-surface-hover);
|
|
2418
|
-
}
|
|
2419
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3:hover .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3[data-focus-visible] .bp_icon_button_module_icon--06ef3 *{
|
|
2420
|
-
fill:var(--icon-button-icon-hover);
|
|
2421
|
-
}
|
|
2422
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3:active,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3[data-active]{
|
|
2423
|
-
background:var(--icon-button-surface-pressed);
|
|
2424
|
-
}
|
|
2425
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3:active .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3[data-active] .bp_icon_button_module_icon--06ef3 *{
|
|
2426
|
-
fill:var(--icon-button-icon-pressed);
|
|
2427
|
-
}
|
|
2428
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3{
|
|
2429
|
-
background:var(--icon-button-surface);
|
|
2430
|
-
}
|
|
2431
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3:hover,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3[data-focus-visible]{
|
|
2432
|
-
background:var(--icon-button-surface-hover);
|
|
2433
|
-
}
|
|
2434
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3:active,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3[data-active]{
|
|
2435
|
-
background:var(--icon-button-surface-pressed);
|
|
2436
|
-
}
|
|
2437
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3{
|
|
2438
|
-
background:var(--icon-button-surface);
|
|
2439
|
-
}
|
|
2440
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3 .bp_icon_button_module_icon--06ef3 *{
|
|
2441
|
-
fill:var(--icon-button-icon-high-contrast);
|
|
2442
|
-
}
|
|
2443
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3:hover,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3[data-focus-visible]{
|
|
2444
|
-
background:var(--icon-button-surface-hover);
|
|
2445
|
-
}
|
|
2446
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3:hover .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3[data-focus-visible] .bp_icon_button_module_icon--06ef3 *{
|
|
2447
|
-
fill:var(--icon-button-icon-high-contrast-hover);
|
|
2448
|
-
}
|
|
2449
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3:active,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3[data-active]{
|
|
2450
|
-
background:var(--icon-button-surface-pressed);
|
|
2451
|
-
}
|
|
2452
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3:active .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3[data-active] .bp_icon_button_module_icon--06ef3 *{
|
|
2453
|
-
fill:var(--icon-button-icon-high-contrast-pressed);
|
|
2454
|
-
}
|
|
2455
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3{
|
|
2456
|
-
background:var(--icon-button-surface-utility);
|
|
2457
|
-
}
|
|
2458
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3 .bp_icon_button_module_icon--06ef3 *{
|
|
2459
|
-
fill:var(--icon-button-icon-utility);
|
|
2460
|
-
}
|
|
2461
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3:hover,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3[data-focus-visible]{
|
|
2462
|
-
background:var(--icon-button-surface-utility-hover);
|
|
2463
|
-
}
|
|
2464
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3:hover .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3[data-focus-visible] .bp_icon_button_module_icon--06ef3 *{
|
|
2465
|
-
fill:var(--icon-button-icon-utility-hover);
|
|
2466
|
-
}
|
|
2467
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3:active,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3[data-active]{
|
|
2468
|
-
background:var(--icon-button-surface-utility-pressed);
|
|
2469
|
-
}
|
|
2470
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3:active .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3[data-active] .bp_icon_button_module_icon--06ef3 *{
|
|
2471
|
-
fill:var(--icon-button-icon-utility-pressed);
|
|
2472
|
-
}
|
|
2473
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_large--06ef3{
|
|
2474
|
-
height:var(--icon-button-size-large);
|
|
2475
|
-
width:var(--icon-button-size-large);
|
|
2476
|
-
}
|
|
2477
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small--06ef3{
|
|
2478
|
-
height:var(--icon-button-size-small);
|
|
2479
|
-
width:var(--icon-button-size-small);
|
|
2480
|
-
}
|
|
2481
|
-
.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_x-small--06ef3{
|
|
2482
|
-
height:var(--icon-button-size-x-small);
|
|
2483
|
-
width:var(--icon-button-size-x-small);
|
|
2484
|
-
}
|
|
2485
2482
|
.bp_collapsible_section_module_collapsibleSection--3ab4e[data-modern=false]{
|
|
2486
2483
|
--collapsible-section-header-padding:var(--space-5);
|
|
2487
2484
|
--collapsible-section-body-padding:var(--space-5);
|
|
@@ -6986,7 +6983,7 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
|
|
|
6986
6983
|
display:inline;
|
|
6987
6984
|
}
|
|
6988
6985
|
|
|
6989
|
-
.bp_modal_module_overlay--
|
|
6986
|
+
.bp_modal_module_overlay--1e234[data-modern=false]{
|
|
6990
6987
|
--modal-body-text-color:var(--text-text-on-light);
|
|
6991
6988
|
--modal-overlay-background:var(--overlay-modal-overlay);
|
|
6992
6989
|
--modal-content-background:var(--gray-white);
|
|
@@ -6996,6 +6993,9 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
|
|
|
6996
6993
|
--modal-max-width-medium:540px;
|
|
6997
6994
|
--modal-max-width-large:620px;
|
|
6998
6995
|
--modal-max-width-xlarge:768px;
|
|
6996
|
+
--modal-max-width-loading:var(--modal-min-width-non-fullscreen);
|
|
6997
|
+
--modal-max-height-loading:min(300px, var(--modal-max-height-non-fullscreen));
|
|
6998
|
+
--modal-loading-height:148px;
|
|
6999
6999
|
--modal-margin:0 var(--space-8);
|
|
7000
7000
|
--modal-border-radius:var(--radius-4);
|
|
7001
7001
|
--modal-close-button-color:var(--gray-65);
|
|
@@ -7021,9 +7021,10 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
|
|
|
7021
7021
|
--modal-footer-padding:var(--space-4);
|
|
7022
7022
|
--modal-footer-padding-non-fullscreen:var(--space-6);
|
|
7023
7023
|
--modal-footer-button-margin-inline-start:var(--space-3);
|
|
7024
|
+
--modal-loading-animation:var(--animation-duration-2) cubic-bezier(.25, .46, .45, .94);
|
|
7024
7025
|
}
|
|
7025
7026
|
|
|
7026
|
-
.bp_modal_module_overlay--
|
|
7027
|
+
.bp_modal_module_overlay--1e234[data-modern=true]{
|
|
7027
7028
|
--modal-overlay-background:var(--bp-overlay-modal-overlay);
|
|
7028
7029
|
--modal-content-background:var(--bp-surface-modal-surface);
|
|
7029
7030
|
--modal-min-width-non-fullscreen:calc(460px - var(--bp-space-080)*2);
|
|
@@ -7058,9 +7059,10 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
|
|
|
7058
7059
|
--modal-footer-padding:var(--bp-space-040);
|
|
7059
7060
|
--modal-footer-padding-non-fullscreen:var(--bp-space-060);
|
|
7060
7061
|
--modal-footer-button-margin-inline-start:var(--bp-space-030);
|
|
7062
|
+
--modal-loading-animation:var(--animation-duration-2) cubic-bezier(.25, .46, .45, .94);
|
|
7061
7063
|
}
|
|
7062
7064
|
|
|
7063
|
-
.bp_modal_module_overlay--
|
|
7065
|
+
.bp_modal_module_overlay--1e234{
|
|
7064
7066
|
background-color:var(--modal-overlay-background);
|
|
7065
7067
|
bottom:0;
|
|
7066
7068
|
display:grid;
|
|
@@ -7072,13 +7074,49 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
|
|
|
7072
7074
|
z-index:370;
|
|
7073
7075
|
}
|
|
7074
7076
|
@media (width > 459px){
|
|
7075
|
-
.bp_modal_module_overlay--
|
|
7077
|
+
.bp_modal_module_overlay--1e234{
|
|
7076
7078
|
place-items:center;
|
|
7077
7079
|
}
|
|
7078
7080
|
}
|
|
7079
7081
|
|
|
7080
|
-
.
|
|
7081
|
-
|
|
7082
|
+
.bp_modal_module_headerDividerLine--1e234{
|
|
7083
|
+
position:relative;
|
|
7084
|
+
}
|
|
7085
|
+
.bp_modal_module_headerDividerLine--1e234::after{
|
|
7086
|
+
border-bottom:var(--modal-divider-line-border);
|
|
7087
|
+
bottom:0;
|
|
7088
|
+
content:"";
|
|
7089
|
+
left:var(--modal-divider-line-offset-left);
|
|
7090
|
+
position:absolute;
|
|
7091
|
+
right:var(--modal-divider-line-offset-right);
|
|
7092
|
+
}
|
|
7093
|
+
@media (width > 459px){
|
|
7094
|
+
.bp_modal_module_headerDividerLine--1e234::after{
|
|
7095
|
+
left:var(--modal-divider-line-offset-left-non-fullscreen);
|
|
7096
|
+
right:var(--modal-divider-line-offset-right-non-fullscreen);
|
|
7097
|
+
}
|
|
7098
|
+
}
|
|
7099
|
+
|
|
7100
|
+
.bp_modal_module_footerDividerLine--1e234{
|
|
7101
|
+
position:relative;
|
|
7102
|
+
}
|
|
7103
|
+
.bp_modal_module_footerDividerLine--1e234::before{
|
|
7104
|
+
border-bottom:var(--modal-divider-line-border);
|
|
7105
|
+
content:"";
|
|
7106
|
+
left:var(--modal-divider-line-offset-left);
|
|
7107
|
+
position:absolute;
|
|
7108
|
+
right:var(--modal-divider-line-offset-right);
|
|
7109
|
+
top:0;
|
|
7110
|
+
}
|
|
7111
|
+
@media (width > 459px){
|
|
7112
|
+
.bp_modal_module_footerDividerLine--1e234::before{
|
|
7113
|
+
left:var(--modal-divider-line-offset-left-non-fullscreen);
|
|
7114
|
+
right:var(--modal-divider-line-offset-right-non-fullscreen);
|
|
7115
|
+
}
|
|
7116
|
+
}
|
|
7117
|
+
|
|
7118
|
+
.bp_modal_module_content--1e234{
|
|
7119
|
+
animation:bp_modal_module_popup_bounce_in--1e234 var(--animation-duration-3);
|
|
7082
7120
|
background-color:var(--modal-content-background);
|
|
7083
7121
|
display:flex;
|
|
7084
7122
|
flex-direction:column;
|
|
@@ -7087,80 +7125,90 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
|
|
|
7087
7125
|
position:relative;
|
|
7088
7126
|
}
|
|
7089
7127
|
@media (width > 374px){
|
|
7090
|
-
.bp_modal_module_content--
|
|
7128
|
+
.bp_modal_module_content--1e234{
|
|
7091
7129
|
overflow:hidden;
|
|
7092
7130
|
}
|
|
7093
7131
|
}
|
|
7094
7132
|
@media (width > 459px){
|
|
7095
|
-
.bp_modal_module_content--
|
|
7133
|
+
.bp_modal_module_content--1e234{
|
|
7096
7134
|
border-radius:var(--modal-border-radius);
|
|
7097
7135
|
height:auto;
|
|
7098
7136
|
margin:var(--modal-margin);
|
|
7099
7137
|
max-height:var(--modal-max-height-non-fullscreen);
|
|
7100
7138
|
min-width:var(--modal-min-width-non-fullscreen);
|
|
7139
|
+
transition:max-width var(--modal-loading-animation), max-height var(--modal-loading-animation);
|
|
7101
7140
|
}
|
|
7102
|
-
.bp_modal_module_content--
|
|
7141
|
+
.bp_modal_module_content--1e234.bp_modal_module_smallSizeModal--1e234{
|
|
7103
7142
|
max-width:var(--modal-max-width-small);
|
|
7104
7143
|
}
|
|
7105
|
-
.bp_modal_module_content--
|
|
7144
|
+
.bp_modal_module_content--1e234.bp_modal_module_mediumSizeModal--1e234{
|
|
7106
7145
|
max-width:var(--modal-max-width-medium);
|
|
7107
7146
|
}
|
|
7108
|
-
.bp_modal_module_content--
|
|
7147
|
+
.bp_modal_module_content--1e234.bp_modal_module_largeSizeModal--1e234{
|
|
7109
7148
|
max-width:var(--modal-max-width-large);
|
|
7110
7149
|
}
|
|
7111
|
-
.bp_modal_module_content--
|
|
7150
|
+
.bp_modal_module_content--1e234.bp_modal_module_xlargeSizeModal--1e234{
|
|
7112
7151
|
max-width:var(--modal-max-width-xlarge);
|
|
7113
7152
|
}
|
|
7114
7153
|
}
|
|
7154
|
+
.bp_modal_module_content--1e234:has(.bp_modal_module_loadingContainerActive--1e234) .bp_modal_module_footerDividerLine--1e234::before,.bp_modal_module_content--1e234:has(.bp_modal_module_loadingContainerActive--1e234) .bp_modal_module_headerDividerLine--1e234::after{
|
|
7155
|
+
display:none;
|
|
7156
|
+
}
|
|
7157
|
+
@media (width > 459px){
|
|
7158
|
+
.bp_modal_module_content--1e234:has(.bp_modal_module_loadingContainerActive--1e234){
|
|
7159
|
+
max-height:var(--modal-max-height-loading);
|
|
7160
|
+
max-width:var(--modal-max-width-loading);
|
|
7161
|
+
}
|
|
7162
|
+
}
|
|
7115
7163
|
|
|
7116
|
-
.bp_modal_module_scrollableContainer--
|
|
7164
|
+
.bp_modal_module_scrollableContainer--1e234{
|
|
7117
7165
|
flex-grow:1;
|
|
7118
7166
|
}
|
|
7119
7167
|
@media (width > 374px){
|
|
7120
|
-
.bp_modal_module_scrollableContainer--
|
|
7168
|
+
.bp_modal_module_scrollableContainer--1e234{
|
|
7121
7169
|
overflow-y:auto;
|
|
7122
7170
|
}
|
|
7123
7171
|
}
|
|
7124
7172
|
|
|
7125
|
-
.bp_modal_module_content--
|
|
7173
|
+
.bp_modal_module_content--1e234 .bp_modal_module_close--1e234{
|
|
7126
7174
|
color:var(--modal-close-button-color);
|
|
7127
7175
|
position:fixed;
|
|
7128
7176
|
right:var(--modal-close-button-offset-right);
|
|
7129
7177
|
top:var(--modal-close-button-offset-top);
|
|
7130
7178
|
}
|
|
7131
7179
|
@media (width > 374px){
|
|
7132
|
-
.bp_modal_module_content--
|
|
7180
|
+
.bp_modal_module_content--1e234 .bp_modal_module_close--1e234{
|
|
7133
7181
|
position:absolute;
|
|
7134
7182
|
}
|
|
7135
7183
|
}
|
|
7136
7184
|
|
|
7137
|
-
.bp_modal_module_close--
|
|
7185
|
+
.bp_modal_module_close--1e234.bp_modal_module_onColor--1e234{
|
|
7138
7186
|
background-color:var(--modal-close-button-on-color-background);
|
|
7139
7187
|
}
|
|
7140
|
-
.bp_modal_module_close--
|
|
7188
|
+
.bp_modal_module_close--1e234.bp_modal_module_onColor--1e234:hover{
|
|
7141
7189
|
background-color:var(--modal-close-button-on-color-background-hover);
|
|
7142
7190
|
}
|
|
7143
|
-
.bp_modal_module_close--
|
|
7191
|
+
.bp_modal_module_close--1e234.bp_modal_module_onColor--1e234:active{
|
|
7144
7192
|
background-color:var(--modal-close-button-on-color-background-pressed);
|
|
7145
7193
|
}
|
|
7146
7194
|
|
|
7147
|
-
.bp_modal_module_content--
|
|
7195
|
+
.bp_modal_module_content--1e234 .bp_modal_module_backButton--1e234{
|
|
7148
7196
|
color:var(--modal-back-button-color);
|
|
7149
7197
|
margin-block-start:var(--modal-back-button-margin-top-start);
|
|
7150
7198
|
margin-inline-start:var(--modal-back-button-margin-inline-start);
|
|
7151
7199
|
}
|
|
7152
7200
|
@media (width > 459px){
|
|
7153
|
-
.bp_modal_module_content--
|
|
7201
|
+
.bp_modal_module_content--1e234 .bp_modal_module_backButton--1e234{
|
|
7154
7202
|
height:var(--modal-back-button-size-non-fullscreen);
|
|
7155
7203
|
width:var(--modal-back-button-size-non-fullscreen);
|
|
7156
7204
|
}
|
|
7157
7205
|
}
|
|
7158
7206
|
|
|
7159
|
-
.bp_modal_module_modalHeader--
|
|
7207
|
+
.bp_modal_module_modalHeader--1e234{
|
|
7160
7208
|
display:flex;
|
|
7161
7209
|
}
|
|
7162
7210
|
|
|
7163
|
-
.bp_modal_module_modalTitle--
|
|
7211
|
+
.bp_modal_module_modalTitle--1e234{
|
|
7164
7212
|
display:flex;
|
|
7165
7213
|
flex-direction:column;
|
|
7166
7214
|
gap:var(--modal-title-gap);
|
|
@@ -7168,73 +7216,78 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
|
|
|
7168
7216
|
padding:var(--modal-title-padding);
|
|
7169
7217
|
}
|
|
7170
7218
|
@media (width > 459px){
|
|
7171
|
-
.bp_modal_module_modalTitle--
|
|
7219
|
+
.bp_modal_module_modalTitle--1e234{
|
|
7172
7220
|
padding:var(--modal-title-padding-non-fullscreen);
|
|
7173
7221
|
}
|
|
7174
7222
|
}
|
|
7175
7223
|
|
|
7176
|
-
.bp_modal_module_body--
|
|
7224
|
+
.bp_modal_module_body--1e234{
|
|
7177
7225
|
color:var(--modal-body-text-color);
|
|
7178
7226
|
padding:var(--modal-body-padding-fullscreen);
|
|
7179
7227
|
}
|
|
7180
7228
|
@media (width > 459px){
|
|
7181
|
-
.bp_modal_module_body--
|
|
7229
|
+
.bp_modal_module_body--1e234{
|
|
7182
7230
|
padding:var(--modal-body-padding-non-fullscreen);
|
|
7183
7231
|
}
|
|
7184
7232
|
}
|
|
7185
7233
|
|
|
7186
|
-
.
|
|
7187
|
-
|
|
7188
|
-
|
|
7189
|
-
|
|
7190
|
-
border-bottom:var(--modal-divider-line-border);
|
|
7191
|
-
bottom:0;
|
|
7192
|
-
content:"";
|
|
7193
|
-
left:var(--modal-divider-line-offset-left);
|
|
7194
|
-
position:absolute;
|
|
7195
|
-
right:var(--modal-divider-line-offset-right);
|
|
7234
|
+
.bp_modal_module_footer--1e234{
|
|
7235
|
+
display:flex;
|
|
7236
|
+
justify-content:flex-end;
|
|
7237
|
+
padding:var(--modal-footer-padding);
|
|
7196
7238
|
}
|
|
7197
7239
|
@media (width > 459px){
|
|
7198
|
-
.
|
|
7199
|
-
|
|
7200
|
-
right:var(--modal-divider-line-offset-right-non-fullscreen);
|
|
7240
|
+
.bp_modal_module_footer--1e234{
|
|
7241
|
+
padding:var(--modal-footer-padding-non-fullscreen);
|
|
7201
7242
|
}
|
|
7202
7243
|
}
|
|
7203
7244
|
|
|
7204
|
-
.
|
|
7245
|
+
.bp_modal_module_footerButton--1e234 + .bp_modal_module_footerButton--1e234{
|
|
7246
|
+
margin-inline-start:var(--modal-footer-button-margin-inline-start);
|
|
7247
|
+
}
|
|
7248
|
+
|
|
7249
|
+
.bp_modal_module_loadingContainer--1e234{
|
|
7250
|
+
display:flex;
|
|
7251
|
+
min-height:0;
|
|
7205
7252
|
position:relative;
|
|
7253
|
+
transition:height var(--modal-loading-animation);
|
|
7206
7254
|
}
|
|
7207
|
-
|
|
7208
|
-
|
|
7209
|
-
|
|
7210
|
-
|
|
7255
|
+
|
|
7256
|
+
.bp_modal_module_loadingContainerActive--1e234{
|
|
7257
|
+
height:var(--modal-loading-height);
|
|
7258
|
+
overflow:hidden;
|
|
7259
|
+
}
|
|
7260
|
+
|
|
7261
|
+
.bp_modal_module_loading--1e234{
|
|
7262
|
+
align-items:center;
|
|
7263
|
+
display:flex;
|
|
7264
|
+
}
|
|
7265
|
+
|
|
7266
|
+
.bp_modal_module_loadingContainerActive--1e234 .bp_modal_module_loading--1e234{
|
|
7267
|
+
height:var(--modal-loading-height);
|
|
7268
|
+
}
|
|
7269
|
+
|
|
7270
|
+
.bp_modal_module_loadingOverlay--1e234{
|
|
7271
|
+
background-color:var(--modal-content-background);
|
|
7272
|
+
bottom:0;
|
|
7273
|
+
left:0;
|
|
7274
|
+
min-height:var(--modal-loading-height);
|
|
7211
7275
|
position:absolute;
|
|
7212
|
-
right:
|
|
7276
|
+
right:0;
|
|
7213
7277
|
top:0;
|
|
7214
|
-
|
|
7215
|
-
@media (width > 459px){
|
|
7216
|
-
.bp_modal_module_footerDividerLine--5478d::before{
|
|
7217
|
-
left:var(--modal-divider-line-offset-left-non-fullscreen);
|
|
7218
|
-
right:var(--modal-divider-line-offset-right-non-fullscreen);
|
|
7219
|
-
}
|
|
7278
|
+
z-index:1;
|
|
7220
7279
|
}
|
|
7221
7280
|
|
|
7222
|
-
.
|
|
7281
|
+
.bp_modal_module_loadingContent--1e234{
|
|
7223
7282
|
display:flex;
|
|
7224
|
-
|
|
7225
|
-
padding:var(--modal-footer-padding);
|
|
7226
|
-
}
|
|
7227
|
-
@media (width > 459px){
|
|
7228
|
-
.bp_modal_module_footer--5478d{
|
|
7229
|
-
padding:var(--modal-footer-padding-non-fullscreen);
|
|
7230
|
-
}
|
|
7283
|
+
visibility:hidden;
|
|
7231
7284
|
}
|
|
7232
7285
|
|
|
7233
|
-
.
|
|
7234
|
-
|
|
7286
|
+
.bp_modal_module_loadingContentVisible--1e234{
|
|
7287
|
+
visibility:visible;
|
|
7235
7288
|
}
|
|
7236
7289
|
|
|
7237
|
-
@keyframes bp_modal_module_popup_bounce_in--
|
|
7290
|
+
@keyframes bp_modal_module_popup_bounce_in--1e234{
|
|
7238
7291
|
0%{
|
|
7239
7292
|
transform:scale3d(.1, .1, 1);
|
|
7240
7293
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const MODAL_LOADING_ANIMATION_DURATION = 200;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { Modal } from './modal';
|
|
2
|
-
export {
|
|
2
|
+
export type { ModalCloseProps, ModalContentProps, ModalLoadingProps, ModalProps, ModalTriggerProps } from './types';
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef, useState, useEffect } from 'react';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
|
|
5
|
+
import { MODAL_LOADING_ANIMATION_DURATION } from './constants.js';
|
|
6
|
+
import styles from './modal.module.js';
|
|
7
|
+
|
|
8
|
+
var LoadingState;
|
|
9
|
+
(function (LoadingState) {
|
|
10
|
+
LoadingState["Loading"] = "loading";
|
|
11
|
+
LoadingState["Animating"] = "animating";
|
|
12
|
+
LoadingState["ShowingContent"] = "showing_content";
|
|
13
|
+
})(LoadingState || (LoadingState = {}));
|
|
14
|
+
const ModalLoading = /*#__PURE__*/forwardRef(({
|
|
15
|
+
className,
|
|
16
|
+
loadingIndicatorAriaLabel,
|
|
17
|
+
isLoading,
|
|
18
|
+
children,
|
|
19
|
+
...rest
|
|
20
|
+
}, forwardedRef) => {
|
|
21
|
+
const [loadingState, setLoadingState] = useState(isLoading ? LoadingState.Loading : LoadingState.ShowingContent);
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
if (isLoading) {
|
|
24
|
+
// Hide content when loading
|
|
25
|
+
setLoadingState(LoadingState.Loading);
|
|
26
|
+
return undefined;
|
|
27
|
+
}
|
|
28
|
+
// Start animating when loading completes
|
|
29
|
+
setLoadingState(LoadingState.Animating);
|
|
30
|
+
// Show content after modal resize completes
|
|
31
|
+
const showTimer = setTimeout(() => {
|
|
32
|
+
setLoadingState(LoadingState.ShowingContent);
|
|
33
|
+
}, MODAL_LOADING_ANIMATION_DURATION); // Duration of modal resize animation
|
|
34
|
+
return () => {
|
|
35
|
+
clearTimeout(showTimer);
|
|
36
|
+
};
|
|
37
|
+
}, [isLoading]);
|
|
38
|
+
const shouldShowLoading = loadingState === LoadingState.Loading;
|
|
39
|
+
const shouldShowContent = loadingState === LoadingState.ShowingContent;
|
|
40
|
+
return jsxs("div", {
|
|
41
|
+
className: clsx(styles.loadingContainer, {
|
|
42
|
+
[styles.loadingContainerActive]: shouldShowLoading
|
|
43
|
+
}),
|
|
44
|
+
children: [jsx("div", {
|
|
45
|
+
"aria-hidden": !shouldShowContent,
|
|
46
|
+
className: clsx(styles.loadingContent, {
|
|
47
|
+
[styles.loadingContentVisible]: shouldShowContent
|
|
48
|
+
}),
|
|
49
|
+
children: children
|
|
50
|
+
}), shouldShowLoading && jsx("div", {
|
|
51
|
+
...rest,
|
|
52
|
+
ref: forwardedRef,
|
|
53
|
+
className: clsx(className, styles.loading, styles.loadingOverlay),
|
|
54
|
+
children: jsx(LoadingIndicator, {
|
|
55
|
+
"aria-label": loadingIndicatorAriaLabel,
|
|
56
|
+
size: "large"
|
|
57
|
+
})
|
|
58
|
+
})]
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
ModalLoading.displayName = 'ModalLoading';
|
|
62
|
+
|
|
63
|
+
export { ModalLoading };
|
|
@@ -47,6 +47,7 @@ export declare const Modal: (({ children, modal, ...props }: ModalProps) => impo
|
|
|
47
47
|
}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
|
|
48
48
|
};
|
|
49
49
|
Header: import("react").ForwardRefExoticComponent<import("./types").ModalHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
50
|
+
Loading: import("react").ForwardRefExoticComponent<import("./types").ModalLoadingProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
50
51
|
ScrollableContainer: import("react").ForwardRefExoticComponent<import("./types").ModalScrollableContainerProps & {
|
|
51
52
|
'data-testid'?: string;
|
|
52
53
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -6,6 +6,7 @@ import { ModalClose } from './modal-close.js';
|
|
|
6
6
|
import { ModalContent } from './modal-content.js';
|
|
7
7
|
import { ModalFooter } from './modal-footer.js';
|
|
8
8
|
import { ModalHeader } from './modal-header.js';
|
|
9
|
+
import { ModalLoading } from './modal-loading.js';
|
|
9
10
|
import { ModalScrollableContainer } from './modal-scrollable-container.js';
|
|
10
11
|
import { ModalTitle } from './modal-title.js';
|
|
11
12
|
import { ModalTrigger } from './modal-trigger.js';
|
|
@@ -50,6 +51,7 @@ const Modal = Object.assign(Root, {
|
|
|
50
51
|
Content: ModalContent,
|
|
51
52
|
Footer: ModalFooter,
|
|
52
53
|
Header: ModalHeader,
|
|
54
|
+
Loading: ModalLoading,
|
|
53
55
|
ScrollableContainer: ModalScrollableContainer,
|
|
54
56
|
Trigger: ModalTrigger,
|
|
55
57
|
Title: ModalTitle
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"overlay":"bp_modal_module_overlay--
|
|
2
|
+
var styles = {"overlay":"bp_modal_module_overlay--1e234","headerDividerLine":"bp_modal_module_headerDividerLine--1e234","footerDividerLine":"bp_modal_module_footerDividerLine--1e234","content":"bp_modal_module_content--1e234","popup_bounce_in":"bp_modal_module_popup_bounce_in--1e234","smallSizeModal":"bp_modal_module_smallSizeModal--1e234","mediumSizeModal":"bp_modal_module_mediumSizeModal--1e234","largeSizeModal":"bp_modal_module_largeSizeModal--1e234","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--1e234","loadingContainerActive":"bp_modal_module_loadingContainerActive--1e234","scrollableContainer":"bp_modal_module_scrollableContainer--1e234","close":"bp_modal_module_close--1e234","onColor":"bp_modal_module_onColor--1e234","backButton":"bp_modal_module_backButton--1e234","modalHeader":"bp_modal_module_modalHeader--1e234","modalTitle":"bp_modal_module_modalTitle--1e234","body":"bp_modal_module_body--1e234","footer":"bp_modal_module_footer--1e234","footerButton":"bp_modal_module_footerButton--1e234","loadingContainer":"bp_modal_module_loadingContainer--1e234","loading":"bp_modal_module_loading--1e234","loadingOverlay":"bp_modal_module_loadingOverlay--1e234","loadingContent":"bp_modal_module_loadingContent--1e234","loadingContentVisible":"bp_modal_module_loadingContentVisible--1e234"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type DialogContentProps, type DialogPortalProps, type DialogProps, type DialogTitleProps } from '@radix-ui/react-dialog';
|
|
2
2
|
import { type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type ReactElement, type ReactNode, type SVGProps } from 'react';
|
|
3
|
+
import { type LoadingIndicatorProps } from '../loading-indicator/loading-indicator';
|
|
3
4
|
import { type IconButtonProps } from '../primitives/icon-button';
|
|
4
5
|
export type ModalProps = DialogProps;
|
|
5
6
|
/** The size of the modal content.
|
|
@@ -56,3 +57,10 @@ export interface ModalHeaderProps extends HTMLAttributes<HTMLHeadingElement> {
|
|
|
56
57
|
/** Content of the Subttitle element */
|
|
57
58
|
subtitle?: ReactNode;
|
|
58
59
|
}
|
|
60
|
+
export interface ModalLoadingProps extends HTMLAttributes<HTMLDivElement> {
|
|
61
|
+
loadingIndicatorAriaLabel: LoadingIndicatorProps['aria-label'];
|
|
62
|
+
/** When false, fades out loading indicator and reveals children. Defaults to true. */
|
|
63
|
+
isLoading: boolean;
|
|
64
|
+
/** Content to render underneath the loading indicator. The modal will size to this content. */
|
|
65
|
+
children: ReactNode;
|
|
66
|
+
}
|