@spectrum-web-components/icon 1.3.0-testing.0 → 1.3.1-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +16 -65
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- ## Description
1
+ ## Overview
2
2
 
3
3
  `<sp-icon>` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `<sp-icon>` will subsequently check for its `src` attribute which could populate the icon via an image, and then fallback to any slotted content for an element based icon.
4
4
 
@@ -23,20 +23,20 @@ When looking to leverage the `Icon` base class as a type and/or for extension pu
23
23
  import { Icon } from '@spectrum-web-components/icon';
24
24
  ```
25
25
 
26
- ## Example
26
+ ### Example
27
27
 
28
- Names icons on this page are provided by the [`<sp-icons-medium>` icon set](components/icons). Learn how to create your own via [`sp-iconset`](components/iconset).
28
+ Names of the icons on this page are provided by the [`<sp-icons-medium>` icon set](components/icons). Learn how to create your own via [`sp-iconset`](components/iconset).
29
29
 
30
30
  ```html
31
31
  <sp-icons-medium></sp-icons-medium>
32
32
  <sp-icon name="ui:Arrow100"></sp-icon>
33
33
  ```
34
34
 
35
- ## Variants
35
+ ### Options
36
36
 
37
- Icons are available in various sizes in Spectrum ranging from `s` to `xxl`. By default an `sp-icon` without a `size` attribute will appear as if it were `size="m"`. We can specify the size via `size` attribute.
37
+ #### Sizes
38
38
 
39
- ### Size variants
39
+ Icons are available in various sizes in Spectrum ranging from `s` to `xxl`. By default an `sp-icon` without a `size` attribute will appear as if it were `size="m"`. We can specify the size via `size` attribute.
40
40
 
41
41
  ```html
42
42
  <sp-icon size="s" name="ui:Arrow100"></sp-icon>
@@ -46,66 +46,30 @@ Icons are available in various sizes in Spectrum ranging from `s` to `xxl`. By d
46
46
  <sp-icon size="xxl" name="ui:Arrow100"></sp-icon>
47
47
  ```
48
48
 
49
- ## Color icon
49
+ #### Icon colors
50
50
 
51
- Icons apply their color as `currentColor` so change the `color` property of the element for customization.
51
+ Icons apply their color as `currentColor`, so change the `color` property of the element for customization.
52
52
 
53
53
  ```html
54
54
  <sp-icon name="ui:Arrow100" style="color: red;"></sp-icon>
55
55
  ```
56
56
 
57
- ## Image icon
57
+ #### Image icon
58
58
 
59
- An image icon can be supplied via the `src` attribute. Remember that you cannot style the contents of an image via CSS, so use graphics that are appropriately prepared for including in your applications design requirements.
59
+ An image icon can be supplied via the `src` attribute. Remember that you cannot style the contents of an image via CSS, so use graphics that are appropriate for your application's design requirements.
60
60
 
61
61
  ```html
62
62
  <sp-icon
63
- size="s"
64
- label="Previous"
65
- src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
66
- ></sp-icon>
67
- <sp-icon
68
- size="m"
69
- label="Previous"
70
- src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
71
- ></sp-icon>
72
- <sp-icon
73
- size="l"
74
- label="Previous"
75
- src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
76
- ></sp-icon>
77
- <sp-icon
78
- size="xl"
79
- label="Previous"
80
- src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
81
- ></sp-icon>
82
- <sp-icon
83
- size="xxl"
84
63
  label="Previous"
85
64
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
86
65
  ></sp-icon>
87
66
  ```
88
67
 
89
- ## Element icon
68
+ #### HTML/SVG Element icon
90
69
 
91
- Icons can also be supplied as HTML elements to be applied via the default `<slot>`.
70
+ Icons can also be supplied via HTML elements and are applied via the default `<slot>`.
92
71
 
93
72
  ```html
94
- <sp-icon size="s">
95
- <svg
96
- xmlns="http://www.w3.org/2000/svg"
97
- viewBox="0 0 22 22"
98
- role="img"
99
- fill="currentColor"
100
- height="18"
101
- width="18"
102
- aria-hidden="true"
103
- >
104
- <path
105
- d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
106
- ></path>
107
- </svg>
108
- </sp-icon>
109
73
  <sp-icon>
110
74
  <svg
111
75
  xmlns="http://www.w3.org/2000/svg"
@@ -121,26 +85,13 @@ Icons can also be supplied as HTML elements to be applied via the default `<slot
121
85
  ></path>
122
86
  </svg>
123
87
  </sp-icon>
124
- <sp-icon size="xxl">
125
- <svg
126
- xmlns="http://www.w3.org/2000/svg"
127
- viewBox="0 0 22 22"
128
- role="img"
129
- fill="currentColor"
130
- height="18"
131
- width="18"
132
- aria-hidden="true"
133
- >
134
- <path
135
- d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
136
- ></path>
137
- </svg>
138
- </sp-icon>
139
88
  ```
140
89
 
141
- ## Accessibility
90
+ ### Accessibility
91
+
92
+ If no meaning is lost by visually hiding an icon, it is considered decorative. Decorative icons should not have a label and should be hidden from assistive technology. `aria-hidden` is set to true by default for icons.
142
93
 
143
- `aria-hidden` is set to true by default for Icons. The `label` attribute suppresses this and adds the label text as the aria-label of the icon.
94
+ If an icon does add meaning, a label is required. Use the `label` attribute to set the label's text as the `aria-label` of the icon and remove the `aria-hidden` attribute.
144
95
 
145
96
  ```html
146
97
  <sp-icon name="ui:Arrow100" label="Arrow pointing to the right"></sp-icon>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/icon",
3
- "version": "1.3.0-testing.0",
3
+ "version": "1.3.1-beta.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -81,8 +81,8 @@
81
81
  "lit-html"
82
82
  ],
83
83
  "dependencies": {
84
- "@spectrum-web-components/base": "^1.3.0-testing.0",
85
- "@spectrum-web-components/iconset": "^1.3.0-testing.0"
84
+ "@spectrum-web-components/base": "1.3.1-beta.0",
85
+ "@spectrum-web-components/iconset": "1.3.1-beta.0"
86
86
  },
87
87
  "devDependencies": {
88
88
  "@spectrum-css/icon": "8.0.0-s2-foundations.19"