Skip to content

Commit

Permalink
Merge pull request #5927 from pat270/LPD-47129
Browse files Browse the repository at this point in the history 
fix(@clayui/css): LPD-47129 Mixins, Improve performance in alerts, ba…
  • Loading branch information
@matuzalemsteles
matuzalemsteles authored Jan 27, 2025
2 parents 6a50d0c + 34f48df commit 4b0e65c
Show file tree
Hide file tree
Showing 3 changed files with 798 additions and 358 deletions.
152 changes: 104 additions & 48 deletions packages/clay-css/src/scss/mixins/_alerts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,87 +152,143 @@
);

@if ($enabled) {
@include clay-css($base);
@if (length($base) != 0) {
@include clay-css($base);
}

$_first-child: map-get($map, first-child);

&:first-child {
@include clay-css(map-get($map, first-child));
@if ($_first-child) {
&:first-child {
@include clay-css($_first-child);
}
}

&:last-child {
@include clay-css(map-get($map, last-child));
$_last-child: map-get($map, last-child);

@if ($_last-child) {
&:last-child {
@include clay-css($_last-child);
}
}

hr {
@include clay-css(map-get($map, hr));
$_hr: map-get($map, hr);

@if ($_hr) {
hr {
@include clay-css($_hr);
}
}

&.alert-dismissible {
@include clay-css(setter(map-get($map, alert-dismissible), ()));
$_alert-dismissible: map-get($map, alert-dismissible);

.container,
.container-fluid {
@include clay-css(
setter(
map-deep-get(
$map,
alert-dismissible,
container-fluid
),
()
)
@if ($_alert-dismissible) {
&.alert-dismissible {
@include clay-css($_alert-dismissible);

$_container-fluid: map-get(
$_alert-dismissible,
container-fluid
);

@if ($_container-fluid) {
}
.container,
.container-fluid {
@include clay-css($_container-fluid);
}
}
}

.alert-indicator {
@include clay-css($alert-indicator);
@if (length($alert-indicator) != 0) {
.alert-indicator {
@include clay-css($alert-indicator);

.lexicon-icon {
@include clay-css(map-get($alert-indicator, lexicon-icon));
}
$_lexicon-icon: map-get($alert-indicator, lexicon-icon);

@if ($_lexicon-icon) {
.lexicon-icon {
@include clay-css(
map-get($alert-indicator, lexicon-icon)
);
}
}

$_lead: map-get($alert-indicator, lead);

+ .lead {
@include clay-css(map-get($alert-indicator, lead));
@if ($_lead) {
+ .lead {
@include clay-css(map-get($alert-indicator, lead));
}
}
}
}

.alert-btn {
@include clay-button-variant(map-get($map, alert-btn));
$_alert-btn: map-get($map, alert-btn);

@if ($_alert-btn) {
.alert-btn {
@include clay-button-variant($_alert-btn);
}
}

.btn-group {
@include clay-container(map-get($map, btn-group));
$_btn-group: map-get($map, btn-group);

@if ($_btn-group) {
.btn-group {
@include clay-container($_btn-group);
}
}

.btn-group-item {
@include clay-container(map-get($map, btn-group-item));
$_btn-group-item: map-get($map, btn-group-item);

@if ($_btn-group-item) {
.btn-group-item {
@include clay-container($_btn-group-item);
}
}

.close {
@include clay-close($close);
@if (length($close) != 0) {
.close {
@include clay-close($close);
}
}

.container,
.container-fluid {
@include clay-css(setter(map-get($map, container-fluid), ()));
$_container-fluid: map-get($map, container-fluid);

@if ($_container-fluid) {
.container,
.container-fluid {
@include clay-css($_container-fluid);
}
}

.lead {
@include clay-css($lead);
@if (length($lead) != 0) {
.lead {
@include clay-css($lead);
}
}

.alert-link {
@include clay-link($alert-link);
@if (length($alert-link) != 0) {
.alert-link {
@include clay-link($alert-link);
}
}

.component-title {
@include clay-text-typography(map-get($map, component-title));
$_compontent-title: map-get($map, compontent-title);

@if ($_compontent-title) {
.component-title {
@include clay-text-typography($_component-title);
}
}

.component-subtitle {
@include clay-text-typography(
map-get($map, component-subtitle)
);
$_component-subtitle: map-get($map, component-subtitle);

@if ($_component-subtitle) {
.component-subtitle {
@include clay-text-typography($_component-subtitle);
}
}

@each $key, $properties in map-get($map, custom-selectors) {
Expand Down
108 changes: 75 additions & 33 deletions packages/clay-css/src/scss/mixins/_badges.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,64 +178,106 @@
$badge-item-expand: setter(map-get($map, badge-item-expand), ());

@if ($enabled) {
@include clay-css($base);
@if (length($base) != 0) {
@include clay-css($base);
}

// Empty badges collapse automatically

&:empty {
@include clay-css(map-get($map, empty));
}
$_empty: map-get($map, empty);

&[href],
&[type] {
@include clay-link($href);
@if ($_empty) {
&:empty {
@include clay-css(map-get($map, empty));
}
}

a {
@include clay-link($link);
@if (length($href) != 0) {
&[href],
&[type] {
@include clay-link($href);
}
}

.badge-item {
@include clay-css($badge-item);

@if (length($link) != 0) {
a {
@include clay-link(map-get($badge-item, link));
@include clay-link($link);
}
}

.btn-unstyled {
@include clay-button-variant(
map-get($badge-item, btn-unstyled)
);
}
@if (length($badge-item) != 0) {
.badge-item {
@include clay-css($badge-item);

.close {
@include clay-close(map-get($badge-item, close));
}
$_link: map-get($badge-item, link);

@if ($_link) {
a {
@include clay-link($_link);
}
}

$_btn-unstyled: map-get($badge-item, btn-unstyled);

.lexicon-icon {
@include clay-css(map-get($badge-item, lexicon-icon));
@if ($_btn-unstyled) {
.btn-unstyled {
@include clay-button-variant($_btn-unstyled);
}
}

$_close: map-get($badge-item, close);

@if ($_close) {
.close {
@include clay-close($_close);
}
}

$_lexicon-icon: map-get($badge-item, lexicon-icon);

@if ($_lexicon-icon) {
.lexicon-icon {
@include clay-css($_lexicon-icon);
}
}
}
}

.badge-item-expand {
@include clay-css($badge-item-expand);
@if (length($badge-item-expand) != 0) {
.badge-item-expand {
@include clay-css($badge-item-expand);

a {
@include clay-link(map-get($badge-item-expand, link));
$_link: map-get($badge-item-expand, link);

@if ($_link) {
a {
@include clay-link($_link);
}
}
}
}

.badge-item-before {
@include clay-css(map-get($map, badge-item-before));
$_badge-item-before: map-get($map, badge-item-before);

@if ($_badge-item-before) {
.badge-item-before {
@include clay-css($_badge-item-before);
}
}

.badge-item-after {
@include clay-css(map-get($map, badge-item-after));
$_badge-item-after: map-get($map, badge-item-after);

@if ($_badge-item-after) {
.badge-item-after {
@include clay-css($_badge-item-after);
}
}

@if (map-get($c-inner, enabled)) {
> .c-inner {
@include clay-css($c-inner);
@if (length($c-inner) != 0) {
> .c-inner {
@include clay-css($c-inner);
}
}
}
}
Expand Down
Loading

0 comments on commit 4b0e65c

Please sign in to comment.