@box/blueprint-web 12.95.0 → 12.96.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 +160 -163
- package/package.json +3 -3
|
@@ -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);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.96.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.15",
|
|
49
49
|
"@ariakit/react-core": "0.4.15",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.80.0",
|
|
51
51
|
"@internationalized/date": "^3.7.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.14.
|
|
80
|
+
"@box/storybook-utils": "^0.14.17",
|
|
81
81
|
"@types/react": "^18.0.0",
|
|
82
82
|
"@types/react-dom": "^18.0.0",
|
|
83
83
|
"react": "^18.3.0",
|