Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Bulky

Description

Purpose: The bulky button is highly obtrusive. It combines the recognisability of a graphical element with an explicit textual label on an unusually sized button. It is hard to overlook and indicates an important action on the screen.
Composition: The Bulky Button consists of an icon or glyph and a (very short) text.
Effect: The button has an "engaged"-state: When the button is used to toggle the visibility of a component, it stays engaged until the component is hidden again.

Rivals

Primary Button: Primary Buttons indicate the most important action among a collection of actions, e.g. in a tool bar, controls of a form or in a modal. Bulky Buttons make it hard to miss the indicated action by occupying space.

Rules

Usage

Since Bulky Buttons are so obtrusive they MUST only be used to indicate important actions on the screen.

Wording

The icon/glyph and the text on the Bulky Button MUST be corresponding.

Style

Bulky Buttons MUST occupy as much space as their container leaves them.
When used to toggle the visibility of another component, the button MUST reflect the componentes state of visibility.

Responsiveness

On screens larger than small size, Bulky Buttons MUST contain an icon or glyph plus text.
On small-sized screens, Bulky Buttons SHOULD contain only an icon or glyph.

Accessibility

The functionality of the Bulky Button MUST be indicated for screen readers by an aria-label.
Some Buttons can be stateful; when engaged, the state MUST be reflected in the "aria-pressed"-, respectively the "aria-checked"-attribute. If the Button is not stateful (which is the default), the aria-attribute SHOULD be omitted. Further if the Button carries the aria-role "menuitem", the "aria-pressed" and "aria-checked"-attributes MUST be ommitted as well.
If a Bulky Button contains a Symbol, then the Label of the Icon MUST be set to "" or be omitted completely to avoid redundant alt tags which would render the Bulky Button cumbersome to be processed by screenreaders.

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Bulky;
 
//Note the exact look of the Bulky Buttons is mostly defined by the
//surrounding container.
function base()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $ico = $f->symbol()->icon()
        ->standard('someExample', 'Example')
        ->withAbbreviation('E')
        ->withSize('medium');
    $button = $f->button()->bulky($ico, 'Icon', '#');
 
    $glyph = $f->symbol()->glyph()->briefcase();
    $button2 = $f->button()->bulky($glyph, 'Glyph', '#');
 
    return $renderer->render([
        $button,
        $f->divider()->horizontal(),
        $button2
    ]);
}

Example 2: Engaged

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Bulky;
 
function engaged()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $glyph = $f->symbol()->glyph()->briefcase();
    $button = $f->button()->bulky($glyph, 'Engaged Button', '#')
                          ->withEngagedState(true);
 
    return $renderer->render($button);
}

Example 3: Unavailable action

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Bulky;
 
/**
 * This example provides the given button with an unavailable action. Note
 * that the disabled attribute is set in the DOM. No action must be fired, even
 * if done by keyboard
 */
function unavailable_action()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $glyph = $f->symbol()->glyph()->attachment();
    $button = $f->button()->bulky($glyph, 'Unavailable', '#')->withUnavailableAction();
 
    return $renderer->render([$button]);
}

Example 4: With tooltip

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Bulky;
 
function with_tooltip()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $glyph = $f->symbol()->glyph()->comment();
 
    $button = $f->button()
        ->bulky($glyph, "Goto ILIAS", "http://www.ilias.de")
        ->withHelpTopics(
            ...$f->helpTopics("ilias", "learning management system")
        );
 
    return $renderer->render($button);
}

Relations

Parents

UIComponent
Button