Skip to content

Commit

Permalink
fix: core - refactoring alerts
Browse files Browse the repository at this point in the history 
• updated alert-actions to display link-style buttons in light and default alerts per current design
• added min-width and text-decoration custom properties to buttons for internal use inside of alerts
• added close button internal component
• added inline buttons
• hiding alert-actions inside a lightweight alert
• moving icon and badge up to the base button because other button types needed them
• added styles and code to support links in icon buttons
• added styles and code to support links in inline buttons
• added stories for links in inline buttons
• added stories for links in icon buttons
• added loading status to alerts
• added compact alerts (specifically compact lightweight alerts)
• getting close-button internal component to 100% test coverage
• boosting branch coverage to over 90%
• improving css-vars test coverage
• added alert group element
• moved alert group types and alert status type interfaces to internal
• added lightweight alert group
• added compact alert groups
• verified close change event emits from alerts alert group
• verified that alert-group status does not override custom icon shapes in alerts
• verified that alerts with a loading status are not overridden by the alert-group status
• created css utility functions
• refactored the CssHelpers mixin to use the css utility functions
• made it so that only alerts care about their children
  • alert-groups don't know anything about alert-actions
• removing old alert-content component
• removing old alert scss file
• added aria and unit tests for a11y
• fixed issue with sr-only elements inside of cds-icon that was revealing them in Safari
• setting up app-level alert groups
• removing aria-live declarations from alerts
• refactoring alerts to slot cds-icons as custom icons instead of using icon-shape attr
• removing old app-alert files
• refactoring app-level alert group type to banner
• styles for banner alerts loading status
• limiting compact sizing to just default alerts
• adding compact sizing to banner alerts is not possible...
• ...because we do not have outline buttons that are smaller than 24px height
• adding verification for app-alert pager
• adding code that allows for banners to be center aligned without a pager and left aligned with a pager
• adding banner alert statuses
• implementing functionality that forces banner alert groups to update when their child alert's status changes
• removing old app-alert styles
• increased branch code coverage threshold to 90%
• added tests for new layouts introduced by banner alert group pager
• added `assignSlotNames` helper to centralize work of adding slot attrs in connectedCallback
• fixed issue where light alert groups were not getting status color on their icons as expected
• story on alert page said "link button" instead of inline button
• fixed Safari width issue on alerts
• fixing issue with badges inside of tags in Safari
• Safari was having problems with aligning the badge across the shadowDOM
• badges were unreadable in Safari; font-weight needed to be increased
• fixing close button sizes corrected issues in Firefox and Safari
• updated close-button for improved overrides

Signed-off-by: Scott Mathis <[email protected]>
  • Loading branch information
@mathisscott
smathis authored and mathisscott committed Jun 15, 2020
1 parent 9b6bc17 commit 8886b4f
Show file tree
Hide file tree
Showing 88 changed files with 4,154 additions and 1,234 deletions.
1 change: 1 addition & 0 deletions apps/core-parcel-js/src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import '../node_modules/@clr/core/global.min.css';
@import '../node_modules/@clr/core/styles/module.layout.min.css';
@import '../node_modules/@clr/city/css/bundles/default.min.css';

