@patternfly/patternfly 6.5.0-prerelease.3 → 6.5.0-prerelease.30
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/README.md +1 -1
- package/assets/images/RHAiExperienceIcon.svg +27 -0
- package/assets/images/RHAutomationsLogo.svg +96 -0
- package/assets/images/RHServerStackIcon.svg +16 -0
- package/assets/images/compass--hero-bg.png +0 -0
- package/assets/images/compass--rh-wallpaper-dark.png +0 -0
- package/assets/images/compass--rh-wallpaper-light.png +0 -0
- package/assets/images/compass--wallpaper-dark.png +0 -0
- package/assets/images/compass--wallpaper-light.png +0 -0
- package/base/normalize.scss +7 -0
- package/base/patternfly-common.css +46 -0
- package/base/patternfly-common.scss +56 -0
- package/base/patternfly-variables.css +42 -0
- package/base/tokens/tokens-local.scss +66 -0
- package/components/Accordion/accordion.scss +0 -1
- package/components/ActionList/action-list.css +2 -0
- package/components/ActionList/action-list.scss +2 -0
- package/components/Button/button.css +34 -4
- package/components/Button/button.scss +40 -4
- package/components/Card/card.css +12 -0
- package/components/Card/card.scss +15 -1
- package/components/Compass/compass.css +306 -0
- package/components/Compass/compass.scss +337 -0
- package/components/DataList/data-list.css +5 -1
- package/components/DataList/data-list.scss +6 -1
- package/components/Drawer/drawer.css +43 -3
- package/components/Drawer/drawer.scss +52 -4
- package/components/ExpandableSection/expandable-section.css +3 -0
- package/components/ExpandableSection/expandable-section.scss +3 -0
- package/components/Hero/hero.css +74 -0
- package/components/Hero/hero.scss +86 -0
- package/components/MenuToggle/menu-toggle.css +4 -0
- package/components/MenuToggle/menu-toggle.scss +5 -0
- package/components/Table/table.css +3 -0
- package/components/Table/table.scss +5 -0
- package/components/Tabs/tabs.css +16 -1
- package/components/Tabs/tabs.scss +21 -1
- package/components/_index.css +578 -84
- package/components/_index.scss +3 -1
- package/docs/components/Avatar/examples/Avatar.md +4 -4
- package/docs/components/Brand/examples/Brand.md +2 -2
- package/docs/components/Button/examples/Button.md +116 -0
- package/docs/components/Card/examples/Card.md +154 -0
- package/docs/components/Compass/examples/Compass.css +11 -0
- package/docs/components/Compass/examples/Compass.md +91 -0
- package/docs/components/DataList/examples/DataList.md +184 -188
- package/docs/components/DescriptionList/examples/DescriptionList.md +2 -2
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/Drawer/examples/Drawer.md +83 -17
- package/docs/components/Hero/examples/Hero.md +25 -0
- package/docs/components/Icon/examples/Icon.md +1 -1
- package/docs/components/InputGroup/examples/InputGroup.md +1 -1
- package/docs/components/JumpLinks/examples/JumpLinks.md +2 -2
- package/docs/components/Masthead/examples/masthead.md +1 -1
- package/docs/components/Menu/examples/Menu.md +2 -2
- package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
- package/docs/components/Page/examples/Page.md +2 -2
- package/docs/components/Pagination/examples/Pagination.md +3 -3
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.md +1 -1
- package/docs/components/Table/examples/Table.md +91 -3
- package/docs/components/Tabs/examples/Tabs.md +998 -83
- package/docs/components/Toolbar/examples/Toolbar.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +15 -15
- package/docs/demos/Card/examples/Card.md +14 -2
- package/docs/demos/Compass/examples/Compass.md +6246 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
- package/docs/demos/DescriptionList/examples/DescriptionList.md +42 -35
- package/docs/demos/Drawer/examples/Drawer.md +42 -35
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +143 -165
- package/docs/demos/Tabs/examples/Tabs.md +72 -9
- package/docs/demos/Wizard/examples/Wizard.md +31 -34
- package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
- package/docs/layouts/Flex/examples/Flex.css +3 -3
- package/docs/layouts/Flex/examples/Flex.md +3 -2
- package/docs/layouts/Gallery/examples/Gallery.css +2 -2
- package/docs/layouts/Gallery/examples/Gallery.md +4 -3
- package/docs/layouts/Grid/examples/Grid.css +1 -1
- package/docs/layouts/Grid/examples/Grid.md +6 -5
- package/docs/layouts/Level/examples/Level.css +3 -3
- package/docs/layouts/Level/examples/Level.md +2 -1
- package/docs/layouts/Split/examples/Split.css +1 -1
- package/docs/layouts/Split/examples/Split.md +2 -1
- package/docs/layouts/Stack/examples/Stack.css +3 -3
- package/docs/layouts/Stack/examples/Stack.md +2 -1
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
- package/docs/utilities/Alignment/examples/Alignment.css +4 -4
- package/docs/utilities/Alignment/examples/Alignment.md +3 -2
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
- package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
- package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
- package/docs/utilities/Display/examples/Display.css +1 -1
- package/docs/utilities/Display/examples/Display.md +3 -2
- package/docs/utilities/Flex/examples/Flex.css +7 -7
- package/docs/utilities/Flex/examples/Flex.md +3 -2
- package/docs/utilities/Float/examples/Float.css +2 -2
- package/docs/utilities/Float/examples/Float.md +3 -2
- package/docs/utilities/Sizing/examples/Sizing.md +8 -7
- package/docs/utilities/Spacing/examples/Spacing.css +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +3 -2
- package/docs/utilities/Text/examples/Text.md +5 -4
- package/icons/PfIcons/add-circle-o.svg +4 -0
- package/icons/PfIcons/ansible-tower.svg +4 -0
- package/icons/PfIcons/applications.svg +4 -0
- package/icons/PfIcons/arrow.svg +4 -0
- package/icons/PfIcons/asleep.svg +4 -0
- package/icons/PfIcons/attention-bell.svg +4 -0
- package/icons/PfIcons/automation.svg +4 -0
- package/icons/PfIcons/bell.svg +4 -0
- package/icons/PfIcons/blueprint.svg +4 -0
- package/icons/PfIcons/build.svg +4 -0
- package/icons/PfIcons/builder-image.svg +4 -0
- package/icons/PfIcons/bundle.svg +4 -0
- package/icons/PfIcons/catalog.svg +4 -0
- package/icons/PfIcons/chat.svg +4 -0
- package/icons/PfIcons/close.svg +4 -0
- package/icons/PfIcons/cloud-security.svg +4 -0
- package/icons/PfIcons/cloud-tenant.svg +4 -0
- package/icons/PfIcons/cluster.svg +4 -0
- package/icons/PfIcons/connected.svg +4 -0
- package/icons/PfIcons/container-node.svg +4 -0
- package/icons/PfIcons/cpu.svg +4 -0
- package/icons/PfIcons/critical-risk.svg +4 -0
- package/icons/PfIcons/data-processor.svg +4 -0
- package/icons/PfIcons/data-sink.svg +4 -0
- package/icons/PfIcons/data-source.svg +4 -0
- package/icons/PfIcons/degraded.svg +4 -0
- package/icons/PfIcons/disconnected.svg +4 -0
- package/icons/PfIcons/domain.svg +4 -0
- package/icons/PfIcons/edit.svg +4 -0
- package/icons/PfIcons/enhancement.svg +4 -0
- package/icons/PfIcons/enterprise.svg +4 -0
- package/icons/PfIcons/equalizer.svg +4 -0
- package/icons/PfIcons/error-circle-o.svg +4 -0
- package/icons/PfIcons/export.svg +4 -0
- package/icons/PfIcons/filter.svg +4 -0
- package/icons/PfIcons/flavor.svg +4 -0
- package/icons/PfIcons/folder-close.svg +4 -0
- package/icons/PfIcons/folder-open.svg +4 -0
- package/icons/PfIcons/globe-route.svg +4 -0
- package/icons/PfIcons/help.svg +4 -0
- package/icons/PfIcons/history.svg +4 -0
- package/icons/PfIcons/home.svg +4 -0
- package/icons/PfIcons/import.svg +4 -0
- package/icons/PfIcons/in-progress.svg +4 -0
- package/icons/PfIcons/info.svg +4 -0
- package/icons/PfIcons/infrastructure.svg +4 -0
- package/icons/PfIcons/integration.svg +4 -0
- package/icons/PfIcons/key.svg +4 -0
- package/icons/PfIcons/locked.svg +4 -0
- package/icons/PfIcons/maintenance.svg +4 -0
- package/icons/PfIcons/memory.svg +4 -0
- package/icons/PfIcons/messages.svg +4 -0
- package/icons/PfIcons/middleware.svg +4 -0
- package/icons/PfIcons/migration.svg +4 -0
- package/icons/PfIcons/module.svg +4 -0
- package/icons/PfIcons/monitoring.svg +4 -0
- package/icons/PfIcons/multicluster.svg +4 -0
- package/icons/PfIcons/namespaces.svg +4 -0
- package/icons/PfIcons/network.svg +4 -0
- package/icons/PfIcons/new-process.svg +4 -0
- package/icons/PfIcons/not-started.svg +4 -0
- package/icons/PfIcons/off.svg +4 -0
- package/icons/PfIcons/ok.svg +4 -0
- package/icons/PfIcons/on-running.svg +4 -0
- package/icons/PfIcons/on.svg +4 -0
- package/icons/PfIcons/open-drawer-right.svg +4 -0
- package/icons/PfIcons/openshift.svg +4 -0
- package/icons/PfIcons/openstack.svg +4 -0
- package/icons/PfIcons/optimize.svg +4 -0
- package/icons/PfIcons/orders.svg +4 -0
- package/icons/PfIcons/os-image.svg +4 -0
- package/icons/PfIcons/package.svg +4 -0
- package/icons/PfIcons/panel-close.svg +4 -0
- package/icons/PfIcons/panel-open.svg +4 -0
- package/icons/PfIcons/paused.svg +4 -0
- package/icons/PfIcons/pending.svg +4 -0
- package/icons/PfIcons/pficon-dragdrop.svg +4 -0
- package/icons/PfIcons/pficon-history.svg +4 -0
- package/icons/PfIcons/pficon-network-range.svg +4 -0
- package/icons/PfIcons/pficon-satellite.svg +4 -0
- package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
- package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
- package/icons/PfIcons/pficon-template.svg +4 -0
- package/icons/PfIcons/pficon-vcenter.svg +4 -0
- package/icons/PfIcons/plugged.svg +4 -0
- package/icons/PfIcons/port.svg +4 -0
- package/icons/PfIcons/print.svg +4 -0
- package/icons/PfIcons/private.svg +4 -0
- package/icons/PfIcons/process-automation.svg +4 -0
- package/icons/PfIcons/project.svg +4 -0
- package/icons/PfIcons/rebalance.svg +4 -0
- package/icons/PfIcons/rebooting.svg +4 -0
- package/icons/PfIcons/regions.svg +4 -0
- package/icons/PfIcons/registry.svg +4 -0
- package/icons/PfIcons/remove2.svg +4 -0
- package/icons/PfIcons/replicator.svg +4 -0
- package/icons/PfIcons/repository.svg +4 -0
- package/icons/PfIcons/resource-pool.svg +4 -0
- package/icons/PfIcons/resources-almost-empty.svg +4 -0
- package/icons/PfIcons/resources-almost-full.svg +4 -0
- package/icons/PfIcons/resources-empty.svg +4 -0
- package/icons/PfIcons/resources-full.svg +4 -0
- package/icons/PfIcons/running.svg +4 -0
- package/icons/PfIcons/save.svg +4 -0
- package/icons/PfIcons/screen.svg +4 -0
- package/icons/PfIcons/security.svg +4 -0
- package/icons/PfIcons/server-group.svg +4 -0
- package/icons/PfIcons/server.svg +4 -0
- package/icons/PfIcons/service-catalog.svg +4 -0
- package/icons/PfIcons/service.svg +4 -0
- package/icons/PfIcons/services.svg +4 -0
- package/icons/PfIcons/severity-critical.svg +4 -0
- package/icons/PfIcons/severity-important.svg +4 -0
- package/icons/PfIcons/severity-minor.svg +4 -0
- package/icons/PfIcons/severity-moderate.svg +4 -0
- package/icons/PfIcons/severity-none.svg +4 -0
- package/icons/PfIcons/severity-undefined.svg +4 -0
- package/icons/PfIcons/spinner.svg +4 -0
- package/icons/PfIcons/spinner2.svg +4 -0
- package/icons/PfIcons/storage-domain.svg +4 -0
- package/icons/PfIcons/task.svg +4 -0
- package/icons/PfIcons/tenant.svg +4 -0
- package/icons/PfIcons/thumb-tack.svg +4 -0
- package/icons/PfIcons/topology.svg +4 -0
- package/icons/PfIcons/treeview.svg +4 -0
- package/icons/PfIcons/trend-down.svg +4 -0
- package/icons/PfIcons/trend-up.svg +4 -0
- package/icons/PfIcons/unknown.svg +4 -0
- package/icons/PfIcons/unlocked.svg +4 -0
- package/icons/PfIcons/unplugged.svg +4 -0
- package/icons/PfIcons/user.svg +4 -0
- package/icons/PfIcons/users.svg +4 -0
- package/icons/PfIcons/virtual-machine.svg +4 -0
- package/icons/PfIcons/volume.svg +4 -0
- package/icons/PfIcons/warning-triangle.svg +4 -0
- package/icons/PfIcons/zone.svg +4 -0
- package/package.json +28 -13
- package/patternfly-base-no-globals.css +88 -0
- package/patternfly-base.css +95 -0
- package/patternfly-no-globals.css +666 -84
- package/patternfly.css +673 -84
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/namespaces-components.scss +6 -0
|
@@ -14,8 +14,8 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
|
|
|
14
14
|
| -- | -- | -- |
|
|
15
15
|
| `.pf-v6-c-toolbar__group` | `--pf-v6-c-toolbar__group--ColumnGap` | `16px` |
|
|
16
16
|
| `.pf-v6-c-toolbar__item` | `--pf-v6-c-toolbar__item--ColumnGap` | `16px` |
|
|
17
|
-
| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/tokens/all-
|
|
18
|
-
| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/tokens/all-
|
|
17
|
+
| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
18
|
+
| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
19
19
|
|
|
20
20
|
### Toolbar item types
|
|
21
21
|
|
|
@@ -37,7 +37,7 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
|
|
|
37
37
|
|
|
38
38
|
Several components in the following examples do not include functional and/or accessibility specifications (for example `.pf-v6-c-select`, `.pf-v6-c-options-menu`). Rather, `.pf-v6-c-toolbar` focuses on functionality and accessibility specifications that apply to it only.
|
|
39
39
|
|
|
40
|
-
**Available [breakpoints](/tokens/all-
|
|
40
|
+
**Available [breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
|
|
41
41
|
|
|
42
42
|
## Examples
|
|
43
43
|
|
|
@@ -181,8 +181,8 @@ Several components in the following examples do not include functional and/or ac
|
|
|
181
181
|
|
|
182
182
|
| Class | Applied to | Outcome |
|
|
183
183
|
| -- | -- | -- |
|
|
184
|
-
| `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/tokens/all-
|
|
185
|
-
| `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/tokens/all-
|
|
184
|
+
| `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
185
|
+
| `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
186
186
|
|
|
187
187
|
## Group types
|
|
188
188
|
|
|
@@ -2674,5 +2674,5 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
2674
2674
|
|
|
2675
2675
|
| Class | Applied to | Outcome |
|
|
2676
2676
|
| -- | -- | -- |
|
|
2677
|
-
| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/tokens/all-
|
|
2678
|
-
| `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/tokens/all-
|
|
2677
|
+
| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
2678
|
+
| `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
@@ -846,23 +846,23 @@ wrapperTag: div
|
|
|
846
846
|
</div>
|
|
847
847
|
</div>
|
|
848
848
|
<div class="pf-v6-c-drawer__panel pf-m-width-33">
|
|
849
|
-
<div class="pf-v6-c-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
</div>drawer-panel
|
|
849
|
+
<div class="pf-v6-c-drawer__head">
|
|
850
|
+
drawer-panel
|
|
851
|
+
<div class="pf-v6-c-drawer__actions">
|
|
852
|
+
<div class="pf-v6-c-drawer__close">
|
|
853
|
+
<button
|
|
854
|
+
class="pf-v6-c-button pf-m-plain"
|
|
855
|
+
type="button"
|
|
856
|
+
aria-label="Close drawer panel"
|
|
857
|
+
>
|
|
858
|
+
<span class="pf-v6-c-button__icon">
|
|
859
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
860
|
+
</span>
|
|
861
|
+
</button>
|
|
862
|
+
</div>
|
|
864
863
|
</div>
|
|
865
864
|
</div>
|
|
865
|
+
<div class="pf-v6-c-drawer__body">drawer-body</div>
|
|
866
866
|
</div>
|
|
867
867
|
</div>
|
|
868
868
|
<footer class="pf-v6-c-wizard__footer">
|
|
@@ -717,13 +717,23 @@ wrapperTag: div
|
|
|
717
717
|
</div>
|
|
718
718
|
</div>
|
|
719
719
|
<div class="pf-v6-c-card__body">
|
|
720
|
-
<div
|
|
721
|
-
|
|
720
|
+
<div
|
|
721
|
+
class="pf-v6-c-tabs pf-m-fill"
|
|
722
|
+
aria-label="Status, tabbed card example"
|
|
723
|
+
role="region"
|
|
724
|
+
id="status-tabs"
|
|
725
|
+
>
|
|
726
|
+
<ul
|
|
727
|
+
class="pf-v6-c-tabs__list"
|
|
728
|
+
role="tablist"
|
|
729
|
+
aria-label="Status, tabbed card example"
|
|
730
|
+
>
|
|
722
731
|
<li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
|
|
723
732
|
<button
|
|
724
733
|
type="button"
|
|
725
734
|
class="pf-v6-c-tabs__link"
|
|
726
735
|
role="tab"
|
|
736
|
+
aria-selected="true"
|
|
727
737
|
id="status-tabs-object-1-link"
|
|
728
738
|
>
|
|
729
739
|
<span class="pf-v6-c-tabs__item-text">Object 1</span>
|
|
@@ -734,6 +744,7 @@ wrapperTag: div
|
|
|
734
744
|
type="button"
|
|
735
745
|
class="pf-v6-c-tabs__link"
|
|
736
746
|
role="tab"
|
|
747
|
+
aria-selected="false"
|
|
737
748
|
id="status-tabs-object-2-link"
|
|
738
749
|
>
|
|
739
750
|
<span class="pf-v6-c-tabs__item-text">Object 2</span>
|
|
@@ -744,6 +755,7 @@ wrapperTag: div
|
|
|
744
755
|
type="button"
|
|
745
756
|
class="pf-v6-c-tabs__link"
|
|
746
757
|
role="tab"
|
|
758
|
+
aria-selected="false"
|
|
747
759
|
id="status-tabs-object-3-link"
|
|
748
760
|
>
|
|
749
761
|
<span class="pf-v6-c-tabs__item-text">Object 3</span>
|