Snippets for ZohoMail-UI

Note: There are two ways to insert these:

• Trigger Suggest (⌃Space on macOS) and then type in the name; or you can enable the Editor: Tab Completion setting, then type the name of the snippet and press Tab.
• Execute the corresponding editor commands like ZohoMail-UI: insert <Button> (or even better, make keybindings for them!).

Features

• Works in JS/X and TSX
• Automatically adds missing imports when a snippet is inserted (as long as it succeeds in parsing the entire file)
• You can configure whether to use controlled or uncontrolled form controls in the extension settings.

Settings

Form Control Mode

• controlled - inserts value and onChange properties
• uncontrolled - inserts defaultValue property

Snippets

• zmAccordion: ZohoMail-UI <Accordion>
• zmAdorn: ZohoMail-UI <Adorn>
• zmAlert: ZohoMail-UI <Avatar>
• zmAnglePicker: ZohoMail-UI <AnglePicker>
• zmAvatar: ZohoMail-UI <Avatar>
• zmBadge: ZohoMail-UI <Badge>
• zmBadgeWrapper: ZohoMail-UI <BadgeWrapper>
• zmBoxLoader: ZohoMail-UI <BoxLoader>
• zmButton: ZohoMail-UI <Button>
• zmButtonBar: ZohoMail-UI <ButtonBar>
• zmButtonColumn: ZohoMail-UI <ButtonColumn>
• zmButtonGroup: ZohoMail-UI <ButtonGroup>
• zmButtonLabel: ZohoMail-UI <ButtonLabel>
• zmButtonSeparator: ZohoMail-UI <ButtonSeparator>
• zmCheckbox: ZohoMail-UI <Checkbox>
• zmCheckboxGroup: ZohoMail-UI <CheckboxGroup>
• zmColorSwatchPicker: ZohoMail-UI <ColorSwatchPicker>
• zmConfirmDialog: ZohoMail-UI <ConfirmDialog>
• zmCustomCheckbox: ZohoMail-UI <CustomCheckbox>
• zmCustomCheckboxGroup: ZohoMail-UI <CustomCheckboxGroup>
• zmCustomRadio: ZohoMail-UI <CustomRadio>
• zmCustomRadioGroup: ZohoMail-UI <CustomRadioGroup>
• zmDatePicker: ZohoMail-UI <Calendar>
• zmDateRangePicker: ZohoMail-UI <Calendar>
• zmDialog: ZohoMail-UI <Dialog>
• zmDialogColumn: ZohoMail-UI <DialogColumn>
• zmDialogDesc: ZohoMail-UI <DialogDesc>
• zmDialogRow: ZohoMail-UI <DialogRow>
• zmDotLoader: ZohoMail-UI <DotLoader>
• zmDrawer: ZohoMail-UI <Drawer>
• zmDropdown: ZohoMail-UI <Dropdown>
• zmIcon: ZohoMail-UI <Icon>
• zmLineLoader: ZohoMail-UI <LineLoader>
• zmMenuBar: ZohoMail-UI <MenuBar>
• zmMenuButton: ZohoMail-UI <MenuButton>
• zmMenuColumn: ZohoMail-UI <MenuColumn>
• zmMenuGroup: ZohoMail-UI <MenuGroup>
• zmMenuWrapper: ZohoMail-UI <MenuWrapper>
• zmNumberInput: ZohoMail-UI <NumberInput>
• zmOverlay: ZohoMail-UI <Overlay>
• zmPopover: ZohoMail-UI <Popover>
• zmPopoverButton: ZohoMail-UI <PopoverButton>
• zmProgressBar: ZohoMail-UI <ProgressBar>
• zmRadio: ZohoMail-UI <Radio>
• zmRadioGroup: ZohoMail-UI <RadioGroup>
• zmSelectText: ZohoMail-UI <SelectText>
• zmSelectWrapper: ZohoMail-UI <SelectWrapper>
• zmSkeleton: ZohoMail-UI <Skeleton>
• zmSlider: ZohoMail-UI <Slider>
• zmSpinner: ZohoMail-UI <Spinner>
• zmSplitWrapper: ZohoMail-UI <SplitWrapper>
• zmSwitch: ZohoMail-UI <Switch>
• zmSwitchLabel: ZohoMail-UI <SwitchLabel>
• zmTable: ZohoMail-UI <Table>
• zmTableCell: ZohoMail-UI <Td>
• zmTabs: ZohoMail-UI <Badge>
• zmTextContentEditable: ZohoMail-UI <TextContentEditable>
• zmTextField: ZohoMail-UI <TextField>
• zmTextFieldWrapper: ZohoMail-UI <TextFieldWrapper>
• zmTimeline: ZohoMail-UI <TimelineWrapper>
• zmToken: ZohoMail-UI <Token>
• zmTokenWrapper: ZohoMail-UI <TokenWrapper>
• zmTooltip: ZohoMail-UI <Tooltip>
• zmZohoIcon: ZohoMail-UI <ZohoIcon>

