oolib 3.1.1 → 3.2.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/components/TimePicker/index.js +6 -5
- package/dist/components/TimePicker/styled.d.ts +1 -0
- package/dist/components/TimePicker/styled.js +10 -9
- package/dist/stories/v2/components/Tags/TagDisplay.stories.d.ts +1 -0
- package/dist/stories/v2/components/Tags/TagDisplay.stories.js +24 -1
- package/dist/v2/components/Tags/Comps/TagDisplay/index.d.ts +3 -0
- package/dist/v2/components/Tags/Comps/TagDisplay/index.js +27 -4
- package/package.json +1 -1
|
@@ -134,11 +134,12 @@ var TimePicker = function (props) {
|
|
|
134
134
|
react_1.default.createElement("div", { style: { display: "flex", position: 'relative' } },
|
|
135
135
|
readOnly ? (react_1.default.createElement(Typo_1.SANS_3, null, inputValue)) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
136
136
|
react_1.default.createElement(styled_1.StyledTimeInputWrapper, { invert: invert },
|
|
137
|
-
react_1.default.createElement(styled_1.
|
|
138
|
-
|
|
139
|
-
e.
|
|
140
|
-
|
|
141
|
-
|
|
137
|
+
react_1.default.createElement(styled_1.StyledTimeInputBorderWrapper, { disabled: disabled },
|
|
138
|
+
react_1.default.createElement(styled_1.StyledTimeInput, { type: "test", className: "SANS_3", placeholder: "HH:MM AA", maxLength: "8", invert: invert, value: inputValue, ref: inputRef, autoCapitalize: "characters", onChange: function (e) { return handleInputChange(e); }, onBlur: function () { return handleOnBlur(); }, onFocus: function () { return handleOnFocus(); }, onKeyDown: function (e) {
|
|
139
|
+
if (e.key === 'Enter') {
|
|
140
|
+
e.target.blur();
|
|
141
|
+
}
|
|
142
|
+
}, disabled: disabled })),
|
|
142
143
|
react_1.default.createElement(styled_1.StyledDropDown, { className: "drop-down", invert: invert },
|
|
143
144
|
react_1.default.createElement(styled_1.StyledDropDownList, { className: "drop-list", ref: timeStripRef },
|
|
144
145
|
" ",
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export const StyledTimeInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export const StyledTimeInputBorderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
3
|
export const StyledTimeInput: import("styled-components").StyledComponent<"input", any, {}, never>;
|
|
3
4
|
export const StyledDropDown: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
5
|
export const StyledMotionDiv: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
|
|
@@ -37,7 +37,7 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
37
37
|
};
|
|
38
38
|
})();
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
exports.StyledListItem = exports.StyledDropDownList = exports.StyledMotionDiv = exports.StyledDropDown = exports.StyledTimeInput = exports.StyledTimeInputWrapper = void 0;
|
|
40
|
+
exports.StyledListItem = exports.StyledDropDownList = exports.StyledMotionDiv = exports.StyledDropDown = exports.StyledTimeInput = exports.StyledTimeInputBorderWrapper = exports.StyledTimeInputWrapper = void 0;
|
|
41
41
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
42
42
|
var themes_1 = require("../../themes");
|
|
43
43
|
var globalVariables_1 = require("../../globalStyles/globalVariables");
|
|
@@ -45,24 +45,25 @@ var globalStyles_1 = require("../../v2/themes/globalStyles");
|
|
|
45
45
|
var mixins_1 = require("../../themes/mixins");
|
|
46
46
|
var framer_motion_1 = require("framer-motion");
|
|
47
47
|
var greyColor80 = themes_1.colors.greyColor80, greyColor10 = themes_1.colors.greyColor10, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15, greyColor70 = themes_1.colors.greyColor70, greyColor40 = themes_1.colors.greyColor40;
|
|
48
|
-
exports.StyledTimeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n /*
|
|
48
|
+
exports.StyledTimeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n /* preserve: focusing the input reveals the time-options dropdown */\n &:focus-within .drop-down {\n display: block;\n }\n"], ["\n position: relative;\n /* preserve: focusing the input reveals the time-options dropdown */\n &:focus-within .drop-down {\n display: block;\n }\n"])));
|
|
49
|
+
exports.StyledTimeInputBorderWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /* v2 select-box look (matches DropdownSingle) \u2014 see DatePicker styled note.\n Lives on this inner wrapper (input only), NOT StyledTimeInputWrapper, so\n the z-index:0 stacking context (needed to confine the ::before's\n z-index:-1) doesn't trap the dropdown under later form fields. */\n position: relative;\n z-index: 0;\n width: fit-content;\n border-radius: 6px;\n ", ";\n ", ";\n ", ";\n"], ["\n /* v2 select-box look (matches DropdownSingle) \u2014 see DatePicker styled note.\n Lives on this inner wrapper (input only), NOT StyledTimeInputWrapper, so\n the z-index:0 stacking context (needed to confine the ::before's\n z-index:-1) doesn't trap the dropdown under later form fields. */\n position: relative;\n z-index: 0;\n width: fit-content;\n border-radius: 6px;\n ", ";\n ", ";\n ", ";\n"])), globalStyles_1.globalInputElemBaseBorderStyling_v2, function (_a) {
|
|
49
50
|
var disabled = _a.disabled;
|
|
50
51
|
return !disabled && globalStyles_1.globalInputElemHover_v2;
|
|
51
52
|
}, function (_a) {
|
|
52
53
|
var disabled = _a.disabled;
|
|
53
54
|
return !disabled && globalStyles_1.globalInputElemFocused_v2;
|
|
54
55
|
});
|
|
55
|
-
exports.StyledTimeInput = styled_components_1.default.input(
|
|
56
|
+
exports.StyledTimeInput = styled_components_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n /* padding: 0rem 3rem; */\n background: transparent;\n outline: none;\n border: none;\n width: 10rem;\n height: 4rem;\n color: ", ";\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n\n ", "\n\n &:placeholder-shown {\n width: 11.5rem;\n }\n"], ["\n ", "\n /* padding: 0rem 3rem; */\n background: transparent;\n outline: none;\n border: none;\n width: 10rem;\n height: 4rem;\n color: ", ";\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n\n ", "\n\n &:placeholder-shown {\n width: 11.5rem;\n }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
|
|
56
57
|
var invert = _a.invert, disabled = _a.disabled;
|
|
57
58
|
return invert
|
|
58
59
|
? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
|
|
59
60
|
: disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
|
|
60
61
|
}, function (_a) {
|
|
61
62
|
var disabled = _a.disabled;
|
|
62
|
-
return disabled && (0, styled_components_1.css)(
|
|
63
|
+
return disabled && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n cursor: not-allowed;\n "], ["\n color: ", ";\n cursor: not-allowed;\n "])), greyColor40);
|
|
63
64
|
}, greyColor40, (0, mixins_1.transition)('width'));
|
|
64
|
-
exports.StyledDropDown = styled_components_1.default.div(
|
|
65
|
-
exports.StyledMotionDiv = (0, styled_components_1.default)(framer_motion_1.motion.div)(
|
|
66
|
-
exports.StyledDropDownList = styled_components_1.default.ul(
|
|
67
|
-
exports.StyledListItem = styled_components_1.default.li(
|
|
68
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
65
|
+
exports.StyledDropDown = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n position: absolute;\n display: none;\n left: 0;\n overflow-y: scroll;\n /* scroll-behavior: smooth; */\n height: 20rem;\n width: 15rem;\n /* match the DatePicker calendar popover so both DateTimePicker popovers\n sit above sibling form fields' z-index:0 stacking contexts */\n z-index: 10000;\n"], ["\n ", "\n position: absolute;\n display: none;\n left: 0;\n overflow-y: scroll;\n /* scroll-behavior: smooth; */\n height: 20rem;\n width: 15rem;\n /* match the DatePicker calendar popover so both DateTimePicker popovers\n sit above sibling form fields' z-index:0 stacking contexts */\n z-index: 10000;\n"])), globalVariables_1.globalLightboxStyle);
|
|
66
|
+
exports.StyledMotionDiv = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
67
|
+
exports.StyledDropDownList = styled_components_1.default.ul(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n list-style: none;\n padding-left: 0;\n\n &:hover{\n .drop-list{\n background-color: inherit;\n }\n }\n"], ["\n list-style: none;\n padding-left: 0;\n\n &:hover{\n .drop-list{\n background-color: inherit;\n }\n }\n"])));
|
|
68
|
+
exports.StyledListItem = styled_components_1.default.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding: 9px 20px;\n cursor: pointer;\n ", "\n\n .highlight{\n background-color: red;\n }\n"], ["\n padding: 9px 20px;\n cursor: pointer;\n ", "\n\n .highlight{\n background-color: red;\n }\n"])), globalVariables_1.globalHoverOnWhiteBG);
|
|
69
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -7,5 +7,6 @@ declare namespace _default {
|
|
|
7
7
|
}
|
|
8
8
|
export default _default;
|
|
9
9
|
export function Tag_Display(args: any): React.JSX.Element;
|
|
10
|
+
export function Text_Wrap_Max_Lines(): React.JSX.Element;
|
|
10
11
|
export function playground(args: any): React.JSX.Element;
|
|
11
12
|
import React from "react";
|
|
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.playground = exports.Tag_Display = void 0;
|
|
17
|
+
exports.playground = exports.Text_Wrap_Max_Lines = exports.Tag_Display = void 0;
|
|
18
18
|
var react_1 = __importDefault(require("react"));
|
|
19
19
|
var Tags_1 = require("../../../../v2/components/Tags");
|
|
20
20
|
var tagArgTypes_1 = require("./utils/tagArgTypes");
|
|
@@ -65,6 +65,29 @@ var Tag_Display = function (args) {
|
|
|
65
65
|
react_1.default.createElement(Tags_1.TagDisplay, __assign({ display: "Tag Display" }, args))));
|
|
66
66
|
};
|
|
67
67
|
exports.Tag_Display = Tag_Display;
|
|
68
|
+
// textWrapMaxLines showcase — long labels in a narrow container: default
|
|
69
|
+
// single-line ellipsis vs wrap-to-N-lines (pill grows vertically, then
|
|
70
|
+
// ellipsizes).
|
|
71
|
+
var Text_Wrap_Max_Lines = function () {
|
|
72
|
+
var long = "Outcome-driven product evaluation with a deliberately long tail so the label overflows a narrow card";
|
|
73
|
+
return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "2rem", padding: "2rem", width: "220px", border: "1px dashed #ccc" } },
|
|
74
|
+
react_1.default.createElement("div", null,
|
|
75
|
+
react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "Default (1 line + ellipsis)"),
|
|
76
|
+
react_1.default.createElement(Tags_1.TagDisplay, { display: long })),
|
|
77
|
+
react_1.default.createElement("div", null,
|
|
78
|
+
react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "textWrapMaxLines = 2"),
|
|
79
|
+
react_1.default.createElement(Tags_1.TagDisplay, { display: long, textWrapMaxLines: 2 })),
|
|
80
|
+
react_1.default.createElement("div", null,
|
|
81
|
+
react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "textWrapMaxLines = 3"),
|
|
82
|
+
react_1.default.createElement(Tags_1.TagDisplay, { display: long, textWrapMaxLines: 3 })),
|
|
83
|
+
react_1.default.createElement("div", null,
|
|
84
|
+
react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "Short label, textWrapMaxLines = 2 (no visual change)"),
|
|
85
|
+
react_1.default.createElement(Tags_1.TagDisplay, { display: "Pain Points", textWrapMaxLines: 2 })),
|
|
86
|
+
react_1.default.createElement("div", null,
|
|
87
|
+
react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "Unbroken token, textWrapMaxLines = 2"),
|
|
88
|
+
react_1.default.createElement(Tags_1.TagDisplay, { display: "Supercalifragilisticexpialidocious-annotation-topic", textWrapMaxLines: 2 }))));
|
|
89
|
+
};
|
|
90
|
+
exports.Text_Wrap_Max_Lines = Text_Wrap_Max_Lines;
|
|
68
91
|
var playground = function (args) {
|
|
69
92
|
return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "3rem", padding: "1rem" } },
|
|
70
93
|
react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
|
|
@@ -10,5 +10,8 @@ export interface TagDisplayInterface extends Omit<TagInterface, 'variant'> {
|
|
|
10
10
|
icon?: string;
|
|
11
11
|
weight?: "bold" | "light" | "default";
|
|
12
12
|
colorPreset?: 'positive' | 'inProgress' | 'warning' | 'negative' | 'special' | "default";
|
|
13
|
+
/** Wrap the label up to this many lines before ellipsizing (the pill grows
|
|
14
|
+
* vertically to fit). Unset = existing single-line ellipsis behaviour. */
|
|
15
|
+
textWrapMaxLines?: number;
|
|
13
16
|
}
|
|
14
17
|
export declare const TagDisplay: React.FunctionComponent<TagDisplayInterface>;
|
|
@@ -27,10 +27,33 @@ var getTagDisplayStyles_1 = require("./getTagDisplayStyles");
|
|
|
27
27
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
28
28
|
var mixins_1 = require("../../../../../themes/mixins");
|
|
29
29
|
var white = themes_1.colors.white;
|
|
30
|
-
var STYLED_UI_TAG_DF = (0, styled_components_1.default)(Typo2_1.UI_TAG_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
|
|
30
|
+
var STYLED_UI_TAG_DF = (0, styled_components_1.default)(Typo2_1.UI_TAG_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
|
|
31
|
+
// textWrapMaxLines variants — text wraps up to N lines, then ellipsis
|
|
32
|
+
// (clampText), and the pill grows vertically to fit. white-space: normal
|
|
33
|
+
// overrides both the ellipsis mixin's nowrap and StyledTag's container-level
|
|
34
|
+
// nowrap; overflow-wrap catches single unbroken tokens longer than the pill.
|
|
35
|
+
// One styled component per distinct line count, cached — a fresh styled()
|
|
36
|
+
// per render would remount the text node and churn generated classes.
|
|
37
|
+
])), mixins_1.ellipsis);
|
|
38
|
+
// textWrapMaxLines variants — text wraps up to N lines, then ellipsis
|
|
39
|
+
// (clampText), and the pill grows vertically to fit. white-space: normal
|
|
40
|
+
// overrides both the ellipsis mixin's nowrap and StyledTag's container-level
|
|
41
|
+
// nowrap; overflow-wrap catches single unbroken tokens longer than the pill.
|
|
42
|
+
// One styled component per distinct line count, cached — a fresh styled()
|
|
43
|
+
// per render would remount the text node and churn generated classes.
|
|
44
|
+
var wrapTypoByLines = {};
|
|
45
|
+
var getWrapTypo = function (lines) {
|
|
46
|
+
if (!wrapTypoByLines[lines]) {
|
|
47
|
+
wrapTypoByLines[lines] = (0, styled_components_1.default)(Typo2_1.UI_TAG_DF)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n white-space: normal;\n overflow-wrap: anywhere;\n "], ["\n ", "\n white-space: normal;\n overflow-wrap: anywhere;\n "])), (0, mixins_1.clampText)(lines));
|
|
48
|
+
}
|
|
49
|
+
return wrapTypoByLines[lines];
|
|
50
|
+
};
|
|
31
51
|
var TagDisplay = function (_a) {
|
|
32
|
-
var id = _a.id, display = _a.display, size = _a.size, tagColor = _a.tagColor, textColor = _a.textColor, fill = _a.fill, icon = _a.icon, badgeColor = _a.badgeColor, _b = _a.colorPreset, colorPreset = _b === void 0 ? 'default' : _b, weight = _a.weight;
|
|
33
|
-
|
|
52
|
+
var id = _a.id, display = _a.display, size = _a.size, tagColor = _a.tagColor, textColor = _a.textColor, fill = _a.fill, icon = _a.icon, badgeColor = _a.badgeColor, _b = _a.colorPreset, colorPreset = _b === void 0 ? 'default' : _b, weight = _a.weight, textWrapMaxLines = _a.textWrapMaxLines;
|
|
53
|
+
var typo = textWrapMaxLines && textWrapMaxLines > 0
|
|
54
|
+
? getWrapTypo(Math.floor(textWrapMaxLines))
|
|
55
|
+
: STYLED_UI_TAG_DF;
|
|
56
|
+
return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, badgeColor: badgeColor, size: size, fill: fill, style: __assign(__assign(__assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset })), (tagColor ? { backgroundColor: tagColor } : {})), (textColor ? { color: textColor } : {})), typo: typo }));
|
|
34
57
|
};
|
|
35
58
|
exports.TagDisplay = TagDisplay;
|
|
36
|
-
var templateObject_1;
|
|
59
|
+
var templateObject_1, templateObject_2;
|