@getsoren/design-system 4.85.0 → 4.86.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.
|
@@ -8,7 +8,7 @@ export interface PillOption {
|
|
|
8
8
|
}
|
|
9
9
|
interface PillGroupBaseProps {
|
|
10
10
|
options: PillOption[];
|
|
11
|
-
/** Draws the pills in the invalid colour */
|
|
11
|
+
/** Draws the pills in the invalid colour and marks the group invalid for assistive technologies */
|
|
12
12
|
error?: boolean;
|
|
13
13
|
/** Palette of the invalid state and of the helper text */
|
|
14
14
|
errorColor?: InvalidColor;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SxProps, Theme } from '@mui/material';
|
|
2
|
-
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { PropsWithChildren, ReactNode } from 'react';
|
|
3
3
|
import { InvalidColor } from '../../../utils/getInvalidColor';
|
|
4
4
|
export interface TextFieldGroupProps extends PropsWithChildren {
|
|
5
5
|
/** `row` puts two short fields side by side */
|
|
@@ -8,6 +8,13 @@ export interface TextFieldGroupProps extends PropsWithChildren {
|
|
|
8
8
|
error?: boolean;
|
|
9
9
|
/** Palette of the invalid frame */
|
|
10
10
|
errorColor?: InvalidColor;
|
|
11
|
+
/** `segmented`: the fields sit on a grey track, the focused one lifted in white (a period picked end by end) */
|
|
12
|
+
variant?: "outlined" | "segmented";
|
|
13
|
+
/** Between two fields of the `segmented` variant, such as an arrow from a start to an end */
|
|
14
|
+
separator?: ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* Additional styling for the group
|
|
17
|
+
*/
|
|
11
18
|
sx?: SxProps<Theme>;
|
|
12
19
|
}
|
|
13
20
|
/**
|
|
@@ -15,5 +22,5 @@ export interface TextFieldGroupProps extends PropsWithChildren {
|
|
|
15
22
|
* the last one. The fields lose their own border, and the focused one draws its ring over the frame.
|
|
16
23
|
* Every child is a field (or a wrapper holding one, such as an Autocomplete): a helper text goes under the group.
|
|
17
24
|
*/
|
|
18
|
-
declare const TextFieldGroup: ({ children,
|
|
25
|
+
declare const TextFieldGroup: ({ children, error, errorColor, separator, sx, direction, variant, }: TextFieldGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
19
26
|
export default TextFieldGroup;
|