zmAccordion: ZohoMail-UI <Accordion>

<Accordion onChange={$1} value={$2} allowToggle={${3|false,true|}} allowMultiple={${4|false,true|}}>
    <AccordionItem>
        <AccordionButton>
            $5
        </AccordionButton>
        <AccordionPanel>
            $6
        </AccordionPanel>
    </AccordionItem>
    <AccordionItem>
        <AccordionButton>
            $7
        </AccordionButton>
        <AccordionPanel>
            $8
        </AccordionPanel>
    </AccordionItem>
</Accordion>

zmAdorn: ZohoMail-UI <Adorn>

<Adorn>
    $0
</Adorn>

zmAlert: ZohoMail-UI <Avatar>

<Alert variant="${1|standard,filled,unstyled,outlined|}" severity="${2|info,success,error,warning,default|}">
    <AlertContent>
        <AlertTitle>$3</AlertTitle>
        <AlertDesc>$4</AlertDesc>
    </AlertContent>
    <AlertAction>
        $5
    </AlertAction>
</Alert>

zmAnglePicker: ZohoMail-UI <AnglePicker>

<AnglePicker onChange={$1} value={$2} />

zmAvatar: ZohoMail-UI <Avatar>

<Avatar
    variant="${1|circular,rounded,square|}"
    size="${2|doubleExtraSmall,extraSmall,small,medium,large,extraLarge,doubleExtraLarge,tripleExtraLarge,custom|}"
    availability="${3|assist,available,away,busy,call,dnd,event,idle,invisible,meeting,offline,telephony,training|}"
    name=""
    imageURL=""$4
/>

zmBadge: ZohoMail-UI <Badge>

<Badge variant="${1|filled,outlined,subtle|}" variantColor="${2|red,green,blue,yellow,black,grey,theme|}"$3>
    $0
</Badge>

zmBadgeWrapper: ZohoMail-UI <BadgeWrapper>

<BadgeWrapper>
    $0
</BadgeWrapper>

zmBoxLoader: ZohoMail-UI <BoxLoader>

<BoxLoader />

zmButton: ZohoMail-UI <Button>

<Button
    variant="${1|outlined,flat,filled,unstyled|}"
    variantColor="${2|primary,default,red,custom,green|}"
    size="${3|extraExtraSmall,extraSmall,small,medium,large,extraLarge,custom|}"
    isInProgress={${4|false,true|}}
    onClick={}$5
>
    $0
</Button>

zmButtonBar: ZohoMail-UI <ButtonBar>

<ButtonBar>
    $0
</ButtonBar>

zmButtonColumn: ZohoMail-UI <ButtonColumn>

<ButtonColumn align="${1|center,right|}"$2>
    $0
</ButtonColumn>

zmButtonGroup: ZohoMail-UI <ButtonGroup>

<ButtonGroup>
    $0
</ButtonGroup>

zmButtonLabel: ZohoMail-UI <ButtonLabel>

<ButtonLabel label="$1">
    $0
</ButtonLabel>

zmButtonSeparator: ZohoMail-UI <ButtonSeparator>

<ButtonSeparator variant="${1|arrow,dot,slash,line|}">
    $0
</ButtonSeparator>

zmCheckbox: ZohoMail-UI <Checkbox>

<Checkbox onChange={$1} value="$2" isChecked="$3">
    $4
</Checkbox>

zmCheckboxGroup: ZohoMail-UI <CheckboxGroup>

<CheckboxGroup orientation="${1|vertical,grid,horizontalColumn,horizontalInline,horizontalInlineGroup|}" label="$2" onChange={$3} value={$4} $5>
    <Checkbox value="$6">$7</Checkbox>
    <Checkbox value="$8">$9</Checkbox>
    $10
</CheckboxGroup>

zmColorSwatchPicker: ZohoMail-UI <ColorSwatchPicker>

<ColorSwatchPicker onChange={$1} value={$2} />

zmConfirmDialog: ZohoMail-UI <ConfirmDialog>

<ConfirmDialog
    hasCloseIcon={${1|false,true|}}
    isOpen={${2|false,true|}}
    title="${3}"
    content="${4}"
    okButtonName="${5}"
    cancelButtonName="${6}"
    onSuccess={}
    onCancel={}
