Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Actions

List of different actions for the user.

last modified: 09/08/2022 14:45:07

Types

  1. Action links
    Action link allows the user to do a concrete action in the interface such as a composition of products, a profile settings, etc.
  2. Floating action button
    Allows the user to go back to the top of the page.

A list of action icons is defined to ensure consistency on all Proximus' interfaces:

  1. Edit
  2. Add
  3. Remove
  4. Close
  5. Send by email
  6. Reset
  7. Need help
Other actions?

Currently we do not allow using other actions. If you ever need another action that the ones stated above, please contact us and we'll add it to the Design System


The floating action button appears when the user scrolls down on a page. It disappears if the user goes back to the top. This button only serves one purpose which is to go back to the top of the page. It can't be used for any other action.


States

There are different states of the action link

  1. Basic state
    State visible before click.
  2. Hover state
    State visible when the cursor hovers the link. Cursor becomes a pointer.
  3. Focussed state
    State visible when users tab on the link. All elements are displayed with a frame around the label.
  1. Disabled state
    State visible if the link is not clickable. All elements are displayed but they are greyed out in order to signify the change of state. This state is only available for the action links.

Anatomy

  1. Action label (optional)
  2. Action icon (mandatory)
  3. Back to top label (on hover)
  4. Arrow icon (mandatory)
last modified: 09/08/2022 14:45:07

Sizes and colors

last modified: 09/08/2022 14:45:07

Action Links

An action link always comes with an icon on its right and have a specific purpose, the icon illustrate the action. The icon is mandatory but the label is optional.

On mobile, the label is hidden by default with show-for-medium-up Zurb Foundation class.

Action links are used by default with <button> but can be used with <a> as well.

Accessibility

As the icon is mandatory but not the label, the label is hidden for screenreaders and title="Label" attribute is added to icon to display browser tooltip describing the purpose of the action link as well as a <span class="show-for-sr">Label</span> for screenreaders.

Razor

All @rsActionLink objects can receive all following optionnal parameters in this exact order:

Parameter Default value if nothing is set
"Label" "Edit" - "Add" - "Remove" - "Close" - "Send by e-mail" - "Reset"
"extra class" ""
boolean label is hidden on mobile true
boolean no label false
boolean is link false
"url" "javascript:void(0)"
"extra parameters" "data-reveal-id=ac-reveal-modal" - "id=ac-mano-is-the-best", ...
boolean is disabled false
boolean is icon left false









With <a> instead of <button>

Negative










Disabled

Accessibility

For Screen Reader add:

  • aria-disabled="true" tabindex="-1" to <a>
  • disabled to <button>

Edit

Label not hidden on mobile


Without label


Icon on left


Action menu

Accessibility

Action menu trigger button requires some attributes:

  • It must have an ID which is usefull for action menu content.
  • data-dropdown and aria-controls must contain ID of the action menu content.
  • aria-haspopup must be set to true .
  • aria-expanded must be set to false .

Action menu content also requires some attributes:

  • It must have an ID which is usefull for action menu trigger button.
  • aria-labelledby must contain ID of the action menu trigger button.
  • aria-hidden must be set to false .

Separators must have aria-hidden attribute set to false .

How does it work

Action menu is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.actionmenu" attribute to work.

Drag and Drop

"Drag and Drop" component can be used in"Action menu".
Don't forget to add a title with rs-action-menu-title class like in the example below.

This type of Drag and Drop is not necessary for screen readers. So please add aria-hidden attribute set to false to parent rs-action-menu-item .

Negative

Add rs-action-menu-neg class to rs-action-menu container.

Use negative version of the"Drag and Drop" component if you need it.

Disabled

Accessibility

Add disabled attributes to button .


Big action menu

Just add rs-action-menu-trigger-big class to action menu trigger button for a bigger button.

Negative

Add rs-action-menu-neg class to rs-action-menu container.

Use negative version of the"Drag and Drop" component if you need it.


Position the Action menu

You can position action menu on the bottom right or bottom left of the target element. Default position is bottom right.
Add rs-action-menu-left class to rs-action-menu container to get your action menu positioned on bottom left.


Back to top

Accessibility

Add tabindex="-1" attribute to hide the button from keyword users.

How does it work

Back to top is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.backtotop" attribute to work.

Back to top button is part of floating action so you need to use rs-floatingaction to make it work. To have this specific button just add rsjs-backtotop class.

Inside the anchor you will have 2 span : one for the label with rs-floatingaction-label class and one for the icon with rs-floatingaction-icon class.

hide class need to be added, to avoid jump while JavaScript is loading.

Anchor

It is mandatory to have #maincontent as href attribute. Nothing else can be accepted.


JavaScript

Action menu

How to trigger the js

As Action menu is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT); first to be able to load the scripts.

Next time you add Action menu to the page, you have to call this JS: inception.actionMenu(CONTEXT);

CONTEXT refers to document or html element parent to data-action-menu.

If you have a Drag & Drop inside your Action menu, don't forget to launch Drag and drop JavaScript.

Back to top

How to trigger the js

As Back to top is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT) first to be able to load the scripts.

If you need to refresh the component, you can use BackToTop.refresh() function.

CONTEXT refers to document or html element parent to the component.