@patternfly/react-icons 5.0.0-alpha.8 → 5.0.0-alpha.9
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/CHANGELOG.md +4 -0
- package/dist/esm/createIcon.d.ts +1 -11
- package/dist/esm/createIcon.d.ts.map +1 -1
- package/dist/esm/createIcon.js +2 -31
- package/dist/esm/createIcon.js.map +1 -1
- package/dist/esm/index.d.ts +0 -1
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/js/createIcon.d.ts +1 -11
- package/dist/js/createIcon.d.ts.map +1 -1
- package/dist/js/createIcon.js +3 -33
- package/dist/js/createIcon.js.map +1 -1
- package/dist/js/index.d.ts +0 -1
- package/dist/js/index.d.ts.map +1 -1
- package/dist/js/index.js +0 -3
- package/dist/js/index.js.map +1 -1
- package/package.json +2 -2
- package/src/__tests__/createIcon.test.tsx +2 -10
- package/src/createIcon.tsx +4 -39
- package/src/index.ts +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# 5.0.0-alpha.9 (2023-04-06)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-icons
|
|
9
|
+
|
|
6
10
|
# 5.0.0-alpha.8 (2023-04-03)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @patternfly/react-icons
|
package/dist/esm/createIcon.d.ts
CHANGED
|
@@ -1,11 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export declare enum IconSize {
|
|
3
|
-
sm = "sm",
|
|
4
|
-
md = "md",
|
|
5
|
-
lg = "lg",
|
|
6
|
-
xl = "xl"
|
|
7
|
-
}
|
|
8
|
-
export declare const getSize: (size: IconSize | keyof typeof IconSize) => "1em" | "1.5em" | "2em" | "3em";
|
|
9
2
|
export interface IconDefinition {
|
|
10
3
|
name?: string;
|
|
11
4
|
width: number;
|
|
@@ -14,11 +7,8 @@ export interface IconDefinition {
|
|
|
14
7
|
xOffset?: number;
|
|
15
8
|
yOffset?: number;
|
|
16
9
|
}
|
|
17
|
-
export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, '
|
|
18
|
-
color?: string;
|
|
19
|
-
size?: IconSize | keyof typeof IconSize;
|
|
10
|
+
export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
|
|
20
11
|
title?: string;
|
|
21
|
-
noVerticalAlign?: boolean;
|
|
22
12
|
}
|
|
23
13
|
/**
|
|
24
14
|
* Factory to create Icon class components for consumers
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,
|
|
1
|
+
{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAW,EACX,OAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACR,EAAE,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CA4BrD"}
|
package/dist/esm/createIcon.js
CHANGED
|
@@ -1,26 +1,5 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
export var IconSize;
|
|
4
|
-
(function (IconSize) {
|
|
5
|
-
IconSize["sm"] = "sm";
|
|
6
|
-
IconSize["md"] = "md";
|
|
7
|
-
IconSize["lg"] = "lg";
|
|
8
|
-
IconSize["xl"] = "xl";
|
|
9
|
-
})(IconSize || (IconSize = {}));
|
|
10
|
-
export const getSize = (size) => {
|
|
11
|
-
switch (size) {
|
|
12
|
-
case IconSize.sm:
|
|
13
|
-
return '1em';
|
|
14
|
-
case IconSize.md:
|
|
15
|
-
return '1.5em';
|
|
16
|
-
case IconSize.lg:
|
|
17
|
-
return '2em';
|
|
18
|
-
case IconSize.xl:
|
|
19
|
-
return '3em';
|
|
20
|
-
default:
|
|
21
|
-
return '1em';
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
3
|
let currentId = 0;
|
|
25
4
|
/**
|
|
26
5
|
* Factory to create Icon class components for consumers
|
|
@@ -33,23 +12,15 @@ export function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgP
|
|
|
33
12
|
this.id = `icon-title-${currentId++}`;
|
|
34
13
|
}
|
|
35
14
|
render() {
|
|
36
|
-
const _a = this.props, {
|
|
15
|
+
const _a = this.props, { title } = _a, props = __rest(_a, ["title"]);
|
|
37
16
|
const hasTitle = Boolean(title);
|
|
38
|
-
const heightWidth = getSize(size);
|
|
39
|
-
const baseAlign = -0.125 * Number.parseFloat(heightWidth);
|
|
40
|
-
const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
|
|
41
17
|
const viewBox = [xOffset, yOffset, width, height].join(' ');
|
|
42
|
-
return (React.createElement("svg", Object.assign({
|
|
18
|
+
return (React.createElement("svg", Object.assign({ className: "pf-svg", viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
|
|
43
19
|
hasTitle && React.createElement("title", { id: this.id }, title),
|
|
44
20
|
React.createElement("path", { d: svgPath })));
|
|
45
21
|
}
|
|
46
22
|
},
|
|
47
23
|
_a.displayName = name,
|
|
48
|
-
_a.defaultProps = {
|
|
49
|
-
color: 'currentColor',
|
|
50
|
-
size: IconSize.sm,
|
|
51
|
-
noVerticalAlign: false
|
|
52
|
-
},
|
|
53
24
|
_a;
|
|
54
25
|
}
|
|
55
26
|
//# sourceMappingURL=createIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createIcon.js","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"createIcon.js","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,IAAI,SAAS,GAAG,CAAC,CAAC;AAElB;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACQ;;IACf,YAAO,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAuB;YAAnD;;gBAGL,OAAE,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;YAuBnC,CAAC;YArBC,MAAM;gBACJ,MAAM,KAAsB,IAAI,CAAC,KAAK,EAAhC,EAAE,KAAK,OAAyB,EAApB,KAAK,cAAjB,SAAmB,CAAa,CAAC;gBAEvC,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;gBAChC,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAE5D,OAAO,CACL,2CACE,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,cAAc,qBACF,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,iBAC7B,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACnC,IAAI,EAAC,KAAK,IACL,KAAiD;oBAErD,QAAQ,IAAI,+BAAO,EAAE,EAAE,IAAI,CAAC,EAAE,IAAG,KAAK,CAAS;oBAChD,8BAAM,CAAC,EAAE,OAAO,GAAI,CAChB,CACP,CAAC;YACJ,CAAC;SACF;QAzBQ,cAAW,GAAG,IAAK;WAyB1B;AACJ,CAAC"}
|
package/dist/esm/index.d.ts
CHANGED
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
package/dist/js/createIcon.d.ts
CHANGED
|
@@ -1,11 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export declare enum IconSize {
|
|
3
|
-
sm = "sm",
|
|
4
|
-
md = "md",
|
|
5
|
-
lg = "lg",
|
|
6
|
-
xl = "xl"
|
|
7
|
-
}
|
|
8
|
-
export declare const getSize: (size: IconSize | keyof typeof IconSize) => "1em" | "1.5em" | "2em" | "3em";
|
|
9
2
|
export interface IconDefinition {
|
|
10
3
|
name?: string;
|
|
11
4
|
width: number;
|
|
@@ -14,11 +7,8 @@ export interface IconDefinition {
|
|
|
14
7
|
xOffset?: number;
|
|
15
8
|
yOffset?: number;
|
|
16
9
|
}
|
|
17
|
-
export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, '
|
|
18
|
-
color?: string;
|
|
19
|
-
size?: IconSize | keyof typeof IconSize;
|
|
10
|
+
export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
|
|
20
11
|
title?: string;
|
|
21
|
-
noVerticalAlign?: boolean;
|
|
22
12
|
}
|
|
23
13
|
/**
|
|
24
14
|
* Factory to create Icon class components for consumers
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,
|
|
1
|
+
{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAW,EACX,OAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACR,EAAE,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CA4BrD"}
|
package/dist/js/createIcon.js
CHANGED
|
@@ -1,30 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.createIcon =
|
|
3
|
+
exports.createIcon = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const React = tslib_1.__importStar(require("react"));
|
|
6
|
-
var IconSize;
|
|
7
|
-
(function (IconSize) {
|
|
8
|
-
IconSize["sm"] = "sm";
|
|
9
|
-
IconSize["md"] = "md";
|
|
10
|
-
IconSize["lg"] = "lg";
|
|
11
|
-
IconSize["xl"] = "xl";
|
|
12
|
-
})(IconSize = exports.IconSize || (exports.IconSize = {}));
|
|
13
|
-
const getSize = (size) => {
|
|
14
|
-
switch (size) {
|
|
15
|
-
case IconSize.sm:
|
|
16
|
-
return '1em';
|
|
17
|
-
case IconSize.md:
|
|
18
|
-
return '1.5em';
|
|
19
|
-
case IconSize.lg:
|
|
20
|
-
return '2em';
|
|
21
|
-
case IconSize.xl:
|
|
22
|
-
return '3em';
|
|
23
|
-
default:
|
|
24
|
-
return '1em';
|
|
25
|
-
}
|
|
26
|
-
};
|
|
27
|
-
exports.getSize = getSize;
|
|
28
6
|
let currentId = 0;
|
|
29
7
|
/**
|
|
30
8
|
* Factory to create Icon class components for consumers
|
|
@@ -37,23 +15,15 @@ function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath })
|
|
|
37
15
|
this.id = `icon-title-${currentId++}`;
|
|
38
16
|
}
|
|
39
17
|
render() {
|
|
40
|
-
const _a = this.props, {
|
|
18
|
+
const _a = this.props, { title } = _a, props = tslib_1.__rest(_a, ["title"]);
|
|
41
19
|
const hasTitle = Boolean(title);
|
|
42
|
-
const heightWidth = (0, exports.getSize)(size);
|
|
43
|
-
const baseAlign = -0.125 * Number.parseFloat(heightWidth);
|
|
44
|
-
const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
|
|
45
20
|
const viewBox = [xOffset, yOffset, width, height].join(' ');
|
|
46
|
-
return (React.createElement("svg", Object.assign({
|
|
21
|
+
return (React.createElement("svg", Object.assign({ className: "pf-svg", viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
|
|
47
22
|
hasTitle && React.createElement("title", { id: this.id }, title),
|
|
48
23
|
React.createElement("path", { d: svgPath })));
|
|
49
24
|
}
|
|
50
25
|
},
|
|
51
26
|
_a.displayName = name,
|
|
52
|
-
_a.defaultProps = {
|
|
53
|
-
color: 'currentColor',
|
|
54
|
-
size: IconSize.sm,
|
|
55
|
-
noVerticalAlign: false
|
|
56
|
-
},
|
|
57
27
|
_a;
|
|
58
28
|
}
|
|
59
29
|
exports.createIcon = createIcon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createIcon.js","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;
|
|
1
|
+
{"version":3,"file":"createIcon.js","sourceRoot":"","sources":["../../src/createIcon.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAe/B,IAAI,SAAS,GAAG,CAAC,CAAC;AAElB;;GAEG;AACH,SAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACQ;;IACf,YAAO,MAAM,OAAQ,SAAQ,KAAK,CAAC,SAAuB;YAAnD;;gBAGL,OAAE,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;YAuBnC,CAAC;YArBC,MAAM;gBACJ,MAAM,KAAsB,IAAI,CAAC,KAAK,EAAhC,EAAE,KAAK,OAAyB,EAApB,KAAK,sBAAjB,SAAmB,CAAa,CAAC;gBAEvC,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;gBAChC,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAE5D,OAAO,CACL,2CACE,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,cAAc,qBACF,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,iBAC7B,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACnC,IAAI,EAAC,KAAK,IACL,KAAiD;oBAErD,QAAQ,IAAI,+BAAO,EAAE,EAAE,IAAI,CAAC,EAAE,IAAG,KAAK,CAAS;oBAChD,8BAAM,CAAC,EAAE,OAAO,GAAI,CAChB,CACP,CAAC;YACJ,CAAC;SACF;QAzBQ,cAAW,GAAG,IAAK;WAyB1B;AACJ,CAAC;AAnCD,gCAmCC"}
|
package/dist/js/index.d.ts
CHANGED
package/dist/js/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
package/dist/js/index.js
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.IconSize = void 0;
|
|
4
3
|
const tslib_1 = require("tslib");
|
|
5
|
-
var createIcon_1 = require("./createIcon");
|
|
6
|
-
Object.defineProperty(exports, "IconSize", { enumerable: true, get: function () { return createIcon_1.IconSize; } });
|
|
7
4
|
tslib_1.__exportStar(require("./icons/index"), exports);
|
|
8
5
|
//# sourceMappingURL=index.js.map
|
package/dist/js/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,wDAA8B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-icons",
|
|
3
|
-
"version": "5.0.0-alpha.
|
|
3
|
+
"version": "5.0.0-alpha.9",
|
|
4
4
|
"description": "PatternFly 4 Icons as React Components",
|
|
5
5
|
"main": "dist/js/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"react": "^17 || ^18",
|
|
44
44
|
"react-dom": "^17 || ^18"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "fc36268d68c08a19ef06a3b0a555d21c8ab98b6c"
|
|
47
47
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { render, screen } from '@testing-library/react';
|
|
3
|
-
import { createIcon
|
|
3
|
+
import { createIcon } from '../createIcon';
|
|
4
4
|
|
|
5
5
|
const iconDef = {
|
|
6
6
|
name: 'IconName',
|
|
@@ -28,14 +28,6 @@ test('sets correct svgPath', () => {
|
|
|
28
28
|
).toHaveAttribute('d', iconDef.svgPath);
|
|
29
29
|
});
|
|
30
30
|
|
|
31
|
-
test('height and width are set from size', () => {
|
|
32
|
-
render(<SVGIcon size={IconSize.sm} />);
|
|
33
|
-
|
|
34
|
-
const svg = screen.getByRole('img', { hidden: true });
|
|
35
|
-
expect(svg).toHaveAttribute('width', '1em');
|
|
36
|
-
expect(svg).toHaveAttribute('height', '1em');
|
|
37
|
-
});
|
|
38
|
-
|
|
39
31
|
test('aria-hidden is true if no title is specified', () => {
|
|
40
32
|
render(<SVGIcon />);
|
|
41
33
|
expect(screen.getByRole('img', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
|
|
@@ -63,7 +55,7 @@ test('aria-labelledby matches title id', () => {
|
|
|
63
55
|
|
|
64
56
|
const svg = screen.getByRole('img', { hidden: true });
|
|
65
57
|
const labelledby = svg.getAttribute('aria-labelledby');
|
|
66
|
-
const titleId = svg.querySelector('title')
|
|
58
|
+
const titleId = svg.querySelector('title')?.getAttribute('id');
|
|
67
59
|
|
|
68
60
|
expect(labelledby).toEqual(titleId);
|
|
69
61
|
});
|
package/src/createIcon.tsx
CHANGED
|
@@ -1,27 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
export enum IconSize {
|
|
4
|
-
sm = 'sm',
|
|
5
|
-
md = 'md',
|
|
6
|
-
lg = 'lg',
|
|
7
|
-
xl = 'xl'
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const getSize = (size: IconSize | keyof typeof IconSize) => {
|
|
11
|
-
switch (size) {
|
|
12
|
-
case IconSize.sm:
|
|
13
|
-
return '1em';
|
|
14
|
-
case IconSize.md:
|
|
15
|
-
return '1.5em';
|
|
16
|
-
case IconSize.lg:
|
|
17
|
-
return '2em';
|
|
18
|
-
case IconSize.xl:
|
|
19
|
-
return '3em';
|
|
20
|
-
default:
|
|
21
|
-
return '1em';
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
|
|
25
3
|
export interface IconDefinition {
|
|
26
4
|
name?: string;
|
|
27
5
|
width: number;
|
|
@@ -31,11 +9,8 @@ export interface IconDefinition {
|
|
|
31
9
|
yOffset?: number;
|
|
32
10
|
}
|
|
33
11
|
|
|
34
|
-
export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, '
|
|
35
|
-
color?: string;
|
|
36
|
-
size?: IconSize | keyof typeof IconSize;
|
|
12
|
+
export interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
|
|
37
13
|
title?: string;
|
|
38
|
-
noVerticalAlign?: boolean;
|
|
39
14
|
}
|
|
40
15
|
|
|
41
16
|
let currentId = 0;
|
|
@@ -53,30 +28,20 @@ export function createIcon({
|
|
|
53
28
|
}: IconDefinition): React.ComponentClass<SVGIconProps> {
|
|
54
29
|
return class SVGIcon extends React.Component<SVGIconProps> {
|
|
55
30
|
static displayName = name;
|
|
56
|
-
static defaultProps = {
|
|
57
|
-
color: 'currentColor',
|
|
58
|
-
size: IconSize.sm,
|
|
59
|
-
noVerticalAlign: false
|
|
60
|
-
};
|
|
61
31
|
|
|
62
32
|
id = `icon-title-${currentId++}`;
|
|
63
33
|
|
|
64
34
|
render() {
|
|
65
|
-
const {
|
|
35
|
+
const { title, ...props } = this.props;
|
|
66
36
|
|
|
67
37
|
const hasTitle = Boolean(title);
|
|
68
|
-
const heightWidth = getSize(size);
|
|
69
|
-
const baseAlign = -0.125 * Number.parseFloat(heightWidth);
|
|
70
|
-
const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
|
|
71
38
|
const viewBox = [xOffset, yOffset, width, height].join(' ');
|
|
72
39
|
|
|
73
40
|
return (
|
|
74
41
|
<svg
|
|
75
|
-
|
|
76
|
-
fill={color}
|
|
77
|
-
height={heightWidth}
|
|
78
|
-
width={heightWidth}
|
|
42
|
+
className="pf-svg"
|
|
79
43
|
viewBox={viewBox}
|
|
44
|
+
fill="currentColor"
|
|
80
45
|
aria-labelledby={hasTitle ? this.id : null}
|
|
81
46
|
aria-hidden={hasTitle ? null : true}
|
|
82
47
|
role="img"
|
package/src/index.ts
CHANGED