Skip to content

Commit

Permalink
fix(ebay-icon): bugfixes for icons (#2216)
Browse files Browse the repository at this point in the history
  • Loading branch information
@agliga
agliga authored Jul 12, 2024
1 parent 9ee7232 commit ef45eef
Show file tree
Hide file tree
Showing 19 changed files with 57 additions and 53 deletions.
5 changes: 5 additions & 0 deletions .changeset/pink-pans-applaud.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@ebay/ebayui-core": patch
---

icon: fixed legacy program badge, added color to filled icons, fixed fit icons
20 changes: 10 additions & 10 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
"@commitlint/cli": "^19",
"@commitlint/config-conventional": "^19",
"@ebay/browserslist-config": "^2.9.0",
"@ebay/skin": "~18.0.0",
"@ebay/skin": "~18.0.5",
"@google/model-viewer": "3.5.0",
"@lasso/marko-taglib": "^2.0.6",
"@marko/compiler": "^5.37.4",
Expand Down Expand Up @@ -146,7 +146,7 @@
"wdio-chromedriver-service": "^8"
},
"peerDependencies": {
"@ebay/skin": "~18.0.0",
"@ebay/skin": "~18.0.5",
"marko": ">= ^4.27.0 || >= ^5.31.12"
},
"dependencies": {
Expand Down
14 changes: 13 additions & 1 deletion scripts/import-svg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,18 @@ const iconSizes = [
"24-colored",
"30-colored",
"32-colored",
"48-colored",
"64-colored",
];
const sizeMatcher = new RegExp(`-(${iconSizes.join("|")})$`);

const skipExamples = [
"star-dynamic",
"eek-arrow",
"eek-range-arrow",
"avatar-signed-out",
];

const sizeMatcher = new RegExp(`-(${iconSizes.join("|")})(?:-fit)?$`);

const htmlMinifierOptions = {
keepClosingSlash: true,
Expand Down Expand Up @@ -220,6 +229,9 @@ function generateExamples(type, iconMap) {
const file = fs.readFileSync(exampleFile, "utf-8");
const exampleHTML = [];
for (const name of iconMap) {
if (skipExamples.indexOf(name) > -1) {
continue;
}
const postfixName = type === "icon" ? "-icon" : "";
const iconName = `ebay-${name}${postfixName}`;
exampleHTML.push(` div
Expand Down
24 changes: 0 additions & 24 deletions src/components/ebay-icon/examples/all.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,12 +354,6 @@ div.icon-examples
span.text
-- ebay-auto-adjust-24-icon

div
span.icon
ebay-avatar-signed-out-icon
span.text
-- ebay-avatar-signed-out-icon

div
span.icon
ebay-background-removal-24-icon
Expand Down Expand Up @@ -1308,18 +1302,6 @@ div.icon-examples
span.text
-- ebay-ebay-refurbished-24-icon

div
span.icon
ebay-eek-arrow-icon
span.text
-- ebay-eek-arrow-icon

div
span.icon
ebay-eek-range-arrow-icon
span.text
-- ebay-eek-range-arrow-icon

div
span.icon
ebay-escrow-16-icon
Expand Down Expand Up @@ -3636,12 +3618,6 @@ div.icon-examples
span.text
-- ebay-split-view-filled-24-icon

div
span.icon
ebay-star-dynamic-icon
span.text
-- ebay-star-dynamic-icon

div
span.icon
ebay-star-empty-16-icon
Expand Down
2 changes: 1 addition & 1 deletion ...components/ebay-icon/icons/ebay-legacy-authenticity-guarantee-48-colored-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { symbol } from "./symbol";

import type { Input as IconInput } from "../../component-browser"
export type Input = Omit<IconInput, `_${string}`>;
<ebay-icon ...input _name="legacy-authenticity-guarantee-48-colored" _size="" _type="icon" _themes=symbol/>
<ebay-icon ...input _name="legacy-authenticity-guarantee-48-colored" _size="48-colored" _type="icon" _themes=symbol/>
2 changes: 1 addition & 1 deletion src/components/ebay-icon/icons/ebay-legacy-click-to-call-48-colored-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { symbol } from "./symbol";

import type { Input as IconInput } from "../../component-browser"
export type Input = Omit<IconInput, `_${string}`>;
<ebay-icon ...input _name="legacy-click-to-call-48-colored" _size="" _type="icon" _themes=symbol/>
<ebay-icon ...input _name="legacy-click-to-call-48-colored" _size="48-colored" _type="icon" _themes=symbol/>
2 changes: 1 addition & 1 deletion src/components/ebay-icon/icons/ebay-legacy-escrow-48-colored-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { symbol } from "./symbol";

import type { Input as IconInput } from "../../component-browser"
export type Input = Omit<IconInput, `_${string}`>;
<ebay-icon ...input _name="legacy-escrow-48-colored" _size="" _type="icon" _themes=symbol/>
<ebay-icon ...input _name="legacy-escrow-48-colored" _size="48-colored" _type="icon" _themes=symbol/>
2 changes: 1 addition & 1 deletion src/components/ebay-icon/icons/ebay-legacy-free-warranty-48-colored-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { symbol } from "./symbol";

import type { Input as IconInput } from "../../component-browser"
export type Input = Omit<IconInput, `_${string}`>;
<ebay-icon ...input _name="legacy-free-warranty-48-colored" _size="" _type="icon" _themes=symbol/>
<ebay-icon ...input _name="legacy-free-warranty-48-colored" _size="48-colored" _type="icon" _themes=symbol/>
2 changes: 1 addition & 1 deletion ...mponents/ebay-icon/icons/ebay-legacy-money-back-guarantee-chf-48-colored-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { symbol } from "./symbol";

import type { Input as IconInput } from "../../component-browser"
export type Input = Omit<IconInput, `_${string}`>;
<ebay-icon ...input _name="legacy-money-back-guarantee-chf-48-colored" _size="" _type="icon" _themes=symbol/>
<ebay-icon ...input _name="legacy-money-back-guarantee-chf-48-colored" _size="48-colored" _type="icon" _themes=symbol/>
2 changes: 1 addition & 1 deletion ...omponents/ebay-icon/icons/ebay-legacy-money-back-guarantee-eu-48-colored-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { symbol } from "./symbol";

import type { Input as IconInput } from "../../component-browser"
export type Input = Omit<IconInput, `_${string}`>;
<ebay-icon ...input _name="legacy-money-back-guarantee-eu-48-colored" _size="" _type="icon" _themes=symbol/>
<ebay-icon ...input _name="legacy-money-back-guarantee-eu-48-colored" _size="48-colored" _type="icon" _themes=symbol/>
2 changes: 1 addition & 1 deletion ...omponents/ebay-icon/icons/ebay-legacy-money-back-guarantee-uk-48-colored-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { symbol } from "./symbol";

import type { Input as IconInput } from "../../component-browser"
export type Input = Omit<IconInput, `_${string}`>;
<ebay-icon ...input _name="legacy-money-back-guarantee-uk-48-colored" _size="" _type="icon" _themes=symbol/>
<ebay-icon ...input _name="legacy-money-back-guarantee-uk-48-colored" _size="48-colored" _type="icon" _themes=symbol/>
2 changes: 1 addition & 1 deletion ...omponents/ebay-icon/icons/ebay-legacy-money-back-guarantee-us-48-colored-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { symbol } from "./symbol";

import type { Input as IconInput } from "../../component-browser"
export type Input = Omit<IconInput, `_${string}`>;
<ebay-icon ...input _name="legacy-money-back-guarantee-us-48-colored" _size="" _type="icon" _themes=symbol/>
<ebay-icon ...input _name="legacy-money-back-guarantee-us-48-colored" _size="48-colored" _type="icon" _themes=symbol/>
2 changes: 1 addition & 1 deletion ...omponents/ebay-icon/icons/ebay-legacy-money-back-guarantee-zl-48-colored-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { symbol } from "./symbol";

import type { Input as IconInput } from "../../component-browser"
export type Input = Omit<IconInput, `_${string}`>;
<ebay-icon ...input _name="legacy-money-back-guarantee-zl-48-colored" _size="" _type="icon" _themes=symbol/>
<ebay-icon ...input _name="legacy-money-back-guarantee-zl-48-colored" _size="48-colored" _type="icon" _themes=symbol/>
2 changes: 1 addition & 1 deletion src/components/ebay-icon/icons/ebay-legacy-top-rated-seller-48-colored-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { symbol } from "./symbol";

import type { Input as IconInput } from "../../component-browser"
export type Input = Omit<IconInput, `_${string}`>;
<ebay-icon ...input _name="legacy-top-rated-seller-48-colored" _size="" _type="icon" _themes=symbol/>
<ebay-icon ...input _name="legacy-top-rated-seller-48-colored" _size="48-colored" _type="icon" _themes=symbol/>
2 changes: 1 addition & 1 deletion src/components/ebay-icon/icons/ebay-trend-down-16-fit-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { symbol } from "./symbol";

import type { Input as IconInput } from "../../component-browser"
export type Input = Omit<IconInput, `_${string}`>;
<ebay-icon ...input _name="trend-down-16-fit" _size="" _type="icon" _themes=symbol/>
<ebay-icon ...input _name="trend-down-16-fit" _size="16" _type="icon" _themes=symbol/>
2 changes: 1 addition & 1 deletion src/components/ebay-icon/icons/ebay-trend-up-16-fit-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ import { symbol } from "./symbol";

import type { Input as IconInput } from "../../component-browser"
export type Input = Omit<IconInput, `_${string}`>;
<ebay-icon ...input _name="trend-up-16-fit" _size="" _type="icon" _themes=symbol/>
<ebay-icon ...input _name="trend-up-16-fit" _size="16" _type="icon" _themes=symbol/>
17 changes: 14 additions & 3 deletions src/components/ebay-icon/index.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,24 @@ $ const {
} = input;
$ (input as any).toJSON = noop;
static function getIconClass(type: string, name: string, size?: string) {
var colorMap:{[index: string]: string} = {
"confirmation-filled-16": "confirmation-filled",
"confirmation-filled-24": "confirmation-filled",
"incormation-filled-16": "incormation-filled",
"incormation-filled-24": "incormation-filled",
"attention-filled-16": "attention-filled",
"attention-filled-24": "attention-filled",
};
var extraClass = !!colorMap[name] ? ` icon--${colorMap[name]}` : "";
if (size) {
return `icon icon--${size}`;
return `icon icon--${size}${extraClass}`;
} else if (type === "icon") {
return `icon icon--${name}`;
return `icon icon--${name}${extraClass}`;
} else {
var dashedName = name.replace(type, `${type}-`);
return `${type} ${dashedName}`;
return `${type} ${dashedName}${extraClass}`;
}
}
$ var noTitle = a11yVariant === "label";
Expand Down
2 changes: 1 addition & 1 deletion src/components/ebay-listbox-button/test/__snapshots__/renders-with-error.expected.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@
>
<svg
aria-hidden="true"
class="icon icon--16"
class="icon icon--16 icon--attention-filled"
data-marko-key="@svg s0-3-0"
focusable="false"
>
Expand Down

0 comments on commit ef45eef

Please sign in to comment.