DeepdeskSDK

Appearance

On this page

Suggestions overlay ​

Configuring the custom styles ​

The custom styles object is passed as argument when mounting the suggestions overlay:

js
deepdeskSDK.mount(inputElement, {
    customStyles
});

Components and class names ​

Example of passing class names to the suggestions overlay components using BEM notation.

js
const customStyles = {
    rootNode: 'myRootNode',
    CommandPalette: {
        root: 'myCommandPalette',
        list: 'myCommandPalette__list',
        listWrapper: 'myCommandPalette__listWrapper',
        listHorizontal: 'myCommandPalette__listHorizontal',
        page: 'myCommandPalette__page',
        pageNav: 'myCommandPalette__page',
        pageBackButton: 'myCommandPalette__page',
        listHeading: 'myCommandPalette__listHeading',
        listItem: 'myCommandPalette__listItem',
        listItemContent: 'myCommandPalette__listItemContent',
        listItemText: 'myCommandPalette__listItemText',
        listItemDescription: 'myCommandPalette__listItemDescription',
        truncate: 'myCommandPalette__truncate',
        lineClamp: 'myCommandPalette__lineClamp',
        listItemTitle: 'myCommandPalette__listItemTitle',
        listItemAction: 'myCommandPalette__listItemAction',
        listItemPrimaryAction: 'myCommandPalette__listItemPrimaryAction',
        listItemSelected: 'myCommandPalette__listItemSelected',
        sources: 'myCommandPalette__sources',
        sourcesTitle: 'myCommandPalette__sourcesTitle',
        source: 'myCommandPalette__source',
        icon: 'myCommandPalette__icon',
        search: 'myCommandPalette__search',
        searchIcon: 'myCommandPalette__searchIcon',
        searchInputWrapper: 'myCommandPalette__searchInputWrapper',
        searchInput: 'myCommandPalette__searchInput',
        select: 'myCommandPalette__select',
        selectType: 'myCommandPalette__selectType',
        selectWrapper: 'myCommandPalette__selectWrapper',
        image: 'myCommandPalette__image',
        imageSrc: 'myCommandPalette__imageSrc',
        imageTitle: 'myCommandPalette__imageTitle',
        actions: 'myCommandPalette__actions',
        actionsWrapper: 'myCommandPalette__actionsWrapper',
        actionsBar: 'myCommandPalette__actionsBar',
        actionButton: 'myCommandPalette__actionButton',
        actionShortcut: 'myCommandPalette__actionShortcut',
        actionShortcutFixKerning: 'myCommandPalette__actionShortcutFixKerning',
    },
    EntitiesList: {
        root: 'myEntitiesList',
        title: 'myEntitiesList__title',
        empty: 'myEntitiesList__empty',
    },
    Label: {
        root: 'myLabel'
    },
    Chip: {
        root: 'myChip',
    },
    Login: {
        root: 'myLogin',
        anchor: 'myLogin__anchor',
        anchorButton: 'myLogin__anchorButton',
    },
    SearchTrigger: {
        root: 'mySearchTrigger',
        text: 'mySearchTrigger__text',
    },
    Suggestion: {
        root: 'mySuggestion',
        fadein: 'mySuggestion--fadein',
        isSelected: 'mySuggestion--isSelected',
        isClickable: 'mySuggestion--isClickable',
        actions: 'mySuggestion__actions',
        actionsIsFixed: 'mySuggestion__actions--isFixed',
        actionButton: 'mySuggestion__actionButton',
        actionButtonIsPrimary: 'mySuggestion__actionButton--isPrimary',
        actionButtonIsDisabled: 'mySuggestion__actionButton--isDisabled',
        dropdownList: 'mySuggestion__dropdownList',
        dropdownButton: 'mySuggestion__dropdownButton',
        dropdownItem: 'mySuggestion__dropdownItem',
        dropdownItemButton: 'mySuggestion__dropdownItemButton',
        label: 'mySearchTrigger__label',
        labels: 'mySearchTrigger__labels',
    },
    SuggestionList: {
        root: 'mySuggestionList',
        isWithDivider: 'mySuggestionList--isWithDivider'
    },
    SuggestionsOverlay: {
        root: 'mySuggestionsOverlay',
        isInline: 'mySuggestionsOverlay--isInline',
        isCollapsed: 'mySuggestionsOverlay--isCollapsed',
        toggleButton: 'mySuggestionsOverlay__toggleButton',
        toggleButtonWrapper: 'mySuggestionsOverlay__toggleButtonWrapper',
        toggleButtonWrapperHidden: 'mySuggestionsOverlay__toggleButtonWrapperHidden',
        collapsible: 'mySuggestionsOverlay__collapsible',
        hints: 'mySuggestionsOverlay__hints',
        hintsHidden: 'mySuggestionsOverlay__hintsHidden',
        triggers: 'mySuggestionsOverlay__triggers',
        triggersRight: 'mySuggestionsOverlay__triggersRight',
    },
    TextSuggestion: {
        badge: 'myTextSuggestion__badge',
        formattedText: 'myTextSuggestion__formattedText',
    },
    KeyboardHint: {
        root: 'myKeyboardHint',
    },
    ToggleButton: {
        root: 'myToggleButton',
        isCollapsed: 'myToggleButton--isCollapsed', // modifier on root element
    },
    TabCompletion: {
        root: 'myTabCompletion',
        container: 'myTabCompletion__container',
        agentText: 'myTabCompletion__agentText',
        tabText: 'myTabCompletion__tabText',
        hint: 'myTabCompletion__hint',
        focus: 'myTabCompletion__focus',
        resetIndent: 'myTabCompletion__resetIndent',
        matchSelection: 'myTabCompletion__matchSelection',
        matchKeyword: 'myTabCompletion__matchKeyword',
        matchPlaceholder: 'myTabCompletion__matchPlaceholder',
        hover: 'myTabCompletion__hover',
        hintText: 'myTabCompletion__hintText',
        popover: 'myTabCompletion__popover',
        popoverRoot: 'myTabCompletion__popoverRoot',
        popoverContentContainer: 'myTabCompletion__popoverContentContainer',
        popoverContent: 'myTabCompletion__popoverContent',
        selectionOptions: 'myTabCompletion__selectionOptions',
        selectionOptionsIsHidden: 'myTabCompletion__selectionOptionsIsHidden',
        selectionOptionsButton: 'myTabCompletion__selectionOptionsButton',
        caret: 'myTabCompletion__caret',
        popoverSuggestionsRoot: 'myTabCompletion__popoverSuggestionsRoot',
        suggestionsOverlayInputStyles: 'myTabCompletion__suggestionsOverlayInputStyles',
    },
};

CSS variables ​

Note that on the TabCompletion root has the following css variables set inline:

  • --dd-color
  • --dd-font-size
  • --dd-font-family
  • --dd-font-variant

These variables are the computed style values of the agent input field where the DeepdeskSDK is mounted. So --dd-color contains the computed css color value of the agent input, and so on.

You could use the TabCompletion container class name to override these values.