@patternfly/react-styles 5.1.1-prerelease.2 → 5.1.1-prerelease.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (75) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/css/components/BackgroundImage/background-image.css +4 -1
  3. package/css/components/BackgroundImage/background-image.d.ts +3 -1
  4. package/css/components/BackgroundImage/background-image.js +3 -1
  5. package/css/components/BackgroundImage/background-image.mjs +3 -1
  6. package/css/components/Card/card.css +3 -0
  7. package/css/components/Card/card.d.ts +3 -1
  8. package/css/components/Card/card.js +3 -1
  9. package/css/components/Card/card.mjs +3 -1
  10. package/css/components/DataList/data-list.css +3 -0
  11. package/css/components/DataList/data-list.d.ts +3 -1
  12. package/css/components/DataList/data-list.js +3 -1
  13. package/css/components/DataList/data-list.mjs +3 -1
  14. package/css/components/Drawer/drawer.css +45 -1
  15. package/css/components/Drawer/drawer.d.ts +3 -1
  16. package/css/components/Drawer/drawer.js +3 -1
  17. package/css/components/Drawer/drawer.mjs +3 -1
  18. package/css/components/Form/form.css +3 -0
  19. package/css/components/Form/form.d.ts +3 -1
  20. package/css/components/Form/form.js +3 -1
  21. package/css/components/Form/form.mjs +3 -1
  22. package/css/components/JumpLinks/jump-links.css +3 -0
  23. package/css/components/JumpLinks/jump-links.d.ts +3 -1
  24. package/css/components/JumpLinks/jump-links.js +3 -1
  25. package/css/components/JumpLinks/jump-links.mjs +3 -1
  26. package/css/components/Popover/popover.css +56 -8
  27. package/css/components/Popover/popover.d.ts +15 -1
  28. package/css/components/Popover/popover.js +15 -1
  29. package/css/components/Popover/popover.mjs +15 -1
  30. package/css/components/Skeleton/skeleton.css +4 -0
  31. package/css/components/Skeleton/skeleton.d.ts +3 -1
  32. package/css/components/Skeleton/skeleton.js +3 -1
  33. package/css/components/Skeleton/skeleton.mjs +3 -1
  34. package/css/components/Slider/slider.css +1 -0
  35. package/css/components/Table/table-scrollable.css +2 -2
  36. package/css/components/Table/table-scrollable.d.ts +3 -1
  37. package/css/components/Table/table-scrollable.js +3 -1
  38. package/css/components/Table/table-scrollable.mjs +3 -1
  39. package/css/components/Table/table-tree-view.css +5 -1
  40. package/css/components/Table/table-tree-view.d.ts +3 -1
  41. package/css/components/Table/table-tree-view.js +3 -1
  42. package/css/components/Table/table-tree-view.mjs +3 -1
  43. package/css/components/Table/table.css +4 -0
  44. package/css/components/Table/table.d.ts +3 -1
  45. package/css/components/Table/table.js +3 -1
  46. package/css/components/Table/table.mjs +3 -1
  47. package/css/components/Tabs/tabs.css +10 -0
  48. package/css/components/Tabs/tabs.d.ts +3 -1
  49. package/css/components/Tabs/tabs.js +3 -1
  50. package/css/components/Tabs/tabs.mjs +3 -1
  51. package/css/components/Tooltip/tooltip.css +57 -9
  52. package/css/components/Tooltip/tooltip.d.ts +21 -2
  53. package/css/components/Tooltip/tooltip.js +21 -2
  54. package/css/components/Tooltip/tooltip.mjs +21 -2
  55. package/css/components/TreeView/tree-view.css +6 -0
  56. package/css/components/TreeView/tree-view.d.ts +3 -1
  57. package/css/components/TreeView/tree-view.js +3 -1
  58. package/css/components/TreeView/tree-view.mjs +3 -1
  59. package/css/components/Truncate/truncate.css +9 -0
  60. package/css/components/Truncate/truncate.d.ts +3 -1
  61. package/css/components/Truncate/truncate.js +3 -1
  62. package/css/components/Truncate/truncate.mjs +3 -1
  63. package/css/docs/components/ModalBox/examples/ModalBox.css +3 -8
  64. package/css/docs/components/ModalBox/examples/ModalBox.d.ts +0 -1
  65. package/css/docs/components/ModalBox/examples/ModalBox.js +0 -1
  66. package/css/docs/components/ModalBox/examples/ModalBox.mjs +0 -1
  67. package/css/docs/components/Popover/examples/Popover.css +3 -9
  68. package/css/docs/components/Popover/examples/Popover.d.ts +0 -1
  69. package/css/docs/components/Popover/examples/Popover.js +0 -1
  70. package/css/docs/components/Popover/examples/Popover.mjs +0 -1
  71. package/css/docs/components/Tooltip/examples/Tooltip.css +4 -0
  72. package/css/docs/components/Tooltip/examples/Tooltip.d.ts +6 -0
  73. package/css/docs/components/Tooltip/examples/Tooltip.js +7 -0
  74. package/css/docs/components/Tooltip/examples/Tooltip.mjs +5 -0
  75. package/package.json +3 -3
