Skip to content

Commit a4d72ad

Browse files
Yosevu Kilonzopfulton
Yosevu Kilonzo
and
pfulton
authored
refactor(inlinealert)!: migrate to core tokens (#1519)
BREAKING CHANGE: migrates InlineAlert to core tokens Co-authored-by: Patrick Fulton <pfulton@adobe.com>
1 parent a592ff6 commit a4d72ad

File tree

8 files changed

+221
-197
lines changed

8 files changed

+221
-197
lines changed

‎components/inlinealert/gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require('@spectrum-css/component-builder');
1+
module.exports = require('@spectrum-css/component-builder-simple');

‎components/inlinealert/index.css

Lines changed: 89 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2019 Adobe. All rights reserved.
2+
Copyright 2022 Adobe. All rights reserved.
33
This file is licensed to you under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License. You may obtain a copy
55
of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -10,81 +10,126 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13-
@import "../vars/css/components/spectrum-inlinealert.css";
14-
1513
.spectrum-InLineAlert {
16-
--spectrum-inlinealert-neutral-title-height: 38px;
17-
--spectrum-inlinealert-neutral-corner-radius: 4px;
18-
19-
/* DNA */
20-
--spectrum-inlinealert-neutral-border-width: 2px;
14+
/* Font */
15+
--spectrum-inlinealert-font-weight: var(--spectrum-font-weight-bold);
16+
17+
/* Size*/
18+
--spectrum-inlinealert-border-width: var(--spectrum-border-width-100);
19+
--spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100);
20+
--spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100);
21+
--spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width);
22+
--spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50);
23+
24+
/* Spacing*/
25+
--spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400);
26+
--spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400);
27+
--spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300);
28+
29+
/* Color */
30+
--spectrum-inlinealert-background-color: var(--spectrum-gray-50);
31+
--spectrum-inlinealert-border-and-icon-color: var(--spectrum-gray-600);
32+
--spectrum-inlinealert-header-and-content-color: var(--spectrum-gray-900);
2133
}
2234

2335
.spectrum-InLineAlert {
2436
position: relative;
2537

2638
display: inline-block;
2739
box-sizing: border-box;
28-
min-inline-size: var(--spectrum-inlinealert-neutral-min-width);
29-
min-block-size: var(--spectrum-inlinealert-neutral-title-height);
30-
margin-block: 8px;
31-
margin-inline: 0;
32-
padding-block: var(--spectrum-inlinealert-neutral-padding-y);
33-
padding-inline: var(--spectrum-inlinealert-neutral-padding-x);
34-
35-
border-width: var(--spectrum-inlinealert-neutral-border-width);
40+
min-inline-size: var(--mod-inlinealert-min-inline-size, var(--spectrum-inlinealert-min-inline-size));
41+
42+
padding-block: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text));
43+
padding-inline: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text));
44+
45+
border-block-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width));
46+
border-inline-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width));
3647
border-style: solid;
37-
border-radius: var(--spectrum-inlinealert-neutral-corner-radius);
48+
border-radius: var(--mod-inlinealert-border-radius, var(--spectrum-inlinealert-border-radius));
49+
50+
background-color: var(--highcontrast-inlinealert-background-color, var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color)));
51+
border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color)));
52+
}
53+
54+
@media (forced-colors: active) {
55+
.spectrum-InLineAlert {
56+
--highcontrast-inlinealert-background-color: Background;
57+
--highcontrast-inlinealert-header-and-content-color: CanvasText;
58+
--highcontrast-inlinealert-border-and-icon-color: ButtonBorder;
59+
}
3860
}
3961

4062
.spectrum-InLineAlert-icon {
41-
position: absolute;
42-
display: block;
43-
inset-block-start: 20px;
44-
inset-inline-end: 20px;
63+
inline-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size));
64+
block-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size));
4565
}
4666

4767
.spectrum-InLineAlert-header {
48-
display: inline-block;
49-
block-size: auto;
50-
min-block-size: 0;
51-
margin: 0;
52-
padding: 0;
53-
54-
/* Leave room for the icon */
55-
padding-inline-end: 30px;
68+
display: flex;
69+
align-items: center;
70+
justify-content: space-between;
71+
/* Minimum space between header and icon */
72+
gap: var(--mod-inlinealert-spacing-header-to-icon, var(--spectrum-inlinealert-spacing-header-to-icon));
5673

57-
font-size: 14px;
58-
font-weight: 700;
59-
font-style: normal;
60-
line-height: 14px;
74+
font-weight: var(--mod-inlinealert-font-weight, var(--spectrum-inlinealert-font-weight));
6175
text-transform: none;
76+
77+
min-block-size: var(--mod-inlinealert-header-min-block-size, var(--spectrum-inlinealert-header-min-block-size));
78+
79+
color: var(--highcontrast-inlinealert-header-and-content-color, var(--mod-inlinealert-header-and-content-color, var(--spectrum-inlinealert-header-and-content-color)));
6280
}
6381

