Skip to content

Commit

Permalink
Use collections to generate styles of Button color variants
Browse files Browse the repository at this point in the history
  • Loading branch information
adamkudrna committed Sep 11, 2024
1 parent b8fcfb5 commit 4c40045
Show file tree
Hide file tree
Showing 12 changed files with 383 additions and 411 deletions.
2 changes: 1 addition & 1 deletion src/components/Alert/Alert.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
}

@each $color in settings.$colors {
@include collections.generate-properties(
@include collections.generate-class(
$prefix: "rui-",
$component-name: "Alert",
$variant-name: "color",
Expand Down
4 changes: 2 additions & 2 deletions src/components/Badge/Badge.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
}

@each $color in settings.$colors {
@include collections.generate-properties(
@include collections.generate-class(
$prefix: "rui-",
$component-name: "Badge",
$modifier-name: "priority",
Expand All @@ -51,7 +51,7 @@
}

@each $color in settings.$colors {
@include collections.generate-properties(
@include collections.generate-class(
$prefix: "rui-",
$component-name: "Badge",
$modifier-name: "priority",
Expand Down
3 changes: 2 additions & 1 deletion src/components/Button/Button.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,8 @@ Button.propTypes = {
*/
block: PropTypes.bool,
/**
* [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the button.
* Color variant to clarify importance and meaning of the alert. Implements
* [Action, Feedback and Neutral color collections](/docs/foundation/collections#colors).
*/
color: PropTypes.oneOf(
['primary', 'secondary', 'selected', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark'],
Expand Down
185 changes: 183 additions & 2 deletions src/components/Button/Button.module.scss
Original file line number Diff line number Diff line change
@@ -1,2 +1,183 @@
@use "base";
@use "priorities";
// 1. ButtonGroup gap is implemented using the `margin` property so the buttons can overlap and reduce duplicate
// borders.

@use "sass:map";
@use "../../styles/tools/breakpoint";
@use "../../styles/tools/collections";
@use "settings";
@use "theme";
@use "tools";

@layer components.button {
.root {
@include tools.button();
}

.label {
display: block;
}

.beforeLabel,
.afterLabel,
.startCorner,
.endCorner,
.feedbackIcon {
display: flex;
align-items: baseline;
justify-content: center;
}

.startCorner,
.endCorner {
position: absolute;
top: -0.35rem;
z-index: 2;
}

.startCorner {
left: 0;
margin-left: -0.35rem;
}

.endCorner {
right: 0;
margin-right: -0.35rem;
}

.feedbackIcon {
position: absolute;
inset: 0;
z-index: 1;
align-items: center;
}

.isRootSizeSmall {
@include tools.button-size(small);
}

.isRootSizeMedium {
@include tools.button-size(medium);
}

.isRootSizeLarge {
@include tools.button-size(large);
}

.isRootBlock {
width: 100%;
}

.hasRootFeedback:disabled {
opacity: theme.$feedback-opacity;
cursor: theme.$feedback-cursor;
}

.hasRootFeedback .label,
.hasRootFeedback .beforeLabel,
.hasRootFeedback .afterLabel {
color: transparent;
}

.isRootInButtonGroup,
.isRootInInputGroup {
z-index: map.get(settings.$group-z-indexes, button);

&:not(:first-child) {
border-start-start-radius: var(--rui-local-inner-border-radius);
border-end-start-radius: var(--rui-local-inner-border-radius);
}

&:not(:last-child) {
border-start-end-radius: var(--rui-local-inner-border-radius);
border-end-end-radius: var(--rui-local-inner-border-radius);
}
}

.isRootInButtonGroup:not(:first-child) {
margin-inline-start: var(--rui-local-gap); // 1.

&::before {
content: "";
position: absolute;
top: calc(-1 * #{theme.$border-width});
bottom: calc(-1 * #{theme.$border-width});
left: calc(-1 * #{theme.$border-width});
z-index: map.get(settings.$group-z-indexes, separator);
border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color);
transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
}
}

.isRootInButtonGroup:focus,
.isRootInButtonGroup:not(:disabled):hover {
z-index: map.get(settings.$group-z-indexes, button-hover);
}

.isRootInButtonGroup .startCorner,
.isRootInInputGroup .startCorner,
.isRootInButtonGroup .endCorner,
.isRootInInputGroup .endCorner {
z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
}

.hasLabelHidden,
.hasLabelVisibleSm,
.hasLabelVisibleMd,
.hasLabelVisibleLg,
.hasLabelVisibleXl,
.hasLabelVisibleX2l,
.hasLabelVisibleX3l {
@include tools.hide-label();
}

.hasLabelVisibleSm {
@include breakpoint.up(sm) {
@include tools.show-label();
}
}

.hasLabelVisibleMd {
@include breakpoint.up(md) {
@include tools.show-label();
}
}

.hasLabelVisibleLg {
@include breakpoint.up(lg) {
@include tools.show-label();
}
}

.hasLabelVisibleXl {
@include breakpoint.up(xl) {
@include tools.show-label();
}
}

.hasLabelVisibleX2l {
@include breakpoint.up(x2l) {
@include tools.show-label();
}
}

.hasLabelVisibleX3l {
@include breakpoint.up(x3l) {
@include tools.show-label();
}
}

@each $priority in map.keys(settings.$themeable-properties) {
@each $color in settings.$colors {
@include collections.generate-class(
$prefix: "rui-",
$component-name: "Button",
$modifier-name: "priority",
$modifier-value: $priority,
$variant-name: "color",
$variant-value: $color,
$generate-interaction-states: true,
$properties: map.get(settings.$themeable-properties, $priority),
);
}
}
}
14 changes: 8 additions & 6 deletions src/components/Button/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,9 @@ lowest:
2. outline
3. flat

All priorities come in supported
[component colors](/docs/foundation/colors#component-colors).
All priorities are available in colors from supported
[color collections](/docs/foundation/collections#colors).
Check [API](#api) to see which collections are supported.

### Filled

Expand Down Expand Up @@ -257,7 +258,7 @@ Disabled state makes the action unavailable.

When user's action triggers an asynchronous process on background, the button's
feedback state (not to be mistaken with
[feedback colors](/docs/foundation/colors#component-colors)) can be indicated by
[feedback colors](/docs/foundation/colors#feedback-colors)) can be indicated by
showing an icon. The icon replaces button's label while retaining original
dimensions of the button. Buttons in feedback state are automatically disabled
to prevent unwanted interaction.
Expand Down Expand Up @@ -431,9 +432,10 @@ Where:

- `<PRIORITY>` is one of `filled`, `outline`, or `flat` (see
[Priorities](#priorities) and [API](#api)),
- `<COLOR>` is one of supported
[component colors](/docs/foundation/colors#component-colors)
(see color variants of [each priority](#priorities) and [API](#api)),
- `<COLOR>` is a value from supported
[color collections](/docs/foundation/collections#colors)
(check color variants of [each priority](#priorities) and [API](#api) to see
which collections are supported),
- `<INTERACTION STATE>` is one of `default`, `hover`, `active`, or `disabled`
(the last one being optional),
- `<PROPERTY>` is one of:
Expand Down
Loading

0 comments on commit 4c40045

Please sign in to comment.