Feature: #99093 - Introduce DropDownButton component¶

Description¶

The module menu button bar now can display dropdowns. This enables new interface interactions, like switching the current view from list to tiles or group actions like clipboard and thumbnail visibility. It make the views clearer and the user to see more information at a glance.

Each dropdown consists of different items ranging from headlines to item links that can display the current status. The button automatically changes the icon representation to the icon of the the first active radio icon in the dropdown list.

DropDownButton¶

This button type is a container for dropdown items. It will render a dropdown containing all items attached to it. There are different kinds available, each item needs to implement the \TYPO3\CMS\Backend\Template\Components\Buttons\DropDown\DropDownItemInterface. When this type contains elements of type \TYPO3\CMS\Backend\Template\Components\Buttons\DropDown\DropDownRadio it will use the icon of the first active item of this type.

$buttonBar = $this->moduleTemplate->getDocHeaderComponent()->getButtonBar();
$dropDownButton = $buttonBar->makeDropDownButton()
    ->setLabel('Dropdown')
    ->setTitle('Save')
    ->setIcon($this->iconFactory->getIcon('actions-heart'))
    ->addItem(
        GeneralUtility::makeInstance(DropDownItem::class)
            ->setLabel('Item')
            ->setHref('#')
    );
$buttonBar->addButton($dropDownButton, ButtonBar::BUTTON_POSITION_RIGHT, 2);

DropDownDropDownDivider¶

This dropdown item type renders the divider element.

// use TYPO3\CMS\Backend\Template\Components\Buttons\DropDown\DropDownDivider;

$item = GeneralUtility::makeInstance(DropDownDivider::class);
$dropDownButton->addItem($item);

DropDownDropDownHeader¶

This dropdown item type renders a non-interactive text element to group items and gives more meaning to a set of options.

// use TYPO3\CMS\Backend\Template\Components\Buttons\DropDown\DropDownHeader;

$item = GeneralUtility::makeInstance(DropDownHeader::class)
    ->setLabel('Label');
$dropDownButton->addItem($item);

DropDownDropDownItem¶

This dropdown item type renders a simple element. Use this element if you need a link, button.

// use TYPO3\CMS\Backend\Template\Components\Buttons\DropDown\DropDownItem;

$item = GeneralUtility::makeInstance(DropDownItem::class)
    ->setTag('a')
    ->setHref('#')
    ->setLabel('Label')
    ->setTitle('Title')
    ->setIcon($this->iconFactory->getIcon('actions-heart'))
    ->setAttributes(['data-value' => '123']);
$dropDownButton->addItem($item);

DropDownDropDownRadio¶

This dropdown item type renders an element with an active state. Use this element to display a radio-like selection of a state. When set to active, it will show a dot in front of the icon and text to indicate that this is the current selection.

At least 2 of these items need to exist within a dropdown button, so a user has a choice of a state to select.

Example: Viewmode -> List / Tiles

// use TYPO3\CMS\Backend\Template\Components\Buttons\DropDown\DropDownRadio;

$item = GeneralUtility::makeInstance(DropDownRadio::class)
    ->setHref('#')
    ->setActive(true)
    ->setLabel('List')
    ->setTitle('List')
    ->setIcon($this->iconFactory->getIcon('actions-viewmode-list'))
    ->setAttributes(['data-type' => 'list']);
$dropDownButton->addItem($item);

$item = GeneralUtility::makeInstance(DropDownRadio::class)
    ->setHref('#')
    ->setActive(false)
    ->setLabel('Tiles')
    ->setTitle('Tiles')
    ->setIcon($this->iconFactory->getIcon('actions-viewmode-tiles'))
    ->setAttributes(['data-type' => 'tiles']);
$dropDownButton->addItem($item);

DropDownDropDownToggle¶

This dropdown item type renders an element with an active state. When set to active, it will show a checkmark in front of the icon and text to indicate the current state.

// use TYPO3\CMS\Backend\Template\Components\Buttons\DropDown\DropDownToggle;

$item = GeneralUtility::makeInstance(DropDownToggle::class)
    ->setHref('#')
    ->setActive(true)
    ->setLabel('Label')
    ->setTitle('Title')
    ->setIcon($this->iconFactory->getIcon('actions-heart'))
    ->setAttributes(['data-value' => '123']);
$dropDownButton->addItem($item);