@porsche-design-system/components-react 3.0.0-alpha.0 → 3.0.0-alpha.1
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 +18 -1
- package/bin/patchRemixRunProcessBrowserGlobalIdentifier.js +58 -0
- package/lib/types.d.ts +19 -1
- package/package.json +6 -3
- package/ssr/components/dist/styles/esm/styles-entry.js +85 -110
- package/ssr/components/dist/utils/esm/utils-entry.js +25 -26
- package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.js +1 -1
- package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.js +1 -1
- package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.js +2 -2
- package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.js +1 -1
- package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.js +1 -1
- package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.js +1 -1
- package/ssr/esm/components/dist/styles/esm/styles-entry.js +85 -110
- package/ssr/esm/components/dist/utils/esm/utils-entry.js +25 -26
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.js +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.js +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.js +2 -2
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.js +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.js +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.js +1 -1
- package/ssr/lib/types.d.ts +19 -1
package/CHANGELOG.md
CHANGED
|
@@ -9,6 +9,22 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
|
9
9
|
|
|
10
10
|
### [Unreleased]
|
|
11
11
|
|
|
12
|
+
### [3.0.0-alpha.1] - 2023-02-16
|
|
13
|
+
|
|
14
|
+
#### Added
|
|
15
|
+
|
|
16
|
+
- Porsche Next font supports Vietnamese charset
|
|
17
|
+
- Prop `color` of `Icon` supports `disabled`
|
|
18
|
+
- React: `patchRemixRunProcessBrowserGlobalIdentifier` binary to support SSR components with Remix
|
|
19
|
+
|
|
20
|
+
#### Changed
|
|
21
|
+
|
|
22
|
+
- `Stepper Horizontal` matches new design language.
|
|
23
|
+
- Styles: Optimize design tokens "spacing", "typography" and "theme" provided by styles sub-package
|
|
24
|
+
`@porsche-design-system/components-{js|angular|react|vue}/styles`
|
|
25
|
+
- Styles: Use calc() instead of max() to calculate padding for `gridStyle` (JS) and `pds-grid` (SCSS)
|
|
26
|
+
- Styles: `gridStyle` (JS) and `pds-grid` (SCSS) uses optimized grid gap
|
|
27
|
+
|
|
12
28
|
### [3.0.0-alpha.0] - 2023-02-08
|
|
13
29
|
|
|
14
30
|
#### Note to the new `v3` major release of the Porsche Design System
|
|
@@ -394,7 +410,8 @@ to the new values since those ones will be removed with next major version.
|
|
|
394
410
|
- `Spinner`, `Icon`, `Link Pure`, `Button Pure`, `Link`, `Link Social`, `Button`, `Checkbox Wrapper`,
|
|
395
411
|
`Radio Button Wrapper`, `Popover`, `Modal`, `Select Wrapper`, `Tag`, `Tag Dismissible`, `Textarea Wrapper`,
|
|
396
412
|
`Inline Notification`, `Banner`, `Toast`, `Grid`, `Flex`, `Pagination`, `Scroller`, `Accordion`, `Text`,
|
|
397
|
-
`Text Field Wrapper`, `Content Wrapper`, `Segmented Control`, `Tabs`, `Tabs Bar`, `Headline` and `Fieldset Wrapper`
|
|
413
|
+
`Text Field Wrapper`, `Content Wrapper`, `Segmented Control`, `Tabs`, `Tabs Bar`, `Headline` and `Fieldset Wrapper`
|
|
414
|
+
matches new design language.
|
|
398
415
|
- `Icon` supports
|
|
399
416
|
`primary | contrast-low | contrast-medium | contrast-high | notification-success | notification-warning | notification-error | notification-info | inherit`
|
|
400
417
|
for `color` prop.
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var path = require('path');
|
|
5
|
+
var fs = require('fs');
|
|
6
|
+
|
|
7
|
+
function _interopNamespaceDefault(e) {
|
|
8
|
+
var n = Object.create(null);
|
|
9
|
+
if (e) {
|
|
10
|
+
Object.keys(e).forEach(function (k) {
|
|
11
|
+
if (k !== 'default') {
|
|
12
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
13
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () { return e[k]; }
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
n.default = e;
|
|
21
|
+
return Object.freeze(n);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
|
|
25
|
+
var fs__namespace = /*#__PURE__*/_interopNamespaceDefault(fs);
|
|
26
|
+
|
|
27
|
+
const patchRemixRunProcessBrowserGlobalIdentifier = () => {
|
|
28
|
+
const packageEntry = require.resolve('@remix-run/dev');
|
|
29
|
+
const compilerDirPath = path__namespace.resolve(packageEntry, '../compiler');
|
|
30
|
+
const [fileName] = fs__namespace
|
|
31
|
+
.readdirSync(compilerDirPath)
|
|
32
|
+
// file is currently called compileBrowser.js, but the other part is compilerServer.js
|
|
33
|
+
// that's why we also consider compilerBrowser.js to be on the safe side
|
|
34
|
+
.filter((fileName) => fileName.match(/^compiler?Browser\.js$/));
|
|
35
|
+
const filePath = path__namespace.resolve(compilerDirPath, fileName);
|
|
36
|
+
const filePathBackup = filePath.replace(/\.js$/, '-original$&');
|
|
37
|
+
if (!fs__namespace.existsSync(filePathBackup)) {
|
|
38
|
+
fs__namespace.copyFileSync(filePath, filePathBackup);
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
fs__namespace.copyFileSync(filePathBackup, filePath);
|
|
42
|
+
}
|
|
43
|
+
const fileContent = fs__namespace.readFileSync(filePath, 'utf8');
|
|
44
|
+
// prepending should be safer than appending because JSON.stringify() might be multiline like in source
|
|
45
|
+
// https://github.com/remix-run/remix/blob/05ffb6e2db8f2a0e09caffad6e9b3c897c34cb7d/packages/remix-dev/compiler/compileBrowser.ts#L159-L163
|
|
46
|
+
const newFileContent = fileContent.replace(/"process\.env\.REMIX_DEV_SERVER_WS_PORT": JSON\.stringify\(.*/, '"process.browser": "true",\n $&');
|
|
47
|
+
const prettyFilePath = filePath.replace(packageEntry.substring(0, packageEntry.indexOf('/node_modules')), '.');
|
|
48
|
+
if (newFileContent.includes('"process.browser": "true"')) {
|
|
49
|
+
console.log(`Successfully patched ${prettyFilePath}`);
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
console.error(`Patching ${prettyFilePath} failed`);
|
|
53
|
+
}
|
|
54
|
+
fs__namespace.writeFileSync(filePath, newFileContent);
|
|
55
|
+
};
|
|
56
|
+
patchRemixRunProcessBrowserGlobalIdentifier();
|
|
57
|
+
|
|
58
|
+
exports.patchRemixRunProcessBrowserGlobalIdentifier = patchRemixRunProcessBrowserGlobalIdentifier;
|
package/lib/types.d.ts
CHANGED
|
@@ -757,7 +757,25 @@ declare const ICON_ARIA_ATTRIBUTES: readonly [
|
|
|
757
757
|
];
|
|
758
758
|
export declare type IconAriaAttribute = typeof ICON_ARIA_ATTRIBUTES[number];
|
|
759
759
|
export declare type IconSize = TextSize;
|
|
760
|
-
|
|
760
|
+
declare const ICON_COLORS: readonly [
|
|
761
|
+
"primary",
|
|
762
|
+
"brand",
|
|
763
|
+
"default",
|
|
764
|
+
"contrast-low",
|
|
765
|
+
"neutral-contrast-low",
|
|
766
|
+
"contrast-medium",
|
|
767
|
+
"neutral-contrast-medium",
|
|
768
|
+
"contrast-high",
|
|
769
|
+
"neutral-contrast-high",
|
|
770
|
+
"notification-success",
|
|
771
|
+
"notification-warning",
|
|
772
|
+
"notification-error",
|
|
773
|
+
"notification-info",
|
|
774
|
+
"notification-neutral",
|
|
775
|
+
"inherit",
|
|
776
|
+
"disabled"
|
|
777
|
+
];
|
|
778
|
+
export declare type IconColor = typeof ICON_COLORS[number];
|
|
761
779
|
declare const INLINE_NOTIFICATION_STATES: readonly [
|
|
762
780
|
"error",
|
|
763
781
|
"warning",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@porsche-design-system/components-react",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.1",
|
|
4
4
|
"description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"porsche",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"license": "SEE LICENSE IN LICENSE",
|
|
18
18
|
"homepage": "https://designsystem.porsche.com",
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@porsche-design-system/components-js": "3.0.0-alpha.
|
|
20
|
+
"@porsche-design-system/components-js": "3.0.0-alpha.1"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"react": ">=17.0.0 <19.0.0",
|
|
@@ -25,5 +25,8 @@
|
|
|
25
25
|
},
|
|
26
26
|
"main": "public-api.js",
|
|
27
27
|
"module": "esm/public-api.js",
|
|
28
|
-
"types": "public-api.d.ts"
|
|
28
|
+
"types": "public-api.d.ts",
|
|
29
|
+
"bin": {
|
|
30
|
+
"patchRemixRunProcessBrowserGlobalIdentifier": "./bin/patchRemixRunProcessBrowserGlobalIdentifier.js"
|
|
31
|
+
}
|
|
29
32
|
}
|
|
@@ -60,15 +60,15 @@ const fontHyphenationStyle = {
|
|
|
60
60
|
|
|
61
61
|
const fontLineHeight = 'calc(6px + 2.125ex)';
|
|
62
62
|
|
|
63
|
-
const fontSizeTextXSmall = '.
|
|
63
|
+
const fontSizeTextXSmall = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
|
|
64
64
|
|
|
65
65
|
const fontSizeTextSmall = '1rem';
|
|
66
66
|
|
|
67
|
-
const fontSizeTextMedium = 'clamp(1.
|
|
67
|
+
const fontSizeTextMedium = 'clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem)';
|
|
68
68
|
|
|
69
|
-
const fontSizeTextLarge = 'clamp(1.
|
|
69
|
+
const fontSizeTextLarge = 'clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem)';
|
|
70
70
|
|
|
71
|
-
const fontSizeTextXLarge = 'clamp(1.
|
|
71
|
+
const fontSizeTextXLarge = 'clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem)';
|
|
72
72
|
|
|
73
73
|
const fontSizeText = {
|
|
74
74
|
xSmall: fontSizeTextXSmall,
|
|
@@ -86,13 +86,13 @@ const fontSizeHeadingLarge = fontSizeTextLarge;
|
|
|
86
86
|
|
|
87
87
|
const fontSizeHeadingXLarge = fontSizeTextXLarge;
|
|
88
88
|
|
|
89
|
-
const fontSizeHeadingXXLarge = 'clamp(
|
|
89
|
+
const fontSizeHeadingXXLarge = 'clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem)';
|
|
90
90
|
|
|
91
|
-
const fontSizeHeadingXXXLarge = 'clamp(
|
|
91
|
+
const fontSizeHeadingXXXLarge = 'clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem)';
|
|
92
92
|
|
|
93
|
-
const fontSizeDisplayMedium = 'clamp(2.
|
|
93
|
+
const fontSizeDisplayMedium = 'clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem)';
|
|
94
94
|
|
|
95
|
-
const fontSizeDisplayLarge = 'clamp(2.
|
|
95
|
+
const fontSizeDisplayLarge = 'clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)';
|
|
96
96
|
|
|
97
97
|
const fontWeightRegular = 400;
|
|
98
98
|
|
|
@@ -146,7 +146,9 @@ function getMediaQueryMin(min) {
|
|
|
146
146
|
return `@media(min-width:${breakpoint[min]})`;
|
|
147
147
|
}
|
|
148
148
|
|
|
149
|
-
const
|
|
149
|
+
const spacingFluidMedium = 'clamp(16px, 1.25vw + 12px, 36px)';
|
|
150
|
+
|
|
151
|
+
const gridGap = spacingFluidMedium;
|
|
150
152
|
|
|
151
153
|
const gridWidthMin = '320px';
|
|
152
154
|
|
|
@@ -181,43 +183,40 @@ const _cssVariableGridBasicSpanOneHalf = '--pds-grid-basic-span-one-half';
|
|
|
181
183
|
const _cssVariableGridBasicSpanOneThird = '--pds-grid-basic-span-one-third';
|
|
182
184
|
const _cssVariableGridBasicSpanTwoThirds = '--pds-grid-basic-span-two-thirds';
|
|
183
185
|
const _cssVariableGridNarrowSpanOneHalf = '--pds-grid-narrow-span-one-half';
|
|
186
|
+
const _cssVariableGridSafeZone = '--pds-internal-grid-safe-zone';
|
|
184
187
|
|
|
185
|
-
const
|
|
186
|
-
const
|
|
187
|
-
const getColumns = (repeat) => `repeat(${repeat},
|
|
188
|
-
const
|
|
188
|
+
const outerColumn = `minmax(0, calc(var(${_cssVariableGridSafeZone}) - ${gridGap}))`;
|
|
189
|
+
const column = 'minmax(0, 1fr)';
|
|
190
|
+
const getColumns = (repeat) => (repeat > 1 ? `repeat(${repeat}, ${column})` : column);
|
|
191
|
+
const getColumnSpan = (span) => `span ${span}`;
|
|
189
192
|
const getGridTemplateColumns = (layout) => layout === 'mobile'
|
|
190
|
-
? `[${gridFullColumnStart}] ${
|
|
191
|
-
: `[${gridFullColumnStart}] ${
|
|
193
|
+
? `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart} ${gridBasicColumnStart} ${gridNarrowColumnStart}] ${getColumns(6)} [${gridNarrowColumnEnd} ${gridBasicColumnEnd} ${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`
|
|
194
|
+
: `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart}] ${getColumns(1)} [${gridBasicColumnStart}] ${getColumns(2)} [${gridNarrowColumnStart}] ${getColumns(8)} [${gridNarrowColumnEnd}] ${getColumns(2)} [${gridBasicColumnEnd}] ${getColumns(1)} [${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`;
|
|
192
195
|
({
|
|
193
|
-
[
|
|
194
|
-
[_cssVariableGridExtendedSpanOneHalf]:
|
|
195
|
-
[_cssVariableGridBasicSpanOneHalf]:
|
|
196
|
-
[_cssVariableGridBasicSpanOneThird]:
|
|
197
|
-
[_cssVariableGridBasicSpanTwoThirds]:
|
|
198
|
-
[_cssVariableGridNarrowSpanOneHalf]:
|
|
196
|
+
[_cssVariableGridSafeZone]: gridSafeZoneBase,
|
|
197
|
+
[_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(3),
|
|
198
|
+
[_cssVariableGridBasicSpanOneHalf]: getColumnSpan(3),
|
|
199
|
+
[_cssVariableGridBasicSpanOneThird]: getColumnSpan(2),
|
|
200
|
+
[_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(4),
|
|
201
|
+
[_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(3),
|
|
199
202
|
display: 'grid',
|
|
200
203
|
gridGap,
|
|
201
204
|
gridTemplateColumns: getGridTemplateColumns('mobile'),
|
|
202
205
|
minWidth: gridWidthMin,
|
|
203
206
|
maxWidth: gridWidthMax,
|
|
204
207
|
margin: 0,
|
|
205
|
-
padding: `0
|
|
208
|
+
padding: `0 calc(50% - ${gridWidthMax} / 2)`,
|
|
206
209
|
boxSizing: 'content-box',
|
|
207
210
|
[getMediaQueryMin('s')]: {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
[
|
|
213
|
-
[_cssVariableGridBasicSpanOneHalf]: `${_gridColumnSpan} 6`,
|
|
214
|
-
[_cssVariableGridBasicSpanOneThird]: `${_gridColumnSpan} 4`,
|
|
215
|
-
[_cssVariableGridBasicSpanTwoThirds]: `${_gridColumnSpan} 8`,
|
|
216
|
-
[_cssVariableGridNarrowSpanOneHalf]: `${_gridColumnSpan} 4`,
|
|
211
|
+
[_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(7),
|
|
212
|
+
[_cssVariableGridBasicSpanOneHalf]: getColumnSpan(6),
|
|
213
|
+
[_cssVariableGridBasicSpanOneThird]: getColumnSpan(4),
|
|
214
|
+
[_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(8),
|
|
215
|
+
[_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(4),
|
|
217
216
|
gridTemplateColumns: getGridTemplateColumns('desktop'),
|
|
218
217
|
},
|
|
219
218
|
[getMediaQueryMin('xxl')]: {
|
|
220
|
-
[
|
|
219
|
+
[_cssVariableGridSafeZone]: gridSafeZoneXXL,
|
|
221
220
|
},
|
|
222
221
|
});
|
|
223
222
|
|
|
@@ -237,6 +236,8 @@ const spacingStaticMedium = '16px';
|
|
|
237
236
|
|
|
238
237
|
const spacingStaticLarge = '32px';
|
|
239
238
|
|
|
239
|
+
const spacingFluidXSmall = 'clamp(4px, 0.25vw + 3px, 8px)';
|
|
240
|
+
|
|
240
241
|
const themeDarkBackgroundShading = 'rgba(1, 2, 5, 0.67)';
|
|
241
242
|
|
|
242
243
|
const _displayFontPartA = `${fontStyleItalic} ${fontVariant} ${fontWeightSemiBold$1} `;
|
|
@@ -3739,7 +3740,7 @@ const themeDark = {
|
|
|
3739
3740
|
hoverColor: 'rgba(126, 127, 130, 0.20)',
|
|
3740
3741
|
hoverColorDarken: '#606163',
|
|
3741
3742
|
activeColor: 'rgba(126, 127, 130, 0.20)',
|
|
3742
|
-
focusColor: '#
|
|
3743
|
+
focusColor: '#1E5BEB',
|
|
3743
3744
|
disabledColor: '#7E7F82',
|
|
3744
3745
|
errorColor: '#CB3333',
|
|
3745
3746
|
errorColorDarken: '#9A2727',
|
|
@@ -6619,7 +6620,6 @@ const sizeMap$3 = {
|
|
|
6619
6620
|
'x-large': fontSizeTextXLarge,
|
|
6620
6621
|
};
|
|
6621
6622
|
// TODO, use Tuple to reduce chunk size
|
|
6622
|
-
// TODO: shall icon component support 'disabled' color too? For e.g. button-pure disabled state?
|
|
6623
6623
|
const filterLightPrimary = 'invert(3%) sepia(7%) saturate(2930%) hue-rotate(188deg) brightness(91%) contrast(103%)';
|
|
6624
6624
|
const filterLightContrastLow = 'invert(93%) sepia(11%) saturate(36%) hue-rotate(201deg) brightness(89%) contrast(102%)';
|
|
6625
6625
|
const filterLightContrastMedium = 'invert(65%) sepia(6%) saturate(119%) hue-rotate(187deg) brightness(90%) contrast(92%)';
|
|
@@ -6641,6 +6641,7 @@ const filter = {
|
|
|
6641
6641
|
primary: filterLightPrimary,
|
|
6642
6642
|
brand: filterLightPrimary,
|
|
6643
6643
|
default: filterLightPrimary,
|
|
6644
|
+
disabled: filterLightContrastMedium,
|
|
6644
6645
|
'contrast-low': filterLightContrastLow,
|
|
6645
6646
|
'neutral-contrast-low': filterLightContrastLow,
|
|
6646
6647
|
'contrast-medium': filterLightContrastMedium,
|
|
@@ -6657,6 +6658,7 @@ const filter = {
|
|
|
6657
6658
|
primary: filterDarkPrimary,
|
|
6658
6659
|
brand: filterDarkPrimary,
|
|
6659
6660
|
default: filterDarkPrimary,
|
|
6661
|
+
disabled: filterDarkContrastMedium,
|
|
6660
6662
|
'contrast-low': filterDarkContrastLow,
|
|
6661
6663
|
'neutral-contrast-low': filterDarkContrastLow,
|
|
6662
6664
|
'contrast-medium': filterDarkContrastMedium,
|
|
@@ -7338,7 +7340,7 @@ const getComponentCss$r = (gradientColorTheme, isNextHidden, isPrevHidden, scrol
|
|
|
7338
7340
|
const ITEM_PADDING = '17px';
|
|
7339
7341
|
const ICON_SIZE = pxToRemWithUnit(24);
|
|
7340
7342
|
const ICON_MARGIN = pxToRemWithUnit(4);
|
|
7341
|
-
const getColors$
|
|
7343
|
+
const getColors$2 = (isDisabled, isSelected, theme) => {
|
|
7342
7344
|
const { primaryColor, contrastMediumColor, disabledColor, contrastLowColor } = getThemedColors(theme);
|
|
7343
7345
|
return {
|
|
7344
7346
|
buttonColor: isDisabled ? disabledColor : primaryColor,
|
|
@@ -7349,7 +7351,7 @@ const getColors$3 = (isDisabled, isSelected, theme) => {
|
|
|
7349
7351
|
};
|
|
7350
7352
|
const getComponentCss$q = (isDisabled, isSelected, hasIcon, theme) => {
|
|
7351
7353
|
const { focusColor } = getThemedColors(theme);
|
|
7352
|
-
const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$
|
|
7354
|
+
const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
|
|
7353
7355
|
return getCss({
|
|
7354
7356
|
'@global': {
|
|
7355
7357
|
':host': addImportantToEachRule(Object.assign({ display: 'block', outline: 0 }, hostHiddenStyles)),
|
|
@@ -7526,90 +7528,63 @@ const getComponentCss$m = (size, theme) => {
|
|
|
7526
7528
|
});
|
|
7527
7529
|
};
|
|
7528
7530
|
|
|
7529
|
-
|
|
7530
|
-
//
|
|
7531
|
-
|
|
7532
|
-
const
|
|
7533
|
-
const
|
|
7534
|
-
const
|
|
7535
|
-
|
|
7536
|
-
|
|
7537
|
-
|
|
7538
|
-
|
|
7539
|
-
|
|
7540
|
-
|
|
7541
|
-
|
|
7542
|
-
|
|
7543
|
-
|
|
7544
|
-
|
|
7545
|
-
|
|
7531
|
+
const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
|
|
7532
|
+
// # of the hexcolor starts a fragment identifier in URLs, so we have to replace it with the escaped value of # = %23
|
|
7533
|
+
numberedCircleColors = Object.entries(numberedCircleColors).reduce((result, [key, value]) => (Object.assign(Object.assign({}, result), { [key]: value.replace(/#/g, '%23') })), {});
|
|
7534
|
+
const { disabledColor, invertedBaseColor, primaryColor } = numberedCircleColors;
|
|
7535
|
+
const fillColor = isStateCurrent ? invertedBaseColor : disabledColor;
|
|
7536
|
+
const svgCirclePath = `<circle fill="${isStateCurrent ? primaryColor : 'none'}"${isStateCurrent ? '' : ` stroke="${fillColor}"`} stroke-width="1px" cx="12" cy="12" r="9"/>`;
|
|
7537
|
+
// Full SVG is provided by design (./numbers_raw.svg), created with illustrator and optimized with ImageOptim.
|
|
7538
|
+
// The optimized file can be found in ./numbers_optim.svg.
|
|
7539
|
+
const svgNumberedCirclePaths = [
|
|
7540
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m12.33 8.67-2.43.91v-.94l2.6-1.03h.85v8.78h-1.02z"/>`,
|
|
7541
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m9.46 15.58c0-1.35.73-2.07 1.7-2.72l.95-.63c.78-.52 1.57-1.05 1.57-2.24 0-1.12-.62-1.58-1.7-1.58s-1.68.48-1.78 1.97h-.96c.06-1.82.78-2.91 2.74-2.91s2.72.92 2.72 2.52-.92 2.23-1.79 2.8l-.95.63c-1.11.75-1.52 1.18-1.52 2.01v.16h4.17v.81h-5.15v-.81z"/>`,
|
|
7542
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m10.1 13.73c.1 1.43.63 2 1.92 2 1.2 0 1.8-.49 1.8-1.68 0-1.08-.51-1.66-1.8-1.66h-.89v-.9h.83c1.12 0 1.66-.56 1.66-1.53 0-1.08-.64-1.55-1.73-1.55s-1.69.49-1.79 1.97h-.97c.1-1.79.84-2.91 2.76-2.91s2.74.92 2.74 2.49c0 .79-.38 1.54-1.16 1.9.84.28 1.36.92 1.36 2.19 0 1.54-.97 2.49-2.81 2.49-1.96 0-2.8-.9-2.88-2.81z"/>`,
|
|
7543
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m8.87 13.6 3.54-5.99h1.43v5.89h1.25v.86h-1.25v2.02h-.99v-2.02h-3.98zm3.98-.1v-4.98l-2.91 4.98z"/>`,
|
|
7544
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m9.34 12.45.42-4.83h4.71v.94h-3.9l-.26 2.95c.38-.43 1-.68 1.79-.68 1.86 0 2.76.9 2.76 2.81 0 2.06-1.03 2.91-2.86 2.91s-2.74-.84-2.81-2.51h.97c.06 1.13.57 1.7 1.84 1.7 1.39 0 1.85-.68 1.85-2.06s-.48-2-1.85-2c-1.07 0-1.54.42-1.75 1.17h-.91v-.39z"/>`,
|
|
7545
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m9.97 11.02 2.22-3.4h1.1l-2.27 3.44c.33-.16.69-.23 1.1-.23 1.84 0 2.76.9 2.76 2.81 0 2.06-1.04 2.91-2.86 2.91s-2.87-.85-2.87-2.91c0-1.08.3-1.8.83-2.61zm2.05 4.71c1.38 0 1.84-.68 1.84-2.05s-.47-2.01-1.84-2.01-1.85.64-1.85 2.01.46 2.05 1.85 2.05z"/>`,
|
|
7546
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m9.21 7.61h5.57v.74l-3.58 8.04h-1.05l3.54-7.84h-4.49v-.94z"/>`,
|
|
7547
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m10.47 11.94c-.65-.33-1.13-.92-1.13-2.01 0-1.53.85-2.47 2.66-2.47s2.66.94 2.66 2.47c0 1.08-.47 1.68-1.15 2.01.92.35 1.34 1.07 1.34 2.11 0 1.73-.99 2.49-2.86 2.49s-2.86-.76-2.86-2.49c0-1.04.41-1.76 1.33-2.11zm1.53 3.78c1.27 0 1.85-.51 1.85-1.69 0-1.1-.58-1.61-1.85-1.61s-1.85.52-1.85 1.61c0 1.18.58 1.69 1.85 1.69zm1.65-5.76c0-1.1-.56-1.56-1.65-1.56s-1.65.47-1.65 1.56c0 1 .46 1.6 1.65 1.6s1.65-.6 1.65-1.6z"/>`,
|
|
7548
|
+
`${svgCirclePath}<path fill="${fillColor}" d="m9.16 10.33c0-2.03 1.02-2.86 2.83-2.86s2.82.81 2.82 2.85c0 1.11-.3 1.82-.81 2.64l-2.18 3.44h-1.1l2.18-3.37c-.31.14-.65.2-1.01.2-1.82 0-2.74-.99-2.74-2.9zm4.65 0c0-1.23-.47-1.92-1.81-1.92s-1.81.69-1.81 1.92c0 1.37.49 2.05 1.81 2.05s1.81-.68 1.81-2.05z"/>`,
|
|
7549
|
+
];
|
|
7550
|
+
return svgNumberedCirclePaths[stepCount];
|
|
7546
7551
|
};
|
|
7547
|
-
// following constants are defined in em to ensure proportional size based on parents font size
|
|
7548
|
-
// TODO: to be sure counter sizing and positioning is in sync with icon, then we need to use a svg instead
|
|
7549
|
-
// TODO: simplify calculation of positioning by using css grid and/or svg
|
|
7550
|
-
const spriteStepSize = 0.625; // 10px / font size in px
|
|
7551
|
-
const spriteWidth = `${9 * spriteStepSize}em`; // 9 steps
|
|
7552
|
-
const spriteHeight = `${spriteStepSize}em`; // height of sprite / font size in px
|
|
7553
|
-
const counterCirclePosition = '0.171875em'; // 2.75px
|
|
7554
|
-
const counterCircleSize = `calc(${fontLineHeight} - ${counterCirclePosition} * 2)`;
|
|
7555
|
-
const counterValuePosition = `calc((${fontLineHeight} - ${spriteStepSize}em) / 2)`;
|
|
7556
|
-
const counterValueSize = spriteHeight;
|
|
7557
7552
|
const getComponentCss$l = (state, disabled, theme) => {
|
|
7558
|
-
const { primaryColor, hoverColor,
|
|
7559
|
-
const
|
|
7553
|
+
const { primaryColor, hoverColor, disabledColor, focusColor } = getThemedColors(theme);
|
|
7554
|
+
const isStateCurrent = state === 'current';
|
|
7555
|
+
const isStateCurrentOrUndefined = !state || isStateCurrent;
|
|
7560
7556
|
const isDisabled = !state || disabled;
|
|
7561
7557
|
return getCss(Object.assign(Object.assign({ '@global': {
|
|
7562
7558
|
':host': Object.assign(Object.assign({}, (isStateCurrentOrUndefined &&
|
|
7563
|
-
Array.from(Array(9)).reduce((result, _, i) => (Object.assign(Object.assign({}, result), { [`&(:nth-of-type(${i + 1})) $button::
|
|
7564
|
-
|
|
7559
|
+
Array.from(Array(9)).reduce((result, _, i) => (Object.assign(Object.assign({}, result), { [`&(:nth-of-type(${i + 1})) $button::before`]: {
|
|
7560
|
+
backgroundImage: getInlineSVGBackgroundImage(getSVGPath(i, {
|
|
7561
|
+
primaryColor,
|
|
7562
|
+
invertedBaseColor: getInvertedThemedColors(theme).primaryColor,
|
|
7563
|
+
disabledColor,
|
|
7564
|
+
}, isStateCurrent)),
|
|
7565
7565
|
} })), {}))), addImportantToEachRule(Object.assign(Object.assign({ fontSize: 'inherit' }, hostHiddenStyles), { '&(:not(:last-of-type))': {
|
|
7566
|
-
|
|
7566
|
+
margin: `0 ${spacingFluidXSmall} 0 0`,
|
|
7567
7567
|
} }))),
|
|
7568
|
-
button: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'relative', color: isDisabled ? disabledColor : primaryColor,
|
|
7569
|
-
|
|
7570
|
-
|
|
7571
|
-
|
|
7572
|
-
|
|
7573
|
-
|
|
7574
|
-
|
|
7575
|
-
|
|
7576
|
-
|
|
7577
|
-
|
|
7578
|
-
|
|
7579
|
-
|
|
7580
|
-
|
|
7581
|
-
|
|
7582
|
-
|
|
7583
|
-
'&::after': {
|
|
7584
|
-
// value of counter element
|
|
7585
|
-
content: '""',
|
|
7586
|
-
position: 'absolute',
|
|
7587
|
-
top: '50%',
|
|
7588
|
-
transform: 'translateY(-50%)',
|
|
7589
|
-
left: counterValuePosition,
|
|
7590
|
-
width: counterValueSize,
|
|
7591
|
-
height: counterValueSize,
|
|
7592
|
-
background: `${getSvg(isDisabled ? disabledColor : invertedBaseColor)} 0 50% / ${spriteWidth} ${spriteHeight} no-repeat`,
|
|
7593
|
-
},
|
|
7594
|
-
}
|
|
7595
|
-
: // other icons via icon component
|
|
7596
|
-
isDisabled
|
|
7597
|
-
? {
|
|
7598
|
-
cursor: 'not-allowed',
|
|
7599
|
-
textDecoration: 'none',
|
|
7600
|
-
}
|
|
7601
|
-
: Object.assign({ cursor: 'pointer', textDecoration: 'underline' }, hoverMediaQuery(Object.assign(Object.assign({}, getHoverJssStyle()), { '&:hover .icon': {
|
|
7602
|
-
color: hoverColor,
|
|
7603
|
-
} }))))),
|
|
7568
|
+
button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', gap: '3px', color: isDisabled ? disabledColor : primaryColor, padding: '4px 10px 4px 6px', background: 0, border: 0, outline: 0 }, textSmallStyle), { fontSize: 'inherit', width: 'max-content', cursor: isDisabled ? 'not-allowed' : 'pointer', borderRadius: borderRadiusSmall }), (isStateCurrent && Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }))), (!isDisabled &&
|
|
7569
|
+
hoverMediaQuery({
|
|
7570
|
+
transition: getTransition('background-color'),
|
|
7571
|
+
'&:hover': Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }),
|
|
7572
|
+
}))), (isStateCurrentOrUndefined && {
|
|
7573
|
+
// counter
|
|
7574
|
+
// Pseudo element is needed to center the counter to the text, as it is not working optimal directly on the button
|
|
7575
|
+
'&::before': {
|
|
7576
|
+
content: '""',
|
|
7577
|
+
height: fontLineHeight,
|
|
7578
|
+
width: fontLineHeight,
|
|
7579
|
+
},
|
|
7580
|
+
})), { '&:focus::after': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(0)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusSmall }), '&:focus:not(:focus-visible)::after': {
|
|
7581
|
+
borderColor: 'transparent',
|
|
7582
|
+
} }),
|
|
7604
7583
|
} }, (!isStateCurrentOrUndefined && {
|
|
7605
|
-
//
|
|
7584
|
+
// complete / warning icons via icon component
|
|
7606
7585
|
icon: {
|
|
7607
|
-
position: 'absolute',
|
|
7608
|
-
left: 0,
|
|
7609
7586
|
height: fontLineHeight,
|
|
7610
7587
|
width: fontLineHeight,
|
|
7611
|
-
color: isDisabled ? disabledColor : iconColor,
|
|
7612
|
-
transition: getTransition('color'),
|
|
7613
7588
|
},
|
|
7614
7589
|
})), { 'sr-only': getScreenReaderOnlyJssStyle() }));
|
|
7615
7590
|
};
|
|
@@ -7619,7 +7594,7 @@ const getComponentCss$k = (size) => {
|
|
|
7619
7594
|
'@global': {
|
|
7620
7595
|
':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
|
|
7621
7596
|
},
|
|
7622
|
-
scroller: Object.assign(Object.assign({
|
|
7597
|
+
scroller: Object.assign(Object.assign({}, textSmallStyle), buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText[s] }))),
|
|
7623
7598
|
});
|
|
7624
7599
|
};
|
|
7625
7600
|
|
|
@@ -93,7 +93,7 @@ const fontHyphenationStyle = {
|
|
|
93
93
|
|
|
94
94
|
const fontLineHeight = 'calc(6px + 2.125ex)';
|
|
95
95
|
|
|
96
|
-
const fontSizeTextXSmall = '.
|
|
96
|
+
const fontSizeTextXSmall = 'clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)';
|
|
97
97
|
|
|
98
98
|
const fontSizeTextSmall = '1rem';
|
|
99
99
|
|
|
@@ -131,7 +131,9 @@ function getMediaQueryMin(min) {
|
|
|
131
131
|
return `@media(min-width:${breakpoint[min]})`;
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
const
|
|
134
|
+
const spacingFluidMedium = 'clamp(16px, 1.25vw + 12px, 36px)';
|
|
135
|
+
|
|
136
|
+
const gridGap = spacingFluidMedium;
|
|
135
137
|
|
|
136
138
|
const gridWidthMin = '320px';
|
|
137
139
|
|
|
@@ -166,43 +168,40 @@ const _cssVariableGridBasicSpanOneHalf = '--pds-grid-basic-span-one-half';
|
|
|
166
168
|
const _cssVariableGridBasicSpanOneThird = '--pds-grid-basic-span-one-third';
|
|
167
169
|
const _cssVariableGridBasicSpanTwoThirds = '--pds-grid-basic-span-two-thirds';
|
|
168
170
|
const _cssVariableGridNarrowSpanOneHalf = '--pds-grid-narrow-span-one-half';
|
|
171
|
+
const _cssVariableGridSafeZone = '--pds-internal-grid-safe-zone';
|
|
169
172
|
|
|
170
|
-
const
|
|
171
|
-
const
|
|
172
|
-
const getColumns = (repeat) => `repeat(${repeat},
|
|
173
|
-
const
|
|
173
|
+
const outerColumn = `minmax(0, calc(var(${_cssVariableGridSafeZone}) - ${gridGap}))`;
|
|
174
|
+
const column = 'minmax(0, 1fr)';
|
|
175
|
+
const getColumns = (repeat) => (repeat > 1 ? `repeat(${repeat}, ${column})` : column);
|
|
176
|
+
const getColumnSpan = (span) => `span ${span}`;
|
|
174
177
|
const getGridTemplateColumns = (layout) => layout === 'mobile'
|
|
175
|
-
? `[${gridFullColumnStart}] ${
|
|
176
|
-
: `[${gridFullColumnStart}] ${
|
|
178
|
+
? `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart} ${gridBasicColumnStart} ${gridNarrowColumnStart}] ${getColumns(6)} [${gridNarrowColumnEnd} ${gridBasicColumnEnd} ${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`
|
|
179
|
+
: `[${gridFullColumnStart}] ${outerColumn} [${gridExtendedColumnStart}] ${getColumns(1)} [${gridBasicColumnStart}] ${getColumns(2)} [${gridNarrowColumnStart}] ${getColumns(8)} [${gridNarrowColumnEnd}] ${getColumns(2)} [${gridBasicColumnEnd}] ${getColumns(1)} [${gridExtendedColumnEnd}] ${outerColumn} [${gridFullColumnEnd}]`;
|
|
177
180
|
({
|
|
178
|
-
[
|
|
179
|
-
[_cssVariableGridExtendedSpanOneHalf]:
|
|
180
|
-
[_cssVariableGridBasicSpanOneHalf]:
|
|
181
|
-
[_cssVariableGridBasicSpanOneThird]:
|
|
182
|
-
[_cssVariableGridBasicSpanTwoThirds]:
|
|
183
|
-
[_cssVariableGridNarrowSpanOneHalf]:
|
|
181
|
+
[_cssVariableGridSafeZone]: gridSafeZoneBase,
|
|
182
|
+
[_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(3),
|
|
183
|
+
[_cssVariableGridBasicSpanOneHalf]: getColumnSpan(3),
|
|
184
|
+
[_cssVariableGridBasicSpanOneThird]: getColumnSpan(2),
|
|
185
|
+
[_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(4),
|
|
186
|
+
[_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(3),
|
|
184
187
|
display: 'grid',
|
|
185
188
|
gridGap,
|
|
186
189
|
gridTemplateColumns: getGridTemplateColumns('mobile'),
|
|
187
190
|
minWidth: gridWidthMin,
|
|
188
191
|
maxWidth: gridWidthMax,
|
|
189
192
|
margin: 0,
|
|
190
|
-
padding: `0
|
|
193
|
+
padding: `0 calc(50% - ${gridWidthMax} / 2)`,
|
|
191
194
|
boxSizing: 'content-box',
|
|
192
195
|
[getMediaQueryMin('s')]: {
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
[
|
|
198
|
-
[_cssVariableGridBasicSpanOneHalf]: `${_gridColumnSpan} 6`,
|
|
199
|
-
[_cssVariableGridBasicSpanOneThird]: `${_gridColumnSpan} 4`,
|
|
200
|
-
[_cssVariableGridBasicSpanTwoThirds]: `${_gridColumnSpan} 8`,
|
|
201
|
-
[_cssVariableGridNarrowSpanOneHalf]: `${_gridColumnSpan} 4`,
|
|
196
|
+
[_cssVariableGridExtendedSpanOneHalf]: getColumnSpan(7),
|
|
197
|
+
[_cssVariableGridBasicSpanOneHalf]: getColumnSpan(6),
|
|
198
|
+
[_cssVariableGridBasicSpanOneThird]: getColumnSpan(4),
|
|
199
|
+
[_cssVariableGridBasicSpanTwoThirds]: getColumnSpan(8),
|
|
200
|
+
[_cssVariableGridNarrowSpanOneHalf]: getColumnSpan(4),
|
|
202
201
|
gridTemplateColumns: getGridTemplateColumns('desktop'),
|
|
203
202
|
},
|
|
204
203
|
[getMediaQueryMin('xxl')]: {
|
|
205
|
-
[
|
|
204
|
+
[_cssVariableGridSafeZone]: gridSafeZoneXXL,
|
|
206
205
|
},
|
|
207
206
|
});
|
|
208
207
|
|
|
@@ -3679,7 +3678,7 @@ const themeDark = {
|
|
|
3679
3678
|
hoverColor: 'rgba(126, 127, 130, 0.20)',
|
|
3680
3679
|
hoverColorDarken: '#606163',
|
|
3681
3680
|
activeColor: 'rgba(126, 127, 130, 0.20)',
|
|
3682
|
-
focusColor: '#
|
|
3681
|
+
focusColor: '#1E5BEB',
|
|
3683
3682
|
disabledColor: '#7E7F82',
|
|
3684
3683
|
errorColor: '#CB3333',
|
|
3685
3684
|
errorColorDarken: '#9A2727',
|
package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.js
CHANGED
|
@@ -76,7 +76,7 @@ class DSRButtonPure extends react.Component {
|
|
|
76
76
|
theme: this.props.theme,
|
|
77
77
|
};
|
|
78
78
|
const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonPureCss(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.theme)));
|
|
79
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { ...utilsEntry.getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading ? (jsxRuntime.jsx(spinner_wrapper.PSpinner, { aria: { 'aria-label': 'Loading state' }, ...iconProps })) : (hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? '
|
|
79
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { ...utilsEntry.getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading ? (jsxRuntime.jsx(spinner_wrapper.PSpinner, { aria: { 'aria-label': 'Loading state' }, ...iconProps })) : (hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] })] }), this.props.children] }));
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
|
|
@@ -66,7 +66,7 @@ class DSRButton extends react.Component {
|
|
|
66
66
|
render() {
|
|
67
67
|
splitChildren.splitChildren(this.props.children);
|
|
68
68
|
const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));
|
|
69
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { ...utilsEntry.getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: utilsEntry.getLinkButtonThemeForIcon(this.props.variant, this.props.theme), aria: { 'aria-label': 'Loading state:' } })), utilsEntry.hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: utilsEntry.isDisabledOrLoading(this.props.disabled, this.props.loading) ? '
|
|
69
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { ...utilsEntry.getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: utilsEntry.getLinkButtonThemeForIcon(this.props.variant, this.props.theme), aria: { 'aria-label': 'Loading state:' } })), utilsEntry.hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: utilsEntry.isDisabledOrLoading(this.props.disabled, this.props.loading) ? 'disabled' : 'primary', theme: utilsEntry.getLinkButtonThemeForIcon(this.props.variant, this.props.theme), "aria-hidden": "true" })), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] })] }), this.props.children] }));
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
|
package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.js
CHANGED
|
@@ -77,13 +77,13 @@ class DSRPagination extends react.Component {
|
|
|
77
77
|
};
|
|
78
78
|
switch (type) {
|
|
79
79
|
case utilsEntry.itemTypes.PREVIOUS_PAGE_LINK:
|
|
80
|
-
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { ...spanProps, tabIndex: isActive ? 0 : null, "aria-disabled": !isActive ? 'true' : null, "aria-label": this.props.allyLabelPrev, children: jsxRuntime.jsx(icon_wrapper.PIcon, { name: "arrow-left", theme: this.props.theme, color: isActive ? 'default' : '
|
|
80
|
+
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { ...spanProps, tabIndex: isActive ? 0 : null, "aria-disabled": !isActive ? 'true' : null, "aria-label": this.props.allyLabelPrev, children: jsxRuntime.jsx(icon_wrapper.PIcon, { name: "arrow-left", theme: this.props.theme, color: isActive ? 'default' : 'disabled', "aria-hidden": "true" }) }) }, "prev"));
|
|
81
81
|
case utilsEntry.itemTypes.ELLIPSIS:
|
|
82
82
|
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { className: "ellipsis" }) }, "ellipsis"));
|
|
83
83
|
case utilsEntry.itemTypes.PAGE:
|
|
84
84
|
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { ...spanProps, tabIndex: 0, "aria-label": `${this.props.allyLabelPage} ${value}`, "aria-current": isActive ? 'page' : null, children: value }) }, value));
|
|
85
85
|
case utilsEntry.itemTypes.NEXT_PAGE_LINK:
|
|
86
|
-
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { ...spanProps, tabIndex: isActive ? 0 : null, "aria-disabled": !isActive ? 'true' : null, "aria-label": this.props.allyLabelNext, children: jsxRuntime.jsx(icon_wrapper.PIcon, { name: "arrow-right", theme: this.props.theme, color: isActive ? 'default' : '
|
|
86
|
+
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { ...spanProps, tabIndex: isActive ? 0 : null, "aria-disabled": !isActive ? 'true' : null, "aria-label": this.props.allyLabelNext, children: jsxRuntime.jsx(icon_wrapper.PIcon, { name: "arrow-right", theme: this.props.theme, color: isActive ? 'default' : 'disabled', "aria-hidden": "true" }) }) }, "next"));
|
|
87
87
|
}
|
|
88
88
|
}) }) })] }) }));
|
|
89
89
|
}
|