Skip to content

Commit 3dfd353

Browse files
amyrlamamyrlam
committed
More alert tweaks
1 parent 16d5f69 commit 3dfd353

File tree

5 files changed

+96
-52
lines changed

5 files changed

+96
-52
lines changed

‎packages/components/addon/components/hds/alert/index.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<div class={{this.classNames}} ...attributes role="alert">
2-
{{#if (or @icon @color)}}
2+
{{#if (or @icon this.color)}}
33
<div class="hds-alert__icon">
44
{{#if @icon}}
55
<FlightIcon @name={{@icon}} @size="24" @isInlineBlock={{false}} />
6-
{{else if (or (eq @color "neutral") (eq @color "highlight"))}}
6+
{{else if (or (eq this.color "neutral") (eq @color "highlight"))}}
77
<FlightIcon @name="info" @size="24" @isInlineBlock={{false}} />
88
{{else if (eq @color "success")}}
99
<FlightIcon @name="check-circle" @size="24" @isInlineBlock={{false}} />

‎packages/components/app/styles/components/alert.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
// Notice: in the future this may become a "Link::Inline" component (for now we declare the styles directly here)
4646
a {
4747
color: var(--token-color-foreground-action);
48-
// at the moment the "focus" state is not well defined in design (the one that is in Figma does not work) so we just apply a simple color to the default outline
48+
// At the moment the "focus" state is not well defined in design (the one that is in Figma does not work) so we just apply a simple color to the default outline
4949
outline-color: var(--token-color-focus-action-external);
5050

5151
&:hover {
@@ -77,9 +77,10 @@
7777
}
7878
}
7979

80+
// TODO: Check all neutral tokens, cause don't follow pattern of other `color`s
8081
.hds-alert--color-neutral {
8182
background-color: var(--token-color-surface-faint);
82-
// TODO: Check if should be a token
83+
// TODO: Check if should be a token for 0px 1px 0px 0px thruout, and rgba
8384
box-shadow: 0px 1px 0px 0px rgba(59, 61, 69, 0.4);
8485

8586
.hds-alert__icon, .hds-alert__title {

‎packages/components/tests/acceptance/percy-test.js

+3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ module('Acceptance | Percy test', function (hooks) {
1919
await visit('/foundations/focus-ring');
2020
await percySnapshot('FocusRing');
2121

22+
await visit('/components/alert');
23+
await percySnapshot('Alert');
24+
2225
await visit('/components/badge');
2326
await percySnapshot('Badge');
2427

‎packages/components/tests/dummy/app/styles/app.scss

+3
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,9 @@ body.dummy-app {
208208
border-color: #f5c6cb;
209209
}
210210

211+
.dummy-indent {
212+
margin-left: 30px !important;
213+
}
211214

212215
// Percy (percySnapshot) doesn't allow to target specific DOM elements, so we have to "blacklist" the elements
213216
// that we want to exclude from the snapshots using their own "Percy-specific CSS".

‎packages/components/tests/dummy/app/templates/components/alert.hbs

+85-48
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
results in a default
4444
<code class="dummy-code">icon</code>, which
4545
<strong>can</strong>
46-
be overriden.
46+
be overriden. Required parameter.
4747
</p>
4848
<p>Acceptable values:</p>
4949
<ol>
@@ -90,7 +90,7 @@
9090
is required.</p>
9191
</dd>
9292

93-
<dt>isDismissible <code>boolean</code></dt>
93+
<dt>🚧 isDismissible <code>boolean</code></dt>
9494
<p>The alert can be dismissed by the user. This parameter has some accessibility considerations for
9595
<code class="dummy-code">Hds::Alert::Toast</code>
9696
(<code class="dummy-code">role="alertdialog"</code>).
@@ -103,7 +103,7 @@
103103
</ol>
104104
</dd>
105105

106-
<dt>hasActions <code>boolean</code></dt>
106+
<dt>🚧 hasActions <code>boolean</code></dt>
107107
<dd>
108108
<p>The alert has content below the
109109
<code class="dummy-code">title</code>
@@ -128,26 +128,49 @@
128128
</section>
129129

130130
<section>
131+
<h3 class="dummy-h3">🚧 How to use</h3>
132+
<p class="dummy-paragraph">
133+
Basic invocation of the component (calling
134+
<code class="dummy-code">Hds::Alert</code>
135+
temporarily, instead of
136+
<code class="dummy-code">Hds::Alert::Page</code>):
137+
</p>
138+
{{! prettier-ignore-start }}
139+
<CodeBlock
140+
@language="markup"
141+
@code='
142+
<Hds::Alert @title="Title here" @description="Description here" />
143+
'
144+
/>
145+
{{! prettier-ignore-end }}
131146

147+
<p class="dummy-paragraph">Renders to:</p>
148+
<Hds::Alert @title="Really cool title here" @description="And a rad description too!" />
132149
</section>
133150

134151
<section>
135-
<h3 class="dummy-h3">How to use</h3>
136-
</section>
137-
138-
<section>
139-
<h3 class="dummy-h3">Design guidelines</h3>
152+
<h3 class="dummy-h3">🚧 Design guidelines</h3>
153+
<Hds::Alert @color="critical" @title="TODO: Insert Figma stickersheet here" />
140154
</section>
141155

142156
<section data-test-percy>
143157
<h3 class="dummy-h3">Showcase</h3>
144158

145-
Color variations:
159+
<h4 class="dummy-h4">Content</h4>
160+
161+
<h5 class="dummy-h5">
162+
<code class="dummy-code">title</code>
163+
and
164+
<code class="dummy-code">description</code>
165+
variations
166+
</h5>
167+
168+
<Hds::Alert @color="success" @description="Success: No title, description only" />
169+
<br />
146170

147171
<Hds::Alert
148-
@color="neutral"
149-
@title="Neutral! Alert w/title & description"
150-
@description="Your Intention settings are currently set to default allow. This
172+
@color="success"
173+
@title="Success: Really long title, yet no description below. Your Intention settings are currently set to default allow. This
151174
means that this view will show connections to every service in your
152175
cluster. We recommend changing your Intention settings to default deny and
153176
creating specific Intentions for upstream and downstream services for this
@@ -156,8 +179,20 @@
156179
<br />
157180

158181
<Hds::Alert
159-
@color="highlight"
160-
@title="Highlight! Alert w/title & description"
182+
@color="success"
183+
@title="Success: with rich text description (description below has HTML e.g. <strong>, <code>, <a>)"
184+
@description="Your Intention settings are currently set to default <strong>allow</strong>. This
185+
means that this view will show connections to every service in your
186+
<code>cluster</code>. We recommend changing your Intention settings to default deny and
187+
creating specific Intentions for upstream and downstream services for this
188+
view to be useful. For more info, see <a href='#'>About clusters</a>."
189+
/>
190+
191+
<h5 class="dummy-h5"><code class="dummy-code">icon</code> override variation</h5>
192+
193+
<Hds::Alert
194+
@color="critical"
195+
@title="Critical: With default icon"
161196
@description="Your Intention settings are currently set to default allow. This
162197
means that this view will show connections to every service in your
163198
cluster. We recommend changing your Intention settings to default deny and
@@ -167,8 +202,9 @@
167202
<br />
168203

169204
<Hds::Alert
170-
@color="success"
171-
@title="Success! Alert w/title & description"
205+
@color="critical"
206+
@icon="meh"
207+
@title="Critical: With override icon of your choice"
172208
@description="Your Intention settings are currently set to default allow. This
173209
means that this view will show connections to every service in your
174210
cluster. We recommend changing your Intention settings to default deny and
@@ -177,9 +213,11 @@
177213
/>
178214
<br />
179215

216+
<h4 class="dummy-h4">Color</h4>
217+
180218
<Hds::Alert
181-
@color="warning"
182-
@title="Warning! Alert w/title & description"
219+
@color="neutral"
220+
@title="Neutral: With title and description"
183221
@description="Your Intention settings are currently set to default allow. This
184222
means that this view will show connections to every service in your
185223
cluster. We recommend changing your Intention settings to default deny and
@@ -189,8 +227,8 @@
189227
<br />
190228

191229
<Hds::Alert
192-
@color="critical"
193-
@title="Critical! Alert w/title & description"
230+
@color="highlight"
231+
@title="Highlight: With title and description"
194232
@description="Your Intention settings are currently set to default allow. This
195233
means that this view will show connections to every service in your
196234
cluster. We recommend changing your Intention settings to default deny and
@@ -199,12 +237,9 @@
199237
/>
200238
<br />
201239

202-
Icon override variation:
203-
204240
<Hds::Alert
205-
@color="critical"
206-
@icon="meh"
207-
@title="Critical! With special icon"
241+
@color="success"
242+
@title="Success: With title and description"
208243
@description="Your Intention settings are currently set to default allow. This
209244
means that this view will show connections to every service in your
210245
cluster. We recommend changing your Intention settings to default deny and
@@ -213,14 +248,10 @@
213248
/>
214249
<br />
215250

216-
Title/description variations:
217-
218-
<Hds::Alert @color="success" @description="Description only please" />
219-
<br />
220-
221251
<Hds::Alert
222-
@color="success"
223-
@title="Really long title, yet no description. Your Intention settings are currently set to default allow. This
252+
@color="warning"
253+
@title="Warning: With title and description"
254+
@description="Your Intention settings are currently set to default allow. This
224255
means that this view will show connections to every service in your
225256
cluster. We recommend changing your Intention settings to default deny and
226257
creating specific Intentions for upstream and downstream services for this
@@ -229,22 +260,15 @@
229260
<br />
230261

231262
<Hds::Alert
232-
@color="success"
233-
@title="Description below has HTML"
234-
@description="Your Intention settings are currently set to default <strong>allow</strong>. This
263+
@color="critical"
264+
@title="Critical: With title and description"
265+
@description="Your Intention settings are currently set to default allow. This
235266
means that this view will show connections to every service in your
236-
<code>cluster</code>. We recommend changing your Intention settings to default deny and
267+
cluster. We recommend changing your Intention settings to default deny and
237268
creating specific Intentions for upstream and downstream services for this
238-
view to be useful. For more info, see <a href='#'>About clusters</a>."
269+
view to be useful."
239270
/>
240-
241-
<h4 class="dummy-h4">Content</h4>
242-
243-
<h4 class="dummy-h4">Size</h4>
244-
245-
<h4 class="dummy-h4">Type</h4>
246-
247-
<h4 class="dummy-h4">Color:</h4>
271+
<br />
248272
</section>
249273

250274
<section>
@@ -255,11 +279,24 @@
255279
has
256280
<code class="dummy-code">role="alert"</code>
257281
on the parent
258-
<code class="dummy-code">div</code>, to identify the element as the container where alert content will be added or updated.
282+
<code class="dummy-code">div</code>, to identify the element as the container where alert content will be added or
283+
updated.
259284
</p>
260285
<p>References:</p>
261286
<ul>
262-
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.2/#alert">WAI-ARIA Authoring Practices 1.2, Alert</a></li>
263-
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.2/examples/alert/alert.html">WAI-ARIA Authoring Practices 1.2, Alert Example</a></li>
287+
<li>
288+
<a href="https://www.w3.org/TR/wai-aria-practices-1.2/#alert" target="_blank" rel="noopener noreferrer">
289+
WAI-ARIA Authoring Practices 1.2, Alert
290+
</a>
291+
</li>
292+
<li>
293+
<a
294+
href="https://www.w3.org/TR/wai-aria-practices-1.2/examples/alert/alert.html"
295+
target="_blank"
296+
rel="noopener noreferrer"
297+
>
298+
WAI-ARIA Authoring Practices 1.2, Alert Example
299+
</a>
300+
</li>
264301
</ul>
265302
</section>

0 commit comments

Comments
 (0)