@@ -1,22 +1,41 @@
1
1
  import './tooltip.css';
2
2
  export default {
3
+ "dirRtl": "pf-v5-m-dir-rtl",
3
4
  "modifiers": {
4
5
  "top": "pf-m-top",
5
6
  "topLeft": "pf-m-top-left",
6
7
  "topRight": "pf-m-top-right",
8
+ "blockStart": "pf-m-block-start",
9
+ "blockStartInlineStart": "pf-m-block-start-inline-start",
10
+ "blockStartInlineEnd": "pf-m-block-start-inline-end",
7
11
  "bottom": "pf-m-bottom",
8
12
  "bottomLeft": "pf-m-bottom-left",
9
13
  "bottomRight": "pf-m-bottom-right",
14
+ "blockEnd": "pf-m-block-end",
15
+ "blockEndInlineStart": "pf-m-block-end-inline-start",
16
+ "blockEndInlineEnd": "pf-m-block-end-inline-end",
10
17
  "left": "pf-m-left",
11
18
  "leftTop": "pf-m-left-top",
12
19
  "leftBottom": "pf-m-left-bottom",
20
+ "inlineStart": "pf-m-inline-start",
21
+ "inlineStartBlockStart": "pf-m-inline-start-block-start",
22
+ "inlineStartBlockEnd": "pf-m-inline-start-block-end",
13
23
  "right": "pf-m-right",
14
24
  "rightTop": "pf-m-right-top",
15
25
  "rightBottom": "pf-m-right-bottom",
16
- "textAlignLeft": "pf-m-text-align-left"
26
+ "inlineEnd": "pf-m-inline-end",
27
+ "inlineEndBlockStart": "pf-m-inline-end-block-start",
28
+ "inlineEndBlockEnd": "pf-m-inline-end-block-end",
29
+ "blockStartBlockStart": "pf-m-block-start-block-start",
30
+ "blockEndBlockStart": "pf-m-block-end-block-start",
31
+ "blockStartBlockEnd": "pf-m-block-start-block-end",
32
+ "blockEndBlockEnd": "pf-m-block-end-block-end",
33
+ "textAlignLeft": "pf-m-text-align-left",
34
+ "textAlignStart": "pf-m-text-align-start"
17
35
  },
18
36
  "themeDark": "pf-v5-theme-dark",
19
37
  "tooltip": "pf-v5-c-tooltip",
20
38
  "tooltipArrow": "pf-v5-c-tooltip__arrow",
21
- "tooltipContent": "pf-v5-c-tooltip__content"
39
+ "tooltipContent": "pf-v5-c-tooltip__content",
40
+ "wsDirRtl": "ws-dir-rtl"
22
41
  };
@@ -229,6 +229,9 @@
229
229
  transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
230
230
  transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
231
231
  }
232
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
233
+ scale: -1 1;
234
+ }
232
235
 
233
236
  .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
234
237
  --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
@@ -318,6 +321,9 @@
318
321
  border: 0;
319
322
  transform: translateX(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX));
320
323
  }
