@ebay/ebayui-core
Advanced tools
@ebay/ebayui-core - npm Package Compare versions
Comparing version 1.3.3 to 1.4.0-1
@@ -12,3 +12,3 @@ { | ||
| "@ebay/skin/less", | ||
| "@ebay/skin/icon" | ||
| "@ebay/skin/icon/foreground" | ||
| ] | ||
@@ -15,0 +15,0 @@ }, |
@@ -15,2 +15,3 @@ 'use strict';var _extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};var focusables = require('makeup-focusables'); | ||
| function getInitialState(input) { | ||
| var gap = parseInt(input.gap, 10); | ||
| var state = { | ||
@@ -21,3 +22,3 @@ htmlAttributes: processHtmlAttributes(input), | ||
| config: {}, // A place to store values that should not trigger an update by themselves. | ||
| gap: input.gap || 16, | ||
| gap: isNaN(gap) ? 16 : gap, | ||
| noDots: input.noDots, | ||
@@ -24,0 +25,0 @@ index: parseInt(input.index, 10) || 0, |
@@ -5,3 +5,11 @@ { | ||
| "if-not-flag": "ebayui-no-skin", | ||
| "path": "@ebay/skin/icon" | ||
| "dependencies": [ | ||
| { | ||
| "if-not-flag": "ebayui-no-bg-icons", | ||
| "path": "@ebay/skin/icon" | ||
| }, { | ||
| "if-flag": "ebayui-no-bg-icons", | ||
| "path": "@ebay/skin/icon/foreground" | ||
| } | ||
| ] | ||
| }, | ||
@@ -8,0 +16,0 @@ "require: marko-widgets", |
@@ -6,10 +6,12 @@ # ebay-icon | ||
| ```marko | ||
| <ebay-icon type="inline" name="arrow-left"/> (preferred) | ||
| <ebay-icon type="background" name="arrow-left"/> | ||
| <ebay-icon type="inline" name="arrow-left"/> | ||
| ``` | ||
| The `background` icon will set the background image to an SVG image via CSS. This is the simplest usage available. | ||
| >**Note:** If using only `inline` (foreground) SVG icons, you can avoid CSS bundle bloat by adding the `ebayui-no-bg-icons` lasso flag. This will significantly reduce your CSS footprint when working with `ebay-icon`. In v2 we will remove this flag and default to only supply the CSS for the foreground icons, with a flag for including background icon bas64 strings if needed. **Example:** `<lasso-page flags="ebayui-no-bg-icons">`. | ||
| The `inline` icon will include the actual SVG markup in the HTML and then reference that. This is useful for applying customizations (like color). Behind the scenes, we determine all inline icons that could be used at compile-time, and then include each icon stamp a single time at the top of the `<body>`. This is done by using internal marko transformers in conjunction with inspecting the Node.js `require` cache. With this methodology, icons must be included statically in order to work with the stamper. You must also use a string literal (not a variable) when passing the icon `name`. Note that the static handling is only required for at least one time for each icon included on the page, so that the stamper knows to stamp that markup. Other usage can be done dynamically. | ||
| The `inline` (foreground) icon will include the actual SVG markup in the HTML and then reference the chosen icon. This is useful for applying customizations (like color). Behind the scenes, we determine all foreground icons that could be used at compile-time, and then include each icon stamp a single time at the top of the `<body>`. This is done by using internal marko transformers in conjunction with inspecting the Node.js `require` cache. With this methodology, icons must be included statically in order to work with the stamper. You must also use a string literal (not a variable) when passing the icon `name`. The static handling is only required for at least _one time_ for each icon included on the page, so that the stamper knows to stamp that markup. Each additional use of the icon in the page can then be done dynamically. | ||
| The `background` icon will set the background image to an SVG image via CSS. This is the simplest usage available, but the tradeoff is background icons will bloat your CSS bundle with _all_ the base64 strings for _all_ available icons. Therefore we recommend using `inline` (foreground) icons whenever possible. | ||
| ```marko | ||
@@ -16,0 +18,0 @@ <!-- Good --> |
@@ -8,3 +8,3 @@ { | ||
| "@ebay/skin/utility", | ||
| "@ebay/skin/icon" | ||
| "@ebay/skin/icon/foreground" | ||
| ] | ||
@@ -11,0 +11,0 @@ }, |
@@ -7,3 +7,3 @@ { | ||
| "@ebay/skin/select", | ||
| "@ebay/skin/icon" | ||
| "@ebay/skin/icon/foreground" | ||
| ] | ||
@@ -10,0 +10,0 @@ }, |
| { | ||
| "name": "@ebay/ebayui-core", | ||
| "version": "1.3.3", | ||
| "version": "1.4.0-1", | ||
| "description": "Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.", | ||
@@ -61,3 +61,3 @@ "scripts": { | ||
| "@ebay/browserslist-config": "^1.0.0", | ||
| "@ebay/skin": "6.2.0", | ||
| "@ebay/skin": "6.3.3", | ||
| "@lasso/marko-taglib": "^1.0.9", | ||
@@ -106,3 +106,3 @@ "async": "^2.6.0", | ||
| "peerDependencies": { | ||
| "@ebay/skin": "6.2.0", | ||
| "@ebay/skin": "6.3.3", | ||
| "marko": "^3 || ^4", | ||
@@ -109,0 +109,0 @@ "marko-widgets": "^6 || ^7" |
Sorry, the diff of this file is not supported yet
New alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.15%
6037
Worsened metrics
- Total package byte prevSize
- decreased by-0.51%
1015905
- Number of package files
- decreased by-0.13%
798
- Number of low quality alerts
- increased by100%
2