Summary

Add explicit icon and label support for button CSS components.

Review Request #13289 — Created Sept. 26, 2023 and submitted Oct. 1, 2023, 5:16 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-6.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

This updates rb-c-button to include __icon and __label parts for
defining buttons containing both icons and labels in a consistent
manner. This will be styled with an appropriate gap in-between the two,
when both are present and visible.

Buttons now use flexbox for layout to enable this, and to ensure that
everything lines up correctly.

There are two new macros for customizing icons:

#rb-ns-ui.buttons.set-icon-only() will hide the label on a button
and update the padding so the button looks correct with just an icon.
#rb-ns-ui.buttons.set-fa-icon() takes a FontAwesome icon variable
and set it on the __icon part.

Testing Done

Tested with existing buttons, button groups, and menu buttons throughout
the UI.

Tested with some in-progress icon-only and icon-enabled buttons.

Commits

Summary	ID
Add explicit icon and label support for button CSS components. This updates `rb-c-button` to include `__icon` and `__label` parts for defining buttons containing both icons and labels in a consistent manner. This will be styled with an appropriate gap in-between the two, when both are present and visible. Buttons now use flexbox for layout to enable this, and to ensure that everything lines up correctly. There are two new macros for customizing icons: * `#rb-ns-ui.buttons.set-icon-only()` will hide the label on a button and update the padding so the button looks correct with just an icon. * `#rb-ns-ui.buttons.set-fa-icon()` takes a FontAwesome icon variable and set it on the `__icon` part.	1c3c1a04c049e41f7abc654f065d481887a8bc0f

Summary

Add explicit icon and label support for button CSS components.

This updates `rb-c-button` to include `__icon` and `__label` parts for defining buttons containing both icons and labels in a consistent manner. This will be styled with an appropriate gap in-between the two, when both are present and visible. Buttons now use flexbox for layout to enable this, and to ensure that everything lines up correctly. There are two new macros for customizing icons: * `#rb-ns-ui.buttons.set-icon-only()` will hide the label on a button and update the padding so the button looks correct with just an icon. * `#rb-ns-ui.buttons.set-fa-icon()` takes a FontAwesome icon variable and set it on the `__icon` part.

1c3c1a04c049e41f7abc654f065d481887a8bc0f

flake8 passed.

JSHint passed.

Change Summary:


Added the missing set-fa-icon() (it was unstaged for commit).
Documented that __icon should have aria-hidden="true".
Moved __icon and __label definitions out of .rb-c-button in order to avoid &:extend below causing them to be dropped.

Commits:

	Summary	ID
	Add explicit icon and label support for button CSS components. This updates `rb-c-button` to include `__icon` and `__label` parts for defining buttons containing both icons and labels in a consistent manner. This will be styled with an appropriate gap in-between the two, when both are present and visible. Buttons now use flexbox for layout to enable this, and to ensure that everything lines up correctly. There are two new macros for customizing icons: * `#rb-ns-ui.buttons.set-icon-only()` will hide the label on a button and update the padding so the button looks correct with just an icon. * `#rb-ns-ui.buttons.set-fa-icon()` takes a FontAwesome icon variable and set it on the `__icon` part.	57570235579fbecf3ba1f95c1368e88332c56315
	Add explicit icon and label support for button CSS components. This updates `rb-c-button` to include `__icon` and `__label` parts for defining buttons containing both icons and labels in a consistent manner. This will be styled with an appropriate gap in-between the two, when both are present and visible. Buttons now use flexbox for layout to enable this, and to ensure that everything lines up correctly. There are two new macros for customizing icons: * `#rb-ns-ui.buttons.set-icon-only()` will hide the label on a button and update the padding so the button looks correct with just an icon. * `#rb-ns-ui.buttons.set-fa-icon()` takes a FontAwesome icon variable and set it on the `__icon` part.	1c3c1a04c049e41f7abc654f065d481887a8bc0f

Diff:

Revision 2 (+246 -4)

Show changes

reviewboard/static/rb/css/ui/buttons.less

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-6.x (fe7eaf7)