@ebay/skin 17.0.0 → 17.1.0-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.
- package/ICON-CREATION.md +10 -0
- package/_cdn/skin/v17.1.0-0/skin-default.min.css +69 -0
- package/_cdn/skin/v17.1.0-0/skin-full.min.css +151 -0
- package/_cdn/skin/v17.1.0-0/skin-headless.min.css +6 -0
- package/dist/avatar/avatar.css +20 -16
- package/dist/breadcrumbs/breadcrumbs.css +6 -2
- package/dist/eek/eek.css +2 -2
- package/dist/field/field.css +5 -1
- package/dist/floating-label/floating-label.css +2 -2
- package/dist/icon/icon.css +1 -2
- package/dist/listbox-button/listbox-button.css +14 -5
- package/dist/progress-stepper/progress-stepper.css +8 -0
- package/dist/skeleton/skeleton.css +15 -15
- package/dist/tokens/evo-light.css +1 -0
- package/package.json +9 -6
- package/src/less/avatar/avatar.less +39 -16
- package/src/less/breadcrumbs/breadcrumbs.less +7 -2
- package/src/less/eek/eek.less +1 -1
- package/src/less/field/field.less +6 -1
- package/src/less/field/stories/stacked.stories.js +65 -5
- package/src/less/floating-label/floating-label.less +5 -2
- package/src/less/icon/icon.less +1 -2
- package/src/less/listbox-button/listbox-button.less +13 -2
- package/src/less/listbox-button/stories/base.stories.js +78 -0
- package/src/less/listbox-button/stories/error/error.base.stories.js +325 -0
- package/src/less/listbox-button/stories/error/error.cascade.stories.js +133 -0
- package/src/less/listbox-button/stories/error/error.dimensions.stories.js +43 -0
- package/src/less/listbox-button/stories/error/error.form.stories.js +97 -0
- package/src/less/progress-stepper/progress-stepper.less +15 -0
- package/src/less/progress-stepper/stories/progress-stepper.stories.js +0 -218
- package/src/less/section-notice/stories/icon-24.stories.js +4 -4
- package/src/less/skeleton/skeleton.less +14 -14
- package/src/tokens/evo-light.css +1 -0
- package/_cdn/skin/v17.0.0/skin-default.min.css +0 -69
- package/_cdn/skin/v17.0.0/skin-full.min.css +0 -151
- package/_cdn/skin/v17.0.0/skin-headless.min.css +0 -6
package/ICON-CREATION.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Skin uses the SVG tag to deliver all iconography. This guide will help you properly add or modify SVG files for the Skin library.
|
|
4
4
|
|
|
5
|
+
**Base Icons Only**
|
|
6
|
+
|
|
7
|
+
Only base icons should be used. No state-based icons, such as disabled icons or even possibly an icon relaying an error state (likely red), should be used. Those state modifications on icons should be handled downstream using `css` modifiers to allow for those variations.
|
|
8
|
+
|
|
5
9
|
## Step 1: Import the SVG
|
|
6
10
|
|
|
7
11
|
In order to import the SVG into Skin, all you need to do is drop the SVG into `src/svg/icon` directory. The icon name will be the way the icon will be imported into Skin. If the icon does not have `icon-` prefix, it will be renamed automatically to include the prefix.
|
|
@@ -36,6 +40,12 @@ If you do not want an icon to show up in the skin docs, add the name of the icon
|
|
|
36
40
|
In order to skip an icon to have it's CSS be generated add the name of the icon in `docs/_data/icons.yaml` under `skip` key. Then rerun `step 2` scripts.
|
|
37
41
|
This can be done for certain icons which might want to have different sizes than those specified in the `viewbox`
|
|
38
42
|
|
|
43
|
+
## Depcrating Icons
|
|
44
|
+
|
|
45
|
+
When an icon is removed or renamed, it will need to get deprecated. If you want to deprecate an icon, add the name of the icon in `docs/_data/icons.yaml` under `deprecated` key. Then rerun `step 2` scripts. This will show (if none existed yet) a `Deprecated` section in the docs and include the icon. This will also remove the icon from the `icon.svg` bundle and remove the CSS for the icon.
|
|
46
|
+
|
|
47
|
+
Deprecated icons are to remain until the next major version when they can be removed. After they are removed, the icon can be removed from the `deprecated` key and the `step 2` scripts can be rerun.
|
|
48
|
+
|
|
39
49
|
## Script changes
|
|
40
50
|
|
|
41
51
|
Any script changes needed should be done in `scripts/generate-images.js`.
|