Skip to content

[Banner] Consolidate se23 logic and styles #10001

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 16, 2023
Merged

[Banner] Consolidate se23 logic and styles #10001

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ae32fd5
Remove conditional se23 logic from Banner
sophschneider Aug 10, 2023
8ac1c54
Merge BannerExperimental with Banner
sophschneider Aug 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
314 changes: 48 additions & 266 deletions polaris-react/src/components/Banner/Banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,9 @@
@import '../../styles/common';

@mixin banner-variants($in-page) {
Copy link
Contributor Author

@sophschneider sophschneider Aug 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not using this mixin anymore as it just made the file confusing. I put the appropriate styles in the withinPage and withinContentContainer classes since thats the only place this mixin was being called. Shared styles went to .Banner. .Banner, .withinPage, and .withinContentContainer are all only applied to the same wrapping div

border: var(--p-border-width-1) solid var(--p-color-border-strong);
background-color: var(--p-color-bg-app);

#{$se23} & {
border: none;
background-color: var(--p-color-bg);
}

@if $in-page {
border-radius: 0;
border-width: var(--p-border-width-1) 0;

#{$se23} & {
@include shadow-bevel(
$boxShadow: var(--p-shadow-sm),
$borderRadius: var(--p-border-radius-0-experimental),
// The following arguments explicitly ignore the shadow-bevel opt out
$border: none,
$content: ''
);
}

@media #{$p-breakpoints-sm-up} {
border-width: var(--p-border-width-1);
border-radius: var(--p-border-radius-2);

#{$se23} & {
@include shadow-bevel(
$boxShadow: var(--p-shadow-sm),
$borderRadius: var(--p-border-radius-3),
// The following arguments explicitly ignore the shadow-bevel opt out
$border: none,
$content: ''
);
}
}
} @else {
border-radius: var(--p-border-radius-1);

#{$se23} & {
box-shadow: none;
border-radius: var(--p-border-radius-2);
}
}
.Banner {
background-color: var(--p-color-bg);
position: relative;
display: flex;

&:focus {
outline: none;
Expand All @@ -54,256 +13,79 @@
outline: var(--p-border-width-2) solid
var(--p-color-border-interactive-focus);
}

Copy link
Contributor Author

@sophschneider sophschneider Aug 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

None of these status class names are applied when the flag is true

&.statusSuccess {
border-color: var(--p-color-border-success-subdued);
background-color: var(--p-color-bg-success-subdued);
}

&.statusInfo {
border-color: var(--p-color-border-info-subdued);
background-color: var(--p-color-bg-info-subdued);
}

&.statusWarning {
border-color: var(--p-color-border-caution-subdued);
background-color: var(--p-color-bg-caution-subdued);
}

&.statusCritical {
border-color: var(--p-color-border-critical-subdued);
background-color: var(--p-color-bg-critical-subdued);
}
}

.Banner {
// stylelint-disable -- Polaris component custom properties
--pc-banner-secondary-action-horizontal-padding: var(--p-space-3);
--pc-banner-secondary-action-vertical-padding: var(--p-space-2);
// stylelint-enable
position: relative;
display: flex;

// stylelint-disable selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
&.statusCritical .PrimaryAction.Button {
Copy link
Contributor Author

@sophschneider sophschneider Aug 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

None of these classnames are applied when the flag is true

border-color: var(--p-color-border-critical-subdued);

&:hover {
border-color: var(--p-color-border-critical-subdued);
background: var(--p-color-bg-critical-subdued-hover);
}

&:active {
border-color: var(--p-color-border-critical-subdued);
background: var(--p-color-bg-critical-subdued-active);
}

&:focus:not(:active) {
border-color: var(--p-color-border-critical-subdued);
background: var(--p-color-bg-critical-subdued);
}
}

&.statusWarning .PrimaryAction.Button {
border-color: var(--p-color-border-caution-subdued);

&:hover {
border-color: var(--p-color-border-caution-subdued);
background: var(--p-color-bg-caution-subdued-hover);
}

&:active {
border-color: var(--p-color-border-caution-subdued);
background: var(--p-color-bg-caution-subdued-active);
}

&:focus:not(:active) {
border-color: var(--p-color-border-caution-subdued);
background: var(--p-color-bg-caution-subdued);
}
}

&.statusInfo .PrimaryAction.Button {
border-color: var(--p-color-border-info-subdued);

&:hover {
border-color: var(--p-color-border-info-subdued);
background: var(--p-color-bg-info-subdued-hover);
}

&:active {
border-color: var(--p-color-border-info-subdued);
background: var(--p-color-bg-info-subdued-active);
}

&:focus:not(:active) {
border-color: var(--p-color-border-info-subdued);
background: var(--p-color-bg-info-subdued);
}
}

&.statusSuccess .PrimaryAction.Button {
border-color: var(--p-color-border-success-subdued);

&:hover {
border-color: var(--p-color-border-success-subdued);
background: var(--p-color-bg-success-subdued-hover);
}

&:active {
border-color: var(--p-color-border-success-subdued);
background: var(--p-color-bg-success-subdued-active);
}

&:focus:not(:active) {
border-color: var(--p-color-border-success-subdued);
background: var(--p-color-bg-success-subdued);
}
}
// stylelint-enable selector-max-class, selector-max-specificity
}