/>

zmCustomCheckbox: ZohoMail-UI <CustomCheckbox>

<CustomCheckbox onChange={$1} value="$2" isChecked="$3">
    $4
</CustomCheckbox>

zmCustomCheckboxGroup: ZohoMail-UI <CustomCheckboxGroup>

<CustomCheckboxGroup orientation="${1|vertical,grid,horizontalColumn,horizontalInline,horizontalInlineGroup|}" label="$2" onChange={$3} value={$4} $5>
    <CustomCheckbox value="$6">$7</CustomCheckbox>
    <CustomCheckbox value="$8">$9</CustomCheckbox>
    $10
</CustomCheckboxGroup>

zmCustomRadio: ZohoMail-UI <CustomRadio>

<CustomRadio>
    $1
</CustomRadio>

zmCustomRadioGroup: ZohoMail-UI <CustomRadioGroup>

<CustomRadioGroup orientation="${1|vertical,grid,horizontalColumn,horizontalInline,horizontalInlineGroup|}" label="$2" onChange={$3} value={$4} $5>
    <CustomRadio value="$6">$7</CustomRadio>
    <CustomRadio value="$8">$9</CustomRadio>
    $10
</CustomRadioGroup>

zmDatePicker: ZohoMail-UI <Calendar>

<PopoverDatePicker
    anchorEl={dateInputRef}
    placement="${1|bottom,bottom-start,bottom-end,left,left-start,left-end,top,top-start,top-end,right,right-start,right-end|}"
    selectedDate={$2}
    onDateSelection={$3}
    restrictSelection={["$4", "$5"]}
    hasAdjacentMonthDates={${6|false,true|}}
    hasYearNavigation={${7|false,true|}}
    hasTimePicker={${8|false,true|}}
    hasRestrictPastTime={${9|false,true|}}
    hasRestrictFutureTime={${10|false,true|}}
    isOpen={${11|false,true|}}
    onOpen={$12}
    onClose={$13}
/>

zmDateRangePicker: ZohoMail-UI <Calendar>

<PopoverDateRangePicker
    anchorEl={dateInputRef}
    placement="${1|bottom,bottom-start,bottom-end,left,left-start,left-end,top,top-start,top-end,right,right-start,right-end|}"
    selectedDate={["$2", "$3"]}
    onDateSelection={$4}
    minDays={$5}
    maxDays={$6}
    restrictSelection={["$7", "$8"]}
    hasYearNavigation={${9|false,true|}}
    hasTimePicker={${10|false,true|}}
    hasRestrictPastTime={${11|false,true|}}
    hasRestrictFutureTime={${12|false,true|}}
    isOpen={${13|false,true|}}
    onOpen={$14}
    onClose={$15}
/>

zmDialog: ZohoMail-UI <Dialog>

<Dialog
    isOpen={${1|false,true|}}
    size="${2|doubleExtraSmall,extraSmall,small,medium,large,extraLarge,doubleExtraLarge,auto,fullScreen|}"
    isCentered={${3|false,true|}}
    fullSize={${4|false,true|}}
    fullHeight={${5|false,true|}}
    onClose={}
>
    <DialogContent ref={} hasClose={${6|false,true|}}>
        <DialogHeader>
            <DialogTitle>
                $7
            </DialogTitle>
        </DialogHeader>
        <DialogBody>
            $8
        </DialogBody>
        <DialogFooter>
            $9
        </DialogFooter>
    </DialogContent>
</Dialog>

zmDialogColumn: ZohoMail-UI <DialogColumn>

<DialogColumn isPrimary={${1|false,true|}}>
    $0
</DialogColumn>

zmDialogDesc: ZohoMail-UI <DialogDesc>

<DialogDesc>
    $0
</DialogDesc>

zmDialogRow: ZohoMail-UI <DialogRow>

<DialogRow>
    $0
</DialogRow>

zmDotLoader: ZohoMail-UI <DotLoader>

<DotLoader />

zmDrawer: ZohoMail-UI <Drawer>

<DrawerWrapper onClose={$1} isOpen={$2} buttonRef={$3}>
    <Drawer placement="${4|left,top,right,bottom|}" size="${5|small,medium,large,extraLarge,full,custom|}">
        <DrawerHeader>
            <DrawerTitle>$6</DrawerTitle>
        </DrawerHeader>
        <DrawerBody>$7</DrawerBody>
        <DrawerFooter>$8</DrawerFooter>
    </Drawer>
</DrawerWrapper>