324
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle {
325
+ transform: translateX(calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
326
+ }
321
327
 
322
328
  .pf-v5-c-tree-view__node-title.pf-m-truncate,
323
329
  .pf-v5-c-tree-view__node-text.pf-m-truncate {
@@ -1,6 +1,7 @@
1
1
  import './tree-view.css';
2
2
  declare const _default: {
3
3
  "badge": "pf-v5-c-badge",
4
+ "dirRtl": "pf-v5-m-dir-rtl",
4
5
  "modifiers": {
5
6
  "compact": "pf-m-compact",
6
7
  "guides": "pf-m-guides",
@@ -26,6 +27,7 @@ declare const _default: {
26
27
  "treeViewNodeTitle": "pf-v5-c-tree-view__node-title",
27
28
  "treeViewNodeToggle": "pf-v5-c-tree-view__node-toggle",
28
29
  "treeViewNodeToggleIcon": "pf-v5-c-tree-view__node-toggle-icon",
29
- "treeViewSearch": "pf-v5-c-tree-view__search"
30
+ "treeViewSearch": "pf-v5-c-tree-view__search",
31
+ "wsDirRtl": "ws-dir-rtl"
30
32
  };
31
33
  export default _default;
@@ -3,6 +3,7 @@ exports.__esModule = true;
3
3
  require('./tree-view.css');
4
4
  exports.default = {
5
5
  "badge": "pf-v5-c-badge",
6
+ "dirRtl": "pf-v5-m-dir-rtl",
6
7
  "modifiers": {
7
8
  "compact": "pf-m-compact",
8
9
  "guides": "pf-m-guides",
@@ -28,5 +29,6 @@ exports.default = {
28
29
  "treeViewNodeTitle": "pf-v5-c-tree-view__node-title",
29
30
  "treeViewNodeToggle": "pf-v5-c-tree-view__node-toggle",
30
31
  "treeViewNodeToggleIcon": "pf-v5-c-tree-view__node-toggle-icon",
31
- "treeViewSearch": "pf-v5-c-tree-view__search"
32
+ "treeViewSearch": "pf-v5-c-tree-view__search",
33
+ "wsDirRtl": "ws-dir-rtl"
32
34
  };
@@ -1,6 +1,7 @@
1
1
  import './tree-view.css';
2
2
  export default {
3
3
  "badge": "pf-v5-c-badge",
4
+ "dirRtl": "pf-v5-m-dir-rtl",
4
5
  "modifiers": {
5
6
  "compact": "pf-m-compact",
6
7
  "guides": "pf-m-guides",
@@ -26,5 +27,6 @@ export default {
26
27
  "treeViewNodeTitle": "pf-v5-c-tree-view__node-title",
27
28
  "treeViewNodeToggle": "pf-v5-c-tree-view__node-toggle",
28
29
  "treeViewNodeToggleIcon": "pf-v5-c-tree-view__node-toggle-icon",
29
- "treeViewSearch": "pf-v5-c-tree-view__search"
30
+ "treeViewSearch": "pf-v5-c-tree-view__search",
31
+ "wsDirRtl": "ws-dir-rtl"
30
32
  };
@@ -21,14 +21,23 @@
21
21
  .pf-v5-c-truncate__end {
22
22
  direction: rtl;
23
23
  }
24
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
25
+ direction: ltr;
26
+ }
24
27
 
25
28
  .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
26
29
  overflow: visible;
27
30
  direction: ltr;
28
31
  }
32
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
33
+ direction: rtl;
34
+ }
29
35
 
30
36
  @supports (-webkit-hyphens: none) {
31
37
  .pf-v5-c-truncate__end {
32
38
  direction: ltr;
33
39
  }
40
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
41
+ direction: rtl;
42
+ }
34
43
  }
@@ -1,7 +1,9 @@
1
1
  import './truncate.css';
2
2
  declare const _default: {
3
+ "dirRtl": "pf-v5-m-dir-rtl",
3
4
  "truncate": "pf-v5-c-truncate",
4
5
  "truncateEnd": "pf-v5-c-truncate__end",
5
- "truncateStart": "pf-v5-c-truncate__start"
6
+ "truncateStart": "pf-v5-c-truncate__start",
7
+ "wsDirRtl": "ws-dir-rtl"
6
8
  };
7
9
  export default _default;
@@ -2,7 +2,9 @@
2
2
  exports.__esModule = true;
3
3
  require('./truncate.css');
4
4
  exports.default = {
5
+ "dirRtl": "pf-v5-m-dir-rtl",
5
6
  "truncate": "pf-v5-c-truncate",
6
7
  "truncateEnd": "pf-v5-c-truncate__end",
7
- "truncateStart": "pf-v5-c-truncate__start"
8
+ "truncateStart": "pf-v5-c-truncate__start",
9
+ "wsDirRtl": "ws-dir-rtl"
8
10
  };
@@ -1,6 +1,8 @@
1
1
  import './truncate.css';
2
2
  export default {
3
+ "dirRtl": "pf-v5-m-dir-rtl",
3
4
  "truncate": "pf-v5-c-truncate",
4
5
  "truncateEnd": "pf-v5-c-truncate__end",
5
- "truncateStart": "pf-v5-c-truncate__start"
6
+ "truncateStart": "pf-v5-c-truncate__start",
7
+ "wsDirRtl": "ws-dir-rtl"
6
8
  };
@@ -1,10 +1,5 @@
1
1
  .ws-core-c-modal .ws-preview-html {
2
- position: relative;
3
- }
4
-
5
- .ws-core-c-modal .pf-v5-c-modal-box {
6
- position: absolute;
7
- inset-block-start: 50%;
8
- inset-inline-start: 50%;
9
- transform: translate(-50%, -50%);
2
+ display: flex;
3
+ justify-content: center;
4
+ align-items: center;
10
5
  }
@@ -1,6 +1,5 @@
1
1
  import './ModalBox.css';
2
2
  declare const _default: {
3
- "modalBox": "pf-v5-c-modal-box",
4
3
  "wsCoreCModal": "ws-core-c-modal",
5
4
  "wsPreviewHtml": "ws-preview-html"
6
5
  };
@@ -2,7 +2,6 @@
2
2
  exports.__esModule = true;
3
3
  require('./ModalBox.css');
4
4
  exports.default = {
5
- "modalBox": "pf-v5-c-modal-box",
6
5
  "wsCoreCModal": "ws-core-c-modal",
7
6
  "wsPreviewHtml": "ws-preview-html"
8
7
  };
@@ -1,6 +1,5 @@
1
1
  import './ModalBox.css';
2
2
  export default {
3
- "modalBox": "pf-v5-c-modal-box",
4
3
  "wsCoreCModal": "ws-core-c-modal",
5
4
  "wsPreviewHtml": "ws-preview-html"
6
5
  };
@@ -1,10 +1,4 @@
1
1
  .ws-core-c-popover .ws-preview-html {
2
- position: relative;
3
- }
4
-
5
- .ws-core-c-popover .pf-v5-c-popover {
6
- position: absolute;
7
- inset-block-start: 50%;
8
- inset-inline-start: 50%;
9
- transform: translate(-50%, -50%);
10
- }
2
+ display: grid;
3
+ place-items: center;
4
+ }
@@ -1,6 +1,5 @@
1
1
  import './Popover.css';
2
2
  declare const _default: {
3
- "popover": "pf-v5-c-popover",
4
3
  "wsCoreCPopover": "ws-core-c-popover",
5
4
  "wsPreviewHtml": "ws-preview-html"
6
5
  };
@@ -2,7 +2,6 @@
2
2
  exports.__esModule = true;
3
3
  require('./Popover.css');
4
4
  exports.default = {
5
- "popover": "pf-v5-c-popover",
6
5
  "wsCoreCPopover": "ws-core-c-popover",
7
6
  "wsPreviewHtml": "ws-preview-html"
8
7
  };
@@ -1,6 +1,5 @@
1
1
  import './Popover.css';
2
2
  export default {
3
- "popover": "pf-v5-c-popover",
4
3
  "wsCoreCPopover": "ws-core-c-popover",
5
4
  "wsPreviewHtml": "ws-preview-html"
6
5
  };
@@ -0,0 +1,4 @@
1
+ /* adds padding to full page examples so arrows are visible */
2
+ .ws-core-c-tooltip:not(.ws-preview) {
3
+ padding: var(--pf-v5-global--spacer--md);
4
+ }
@@ -0,0 +1,6 @@
1
+ import './Tooltip.css';
2
+ declare const _default: {
3
+ "wsCoreCTooltip": "ws-core-c-tooltip",
4
+ "wsPreview": "ws-preview"
5
+ };
6
+ export default _default;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ exports.__esModule = true;
3
+ require('./Tooltip.css');
4
+ exports.default = {
5
+ "wsCoreCTooltip": "ws-core-c-tooltip",
6
+ "wsPreview": "ws-preview"
7
+ };
@@ -0,0 +1,5 @@
1
+ import './Tooltip.css';
2
+ export default {
3
+ "wsCoreCTooltip": "ws-core-c-tooltip",
4
+ "wsPreview": "ws-preview"
5
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "5.1.1-prerelease.2",
3
+ "version": "5.1.1-prerelease.4",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -18,7 +18,7 @@
18
18
  "clean": "rimraf dist css"
19
19
  },
20
20
  "devDependencies": {
21
- "@patternfly/patternfly": "5.1.0-prerelease.13",
21
+ "@patternfly/patternfly": "5.1.0-prerelease.21",
22
22
  "camel-case": "^3.0.0",
23
23
  "css": "^2.2.3",
24
24
  "fs-extra": "^11.1.1",
@@ -28,5 +28,5 @@
28
28
  "typescript": "^4.7.4"
29
29
  },
30
30
  "license": "MIT",
31
- "gitHead": "52cbf11e7e407d70d674a160da7f432d197c5f57"
31
+ "gitHead": "b61a033e45c6c3d4ff582754e505e9211c052c95"
32
32
  }