@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
114 lines (113 loc) • 5.17 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormFieldGroup = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const FormFieldGroupList_1 = require("./FormFieldGroupList");
const FormFieldGroupInput_1 = require("./FormFieldGroupInput");
const FormFieldGroupLabel_1 = require("./FormFieldGroupLabel");
const FormField_1 = require("./FormField");
const hooks_1 = require("./hooks");
const formFieldStencil_1 = require("./formFieldStencil");
/**
* Use `FormFieldGroup` to wrap a group of inputs to make them accessible.
*
* ```tsx
* <FormFieldGroup>
* <FormFieldGroup.Label>Choose a Pet</FormFieldGroup.Label>
* <FormFiledGroup.Field>
* <FormFieldGroup.List as={RadioGroup} />
* <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
* <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
* </FormFieldGroup.List>
* </FormFieldGroup.Field>
* </FormFieldGroup>
* ```
*
* @stencil formFieldStencil
*/
exports.FormFieldGroup = (0, common_1.createContainer)('div')({
displayName: 'FormFieldGroup',
modelHook: hooks_1.useFormFieldModel,
subComponents: {
/**
* `FormFieldGroup.Input` will render any `inputs` passed to it via the `as` prop. Use this component with checkboxes or radio inputs.
* `FormFieldGroup.Input` will apply `aria-invalid` when there is an error on `FromFieldGroup` or `aria-describedby` when an `id` is added on the `FormFieldGroup`.
*
* **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
*
* ```tsx
* <FormFieldGroup>
* <FormField.Label>Choose a Pet</FormField.Label>
* <FormFieldGroup.List as={RadioGroup} />
* <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
* <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
* </FormFieldGroup.List>
* </FormFieldGroup>
* ```
*/
Input: FormFieldGroupInput_1.FormFieldGroupInput,
/**
* `FormFieldGroup.Label` this element labels the contents of the group of inputs..
*
* ```tsx
* <FormFieldGroup>
* <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
* //...
* </FormFieldGroup>
* ```
*
* @stencil formFieldLabelStencil
*/
Label: FormFieldGroupLabel_1.FormFieldGroupLabel,
/**
* `FormFieldGroup.List` will render a `div`. This element is used to apply the visual error states around the group of inputs. It's contents will be your inputs.
*/
List: FormFieldGroupList_1.FormFieldGroupList,
/**
* `FormFieldGroup.Hint` will render any additional information you want to provide to the `FormFieldGroup`.
*
* ```tsx
* <FormFieldGroup>
* <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
* <FormFieldGroup.List>
* //...
* <FormFieldGroup.List>
* <FormField.Hint>This is your hint text</FormField.Hint>
* </FormFieldGroup>
* ```
*
* @stencil formFieldHintStencil
*/
Hint: FormField_1.FormField.Hint,
/**
* `FormFieldGroup.Field` allows you to properly align the legend to the group of inputs.
*
* ```tsx
* <FormFieldGroup orientation="horizontalStart">
* <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
* <FormFieldGroup.Field>
* <FormFieldGroup.List>
* <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
* <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
* </FormFieldGroup.List>
* <FormFieldGroup.Hint>This is your hint text</FormField.Hint>
* </FormFieldGroup.Field>
* </FormFieldGroup>
* ```
*
*/
Field: FormField_1.FormField.Field,
},
})(({ children, grow, orientation, ...elemProps }, Element, model) => {
return (react_1.default.createElement(Element, { "aria-labelledby": `label-${model.state.id}`, role: "group", ...(0, layout_1.mergeStyles)(elemProps, (0, formFieldStencil_1.formFieldStencil)({
grow,
orientation: model.state.orientation === 'horizontal' ? 'horizontalStart' : model.state.orientation,
error: model.state.error,
required: model.state.isRequired,
})) }, children));
});