@dhis2-ui/tab 9.3.0-alpha.2 → 9.3.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/build/cjs/tab/tab.js
CHANGED
|
@@ -30,16 +30,16 @@ const Tab = _ref => {
|
|
|
30
30
|
return /*#__PURE__*/_react.default.createElement("button", {
|
|
31
31
|
onClick: disabled ? undefined : event => onClick({}, event),
|
|
32
32
|
"data-test": dataTest,
|
|
33
|
-
className: _style.default.dynamic([["
|
|
33
|
+
className: _style.default.dynamic([["1623786756", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey900, _uiConstants.colors.grey600, _uiConstants.colors.grey800, _uiConstants.theme.primary800, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]]) + " " + "".concat((0, _classnames.default)('tab', className, {
|
|
34
34
|
selected,
|
|
35
35
|
disabled
|
|
36
36
|
}))
|
|
37
37
|
}, icon, /*#__PURE__*/_react.default.createElement("span", {
|
|
38
|
-
className: _style.default.dynamic([["
|
|
38
|
+
className: _style.default.dynamic([["1623786756", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey900, _uiConstants.colors.grey600, _uiConstants.colors.grey800, _uiConstants.theme.primary800, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]])
|
|
39
39
|
}, children), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
40
|
-
id: "
|
|
40
|
+
id: "1623786756",
|
|
41
41
|
dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey900, _uiConstants.colors.grey600, _uiConstants.colors.grey800, _uiConstants.theme.primary800, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]
|
|
42
|
-
}, ["button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ".concat(_uiConstants.colors.grey400, ";color:").concat(_uiConstants.colors.grey600, ";font-size:14px;line-height:20px;cursor:pointer;}"), ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;
|
|
42
|
+
}, ["button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ".concat(_uiConstants.colors.grey400, ";color:").concat(_uiConstants.colors.grey600, ";font-size:14px;line-height:20px;cursor:pointer;}"), ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;left:0;height:4px;width:100%;background-color:transparent;}", "span.__jsx-style-dynamic-selector{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}", "button.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector>svg{fill:".concat(_uiConstants.colors.grey600, ";width:14px;height:14px;margin:0 4px 0 0;}"), "button.__jsx-style-dynamic-selector:hover{color:".concat(_uiConstants.colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.colors.grey600, ";height:2px;}"), "button.__jsx-style-dynamic-selector:active.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.colors.grey800, ";}"), "button.selected.__jsx-style-dynamic-selector{color:".concat(_uiConstants.theme.primary800, ";}"), "button.selected.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.theme.primary700, ";-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;}"), "button.selected.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.theme.primary700, ";height:4px;}"), "button.selected.__jsx-style-dynamic-selector>svg{fill:".concat(_uiConstants.theme.primary700, ";}"), "button.disabled.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey500, ";cursor:not-allowed;}"), "button.disabled.__jsx-style-dynamic-selector:hover,button.selected.__jsx-style-dynamic-selector:hover{background-color:transparent;}", "button.disabled.__jsx-style-dynamic-selector>svg{fill:".concat(_uiConstants.colors.grey500, ";}")]));
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
exports.Tab = Tab;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.TabsWithScroller = exports.TabsWithHiddenScrollButtons = exports.TabStatesWithIcon = exports.TabStates = exports.
|
|
6
|
+
exports.default = exports.TabsWithScroller = exports.TabsWithHiddenScrollButtons = exports.TabStatesWithIcon = exports.TabStates = exports.FixedTabsFillContent = exports.DefaultFluid = void 0;
|
|
7
7
|
|
|
8
8
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
9
|
|
|
@@ -204,10 +204,4 @@ const TabStatesWithIcon = args => /*#__PURE__*/_react.default.createElement(_ind
|
|
|
204
204
|
}, "Text overflow - This tab has a very long text and it exceeds the maximum width of 320px"));
|
|
205
205
|
|
|
206
206
|
exports.TabStatesWithIcon = TabStatesWithIcon;
|
|
207
|
-
TabStatesWithIcon.storyName = 'Tab states - with icon';
|
|
208
|
-
|
|
209
|
-
const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
210
|
-
dir: "rtl"
|
|
211
|
-
}, /*#__PURE__*/_react.default.createElement(TabStatesWithIcon, args));
|
|
212
|
-
|
|
213
|
-
exports.RTL = RTL;
|
|
207
|
+
TabStatesWithIcon.storyName = 'Tab states - with icon';
|
package/build/es/tab/tab.js
CHANGED
|
@@ -17,16 +17,16 @@ const Tab = _ref => {
|
|
|
17
17
|
return /*#__PURE__*/React.createElement("button", {
|
|
18
18
|
onClick: disabled ? undefined : event => onClick({}, event),
|
|
19
19
|
"data-test": dataTest,
|
|
20
|
-
className: _JSXStyle.dynamic([["
|
|
20
|
+
className: _JSXStyle.dynamic([["1623786756", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey900, colors.grey600, colors.grey800, theme.primary800, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]]) + " " + "".concat(cx('tab', className, {
|
|
21
21
|
selected,
|
|
22
22
|
disabled
|
|
23
23
|
}))
|
|
24
24
|
}, icon, /*#__PURE__*/React.createElement("span", {
|
|
25
|
-
className: _JSXStyle.dynamic([["
|
|
25
|
+
className: _JSXStyle.dynamic([["1623786756", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey900, colors.grey600, colors.grey800, theme.primary800, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]])
|
|
26
26
|
}, children), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
27
|
-
id: "
|
|
27
|
+
id: "1623786756",
|
|
28
28
|
dynamic: [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey900, colors.grey600, colors.grey800, theme.primary800, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]
|
|
29
|
-
}, ["button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ".concat(colors.grey400, ";color:").concat(colors.grey600, ";font-size:14px;line-height:20px;cursor:pointer;}"), ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;
|
|
29
|
+
}, ["button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ".concat(colors.grey400, ";color:").concat(colors.grey600, ";font-size:14px;line-height:20px;cursor:pointer;}"), ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;left:0;height:4px;width:100%;background-color:transparent;}", "span.__jsx-style-dynamic-selector{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}", "button.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector>svg{fill:".concat(colors.grey600, ";width:14px;height:14px;margin:0 4px 0 0;}"), "button.__jsx-style-dynamic-selector:hover{color:".concat(colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(colors.grey600, ";height:2px;}"), "button.__jsx-style-dynamic-selector:active.__jsx-style-dynamic-selector::after{background-color:".concat(colors.grey800, ";}"), "button.selected.__jsx-style-dynamic-selector{color:".concat(theme.primary800, ";}"), "button.selected.__jsx-style-dynamic-selector::after{background-color:".concat(theme.primary700, ";-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;}"), "button.selected.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(theme.primary700, ";height:4px;}"), "button.selected.__jsx-style-dynamic-selector>svg{fill:".concat(theme.primary700, ";}"), "button.disabled.__jsx-style-dynamic-selector{color:".concat(colors.grey500, ";cursor:not-allowed;}"), "button.disabled.__jsx-style-dynamic-selector:hover,button.selected.__jsx-style-dynamic-selector:hover{background-color:transparent;}", "button.disabled.__jsx-style-dynamic-selector>svg{fill:".concat(colors.grey500, ";}")]));
|
|
30
30
|
};
|
|
31
31
|
|
|
32
32
|
Tab.defaultProps = {
|
|
@@ -172,7 +172,4 @@ export const TabStatesWithIcon = args => /*#__PURE__*/React.createElement(TabBar
|
|
|
172
172
|
onClick: onClick,
|
|
173
173
|
icon: /*#__PURE__*/React.createElement(AttachFile, null)
|
|
174
174
|
}, "Text overflow - This tab has a very long text and it exceeds the maximum width of 320px"));
|
|
175
|
-
TabStatesWithIcon.storyName = 'Tab states - with icon';
|
|
176
|
-
export const RTL = args => /*#__PURE__*/React.createElement("div", {
|
|
177
|
-
dir: "rtl"
|
|
178
|
-
}, /*#__PURE__*/React.createElement(TabStatesWithIcon, args));
|
|
175
|
+
TabStatesWithIcon.storyName = 'Tab states - with icon';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/tab",
|
|
3
|
-
"version": "9.3.0
|
|
3
|
+
"version": "9.3.0",
|
|
4
4
|
"description": "UI Tabs",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2/ui-constants": "9.3.0
|
|
37
|
-
"@dhis2/ui-icons": "9.3.0
|
|
36
|
+
"@dhis2/ui-constants": "9.3.0",
|
|
37
|
+
"@dhis2/ui-icons": "9.3.0",
|
|
38
38
|
"classnames": "^2.3.1",
|
|
39
39
|
"prop-types": "^15.7.2"
|
|
40
40
|
},
|