@homebound/beam 2.183.2 → 2.183.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.
|
@@ -158,7 +158,7 @@ function DateFieldBase(props) {
|
|
|
158
158
|
setInputValue("");
|
|
159
159
|
onChange(undefined);
|
|
160
160
|
} }, void 0)) }, void 0));
|
|
161
|
-
const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1 }, tid.calendarButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: Css_1.Palette.Gray700 }, void 0) }), void 0));
|
|
161
|
+
const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1 }, tid.calendarButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray700 }, void 0) }), void 0));
|
|
162
162
|
const EndFieldButtons = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeFilterField && clearButton, !hideCalendarIcon && calendarButton] }, void 0));
|
|
163
163
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, textFieldProps, { errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...triggerProps, ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
|
|
164
164
|
// hide the calendar if the user is manually entering the date
|
|
@@ -33,6 +33,11 @@ function TextFieldBase(props) {
|
|
|
33
33
|
const maybeSmaller = compound ? 2 : 0;
|
|
34
34
|
const fieldHeight = 40;
|
|
35
35
|
const compactFieldHeight = 32;
|
|
36
|
+
const [bgColor, hoverBgColor, disabledBgColor] = contrast
|
|
37
|
+
? [Css_1.Palette.Gray700, Css_1.Palette.Gray600, Css_1.Palette.Gray700]
|
|
38
|
+
: borderless && !compound
|
|
39
|
+
? [Css_1.Palette.Gray100, Css_1.Palette.Gray200, Css_1.Palette.Gray200]
|
|
40
|
+
: [Css_1.Palette.White, Css_1.Palette.Gray100, Css_1.Palette.Gray100];
|
|
36
41
|
const fieldStyles = {
|
|
37
42
|
container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).relative.$,
|
|
38
43
|
inputWrapper: {
|
|
@@ -40,7 +45,7 @@ function TextFieldBase(props) {
|
|
|
40
45
|
.hPx(fieldHeight - maybeSmaller)
|
|
41
46
|
.if(compact)
|
|
42
47
|
.hPx(compactFieldHeight - maybeSmaller).$,
|
|
43
|
-
...Css_1.Css.
|
|
48
|
+
...Css_1.Css.bgColor(bgColor).gray900.if(contrast).white.$,
|
|
44
49
|
// When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
|
|
45
50
|
// This typically happens in tables when a column has a mix of static text (i.e. "roll up" rows and table headers) and input fields.
|
|
46
51
|
// To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
|
|
@@ -60,14 +65,14 @@ function TextFieldBase(props) {
|
|
|
60
65
|
.mhPx(compactFieldHeight - maybeSmaller).$),
|
|
61
66
|
},
|
|
62
67
|
input: {
|
|
63
|
-
...Css_1.Css.w100.mw0.outline0.fg1.if(multiline).br4.$,
|
|
68
|
+
...Css_1.Css.w100.mw0.outline0.fg1.bgColor(bgColor).if(multiline).br4.$,
|
|
64
69
|
// Not using Truss's inline `if` statement here because `addIn` properties do not respect the if statement.
|
|
65
|
-
...(
|
|
70
|
+
...(contrast && Css_1.Css.addIn("&::selection", Css_1.Css.bgGray800.$).$),
|
|
66
71
|
},
|
|
67
|
-
hover: Css_1.Css.
|
|
72
|
+
hover: Css_1.Css.bgColor(hoverBgColor).if(contrast).bGray600.$,
|
|
68
73
|
focus: Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
|
|
69
74
|
disabled: visuallyDisabled
|
|
70
|
-
? Css_1.Css.cursorNotAllowed.
|
|
75
|
+
? Css_1.Css.cursorNotAllowed.gray600.bgColor(disabledBgColor).if(contrast).gray500.$
|
|
71
76
|
: Css_1.Css.cursorNotAllowed.$,
|
|
72
77
|
error: Css_1.Css.bRed600.if(contrast).bRed400.$,
|
|
73
78
|
};
|