@lumx/react 3.9.7-alpha.1 → 3.9.7-alpha.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/index.js +4 -1
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/tabs/Tab.tsx +10 -4
- package/src/components/tabs/Tabs.stories.tsx +1 -28
package/package.json
CHANGED
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
"url": "https://github.com/lumapps/design-system/issues"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@lumx/core": "^3.9.7-alpha.
|
|
10
|
-
"@lumx/icons": "^3.9.7-alpha.
|
|
9
|
+
"@lumx/core": "^3.9.7-alpha.3",
|
|
10
|
+
"@lumx/icons": "^3.9.7-alpha.3",
|
|
11
11
|
"@popperjs/core": "^2.5.4",
|
|
12
12
|
"body-scroll-lock": "^3.1.5",
|
|
13
13
|
"classnames": "^2.3.2",
|
|
@@ -111,5 +111,5 @@
|
|
|
111
111
|
"build:storybook": "storybook build"
|
|
112
112
|
},
|
|
113
113
|
"sideEffects": false,
|
|
114
|
-
"version": "3.9.7-alpha.
|
|
114
|
+
"version": "3.9.7-alpha.3"
|
|
115
115
|
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';
|
|
2
|
+
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
|
|
5
|
+
import { Icon, IconProps, Size, Text } from '@lumx/react';
|
|
2
6
|
import { CSS_PREFIX } from '@lumx/react/constants';
|
|
3
7
|
import { Comp, GenericProps } from '@lumx/react/utils/type';
|
|
4
8
|
import { handleBasicClasses } from '@lumx/react/utils/className';
|
|
5
9
|
|
|
6
|
-
import classNames from 'classnames';
|
|
7
|
-
import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';
|
|
8
10
|
import { useTabProviderContext } from './state';
|
|
9
11
|
|
|
10
12
|
/**
|
|
@@ -114,7 +116,11 @@ export const Tab: Comp<TabProps, HTMLButtonElement> = forwardRef((props, ref) =>
|
|
|
114
116
|
aria-controls={state?.tabPanelId}
|
|
115
117
|
>
|
|
116
118
|
{icon && <Icon icon={icon} size={Size.xs} {...iconProps} />}
|
|
117
|
-
{label &&
|
|
119
|
+
{label && (
|
|
120
|
+
<Text as="span" truncate>
|
|
121
|
+
{label}
|
|
122
|
+
</Text>
|
|
123
|
+
)}
|
|
118
124
|
</button>
|
|
119
125
|
);
|
|
120
126
|
});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Button, Dialog, Tab, TabList, TabPanel, TabProvider } from '@lumx/react';
|
|
2
|
+
import { loremIpsum } from '@lumx/react/stories/utils/lorem';
|
|
2
3
|
import get from 'lodash/get';
|
|
3
4
|
import times from 'lodash/times';
|
|
4
5
|
import React, { useState } from 'react';
|
|
@@ -52,34 +53,6 @@ export const Controlled = ({ theme }: any) => {
|
|
|
52
53
|
);
|
|
53
54
|
};
|
|
54
55
|
|
|
55
|
-
/* Control active tab internally (with activate tab on focus). */
|
|
56
|
-
export const NotControlled = ({ theme }: any) => {
|
|
57
|
-
return (
|
|
58
|
-
<TabProvider shouldActivateOnFocus onChange={console.log}>
|
|
59
|
-
<TabList theme={theme} aria-label="Tab list">
|
|
60
|
-
<Tab label="Tab a" />
|
|
61
|
-
<Tab label="Tab b" />
|
|
62
|
-
</TabList>
|
|
63
|
-
<TabPanel className="lumx-spacing-padding-huge">Tab a content</TabPanel>
|
|
64
|
-
<TabPanel className="lumx-spacing-padding-huge">Tab b content</TabPanel>
|
|
65
|
-
</TabProvider>
|
|
66
|
-
);
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
/* Display tabs far from their tab panels. */
|
|
70
|
-
export const DisabledTab = ({ theme }: any) => (
|
|
71
|
-
<TabProvider shouldActivateOnFocus>
|
|
72
|
-
<TabList theme={theme} aria-label="Tab list">
|
|
73
|
-
<Tab label="Tab 1" />
|
|
74
|
-
<Tab label="Tab 2" isDisabled />
|
|
75
|
-
<Tab label="Tab 3" />
|
|
76
|
-
</TabList>
|
|
77
|
-
<TabPanel className="lumx-spacing-padding-huge">Tab 1 content</TabPanel>
|
|
78
|
-
<TabPanel className="lumx-spacing-padding-huge">Tab 2 content</TabPanel>
|
|
79
|
-
<TabPanel className="lumx-spacing-padding-huge">Tab 3 content</TabPanel>
|
|
80
|
-
</TabProvider>
|
|
81
|
-
);
|
|
82
|
-
|
|
83
56
|
/* Display tabs far from their tab panels. */
|
|
84
57
|
export const SplitTabListAndTabPanels = ({ theme }: any) => {
|
|
85
58
|
const [isOpen, setOpen] = useState(true);
|