zmDropdown: ZohoMail-UI <Dropdown>

<MenuWrapper
    autoSelect={${1|false,true|}}
    id="$2"
    onClose={$3}
    closeOnSelect={${4|false,true|}}
    onClick={$5}
    isArrowMenu="${6|bottom,bottom-start,bottom-end,left,left-start,left-end,top,top-start,top-end,right,right-start,right-end|}"
    placement="${7|bottom,bottom-start,bottom-end,left,left-start,left-end,top,top-start,top-end,right,right-start,right-end|}"
>
    <Menu mountAtBody={${8|false,true|}}>
        <MenuList>
            <MenuTitle>$9</MenuTitle>
            <MenuItem>$10</MenuItem>
            <Separator />
        </MenuList>
    </Menu>
</MenuWrapper>

zmIcon: ZohoMail-UI <Icon>

<Icon className="${1}" />

zmLineLoader: ZohoMail-UI <LineLoader>

<LineLoader />

zmMenuBar: ZohoMail-UI <MenuBar>

<MenuBar>
    $0
</MenuBar>

zmMenuButton: ZohoMail-UI <MenuButton>

<MenuButton
    variant="${1|outlined,flat,filled,unstyled|}"
    variantColor="${2|primary,default,red,custom,green|}"
    size="${3|extraExtraSmall,extraSmall,small,medium,large,extraLarge,custom|}"$4
>
  $0
</MenuButton>

zmMenuColumn: ZohoMail-UI <MenuColumn>

<MenuColumn align="${1|center,right|}"$2>
    $0
</MenuColumn>

zmMenuGroup: ZohoMail-UI <MenuGroup>

<MenuGroup>
    $0
</MenuGroup>

zmMenuWrapper: ZohoMail-UI <MenuWrapper>

<MenuWrapper
    autoSelect={${1|false,true|}}
    id="$2"
    onClose={$3}
    closeOnSelect={${4|false,true|}}
    onClick={$5}
    isArrowMenu="${6|bottom,bottom-start,bottom-end,left,left-start,left-end,top,top-start,top-end,right,right-start,right-end|}"
    placement="${7|bottom,bottom-start,bottom-end,left,left-start,left-end,top,top-start,top-end,right,right-start,right-end|}"
>
    <Menu mountAtBody={${8|false,true|}}>
        <MenuList>
            <MenuTitle>$9</MenuTitle>
            <MenuItem>$10</MenuItem>
            <Separator />
        </MenuList>
    </Menu>
</MenuWrapper>

zmNumberInput: ZohoMail-UI <NumberInput>

<NumberInput onChange={$1} value="$2" min="$3" max="$4" precision="$5" step="$6">
</NumberInput>

zmOverlay: ZohoMail-UI <Overlay>

<Overlay color="${1|light,dark,transparent|}"$2>
    $0
</Overlay>

zmPopover: ZohoMail-UI <Popover>

<PopoverWrapper onOpen={$1} onClose={$2} isOpen={${3|false,true|}}>
    <Popover
        anchorEl={ref}
        placement="${4|bottom,bottom-start,bottom-end,left,left-start,left-end,top,top-start,top-end,right,right-start,right-end|}"
        hasArrow={${5|false,true|}}
        hasClose={${6|false,true|}}
        mountAtBody={${7|false,true|}}
        onClickAway={$8}
    >
        <PopoverHeader>
            <PopoverTitle>$9</PopoverTitle>
            $10
        </PopoverHeader>
        <PopoverBody>
        $11
        </PopoverBody>
        <PopoverFooter>
        $12
        </PopoverFooter>
    </Popover>
</PopoverWrapper>

zmPopoverButton: ZohoMail-UI <PopoverButton>

<PopoverButton
    variant="${1|outlined,flat,filled,unstyled|}"
    variantColor="${2|primary,default,red,custom,green|}"
    size="${3|extraExtraSmall,extraSmall,small,medium,large,extraLarge,custom|}" $4
>
    $0
</PopoverButton>

zmProgressBar: ZohoMail-UI <ProgressBar>

<ProgressBar width="$1" />

zmRadio: ZohoMail-UI <Radio>

<Radio onChange={$1} value="$2">
    $3
</Radio>

zmRadioGroup: ZohoMail-UI <RadioGroup>

<RadioGroup orientation="${1|vertical,grid,horizontalColumn,horizontalInline,horizontalInlineGroup|}" label="$2" onChange={$3} value={$4} $5>
    <Radio value="$6">$7</Radio>
    <Radio value="$8">$9</Radio>
    $10
</RadioGroup>