6482
.spectrum-InLineAlert-content {
6583
display: block;
66-
margin: var(--spectrum-inlinealert-neutral-content-margin-top) 0 0 0;
84+
margin-block-start: var(--mod-inlinealert-spacing-header-content-button, var(--spectrum-inlinealert-spacing-header-content-button));
85+
margin-block-end: 0;
86+
margin-inline-start: 0;
87+
margin-inline-end: 0;
6788
padding: 0;
6889

69-
font-size: 14px;
7090
word-wrap: break-word;
91+
92+
color: var(--highcontrast-inlinealert-header-and-content-color, var(--mod-inlinealert-header-and-content-color, var(--spectrum-inlinealert-header-and-content-color)));
7193
}
7294

7395
.spectrum-InLineAlert-footer {
74-
display: block;
75-
76-
text-align: end;
77-
78-
padding-block-start: 0.5rem;
96+
display: flex;
97+
justify-content: flex-end;
98+
margin-block-start: var(--mod-inlinealert-spacing-header-content-butto, var(--spectrum-inlinealert-spacing-header-content-button));
7999

80100
&:empty {
81101
display: none;
82102
}
103+
}
104+
105+
.spectrum-InLineAlert--info {
106+
border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-info, var(--spectrum-inlinealert-border-and-icon-color-info)));
107+
108+
.spectrum-InLineAlert-icon {
109+
color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-info, var(--spectrum-inlinealert-border-and-icon-color-info)));
110+
}
111+
}
112+
113+
.spectrum-InLineAlert--notice {
114+
border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice)));
115+
116+
.spectrum-InLineAlert-icon {
117+
color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice)));
118+
}
119+
}
120+
121+
.spectrum-InLineAlert--positive {
122+
border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive)));
123+
124+
.spectrum-InLineAlert-icon {
125+
color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive)));
126+
}
127+
}
83128

84-
.spectrum-Button {
85-
margin-inline-end: 0;
129+
.spectrum-InLineAlert--negative {
130+
border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative)));
86131

87-
/* Spacing between buttons */
88-
margin-inline-start: 0.75rem;
132+
.spectrum-InLineAlert-icon {
133+
color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative)));
89134
}
90135
}

‎components/inlinealert/metadata/inlinealert.yml

