@okta/odyssey-react-mui 1.7.1 → 1.8.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/CHANGELOG.md +6 -0
- package/dist/Checkbox.js +17 -11
- package/dist/Checkbox.js.map +1 -1
- package/dist/src/Checkbox.d.ts +5 -1
- package/dist/src/Checkbox.d.ts.map +1 -1
- package/dist/tsconfig.production.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/Checkbox.tsx +25 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@okta/odyssey-react-mui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"description": "React MUI components for Odyssey, Okta's design system",
|
|
5
5
|
"author": "Okta, Inc.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"@mui/system": "^5.14.9",
|
|
52
52
|
"@mui/utils": "^5.11.2",
|
|
53
53
|
"@mui/x-date-pickers": "^5.0.15",
|
|
54
|
-
"@okta/odyssey-design-tokens": "1.
|
|
54
|
+
"@okta/odyssey-design-tokens": "1.8.0",
|
|
55
55
|
"date-fns": "^2.30.0",
|
|
56
56
|
"i18next": "^23.5.1",
|
|
57
57
|
"material-react-table": "^2.0.2",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"react": ">=17 <19",
|
|
64
64
|
"react-dom": ">=17 <19"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "279ce97d18cf87719c03592ff66e341441b51c10"
|
|
67
67
|
}
|
package/src/Checkbox.tsx
CHANGED
|
@@ -16,6 +16,7 @@ import {
|
|
|
16
16
|
Checkbox as MuiCheckbox,
|
|
17
17
|
CheckboxProps as MuiCheckboxProps,
|
|
18
18
|
FormControlLabel,
|
|
19
|
+
FormHelperText,
|
|
19
20
|
} from "@mui/material";
|
|
20
21
|
|
|
21
22
|
import { FieldComponentProps } from "./FieldComponentProps";
|
|
@@ -55,6 +56,10 @@ export type CheckboxProps = {
|
|
|
55
56
|
* The label text for the Checkbox
|
|
56
57
|
*/
|
|
57
58
|
label?: string;
|
|
59
|
+
/**
|
|
60
|
+
* The helper text content
|
|
61
|
+
*/
|
|
62
|
+
hint?: string;
|
|
58
63
|
/**
|
|
59
64
|
* The checkbox validity, if different from its enclosing group. Defaults to "inherit".
|
|
60
65
|
*/
|
|
@@ -77,6 +82,7 @@ const Checkbox = ({
|
|
|
77
82
|
isIndeterminate,
|
|
78
83
|
isRequired,
|
|
79
84
|
label: labelProp,
|
|
85
|
+
hint,
|
|
80
86
|
name: nameOverride,
|
|
81
87
|
onChange: onChangeProp,
|
|
82
88
|
testId,
|
|
@@ -90,19 +96,21 @@ const Checkbox = ({
|
|
|
90
96
|
});
|
|
91
97
|
|
|
92
98
|
const label = useMemo(() => {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
99
|
+
return (
|
|
100
|
+
<>
|
|
101
|
+
{labelProp}
|
|
102
|
+
{isRequired && (
|
|
103
|
+
<>
|
|
104
|
+
{" "}
|
|
105
|
+
<Typography component="span" color="textSecondary">
|
|
106
|
+
({t("fieldlabel.required.text")})
|
|
107
|
+
</Typography>
|
|
108
|
+
</>
|
|
109
|
+
)}
|
|
110
|
+
{hint && <FormHelperText>{hint}</FormHelperText>}
|
|
111
|
+
</>
|
|
112
|
+
);
|
|
113
|
+
}, [isRequired, labelProp, hint, t]);
|
|
106
114
|
|
|
107
115
|
const onChange = useCallback<NonNullable<MuiCheckboxProps["onChange"]>>(
|
|
108
116
|
(event, checked) => {
|
|
@@ -114,6 +122,7 @@ const Checkbox = ({
|
|
|
114
122
|
|
|
115
123
|
return (
|
|
116
124
|
<FormControlLabel
|
|
125
|
+
sx={{ alignItems: "flex-start" }}
|
|
117
126
|
aria-label={ariaLabel}
|
|
118
127
|
aria-labelledby={ariaLabelledBy}
|
|
119
128
|
className={
|
|
@@ -129,6 +138,9 @@ const Checkbox = ({
|
|
|
129
138
|
indeterminate={isIndeterminate}
|
|
130
139
|
onChange={onChange}
|
|
131
140
|
required={isRequired}
|
|
141
|
+
sx={() => ({
|
|
142
|
+
marginBlockStart: "2px",
|
|
143
|
+
})}
|
|
132
144
|
/>
|
|
133
145
|
}
|
|
134
146
|
data-se={testId}
|