reshaped 2.10.1 → 2.10.3
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/bundle.css +1 -1
- package/bundle.js +8 -8
- package/components/Breadcrumbs/Breadcrumbs.js +2 -2
- package/components/Breadcrumbs/Breadcrumbs.types.d.ts +1 -0
- package/components/Breadcrumbs/tests/Breadcrumbs.stories.js +10 -0
- package/components/Reshaped/Reshaped.css +1 -1
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ import Button from "../Button/index.js";
|
|
|
9
9
|
import IconChevronRight from "../../icons/ChevronRight.js";
|
|
10
10
|
import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
|
|
11
11
|
const Breadcrumbs = (props) => {
|
|
12
|
-
const { children, separator, color, defaultVisibleItems, ariaLabel, className, attributes } = props;
|
|
12
|
+
const { children, separator, color, defaultVisibleItems, disableExpand, ariaLabel, className, attributes, } = props;
|
|
13
13
|
const visibleItems = defaultVisibleItems && defaultVisibleItems >= 2 ? defaultVisibleItems : null;
|
|
14
14
|
const [expanded, setExpanded] = React.useState(false);
|
|
15
15
|
const rootClassNames = classNames(className);
|
|
@@ -32,7 +32,7 @@ const Breadcrumbs = (props) => {
|
|
|
32
32
|
itemNode = child;
|
|
33
33
|
}
|
|
34
34
|
else if (isCollapseButton) {
|
|
35
|
-
itemNode = (_jsx(Button.Aligner, { children: _jsx(Button, { variant: "ghost", size: "small", icon: IconDotsHorizontal, onClick: handleExpand }) }));
|
|
35
|
+
itemNode = disableExpand ? (_jsx(Icon, { svg: IconDotsHorizontal, size: 4 })) : (_jsx(Button.Aligner, { children: _jsx(Button, { variant: "ghost", size: "small", icon: IconDotsHorizontal, onClick: handleExpand }) }));
|
|
36
36
|
}
|
|
37
37
|
if (itemNode === null)
|
|
38
38
|
return null;
|
|
@@ -90,6 +90,16 @@ export const collapsed = () => (<Example>
|
|
|
90
90
|
<Breadcrumbs.Item>Item 5</Breadcrumbs.Item>
|
|
91
91
|
</Breadcrumbs>
|
|
92
92
|
</Example.Item>
|
|
93
|
+
|
|
94
|
+
<Example.Item title="collapsed, 3 items shown by default, not expandable">
|
|
95
|
+
<Breadcrumbs defaultVisibleItems={3} ariaLabel="breadcrumb with 3 items" disableExpand>
|
|
96
|
+
<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
|
|
97
|
+
<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
|
|
98
|
+
<Breadcrumbs.Item onClick={() => { }}>Item 3</Breadcrumbs.Item>
|
|
99
|
+
<Breadcrumbs.Item onClick={() => { }}>Item 4</Breadcrumbs.Item>
|
|
100
|
+
<Breadcrumbs.Item>Item 5</Breadcrumbs.Item>
|
|
101
|
+
</Breadcrumbs>
|
|
102
|
+
</Example.Item>
|
|
93
103
|
</Example>);
|
|
94
104
|
export const edgeCases = () => (<Example>
|
|
95
105
|
<Example.Item title="wraps content when multiline">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer rs.reset
|
|
1
|
+
@layer rs.reset;:root{--rs-z-index-raised:5;--rs-z-index-flyout:80;--rs-z-index-fixed:90;--rs-z-index-overlay:100;--rs-z-index-notification:110}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}*{box-sizing:border-box}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0;padding:0}ol[class],ul[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}option{background:var(--rs-color-background-elevation-base)}label{cursor:pointer}input::placeholder,textarea::placeholder{color:var(--rs-color-foreground-neutral-faded);opacity:.5}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;touch-action:manipulation}body,html{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);height:100%;scroll-behavior:smooth}[data-rs-theme],body{font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3)}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}fieldset{border:0;margin:0;padding:0}a{color:var(--rs-color-foreground-primary);text-decoration:underline}a:hover{text-decoration:none}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "2.10.
|
|
4
|
+
"version": "2.10.3",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|