body {
Expand Down
305 changes: 305 additions & 0 deletions apps/core-parcel-js/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,311 @@
<main>
<h1>Clarity Core Demo - JavaScript</h1>

<section>
<h2>Alerts</h2>

<h3>Lightweight Alerts</h3>
<div cds-layout="vertical gap:sm">
<cds-alert-group type="light">
<cds-alert status="info">
This example is an alert with a status of "info" inside a lightweight alert group.
</cds-alert>
<cds-alert status="danger">
This example is an alert with a status of "danger" and inline action buttons inside a lightweight alert
group.
<cds-inline-button>Clickable Action</cds-inline-button>
</cds-alert>
<cds-alert status="loading">
This example is an alert with a status of "loading" inside a lightweight alert group.
<cds-alert-actions>
<cds-button>Alert actions should not be viewable in lightweight alerts</cds-button>
<cds-button>Alert actions should not be viewable in lightweight alerts</cds-button>
</cds-alert-actions>
</cds-alert>
<cds-alert status="unknown">
This example is a multi-line alert with a status of "unknown" inside a lightweight alert group. A block of
lorem ipsum sample text follows: Drake Equation take root and flourish culture rings of Uranus quasar
hundreds of thousands? Cambrian explosion gathered by gravity of brilliant syntheses vanquish the
impossible finite but unbounded not a sunrise but a galaxyrise. Intelligent beings two ghostly white
figures in coveralls and helmets are soflty dancing something incredible is waiting to be known vanquish
the impossible vastness is bearable only through love concept of the number one and billions upon billions
upon billions upon billions upon billions upon billions upon billions.
<cds-alert-actions>
<cds-button>Button 1</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>
</div>

<h3>Default Alerts (Pastel Bubbles)</h3>
<div cds-layout="vertical gap:sm">
<cds-alert-group status="info">
<cds-alert closable>
This example is a closable alert inside an alert group with a status of "info".
</cds-alert>
<cds-alert closable>
<cds-icon shape="node-group" aria-hidden="true"></cds-icon>
This example is a closable alert with a custom icon shape inside an alert group with a status of "info".
</cds-alert>
<cds-alert status="loading" closable>
This example is an alert with a "loading" status and alert action buttons inside an alert group with a
status of "info".
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>

<cds-alert-group status="success">
<cds-alert closable>
This example is a closable alert inside an alert group with a status of "success".
</cds-alert>
<cds-alert closable>
This example is a closable alert with alert action buttons inside an alert group with a status of
"success".
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>

<cds-alert-group status="warning">
<cds-alert closable>
This example is a closable alert inside an alert group with a status of "warning".
</cds-alert>
<cds-alert closable>
This example is a closable alert with alert action buttons inside an alert group with a status of
"warning".
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>

<cds-alert-group status="danger">
<cds-alert closable>
This example is a closable alert inside an alert group with a status of "danger".
</cds-alert>
<cds-alert closable>
This example is a closable alert with alert action buttons inside an alert group with a status of
"danger".
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>

<cds-alert-group>
<cds-alert>
This example is an alert inside an alert group.
</cds-alert>
<cds-alert closable>
This example is a closable alert inside an alert group.
</cds-alert>
<cds-alert>
<cds-icon shape="headphones" aria-hidden="true"></cds-icon>
This example is an alert with alert action buttons and a custom icon shape inside an alert group.
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
<cds-alert closable>
This example is a closable alert with alert action buttons and multiple lines of text inside an alert
group. A block of lorem ipsum sample text follows: Drake Equation take root and flourish culture rings of
Uranus quasar hundreds of thousands? Cambrian explosion gathered by gravity of brilliant syntheses
vanquish the impossible finite but unbounded not a sunrise but a galaxyrise. Intelligent beings two
ghostly white figures in coveralls and helmets are soflty dancing something incredible is waiting to be
known vanquish the impossible vastness is bearable only through love concept of the number one and
billions upon billions upon billions upon billions upon billions upon billions upon billions.
<cds-alert-actions>
<cds-button>Button 1</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>
</div>

<h3>Compact Alerts</h3>
<div cds-layout="vertical gap:sm">
<cds-alert-group status="info" size="sm">
<cds-alert closable>
This example is a closable alert inside a compact alert group with a status of "info".
</cds-alert>
<cds-alert closable>
<cds-icon shape="node-group" aria-hidden="true"></cds-icon>
This example is a closable alert with alert actions and a custom icon shape inside a compact alert group
with a status of "info".
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>

<cds-alert-group status="success" size="sm">
<cds-alert closable>
This example is a closable alert inside a compact alert group with a status of "success".
</cds-alert>
<cds-alert closable>
This example is a closable alert with alert actions and a custom icon shape inside a compact alert group
with a status of "success".
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>

<cds-alert-group status="warning" size="sm">
<cds-alert closable>
This example is a closable alert inside a compact alert group with a status of "warning".
</cds-alert>
<cds-alert closable>
<cds-icon shape="headphones" aria-hidden="true"></cds-icon>
This example is a closable alert with alert actions and a custom icon shape inside a compact alert group
with a status of "warning".
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>

<cds-alert-group status="danger" size="sm">
<cds-alert status="loading" closable>
This example is a closable alert with a status of "loading" inside a compact alert group with a status of
"danger".
</cds-alert>
<cds-alert closable>
This example is a closable alert with alert actions inside a compact alert group with a status of
"warning".
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>

<cds-alert-group size="sm">
<cds-alert>
This example is an alert inside a compact alert group.
</cds-alert>
<cds-alert closable>
This example is a closable alert inside a compact alert group.
</cds-alert>
<cds-alert>
This example is an alert with alert actions inside a compact alert group.
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
<cds-alert closable>
This example is a closable alert with multiple lines of text and an alert action inside a compact alert
group. A block of lorem ipsum sample text follows: Drake Equation take root and flourish culture rings of
Uranus quasar hundreds of thousands? Cambrian explosion gathered by gravity of brilliant syntheses
vanquish the impossible finite but unbounded not a sunrise but a galaxyrise. Intelligent beings two
ghostly white figures in coveralls and helmets are soflty dancing something incredible is waiting to be
known vanquish the impossible vastness is bearable only through love concept of the number one and
billions upon billions upon billions upon billions upon billions upon billions upon billions.
<cds-alert-actions>
<cds-button>Button 1</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>
<cds-alert-group type="light" size="sm">
<cds-alert status="info">
This example is an alert with a status of "info" inside a compact, lightweight alert group.
</cds-alert>
<cds-alert status="danger">
This example is an alert with a status of "danger" and an inline action inside a compact, lightweight
alert group.<cds-inline-button>Clickable Action</cds-inline-button>
</cds-alert>
<cds-alert status="loading">
This example is an alert with a status of "loading" inside a compact, lightweight alert group.
<cds-alert-actions>
<cds-button>Alert actions should not be viewable in lightweight alerts</cds-button>
<cds-button>Alert actions should not be viewable in lightweight alerts</cds-button>
</cds-alert-actions>
</cds-alert>
<cds-alert status="unknown">
This example is a multi-line alert with a status of "unknown" and two inline actions inside a compact,
lightweight alert group. A block of lorem ipsum sample text follows: Drake Equation take root and flourish
culture rings of Uranus quasar hundreds of thousands? Cambrian explosion gathered by gravity of brilliant
syntheses vanquish the impossible finite but unbounded not a sunrise but a galaxyrise. Intelligent beings
two ghostly white figures in coveralls and helmets are soflty dancing something incredible is waiting to
be known vanquish the impossible vastness is bearable only through love concept of the number one and
billions upon billions upon billions upon billions upon billions upon billions upon
billions.<cds-inline-button>Clickable Action 1</cds-inline-button
><cds-inline-button>Clickable Action 2</cds-inline-button>
<cds-alert-actions>
<cds-button>Alert actions should not be viewable in lightweight alerts</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>
</div>

<h3>Banner Alerts (App-Level)</h3>
<div cds-layout="vertical gap:sm">
<cds-alert-group type="banner">
<cds-alert closable status="info">
This example is a closable banner alert inside a banner alert group with a status of "info".
</cds-alert>
</cds-alert-group>

<cds-alert-group type="banner">
<cds-alert status="success" closable>
This example is a closable alert with a status of "success" inside a banner alert group.
</cds-alert>
</cds-alert-group>

<cds-alert-group type="banner">
<cds-alert status="warning" closable>
This example is a closable alert with alert action buttons and a status of "warning" inside a banner alert
group.
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>

<cds-alert-group type="banner">
<cds-alert status="danger" closable>
This example is a closable alert with a status of "danger" inside a banner alert group.
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>

<cds-alert-group type="banner">
<cds-alert status="unknown">
This example is a non-closable alert with alert actions and a status of "unknown" inside a banner alert
group.
<cds-alert-actions>
<cds-button>Button 1</cds-button>
<cds-button>Button 2</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>

<cds-alert-group type="banner">
<cds-alert status="loading">
This example is an alert with alert actions and a status of "loading" inside a banner alert group.
<cds-alert-actions>
<cds-button>Button 1</cds-button>
</cds-alert-actions>
</cds-alert>
</cds-alert-group>
</div>
</section>

<section>
<h2>Buttons</h2>
<cds-button status="primary">primary</cds-button>
Expand Down
7 changes: 6 additions & 1 deletion packages/angular/projects/clr-angular/src/progress/spinner/_spinner.clarity.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
// Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

Expand Down Expand Up @@ -34,6 +34,11 @@
background: generateSpinnerIcon($clr-spinner-inverse-bg-color, #74c1e2);
}

&.spinner-neutral-0 {
// needed for loading banner alerts in core
background: generateSpinnerIcon(transparent, #ffffff, 1);
}

&.spinner-check {
animation: none;
background: generateCheckIcon($clr-spinner-color);
Expand Down
1 change: 1 addition & 0 deletions packages/core/import-map.importmap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@clr/core/icon": "/base/dist/core/icon/index.js",
"@clr/core/icon-shapes": "/base/dist/core/icon-shapes/index.js",
"@clr/core/internal": "/base/dist/core/internal/index.js",
"@clr/core/internal-components": "/base/dist/core/internal-components/index.js",
"@clr/core/modal": "/base/dist/core/modal/index.js",
"@clr/core/tag": "/base/dist/core/tag/index.js",
"@clr/core/test-dropdown": "/base/dist/core/test-dropdown/index.js",
Expand Down
4 changes: 2 additions & 2 deletions packages/core/karma.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ module.exports = config => {
require('karma-coverage-istanbul-reporter'),
],
client: { clearContext: false },
files: glob.sync('dist/core/**/*.spec.js').map(f => ({ pattern: f, type: 'module' })),
files: glob.sync('dist/core/**/!(test-dropdown.element).spec.js').map(f => ({ pattern: f, type: 'module' })),
esm: {
coverage: true,
importMap: './import-map.importmap',
Expand Down Expand Up @@ -46,7 +46,7 @@ module.exports = config => {
thresholds: {
statements: 90,
lines: 90,
branches: 85, // need to get to 90
branches: 89,
functions: 90,
},
},
Expand Down
Loading

0 comments on commit 8886b4f

Please sign in to comment.