componentDefinitions

Home > @backstage/canon > componentDefinitions

Component definitions for the Canon library

Signature:

componentDefinitions: {
    readonly Avatar: {
        readonly classNames: {
            readonly root: "canon-AvatarRoot";
            readonly image: "canon-AvatarImage";
            readonly fallback: "canon-AvatarFallback";
        };
        readonly dataAttributes: {
            readonly size: readonly ["small", "medium", "large"];
        };
    };
    readonly Box: {
        readonly classNames: {
            readonly root: "canon-Box";
        };
    };
    readonly Button: {
        readonly classNames: {
            readonly root: "canon-Button";
        };
        readonly dataAttributes: {
            readonly size: readonly ["small", "medium", "large"];
            readonly variant: readonly ["primary", "secondary", "ghost"];
        };
    };
    readonly ButtonIcon: {
        readonly classNames: {
            readonly root: "canon-ButtonIcon";
        };
    };
    readonly ButtonLink: {
        readonly classNames: {
            readonly root: "canon-ButtonLink";
        };
    };
    readonly Checkbox: {
        readonly classNames: {
            readonly root: "canon-CheckboxRoot";
            readonly label: "canon-CheckboxLabel";
            readonly indicator: "canon-CheckboxIndicator";
        };
        readonly dataAttributes: {
            readonly checked: readonly [true, false];
        };
    };
    readonly Collapsible: {
        readonly classNames: {
            readonly root: "canon-CollapsibleRoot";
            readonly trigger: "canon-CollapsibleTrigger";
            readonly panel: "canon-CollapsiblePanel";
        };
    };
    readonly Container: {
        readonly classNames: {
            readonly root: "canon-Container";
        };
    };
    readonly FieldLabel: {
        readonly classNames: {
            readonly root: "canon-FieldLabelWrapper";
            readonly label: "canon-FieldLabel";
            readonly secondaryLabel: "canon-FieldSecondaryLabel";
            readonly description: "canon-FieldDescription";
        };
    };
    readonly Flex: {
        readonly classNames: {
            readonly root: "canon-Flex";
        };
    };
    readonly Grid: {
        readonly classNames: {
            readonly root: "canon-Grid";
            readonly item: "canon-GridItem";
        };
    };
    readonly Heading: {
        readonly classNames: {
            readonly root: "canon-Heading";
        };
        readonly dataAttributes: {
            readonly variant: readonly ["title1", "title2", "title3", "subtitle"];
            readonly color: readonly ["primary", "secondary", "muted"];
            readonly truncate: readonly [true, false];
        };
    };
    readonly Icon: {
        readonly classNames: {
            readonly root: "canon-Icon";
        };
    };
    readonly Link: {
        readonly classNames: {
            readonly root: "canon-Link";
        };
        readonly dataAttributes: {
            readonly variant: readonly ["subtitle", "body", "caption", "label"];
            readonly weight: readonly ["regular", "bold"];
        };
    };
    readonly Menu: {
        readonly classNames: {
            readonly trigger: "canon-MenuTrigger";
            readonly backdrop: "canon-MenuBackdrop";
            readonly positioner: "canon-MenuPositioner";
            readonly popup: "canon-MenuPopup";
            readonly arrow: "canon-MenuArrow";
            readonly item: "canon-MenuItem";
            readonly group: "canon-MenuGroup";
            readonly groupLabel: "canon-MenuGroupLabel";
            readonly radioGroup: "canon-MenuRadioGroup";
            readonly radioItem: "canon-MenuRadioItem";
            readonly radioItemIndicator: "canon-MenuRadioItemIndicator";
            readonly checkboxItem: "canon-MenuCheckboxItem";
            readonly checkboxItemIndicator: "canon-MenuCheckboxItemIndicator";
            readonly submenuTrigger: "canon-MenuSubmenuTrigger";
            readonly separator: "canon-MenuSeparator";
        };
    };
    readonly RadioGroup: {
        readonly classNames: {
            readonly root: "canon-RadioGroup";
            readonly content: "canon-RadioGroupContent";
            readonly radio: "canon-Radio";
        };
    };
    readonly ScrollArea: {
        readonly classNames: {
            readonly root: "canon-ScrollAreaRoot";
            readonly viewport: "canon-ScrollAreaViewport";
            readonly scrollbar: "canon-ScrollAreaScrollbar";
            readonly thumb: "canon-ScrollAreaThumb";
        };
    };
    readonly SearchField: {
        readonly classNames: {
            readonly root: "canon-SearchField";
            readonly clear: "canon-InputClear";
        };
    };
    readonly Select: {
        readonly classNames: {
            readonly root: "canon-Select";
            readonly required: "canon-SelectRequired";
            readonly trigger: "canon-SelectTrigger";
            readonly value: "canon-SelectValue";
            readonly icon: "canon-SelectIcon";
            readonly popup: "canon-SelectPopup";
            readonly item: "canon-SelectItem";
            readonly itemIndicator: "canon-SelectItemIndicator";
            readonly itemText: "canon-SelectItemText";
            readonly description: "canon-SelectDescription";
            readonly error: "canon-SelectError";
        };
        readonly dataAttributes: {
            readonly size: readonly ["small", "medium"];
        };
    };
    readonly Switch: {
        readonly classNames: {
            readonly root: "canon-Switch";
            readonly indicator: "canon-SwitchIndicator";
        };
    };
    readonly Table: {
        readonly classNames: {
            readonly root: "canon-TableRoot";
            readonly header: "canon-TableHeader";
            readonly body: "canon-TableBody";
            readonly row: "canon-TableRow";
            readonly head: "canon-TableHead";
            readonly caption: "canon-TableCaption";
            readonly cell: "canon-TableCell";
            readonly cellText: "canon-TableCellText";
            readonly cellLink: "canon-TableCellLink";
            readonly cellProfile: "canon-TableCellProfile";
            readonly cellProfileAvatar: "canon-TableCellProfileAvatar";
            readonly cellProfileAvatarImage: "canon-TableCellProfileAvatarImage";
            readonly cellProfileAvatarFallback: "canon-TableCellProfileAvatarFallback";
            readonly cellProfileName: "canon-TableCellProfileName";
            readonly cellProfileLink: "canon-TableCellProfileLink";
        };
    };
    readonly Tabs: {
        readonly classNames: {
            readonly root: "canon-TabsRoot";
            readonly list: "canon-TabsList";
            readonly indicator: "canon-TabsIndicator";
            readonly tab: "canon-TabsTab";
            readonly panel: "canon-TabsPanel";
        };
    };
    readonly Text: {
        readonly classNames: {
            readonly root: "canon-Text";
        };
        readonly dataAttributes: {
            readonly variant: readonly ["subtitle", "body", "caption", "label"];
            readonly weight: readonly ["regular", "bold"];
            readonly color: readonly ["primary", "secondary", "danger", "warning", "success"];
            readonly truncate: readonly [true, false];
        };
    };
    readonly TextField: {
        readonly classNames: {
            readonly root: "canon-TextField";
            readonly inputWrapper: "canon-InputWrapper";
            readonly input: "canon-Input";
            readonly inputIcon: "canon-InputIcon";
        };
        readonly dataAttributes: {
            readonly invalid: readonly [true, false];
            readonly disabled: readonly [true, false];
        };
    };
    readonly Header: {
        readonly classNames: {
            readonly toolbar: "canon-HeaderToolbar";
            readonly toolbarWrapper: "canon-HeaderToolbarWrapper";
            readonly toolbarContent: "canon-HeaderToolbarContent";
            readonly toolbarControls: "canon-HeaderToolbarControls";
            readonly toolbarIcon: "canon-HeaderToolbarIcon";
            readonly toolbarName: "canon-HeaderToolbarName";
            readonly breadcrumbs: "canon-HeaderBreadcrumbs";
            readonly breadcrumb: "canon-HeaderBreadcrumb";
            readonly breadcrumbLink: "canon-HeaderBreadcrumbLink";
            readonly breadcrumbSeparator: "canon-HeaderBreadcrumbSeparator";
            readonly tabs: "canon-HeaderTabs";
            readonly tabList: "canon-HeaderTabList";
            readonly tab: "canon-HeaderTab";
            readonly tabActive: "canon-HeaderTabActive";
            readonly tabHovered: "canon-HeaderTabHovered";
            readonly subNav: "canon-HeaderSubNav";
        };
    };
    readonly Tooltip: {
        readonly classNames: {
            readonly trigger: "canon-TooltipTrigger";
            readonly positioner: "canon-TooltipPositioner";
            readonly popup: "canon-TooltipPopup";
            readonly arrow: "canon-TooltipArrow";
        };
    };
}