Lines changed: 46 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,72 @@
11
name: In-Line Alert
22
SpectrumSiteSlug: https://spectrum.adobe.com/page/in-line-alert/
33
examples:
4-
- id: inlinealert-info
5-
name: Info
4+
- id: inlinealert-neutral
5+
name: Neutral
66
markup: |
7-
<div class="spectrum-InLineAlert spectrum-InLineAlert--info">
8-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
9-
<use xlink:href="#spectrum-icon-18-Info" />
10-
</svg>
11-
<div class="spectrum-InLineAlert-header">Information in-line alert header</div>
7+
<div class="spectrum-InLineAlert">
8+
<div class="spectrum-InLineAlert-header">Neutral in-line alert header</div>
129
<div class="spectrum-InLineAlert-content">This is an alert.</div>
1310
</div>
14-
- id: inlinealert-success
15-
name: Success
11+
- id: inlinealert-info
12+
name: Informative
1613
markup: |
17-
<div class="spectrum-InLineAlert spectrum-InLineAlert--success">
18-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
19-
<use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
20-
</svg>
21-
<div class="spectrum-InLineAlert-header">Successful in-line alert header</div>
14+
<div class="spectrum-InLineAlert spectrum-InLineAlert--info">
15+
<div class="spectrum-InLineAlert-header">
16+
Information in-line alert header
17+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
18+
<use xlink:href="#spectrum-icon-18-Info" />
19+
</svg>
20+
</div>
2221
<div class="spectrum-InLineAlert-content">This is an alert.</div>
2322
</div>
24-
- id: inlinealert-negative
25-
name: Negative
23+
- id: inlinealert-positive
24+
name: Positive
2625
markup: |
27-
<div class="spectrum-InLineAlert spectrum-InLineAlert--negative">
28-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
29-
<use xlink:href="#spectrum-icon-18-Alert" />
30-
</svg>
31-
<div class="spectrum-InLineAlert-header">negative in-line alert header</div>
26+
<div class="spectrum-InLineAlert spectrum-InLineAlert--positive">
27+
<div class="spectrum-InLineAlert-header">
28+
Positive in-line alert header
29+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
30+
<use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
31+
</svg>
32+
</div>
3233
<div class="spectrum-InLineAlert-content">This is an alert.</div>
3334
</div>
34-
- id: inlinealert-help
35-
name: Help
35+
- id: inlinealert-notice
36+
name: Notice
3637
markup: |
37-
<div class="spectrum-InLineAlert spectrum-InLineAlert--help">
38-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
39-
<use xlink:href="#spectrum-icon-18-Help" />
40-
</svg>
41-
<div class="spectrum-InLineAlert-header">Information in-line alert header</div>
38+
<div class="spectrum-InLineAlert spectrum-InLineAlert--notice">
39+
<div class="spectrum-InLineAlert-header">
40+
Notice in-line alert - Oh no
41+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
42+
<use xlink:href="#spectrum-icon-18-Alert" />
43+
</svg>
44+
</div>
4245
<div class="spectrum-InLineAlert-content">This is an alert.</div>
4346
</div>
44-
- id: inlinealert-error
45-
name: Error
47+
- id: inlinealert-negative
48+
name: Negative
4649
markup: |
47-
<div class="spectrum-InLineAlert spectrum-InLineAlert--error">
48-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
49-
<use xlink:href="#spectrum-icon-18-Alert" />
50-
</svg>
51-
<div class="spectrum-InLineAlert-header">Error in-line alert - Oh no</div>
50+
<div class="spectrum-InLineAlert spectrum-InLineAlert--negative">
51+
<div class="spectrum-InLineAlert-header">
52+
Negative in-line alert header
53+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
54+
<use xlink:href="#spectrum-icon-18-Alert" />
55+
</svg>
56+
</div>
5257
<div class="spectrum-InLineAlert-content">This is an alert.</div>
5358
</div>
5459
- id: inlinealert-closable
5560
name: Closable
5661
dnaStatus: Contribution
5762
description: An in-line alert with a close button in the footer. Combine this strategy with any variant.
5863
markup: |
59-
<div class="spectrum-InLineAlert spectrum-InLineAlert--error">
60-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
61-
<use xlink:href="#spectrum-icon-18-Alert" />
62-
</svg>
63-
<div class="spectrum-InLineAlert-header">Incorrect Payment Information - Error</div>
64+
<div class="spectrum-InLineAlert spectrum-InLineAlert--negative">
65+
<div class="spectrum-InLineAlert-header">Incorrect Payment Information - Error
66+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
67+
<use xlink:href="#spectrum-icon-18-Alert" />
68+
</svg>
69+
</div>
6470
<div class="spectrum-InLineAlert-content">This is an alert.</div>
6571
<div class="spectrum-InLineAlert-footer">
6672
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary"><span class="spectrum-Button-label">Ok</span></button>

‎components/inlinealert/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@spectrum-css/inlinealert",
3-
"version": "4.0.13",
3+
"version": "5.0.0-beta.1",
44
"description": "The Spectrum CSS in-line alert component",
55
"license": "Apache-2.0",
66
"main": "dist/index-vars.css",
@@ -17,17 +17,17 @@
1717
},
1818
"peerDependencies": {
1919
"@spectrum-css/icon": "^3.0.21",
20-
"@spectrum-css/vars": "^8.0.0"
20+
"@spectrum-css/tokens": "^3.0.0"
2121
},
2222
"devDependencies": {
2323
"@spectrum-css/button": "^6.0.13",
24-
"@spectrum-css/component-builder": "^3.2.0",
24+
"@spectrum-css/component-builder-simple": "^1.0.0",
2525
"@spectrum-css/icon": "^3.0.23",
26-
"@spectrum-css/vars": "^8.0.0",
26+
"@spectrum-css/tokens": "^3.0.0",
2727
"gulp": "^4.0.0"
2828
},
2929
"publishConfig": {
3030
"access": "public"
3131
},
3232
"homepage": "https://opensource.adobe.com/spectrum-css/"
33-
}
33+
}

‎components/inlinealert/skin.css

Lines changed: 0 additions & 65 deletions
This file was deleted.

0 commit comments

Comments
 (0)