zmSelectText: ZohoMail-UI <SelectText>

<SelectText>
    $0
</SelectText>

zmSelectWrapper: ZohoMail-UI <SelectWrapper>

<SelectWrapper
    variant="${1|filled,outlined,underlined,unstyled|}"
    size="${2|small,medium,large,custom|}"
    labelVariant="${3|inside,outside,animated,onBorder,inline,inlineBlock|}"
    label="$4"
    helpText="$5"
    onClick={$6}
    isInProgress={${7|false,true|}}
    $8
>
    $0
</SelectWrapper>

zmSkeleton: ZohoMail-UI <Skeleton>

<Skeleton variant="${1|line,rectangular,circular,text,auto|}" animation="${2|wave,pulse,none|}"$3>
    $0
</Skeleton>

zmSlider: ZohoMail-UI <Slider>

<Slider onChange={$1} value={$2}>
    $0
</Slider>

zmSpinner: ZohoMail-UI <Spinner>

<Spinner />

zmSplitWrapper: ZohoMail-UI <SplitWrapper>

<SplitWrapper menu={${1|false,true|}} showSplitOnHover={${2|false,true|}}>
    $0
</SplitWrapper>

zmSwitch: ZohoMail-UI <Switch>

<Switch variant="${1|outlined,filled|}" size="${2|small,medium,large|}" onChange={} isChecked={${3|false,true|}} $4>
    $0
</Switch>

zmSwitchLabel: ZohoMail-UI <SwitchLabel>

<SwitchLabel label="$1">
    $0
</SwitchLabel>

zmTable: ZohoMail-UI <Table>

<Table variant="${1|simple,striped,underlined,outlined|}" hasClickableRows="${2|false,true|}">
    <Thead>
        <Tr>
            <Th>$3</Th>
            <Th>$4</Th>
            <Th>$5</Th>
        </Tr>
    </Thead>
    <Tbody>
        <Tr>
            <Td>$6</Td>
            <Td>$7</Td>
            <Td>$8</Td>
        </Tr>
    </Tbody>
</Table>

zmTableCell: ZohoMail-UI <Td>

<Td>$1</Td>

zmTabs: ZohoMail-UI <Badge>

<Tabs variant="${1|underlined,filled,outlined,flat,enclosed,rounded,subtle|}" onChange="" index="">
    <TabList>
        <Tab>
            $2
        </Tab>
        <Tab>
            $3
        </Tab>
    </TabList>
    <TabPanels>
        <TabPanel>
            $4
        </TabPanel>
        <TabPanel>
            $5
        </TabPanel>
    </TabPanels>
</Tabs>

zmTextContentEditable: ZohoMail-UI <TextContentEditable>

<TextContentEditable
    onChange={$1}
    value={$2}
    variant="${3|unstyled,underlined,outlined|}"
    variantColor="${4|primary,default|}"
/>

zmTextField: ZohoMail-UI <TextField>

<TextField onChange={$1} value="$2" isMultiline={${3|false,true|}} $4>
    $0
</TextField>

zmTextFieldWrapper: ZohoMail-UI <TextFieldWrapper>

<TextFieldWrapper
    variant="${1|filled,outlined,underlined,unstyled|}" size="${2|small,medium,large,custom|}"
    labelVariant="${3|inside,outside,animated,onBorder,inline,inlineBlock|}" label="$4"
    helpText="$5" isInProgress={${6|false,true|}}
    $7
>
    $0
</TextFieldWrapper>

zmTimeline: ZohoMail-UI <TimelineWrapper>

<TimelineWrapper contentPosition="${1|left,right,alternate|}">
    <Timeline>
        <TimelineItem>
            <TimelineItemSeparator>
                <TimelineItemConnector />
                <TimelineItemDot />
            </TimelineItemSeparator>
            <TimelineItemContent>
                $2
            </TimelineItemContent>
        </TimelineItem>
    </Timeline>
</TimelineWrapper>

zmToken: ZohoMail-UI <Token>

<Token size="${1|extraSmall,small,medium,large,custom|}" variant="${2|outlined,filled|}" variantStyle="${3|rounded,circular|}" variantColor="${4|red,green,default,primary|}" name="" $5>
    $0
</Token>

zmTokenWrapper: ZohoMail-UI <TokenWrapper>

<TokenWrapper>
    $0
</TokenWrapper>

zmTooltip: ZohoMail-UI <Tooltip>

<Tooltip buttonRef={$1} title={$2} content={$3} />

zmZohoIcon: ZohoMail-UI <ZohoIcon>

<ZohoIcon className="${1}" />