Skip to content

Commit bf26b56

Browse files
GarthDBGarthDB
committed
feat: added inlinealert
1 parent 82e2f29 commit bf26b56

File tree

5 files changed

+48
-47
lines changed

5 files changed

+48
-47
lines changed

‎components/inlinealert/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
# @spectrum-css/alert
2-
> The Spectrum CSS alert component
1+
# @spectrum-css/inlinealert
2+
> The Spectrum CSS in-line alert component
33
44
This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
55

‎components/inlinealert/index.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,29 @@ governing permissions and limitations under the License.
1212

1313
@import "../vars/css/components/spectrum-inlinealert.css";
1414

15-
:root {
16-
--spectrum-alert-header-height: 38px;
17-
--spectrum-alert-corner-radius: 4px;
15+
.spectrum-InLineAlert {
16+
--spectrum-inlinealert-title-height: 38px;
17+
--spectrum-inlinealert-corner-radius: 4px;
1818

1919
/* DNA */
20-
--spectrum-alert-border-width: 2px;
20+
--spectrum-inlinealert-border-width: 2px;
2121
}
2222

2323
.spectrum-InLineAlert {
2424
position: relative;
2525

2626
display: inline-block;
2727
box-sizing: border-box;
28-
min-inline-size: var(--spectrum-alert-min-width);
29-
min-block-size: var(--spectrum-alert-header-height);
28+
min-inline-size: var(--spectrum-inlinealert-min-width);
29+
min-block-size: var(--spectrum-inlinealert-title-height);
3030
margin-block: 8px;
3131
margin-inline: 0;
32-
padding-block: var(--spectrum-alert-padding-y);
33-
padding-inline: var(--spectrum-alert-padding-x);
32+
padding-block: var(--spectrum-inlinealert-padding-y);
33+
padding-inline: var(--spectrum-inlinealert-padding-x);
3434

35-
border-width: var(--spectrum-alert-border-width);
35+
border-width: var(--spectrum-inlinealert-border-width);
3636
border-style: solid;
37-
border-radius: var(--spectrum-alert-corner-radius);
37+
border-radius: var(--spectrum-inlinealert-corner-radius);
3838
}
3939

4040
.spectrum-InLineAlert-icon {
@@ -63,7 +63,7 @@ governing permissions and limitations under the License.
6363

6464
.spectrum-InLineAlert-content {
6565
display: block;
66-
margin: var(--spectrum-alert-content-margin-top) 0 0 0;
66+
margin: var(--spectrum-inlinealert-content-margin-top) 0 0 0;
6767
padding: 0;
6868

6969
font-size: 14px;

‎components/inlinealert/metadata/inlinealert.yml‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
name: In-Line in-line alert
1+
name: In-Line Alert
2+
SpectrumSiteSlug: https://spectrum.adobe.com/page/in-line-alert/
23
examples:
34
- id: inlinealert-info
45
name: Info
56
markup: |
67
<div class="spectrum-InLineAlert spectrum-InLineAlert--info">
7-
<svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
8-
<use xlink:href="#spectrum-css-icon-InfoMedium" />
8+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
9+
<use xlink:href="#spectrum-icon-18-Info" />
910
</svg>
1011
<div class="spectrum-InLineAlert-header">Information in-line alert header</div>
1112
<div class="spectrum-InLineAlert-content">This is an alert.</div>
@@ -14,8 +15,8 @@ examples:
1415
name: Success
1516
markup: |
1617
<div class="spectrum-InLineAlert spectrum-InLineAlert--success">
17-
<svg class="spectrum-Icon spectrum-UIIcon-SuccessMedium spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
18-
<use xlink:href="#spectrum-css-icon-SuccessMedium" />
18+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
19+
<use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
1920
</svg>
2021
<div class="spectrum-InLineAlert-header">Successful in-line alert header</div>
2122
<div class="spectrum-InLineAlert-content">This is an alert.</div>
@@ -24,8 +25,8 @@ examples:
2425
name: Warning
2526
markup: |
2627
<div class="spectrum-InLineAlert spectrum-InLineAlert--warning">
27-
<svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
28-
<use xlink:href="#spectrum-css-icon-AlertMedium" />
28+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
29+
<use xlink:href="#spectrum-icon-18-Alert" />
2930
</svg>
3031
<div class="spectrum-InLineAlert-header">Warning in-line alert header</div>
3132
<div class="spectrum-InLineAlert-content">This is an alert.</div>
@@ -34,8 +35,8 @@ examples:
3435
name: Help
3536
markup: |
3637
<div class="spectrum-InLineAlert spectrum-InLineAlert--help">
37-
<svg class="spectrum-Icon spectrum-UIIcon-HelpMedium spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
38-
<use xlink:href="#spectrum-css-icon-HelpMedium" />
38+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
39+
<use xlink:href="#spectrum-icon-18-Help" />
3940
</svg>
4041
<div class="spectrum-InLineAlert-header">Information in-line alert header</div>
4142
<div class="spectrum-InLineAlert-content">This is an alert.</div>
@@ -44,8 +45,8 @@ examples:
4445
name: Error
4546
markup: |
4647
<div class="spectrum-InLineAlert spectrum-InLineAlert--error">
47-
<svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
48-
<use xlink:href="#spectrum-css-icon-AlertMedium" />
48+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
49+
<use xlink:href="#spectrum-icon-18-Alert" />
4950
</svg>
5051
<div class="spectrum-InLineAlert-header">Error in-line alert - Oh no</div>
5152
<div class="spectrum-InLineAlert-content">This is an alert.</div>
@@ -56,8 +57,8 @@ examples:
5657
description: An in-line alert with a close button in the footer. Combine this strategy with any variant.
5758
markup: |
5859
<div class="spectrum-InLineAlert spectrum-InLineAlert--error">
59-
<svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
60-
<use xlink:href="#spectrum-css-icon-AlertMedium" />
60+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
61+
<use xlink:href="#spectrum-icon-18-Alert" />
6162
</svg>
6263
<div class="spectrum-InLineAlert-header">Incorrect Payment Information - Error</div>
6364
<div class="spectrum-InLineAlert-content">This is an alert.</div>

‎components/inlinealert/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@spectrum-css/inlinealert",
3-
"version": "3",
3+
"version": "1.0.0",
44
"description": "The Spectrum CSS in-line alert component",
55
"license": "Apache-2.0",
66
"main": "dist/index-vars.css",
@@ -16,14 +16,14 @@
1616
"build": "gulp"
1717
},
1818
"peerDependencies": {
19-
"@spectrum-css/icon": "^2.0.0",
20-
"@spectrum-css/vars": "^2.0.0"
19+
"@spectrum-css/icon": "^3.0.1",
20+
"@spectrum-css/vars": "^3.0.1"
2121
},
2222
"devDependencies": {
23-
"@spectrum-css/button": "^3.0.0-beta.3",
24-
"@spectrum-css/component-builder": "^1.2.0",
25-
"@spectrum-css/icon": "^2.1.1",
26-
"@spectrum-css/vars": "^2.3.0",
23+
"@spectrum-css/button": "^3.0.1",
24+
"@spectrum-css/component-builder": "^2.0.1",
25+
"@spectrum-css/icon": "^3.0.1",
26+
"@spectrum-css/vars": "^3.0.1",
2727
"gulp": "^4.0.0"
2828
},
2929
"publishConfig": {

‎components/inlinealert/skin.css‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,55 +11,55 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-InLineAlert {
14-
background-color: var(--spectrum-alert-background-color);
14+
background-color: var(--spectrum-inlinealert-background-color);
1515
/* default color set to body color, header element overwrites this */
16-
color: var(--spectrum-alert-text-color);
16+
color: var(--spectrum-inlinealert-text-color);
1717
}
1818

1919
.spectrum-InLineAlert-header {
20-
color: var(--spectrum-alert-title-text-color);
20+
color: var(--spectrum-inlinealert-title-text-color);
2121
}
2222

2323
.spectrum-InLineAlert-content {
24-
color: var(--spectrum-alert-text-color);
24+
color: var(--spectrum-inlinealert-text-color);
2525
}
2626

2727
.spectrum-InLineAlert--info {
28-
border-color: var(--spectrum-alert-info-border-color);
28+
border-color: var(--spectrum-inlinealert-info-border-color);
2929

3030
.spectrum-InLineAlert-icon {
31-
color: var(--spectrum-alert-info-icon-color);
31+
color: var(--spectrum-inlinealert-info-icon-color);
3232
}
3333
}
3434

3535
.spectrum-InLineAlert--help {
36-
border-color: var(--spectrum-alert-info-border-color);
36+
border-color: var(--spectrum-inlinealert-info-border-color);
3737

3838
.spectrum-InLineAlert-icon {
39-
color: var(--spectrum-alert-info-icon-color);
39+
color: var(--spectrum-inlinealert-info-icon-color);
4040
}
4141
}
4242

4343
.spectrum-InLineAlert--error {
44-
border-color: var(--spectrum-alert-error-border-color);
44+
border-color: var(--spectrum-inlinealert-error-border-color);
4545

4646
.spectrum-InLineAlert-icon {
47-
color: var(--spectrum-alert-error-icon-color);
47+
color: var(--spectrum-inlinealert-error-icon-color);
4848
}
4949
}
5050

5151
.spectrum-InLineAlert--success {
52-
border-color: var(--spectrum-alert-success-border-color);
52+
border-color: var(--spectrum-inlinealert-success-border-color);
5353

5454
.spectrum-InLineAlert-icon {
55-
color: var(--spectrum-alert-success-icon-color);
55+
color: var(--spectrum-inlinealert-success-icon-color);
5656
}
5757
}
5858

5959
.spectrum-InLineAlert--warning {
60-
border-color: var(--spectrum-alert-warning-border-color);
60+
border-color: var(--spectrum-inlinealert-warning-border-color);
6161

6262
.spectrum-InLineAlert-icon {
63-
color: var(--spectrum-alert-warning-icon-color);
63+
color: var(--spectrum-inlinealert-warning-icon-color);
6464
}
6565
}

0 commit comments

Comments
 (0)