@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
171 lines • 8.6 kB
TypeScript
import React from 'react';
import { ExtractProps } from '@workday/canvas-kit-react/common';
import { FlexProps } from '@workday/canvas-kit-react/layout';
import { Text } from '@workday/canvas-kit-react/text';
export interface FormFieldLabelProps extends FlexProps, Omit<ExtractProps<typeof Text, never>, 'display'> {
/**
* The text of the label.
*/
children: React.ReactNode;
/**
* When true, will apply `accessibleHide` to the label. This is useful in cases where you still need accessibility but don't want to show the label, like a search input.
*/
isHidden?: boolean;
}
export declare const formFieldLabelStencil: import("@workday/canvas-kit-styling").Stencil<{
isRequired: {
true: {
'&::after': {
content: string;
fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
fontWeight: "--cnvs-sys-font-weight-normal";
color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
textDecoration: string;
marginInlineStart: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))";
};
};
};
orientation: {
horizontalStart: {
justifyContent: string;
float: string;
maxHeight: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
};
horizontalEnd: {
maxHeight: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
float: string;
justifyContent: string;
};
vertical: {
width: string;
};
};
isHidden: {
true: {
clip: "rect(1px, 1px, 1px, 1px)";
clipPath: "polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)";
position: "absolute";
overflow: "hidden";
whiteSpace: "nowrap";
height: "1px";
minHeight: "1px";
width: "1px";
minWidth: "1px";
margin: "-1px";
padding: 0;
border: 0;
};
};
}, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
typeLevel: {
'title.large': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
color: "--cnvs-sys-color-fg-strong";
};
'title.medium': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
color: "--cnvs-sys-color-fg-strong";
};
'title.small': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
color: "--cnvs-sys-color-fg-strong";
};
'heading.large': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
color: "--cnvs-sys-color-fg-strong";
};
'heading.medium': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
color: "--cnvs-sys-color-fg-strong";
};
'heading.small': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
color: "--cnvs-sys-color-fg-strong";
};
'body.large': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
color: "--cnvs-sys-color-fg-default";
};
'body.medium': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
color: "--cnvs-sys-color-fg-default";
};
'body.small': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
color: "--cnvs-sys-color-fg-default";
};
'subtext.large': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
color: "--cnvs-sys-color-fg-default";
};
'subtext.medium': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
color: "--cnvs-sys-color-fg-default";
};
'subtext.small': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
color: "--cnvs-sys-color-fg-default";
};
};
variant: {
error: {
color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
};
hint: {
color: "--cnvs-sys-color-fg-muted-default";
};
inverse: {
color: "--cnvs-sys-color-fg-inverse";
};
};
}, {}, {}, never, never>, never>;
export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"label", FormFieldLabelProps, {
state: {
id: string;
error: "error" | "caution" | undefined;
isRequired: boolean;
orientation: "vertical" | "horizontalEnd" | "horizontalStart";
};
events: {};
}>;
//# sourceMappingURL=FormFieldLabel.d.ts.map