@eccenca/gui-elements 23.4.1 → 23.4.2-rc.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/CHANGELOG.md +5 -0
- package/package.json +1 -1
- package/src/components/Depiction/depiction.scss +27 -13
- package/src/components/Depiction/stories/Depiction.stories.tsx +31 -17
- package/src/components/Depiction/stories/test-dimensionless.svg +41 -0
- package/src/components/Depiction/stories/test-dimensionless.tobase64.svg +41 -0
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
|
|
|
6
6
|
|
|
7
7
|
## [Unreleased]
|
|
8
8
|
|
|
9
|
+
### Fixed
|
|
10
|
+
|
|
11
|
+
- `<Depiction />`
|
|
12
|
+
- images representing SVG without `width` property on their root element are displayed with a minimal forced dimension to prevent that they are hidden in some browsers
|
|
13
|
+
|
|
9
14
|
## [23.4.1] - 2024-02-08
|
|
10
15
|
|
|
11
16
|
### Fixed
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eccenca/gui-elements",
|
|
3
3
|
"description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
|
|
4
|
-
"version": "23.4.
|
|
4
|
+
"version": "23.4.2-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://github.com/eccenca/gui-elements",
|
|
7
7
|
"bugs": "https://github.com/eccenca/gui-elements/issues",
|
|
@@ -3,16 +3,14 @@ $eccgui-size-depiction-height-small: mini-units(6) !default;
|
|
|
3
3
|
$eccgui-size-depiction-height-medium: mini-units(12) !default;
|
|
4
4
|
$eccgui-size-depiction-height-large: mini-units(24) !default;
|
|
5
5
|
$eccgui-size-depiction-height-xlarge: mini-units(48) !default;
|
|
6
|
-
|
|
7
6
|
$eccgui-color-depiction-background: $eccgui-color-workspace-text !default;
|
|
8
7
|
$eccgui-color-depiction-text: $eccgui-color-workspace-background !default;
|
|
9
8
|
$eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
10
9
|
|
|
11
|
-
|
|
12
10
|
.#{$eccgui}-depiction {
|
|
13
|
-
max-width: 100%;
|
|
14
|
-
display: inline-flex;
|
|
15
11
|
position: relative;
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
max-width: 100%;
|
|
16
14
|
|
|
17
15
|
.#{$eccgui}-overviewitem__item > & {
|
|
18
16
|
flex-grow: 0;
|
|
@@ -26,12 +24,13 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
26
24
|
}
|
|
27
25
|
|
|
28
26
|
.#{$eccgui}-depiction__image {
|
|
29
|
-
overflow: hidden;
|
|
30
27
|
max-width: 100%;
|
|
31
28
|
max-height: 100%;
|
|
29
|
+
overflow: hidden;
|
|
32
30
|
border-radius: $eccgui-size-depiction-border-radius;
|
|
33
31
|
|
|
34
|
-
img,
|
|
32
|
+
img,
|
|
33
|
+
svg {
|
|
35
34
|
width: 100%;
|
|
36
35
|
height: 100%;
|
|
37
36
|
}
|
|
@@ -57,10 +56,22 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
57
56
|
.#{$eccgui}-depiction__image--ratio-source {
|
|
58
57
|
aspect-ratio: auto;
|
|
59
58
|
|
|
60
|
-
img,
|
|
59
|
+
img,
|
|
60
|
+
svg {
|
|
61
61
|
max-width: 100%;
|
|
62
62
|
max-height: 100%;
|
|
63
63
|
}
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* SVG images without width property on their SVG root are not (specific: using a width of 0px) displayed by some browsers (e.g. Firefox or Brave).
|
|
67
|
+
* This might be technically correct but to the user it looks like a bug and is not expected by them.
|
|
68
|
+
* We workaround this "problem" by adding minimal dimensions to images with an SVG source.
|
|
69
|
+
*/
|
|
70
|
+
img[src^="data:image/svg"],
|
|
71
|
+
img[src*=".svg"] {
|
|
72
|
+
min-width: $eccgui-size-depiction-height-tiny;
|
|
73
|
+
min-height: $eccgui-size-depiction-height-tiny;
|
|
74
|
+
}
|
|
64
75
|
}
|
|
65
76
|
|
|
66
77
|
.#{$eccgui}-depiction__image--ratio-1to1 {
|
|
@@ -68,19 +79,22 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
68
79
|
}
|
|
69
80
|
|
|
70
81
|
.#{$eccgui}-depiction__image--contain-sizing {
|
|
71
|
-
img,
|
|
82
|
+
img,
|
|
83
|
+
svg {
|
|
72
84
|
object-fit: contain;
|
|
73
85
|
}
|
|
74
86
|
}
|
|
75
87
|
|
|
76
88
|
.#{$eccgui}-depiction__image--cover-sizing {
|
|
77
|
-
img,
|
|
89
|
+
img,
|
|
90
|
+
svg {
|
|
78
91
|
object-fit: cover;
|
|
79
92
|
}
|
|
80
93
|
}
|
|
81
94
|
|
|
82
95
|
.#{$eccgui}-depiction__image--stretch-sizing {
|
|
83
|
-
img,
|
|
96
|
+
img,
|
|
97
|
+
svg {
|
|
84
98
|
object-fit: fill;
|
|
85
99
|
}
|
|
86
100
|
}
|
|
@@ -153,8 +167,8 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
153
167
|
--#{$eccgui}-depiction-color: #{$eccgui-color-depiction-background};
|
|
154
168
|
}
|
|
155
169
|
.#{$eccgui}-depiction__image--color-config {
|
|
156
|
-
background: var(--#{$eccgui}-depiction-background);
|
|
157
170
|
color: var(--#{$eccgui}-depiction-color);
|
|
171
|
+
background: var(--#{$eccgui}-depiction-background);
|
|
158
172
|
|
|
159
173
|
/*
|
|
160
174
|
Lead to more problems, even with our Carbon icons, that it "heals" unknown SVGs
|
|
@@ -166,11 +180,11 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
166
180
|
}
|
|
167
181
|
|
|
168
182
|
.#{$eccgui}-depiction__image--hasborder {
|
|
169
|
-
border: 1px solid
|
|
183
|
+
border: 1px solid currentcolor;
|
|
170
184
|
}
|
|
171
185
|
|
|
172
186
|
.#{$eccgui}-depiction__caption--none,
|
|
173
|
-
|
|
187
|
+
.#{$eccgui}-depiction__caption--tooltip {
|
|
174
188
|
position: fixed;
|
|
175
189
|
left: -5000rem;
|
|
176
190
|
}
|
|
@@ -1,19 +1,25 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { ComponentStory, ComponentMeta } from "@storybook/react";
|
|
3
2
|
import { LogoReact } from "@carbon/icons-react";
|
|
3
|
+
import { Meta, StoryFn } from "@storybook/react";
|
|
4
|
+
|
|
4
5
|
import { Badge, Depiction, Icon, TestIcon } from "../../../index";
|
|
6
|
+
|
|
5
7
|
import canonicalIcons from "./../../Icon/canonicalIconNames";
|
|
6
|
-
import
|
|
8
|
+
import { Svg9to16 } from "./test-9to16";
|
|
7
9
|
import png9to16 from "./test-9to16.png";
|
|
8
|
-
import svg16to9 from "./test-16to9.svg";
|
|
9
10
|
import svg9to16 from "./test-9to16.svg";
|
|
10
|
-
import svg16to9base64 from "./test-16to9.tobase64.svg";
|
|
11
11
|
import svg9to16base64 from "./test-9to16.tobase64.svg";
|
|
12
12
|
import { Svg16to9 } from "./test-16to9";
|
|
13
|
-
import
|
|
13
|
+
import png16to9 from "./test-16to9.png";
|
|
14
|
+
import svg16to9 from "./test-16to9.svg";
|
|
15
|
+
import svg16to9base64 from "./test-16to9.tobase64.svg";
|
|
16
|
+
import svgDimensionless from "./test-dimensionless.svg";
|
|
17
|
+
import svgDimensionlessBase64 from "./test-dimensionless.tobase64.svg";
|
|
14
18
|
|
|
15
19
|
const allIcons = new Map([
|
|
16
|
-
...Object.keys(canonicalIcons).map((keyId) => {
|
|
20
|
+
...Object.keys(canonicalIcons).map((keyId) => {
|
|
21
|
+
return [`Icon: ${keyId}`, <Icon name={keyId} />];
|
|
22
|
+
}),
|
|
17
23
|
]);
|
|
18
24
|
|
|
19
25
|
const exampleImages = {
|
|
@@ -25,18 +31,28 @@ const exampleImages = {
|
|
|
25
31
|
"SVG 9:16 as Base64": <img src={svg9to16base64} />,
|
|
26
32
|
"SVG 16:9 as React element": <Svg16to9 />,
|
|
27
33
|
"SVG 9:16 as React element": <Svg9to16 />,
|
|
28
|
-
|
|
29
|
-
|
|
34
|
+
"SVG without known width/height dimensions": <img src={svgDimensionless} />,
|
|
35
|
+
"SVG without known width/height as Base64": <img src={svgDimensionlessBase64} />,
|
|
30
36
|
"Test icon": <TestIcon tryout={LogoReact} />,
|
|
31
37
|
...Object.fromEntries(allIcons),
|
|
32
38
|
};
|
|
33
39
|
|
|
34
40
|
const exampleBadges = {
|
|
35
41
|
"No badge": undefined,
|
|
36
|
-
"Text badge (small, danger, bottom-right)":
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
42
|
+
"Text badge (small, danger, bottom-right)": (
|
|
43
|
+
<Badge maxLength={5} intent="danger" position="bottom-right" size="small">
|
|
44
|
+
Problem occured!
|
|
45
|
+
</Badge>
|
|
46
|
+
),
|
|
47
|
+
"Icon badge (accent, inline, bottom-right)": (
|
|
48
|
+
<Badge intent="info" position="bottom-right">
|
|
49
|
+
<Icon name="application-useraccount" />
|
|
50
|
+
</Badge>
|
|
51
|
+
),
|
|
52
|
+
"Number badge (large, info, top-right)": (
|
|
53
|
+
<Badge maxLength={2} intent="info" position="top-right" size="large" children={123} />
|
|
54
|
+
),
|
|
55
|
+
};
|
|
40
56
|
|
|
41
57
|
export default {
|
|
42
58
|
title: "Components/Depiction",
|
|
@@ -56,14 +72,12 @@ export default {
|
|
|
56
72
|
mapping: exampleBadges,
|
|
57
73
|
},
|
|
58
74
|
},
|
|
59
|
-
} as
|
|
75
|
+
} as Meta<typeof Depiction>;
|
|
60
76
|
|
|
61
|
-
const TemplateFull:
|
|
62
|
-
<Depiction {...args} />
|
|
63
|
-
);
|
|
77
|
+
const TemplateFull: StoryFn<typeof Depiction> = (args) => <Depiction {...args} />;
|
|
64
78
|
|
|
65
79
|
export const FullExample = TemplateFull.bind({});
|
|
66
80
|
FullExample.args = {
|
|
67
81
|
image: <img src={png16to9} />,
|
|
68
|
-
caption: "This is a test description for the image."
|
|
82
|
+
caption: "This is a test description for the image.",
|
|
69
83
|
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
3
|
+
|
|
4
|
+
<svg
|
|
5
|
+
viewBox="0 0 1920 1080"
|
|
6
|
+
version="1.1"
|
|
7
|
+
id="svg3"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
xmlns:svg="http://www.w3.org/2000/svg">
|
|
10
|
+
<defs
|
|
11
|
+
id="defs3" />
|
|
12
|
+
<g
|
|
13
|
+
id="g3">
|
|
14
|
+
<path
|
|
15
|
+
id="rect1"
|
|
16
|
+
style="fill:#001155;stroke-width:10.8677;stroke-linecap:square"
|
|
17
|
+
d="M 0,0 H 1920 V 1080 H 0 Z" />
|
|
18
|
+
<path
|
|
19
|
+
id="rect2"
|
|
20
|
+
style="fill:#00092a;stroke:#0033ff;stroke-width:10;stroke-linecap:square"
|
|
21
|
+
d="m 55,55 h 1810 v 970 H 55 Z" />
|
|
22
|
+
<path
|
|
23
|
+
style="fill:none;stroke:#0033ff;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none"
|
|
24
|
+
d="m 55,55 1810,970"
|
|
25
|
+
id="path2" />
|
|
26
|
+
<path
|
|
27
|
+
style="fill:none;stroke:#0033ff;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none"
|
|
28
|
+
d="M 55,1025 1865,55"
|
|
29
|
+
id="path3" />
|
|
30
|
+
<text
|
|
31
|
+
xml:space="preserve"
|
|
32
|
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:133.333px;line-height:1.25;font-family:Roboto;-inkscape-font-specification:Roboto;fill:#ffffff"
|
|
33
|
+
x="530.28101"
|
|
34
|
+
y="589.34882"
|
|
35
|
+
id="text3"><tspan
|
|
36
|
+
x="530.28101"
|
|
37
|
+
y="589.34882"
|
|
38
|
+
id="tspan3"
|
|
39
|
+
style="fill:#ffffff">dimensionless</tspan></text>
|
|
40
|
+
</g>
|
|
41
|
+
</svg>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
3
|
+
|
|
4
|
+
<svg
|
|
5
|
+
viewBox="0 0 1920 1080"
|
|
6
|
+
version="1.1"
|
|
7
|
+
id="svg3"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
xmlns:svg="http://www.w3.org/2000/svg">
|
|
10
|
+
<defs
|
|
11
|
+
id="defs3" />
|
|
12
|
+
<g
|
|
13
|
+
id="g3">
|
|
14
|
+
<path
|
|
15
|
+
id="rect1"
|
|
16
|
+
style="fill:#001155;stroke-width:10.8677;stroke-linecap:square"
|
|
17
|
+
d="M 0,0 H 1920 V 1080 H 0 Z" />
|
|
18
|
+
<path
|
|
19
|
+
id="rect2"
|
|
20
|
+
style="fill:#00092a;stroke:#0033ff;stroke-width:10;stroke-linecap:square"
|
|
21
|
+
d="m 55,55 h 1810 v 970 H 55 Z" />
|
|
22
|
+
<path
|
|
23
|
+
style="fill:none;stroke:#0033ff;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none"
|
|
24
|
+
d="m 55,55 1810,970"
|
|
25
|
+
id="path2" />
|
|
26
|
+
<path
|
|
27
|
+
style="fill:none;stroke:#0033ff;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none"
|
|
28
|
+
d="M 55,1025 1865,55"
|
|
29
|
+
id="path3" />
|
|
30
|
+
<text
|
|
31
|
+
xml:space="preserve"
|
|
32
|
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:133.333px;line-height:1.25;font-family:Roboto;-inkscape-font-specification:Roboto;fill:#ffffff"
|
|
33
|
+
x="530.28101"
|
|
34
|
+
y="589.34882"
|
|
35
|
+
id="text3"><tspan
|
|
36
|
+
x="530.28101"
|
|
37
|
+
y="589.34882"
|
|
38
|
+
id="tspan3"
|
|
39
|
+
style="fill:#ffffff">dimensionless</tspan></text>
|
|
40
|
+
</g>
|
|
41
|
+
</svg>
|