.ContentWrapper {
margin-top: calc(-1 * var(--p-space-05));
flex: 1 1 auto;
}

.withinContentContainer {
padding: var(--p-space-4);

#{$se23} & {
padding: 0;
}

.Dismiss {
Copy link
Contributor Author

@sophschneider sophschneider Aug 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.Dismiss isn't being applied when the flag is true

top: var(--p-space-4);
right: var(--p-space-3);
position: absolute;
}

@include banner-variants($in-page: false);
border-radius: var(--p-border-radius-2);

+ .Banner {
margin-top: var(--p-space-2);

#{$se23} & {
box-shadow: none;
}
}
}

.withinPage {
border-radius: 0 0 var(--p-border-radius-1) var(--p-border-radius-1);
padding: var(--p-space-5);

#{$se23} & {
padding: 0;
@include shadow-bevel(
$boxShadow: var(--p-shadow-sm),
$borderRadius: var(--p-border-radius-0-experimental),
// The following arguments explicitly ignore the shadow-bevel opt out
$border: none,
$content: ''
);

@media #{$p-breakpoints-sm-up} {
@include shadow-bevel(
$boxShadow: var(--p-shadow-sm),
$borderRadius: var(--p-border-radius-3),
// The following arguments explicitly ignore the shadow-bevel opt out
$border: none,
$content: ''
);
}

@include banner-variants(true);

+ .Banner {
margin-top: var(--p-space-5);
}

.Dismiss {
right: var(--p-space-4);
top: var(--p-space-5);
position: absolute;
margin-top: var(--p-space-4);
Copy link
Contributor Author

@sophschneider sophschneider Aug 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should have been --p-space-4 (its the spacing between multiple banners)

}
}

.hasDismiss {
padding-right: calc(var(--p-space-8) + var(--p-space-2));
// stylelint-disable -- Duplicate selectors to bump specificity for button svg color override
Copy link
Contributor Author

@sophschneider sophschneider Aug 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Styles below are copied over from BannerExperimental.scss

// https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#increasing_specificity_by_duplicating_selector

#{$se23} & {
padding: 0;
@mixin recolor-icon($fill-color: null) {
svg,
path {
fill: $fill-color;
}
}

// We need pretty high specificity to do the descendant selectors
// onto the text, which needs to be the relative positioned wrapper
// so that the borders/ backgrounds do not extend outside of it.

.SecondaryAction {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@include unstyled-button;
display: inline-block;
text-align: left;
text-decoration: none;
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
margin: calc(-1 * var(--pc-banner-secondary-action-vertical-padding))
calc(-0.5 * var(--pc-banner-secondary-action-horizontal-padding));
// stylelint-enable
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
padding: var(--pc-banner-secondary-action-vertical-padding)
var(--pc-banner-secondary-action-horizontal-padding);
// stylelint-enable
color: var(--p-color-text);
padding-left: var(--p-space-2);

&:hover > .Text {
text-decoration: underline;
}

&:active > .Text {
text-decoration: underline;
}

&:focus-visible > .Text {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@include plain-button-backdrop;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@include focus-ring($style: 'focused');
box-shadow: none;
text-decoration: underline;
.icon-on-color.icon-on-color.icon-on-color {
@include recolor-icon(var(--p-color-icon-on-color));
}

@media (-ms-high-contrast: active) {
outline: var(--p-border-width-2) dotted;
}
}
.icon-success-strong-experimental.icon-success-strong-experimental.icon-success-strong-experimental {
@include recolor-icon(var(--p-color-icon-success-strong-experimental));
}

&:visited {
color: inherit;
}
.text-warning-strong.text-warning-strong.text-warning-strong {
@include recolor-icon(var(--p-color-text-warning-strong));
}

.Text {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@include focus-ring;
.icon-warning-strong-experimental.icon-warning-strong-experimental.icon-warning-strong-experimental {
@include recolor-icon(var(--p-color-icon-warning-strong-experimental));
}

.Button {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@include button-base;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@include focus-ring($border-width: 2px);
font-size: var(--p-font-size-100);
font-weight: var(--p-font-weight-medium);
line-height: var(--p-font-line-height-1);
letter-spacing: initial;
color: var(--p-color-text);
.icon-critical-strong-experimental.icon-critical-strong-experimental.icon-critical-strong-experimental {
@include recolor-icon(var(--p-color-icon-critical-strong-experimental));
}

&:focus-visible {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@include focus-ring($style: 'focused');
}
.text-info-strong.text-info-strong.text-info-strong {
@include recolor-icon(var(--p-color-text-info-strong));
}

.loading {
position: relative;
color: transparent;
pointer-events: none;
.icon-info-strong-experimental.icon-info-strong-experimental.icon-info-strong-experimental {
@include recolor-icon(var(--p-color-icon-info-strong-experimental));
}

.Spinner {
// stylelint-disable-next-line -- Polaris component custom properties
--pc-spinner-size: var(--p-space-5);
position: absolute;
top: 50%;
left: 50%;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
margin-top: calc(-1 * (var(--pc-spinner-size) / 2));
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
margin-left: calc(-1 * (var(--pc-spinner-size) / 2));
.icon-subdued.icon-subdued.icon-subdued {
@include recolor-icon(var(--p-color-icon-subdued));
}
// stylelint-enable
Loading