diff --git a/src/patternfly/base/_variables.scss b/src/patternfly/base/_variables.scss index 74f601fb35..7b16de5f1c 100644 --- a/src/patternfly/base/_variables.scss +++ b/src/patternfly/base/_variables.scss @@ -123,9 +123,9 @@ --pf-global--primary-color--light-100: #{$pf-global--primary-color--light-100}; --pf-global--primary-color--dark-100: #{$pf-global--primary-color--dark-100}; --pf-global--secondary-color--100: #{$pf-global--secondary-color--100}; - --pf-global--default-color--100: #{$pf-global--default-color--100}; - --pf-global--default-color--200: #{$pf-global--default-color--200}; - --pf-global--default-color--300: #{$pf-global--default-color--300}; + --pf-global--custom-color--100: #{$pf-global--custom-color--100}; + --pf-global--custom-color--200: #{$pf-global--custom-color--200}; + --pf-global--custom-color--300: #{$pf-global--custom-color--300}; --pf-global--success-color--100: #{$pf-global--success-color--100}; --pf-global--success-color--200: #{$pf-global--success-color--200}; --pf-global--info-color--100: #{$pf-global--info-color--100}; diff --git a/src/patternfly/components/Alert/alert.scss b/src/patternfly/components/Alert/alert.scss index 25d9805438..1ee86faa21 100644 --- a/src/patternfly/components/Alert/alert.scss +++ b/src/patternfly/components/Alert/alert.scss @@ -8,7 +8,7 @@ ". description description" ". actiongroup actiongroup"; --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md); - --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200); + --pf-c-alert--BorderTopColor: var(--pf-global--BorderColor--100); --pf-c-alert--PaddingTop: var(--pf-global--spacer--md); --pf-c-alert--PaddingRight: var(--pf-global--spacer--md); --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md); @@ -25,14 +25,14 @@ --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition); // Icon - --pf-c-alert__icon--Color: var(--pf-global--default-color--200); + --pf-c-alert__icon--Color: var(--pf-global--Color--100); --pf-c-alert__icon--MarginTop: #{pf-size-prem(1px)}; --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm); --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md); // Title --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold); - --pf-c-alert__title--Color: var(--pf-global--default-color--300); + --pf-c-alert__title--Color: var(--pf-global--Color--100); --pf-c-alert__title--max-lines: 1; // Action @@ -51,6 +51,11 @@ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base); --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg); + // Custom + --pf-c-alert--m-custom--BorderTopColor: var(--pf-global--custom-color--200); + --pf-c-alert--m-custom__icon--Color: var(--pf-global--custom-color--200); + --pf-c-alert--m-custom__title--Color: var(--pf-global--custom-color--300); + // Success --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100); --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100); @@ -73,7 +78,9 @@ // Inline --pf-c-alert--m-inline--BoxShadow: none; - --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50); + + // Inline custom + --pf-c-alert--m-inline--m-custom--BackgroundColor: var(--pf-global--palette--cyan-50); // Inline success --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50); @@ -119,6 +126,13 @@ border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor); box-shadow: var(--pf-c-alert--BoxShadow); + &.pf-m-custom { + --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-custom--BorderTopColor); + --pf-c-alert__icon--Color: var(--pf-c-alert--m-custom__icon--Color); + --pf-c-alert__title--Color: var(--pf-c-alert--m-custom__title--Color); + --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-custom--BackgroundColor); + } + &.pf-m-success { --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor); --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color); diff --git a/src/patternfly/components/Alert/examples/Alert.md b/src/patternfly/components/Alert/examples/Alert.md index a937dae28f..82f1203d12 100644 --- a/src/patternfly/components/Alert/examples/Alert.md +++ b/src/patternfly/components/Alert/examples/Alert.md @@ -7,11 +7,11 @@ cssPrefix: pf-c-alert ## Examples ### Types ```hbs -{{#> alert alert--attribute='aria-label="Default alert"'}} +{{#> alert alert--modifier="pf-m-custom" alert--attribute='aria-label="Custom alert"'}} {{> alert-icon alert-icon--type="bell"}} {{#> alert-title}} - {{#> screen-reader}}Default alert:{{/screen-reader}} - Default alert title + {{#> screen-reader}}Custom alert:{{/screen-reader}} + Custom alert title {{/alert-title}} {{/alert}}
@@ -157,11 +157,11 @@ cssPrefix: pf-c-alert ### Inline types ```hbs -{{#> alert alert--modifier="pf-m-inline" alert--attribute='aria-label="Inline default alert"'}} +{{#> alert alert--modifier="pf-m-custom pf-m-inline" alert--attribute='aria-label="Inline custom alert"'}} {{> alert-icon alert-icon--type="bell"}} {{#> alert-title}} - {{#> screen-reader}}Default inline alert:{{/screen-reader}} - Default inline alert title + {{#> screen-reader}}Custom inline alert:{{/screen-reader}} + Custom inline alert title {{/alert-title}} {{/alert}}
@@ -404,13 +404,10 @@ cssPrefix: pf-c-alert ``` ## Documentation -### Overview -Add a modifier class to the default alert to change the color: `.pf-m-success`, `.pf-m-danger`, `.pf-m-warning`, or `.pf-m-info`. - ### Usage | Class | Applied to | Outcome | | -- | -- | -- | -| `.pf-c-alert` | `
` | Applies default alert styling. Always use with a modifier class. **Required** | +| `.pf-c-alert` | `
` | Initiates the alert component. Always use with a status modifier class. **Required** | | `.pf-c-alert__toggle` | `
` | Defines the expandable alert toggle icon. **Required for expandable alerts** | | `.pf-c-alert__toggle-icon` | `` | Defines the expandable alert toggle icon. **Required for expandable alerts** | | `.pf-c-alert__icon` | `
` | Defines the alert icon. **Required** | @@ -418,10 +415,11 @@ Add a modifier class to the default alert to change the color: `.pf-m-success`, | `.pf-c-alert__description` | `
` | Defines the alert description area. | | `.pf-c-alert__action` | `
` | Defines the action button wrapper. Should contain `.pf-c-button.pf-m-plain` for close action or `.pf-c-button.pf-m-link` for link text. It should only include one action. | | `.pf-c-alert__action-group` | `
` | Defines the action button group. Should contain `.pf-c-button.pf-m-link.pf-m-inline` for inline link text. **Note:** only inline link buttons are supported in the alert action group. | -| `.pf-m-success` | `.pf-c-alert` | Applies success styling. | -| `.pf-m-danger` | `.pf-c-alert` | Applies danger styling. | -| `.pf-m-warning` | `.pf-c-alert` | Applies warning styling. | -| `.pf-m-info` | `.pf-c-alert` | Applies info styling. | +| `.pf-m-custom` | `.pf-c-alert` | Applies custom status styling. | +| `.pf-m-success` | `.pf-c-alert` | Applies success status styling. | +| `.pf-m-danger` | `.pf-c-alert` | Applies danger status styling. | +| `.pf-m-warning` | `.pf-c-alert` | Applies warning status styling. | +| `.pf-m-info` | `.pf-c-alert` | Applies info status styling. | | `.pf-m-inline` | `.pf-c-alert` | Applies inline styling. | | `.pf-m-plain` | `.pf-c-alert.pf-m-inline` | Applies plain styling to an inline alert. | | `.pf-m-expandable` | `.pf-c-alert` | Applies expandable styles to the alert. | diff --git a/src/patternfly/components/Alert/themes/dark/alert.scss b/src/patternfly/components/Alert/themes/dark/alert.scss index 46428f9da3..e3ade9ceac 100644 --- a/src/patternfly/components/Alert/themes/dark/alert.scss +++ b/src/patternfly/components/Alert/themes/dark/alert.scss @@ -3,7 +3,7 @@ @mixin pf-theme-dark-alert() { .pf-c-alert { --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600); - --pf-c-alert__title--Color: var(--pf-global--default-color--200); + --pf-c-alert__title--Color: var(--pf-global--custom-color--200); --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100); --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100); --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100); diff --git a/src/patternfly/components/AlertGroup/examples/AlertGroup.md b/src/patternfly/components/AlertGroup/examples/AlertGroup.md index fabeaa50e9..3e16da8bbf 100644 --- a/src/patternfly/components/AlertGroup/examples/AlertGroup.md +++ b/src/patternfly/components/AlertGroup/examples/AlertGroup.md @@ -48,6 +48,7 @@ cssPrefix: pf-c-alert-group ### Overview `.pf-c-alert-group` is optional when only one alert is needed. It becomes required when more than one alert is used in a list. + ### Usage | Attribute | Applied to | Outcome | | -- | -- | -- | @@ -125,11 +126,12 @@ For sighted users, interactive elements can be included in this message in one o - Using a link to the Builds page: “The build is complete. Go to the [Builds]() page to download” using `Builds` - Using a button to download: “The build is complete. Go to the Builds page to [download]()" using `` +## Documentation +### Overview +Alert groups are used to contain and align consecutive alerts. Groups can either be embedded alongside a page's content or in the top-right corner as a toast group using the `.pf-m-toast` modifier. + ### Modifiers | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-m-toast`| `.pf-c-alert-group` | Applies toast alert styling to an alert group. | | `.pf-c-alert-group__overflow-button` | `