@patternfly/patternfly 6.2.0-prerelease.2 → 6.2.0-prerelease.20
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/assets/pficon/pficon.scss +1 -1
- package/base/normalize.scss +2 -2
- package/base/patternfly-pf-icons.css +1 -1
- package/components/Alert/alert-group.css +50 -7
- package/components/Alert/alert-group.scss +114 -28
- package/components/Banner/banner.css +2 -2
- package/components/Banner/banner.scss +2 -2
- package/components/Breadcrumb/breadcrumb.css +3 -2
- package/components/Breadcrumb/breadcrumb.scss +3 -2
- package/components/Button/button.css +63 -2
- package/components/Button/button.scss +74 -2
- package/components/Card/card.css +17 -0
- package/components/Card/card.scss +22 -0
- package/components/Content/content.css +2 -1
- package/components/Content/content.scss +2 -1
- package/components/DescriptionList/description-list.css +3 -2
- package/components/DescriptionList/description-list.scss +3 -2
- package/components/Drawer/drawer.css +3 -1
- package/components/Drawer/drawer.scss +3 -1
- package/components/Form/form.css +3 -6
- package/components/Form/form.scss +3 -7
- package/components/HelperText/helper-text.css +13 -0
- package/components/HelperText/helper-text.scss +16 -0
- package/components/JumpLinks/jump-links.css +1 -1
- package/components/JumpLinks/jump-links.scss +1 -1
- package/components/Label/label.css +3 -2
- package/components/Label/label.scss +3 -2
- package/components/Masthead/masthead.css +1 -1
- package/components/Masthead/masthead.scss +1 -1
- package/components/Menu/menu.css +15 -7
- package/components/Menu/menu.scss +14 -5
- package/components/MenuToggle/menu-toggle.css +41 -0
- package/components/MenuToggle/menu-toggle.scss +49 -0
- package/components/Nav/nav.css +46 -13
- package/components/Nav/nav.scss +57 -17
- package/components/Page/page.css +16 -1
- package/components/Page/page.scss +17 -3
- package/components/Popover/popover.css +2 -0
- package/components/Popover/popover.scss +2 -0
- package/components/Progress/progress.css +3 -0
- package/components/Progress/progress.scss +3 -0
- package/components/ProgressStepper/progress-stepper.css +2 -1
- package/components/ProgressStepper/progress-stepper.scss +2 -1
- package/components/SimpleList/simple-list.css +2 -2
- package/components/SimpleList/simple-list.scss +2 -2
- package/components/Switch/switch.css +3 -1
- package/components/Switch/switch.scss +4 -2
- package/components/Table/table.css +3 -3
- package/components/Table/table.scss +3 -2
- package/components/Tabs/tabs.css +1 -1
- package/components/Tabs/tabs.scss +1 -1
- package/components/Timestamp/timestamp.css +2 -1
- package/components/Timestamp/timestamp.scss +2 -1
- package/components/ToggleGroup/toggle-group.css +1 -1
- package/components/ToggleGroup/toggle-group.scss +1 -1
- package/components/Toolbar/toolbar.css +6 -1
- package/components/Toolbar/toolbar.scss +7 -1
- package/components/Wizard/wizard.css +1 -1
- package/components/Wizard/wizard.scss +1 -1
- package/components/_index.css +307 -60
- package/docs/components/Alert/examples/Alert.md +6 -0
- 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 +29 -0
- package/docs/components/Card/examples/Card.md +30 -0
- package/docs/components/DataList/examples/DataList.md +3 -3
- 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 +3 -3
- 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 +8 -8
- package/docs/components/Nav/examples/Navigation.md +3 -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 +17 -29
- package/docs/components/Tabs/examples/Tabs.md +148 -6
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +10 -0
- package/docs/components/Toolbar/examples/Toolbar.css +3 -0
- package/docs/components/Toolbar/examples/Toolbar.md +35 -7
- package/docs/demos/Card/examples/Card.md +32 -24
- package/docs/demos/CardView/examples/CardView.md +2 -0
- package/docs/demos/Nav/examples/Nav.md +2 -0
- package/docs/layouts/Flex/examples/Flex.md +1 -1
- package/docs/layouts/Gallery/examples/Gallery.md +2 -2
- package/docs/layouts/Grid/examples/Grid.md +4 -4
- package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
- package/docs/utilities/Alignment/examples/Alignment.md +1 -1
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
- package/docs/utilities/Display/examples/Display.md +1 -1
- package/docs/utilities/Flex/examples/Flex.md +1 -1
- package/docs/utilities/Float/examples/Float.md +1 -1
- package/docs/utilities/Sizing/examples/Sizing.md +6 -6
- package/docs/utilities/Spacing/examples/Spacing.md +1 -1
- package/docs/utilities/Text/examples/Text.md +1 -1
- package/package.json +2 -2
- package/patternfly-base-no-globals.css +1 -1
- package/patternfly-base.css +3 -3
- package/patternfly-charts.css +83 -0
- package/patternfly-charts.scss +126 -0
- package/patternfly-no-globals.css +308 -61
- package/patternfly.css +310 -63
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/docs/components/TabContent/examples/TabContent.md +0 -153
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
id: Tab content
|
|
3
|
-
section: components
|
|
4
|
-
cssPrefix: pf-v6-c-tab-content
|
|
5
|
-
---## Examples
|
|
6
|
-
|
|
7
|
-
### Basic
|
|
8
|
-
|
|
9
|
-
```html
|
|
10
|
-
<section
|
|
11
|
-
class="pf-v6-c-tab-content"
|
|
12
|
-
id="basic-tab1-panel"
|
|
13
|
-
role="tabpanel"
|
|
14
|
-
tabindex="0"
|
|
15
|
-
>
|
|
16
|
-
<div class="pf-v6-c-tab-content__body">Panel 1</div>
|
|
17
|
-
</section>
|
|
18
|
-
<section
|
|
19
|
-
class="pf-v6-c-tab-content"
|
|
20
|
-
id="basic-tab2-panel"
|
|
21
|
-
role="tabpanel"
|
|
22
|
-
tabindex="0"
|
|
23
|
-
hidden
|
|
24
|
-
>
|
|
25
|
-
<div class="pf-v6-c-tab-content__body">Panel 2</div>
|
|
26
|
-
</section>
|
|
27
|
-
<section
|
|
28
|
-
class="pf-v6-c-tab-content"
|
|
29
|
-
id="basic-tab3-panel"
|
|
30
|
-
role="tabpanel"
|
|
31
|
-
tabindex="0"
|
|
32
|
-
hidden
|
|
33
|
-
>
|
|
34
|
-
<div class="pf-v6-c-tab-content__body">Panel 3</div>
|
|
35
|
-
</section>
|
|
36
|
-
<section
|
|
37
|
-
class="pf-v6-c-tab-content"
|
|
38
|
-
id="basic-tab4-panel"
|
|
39
|
-
role="tabpanel"
|
|
40
|
-
tabindex="0"
|
|
41
|
-
hidden
|
|
42
|
-
>
|
|
43
|
-
<div class="pf-v6-c-tab-content__body">Panel 4</div>
|
|
44
|
-
</section>
|
|
45
|
-
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
### Padding
|
|
49
|
-
|
|
50
|
-
```html
|
|
51
|
-
<section
|
|
52
|
-
class="pf-v6-c-tab-content"
|
|
53
|
-
id="tab1-panel-with-padding"
|
|
54
|
-
role="tabpanel"
|
|
55
|
-
tabindex="0"
|
|
56
|
-
>
|
|
57
|
-
<div class="pf-v6-c-tab-content__body pf-m-padding">Panel 1</div>
|
|
58
|
-
</section>
|
|
59
|
-
<section
|
|
60
|
-
class="pf-v6-c-tab-content"
|
|
61
|
-
id="tab2-panel-with-padding"
|
|
62
|
-
role="tabpanel"
|
|
63
|
-
tabindex="0"
|
|
64
|
-
hidden
|
|
65
|
-
>
|
|
66
|
-
<div class="pf-v6-c-tab-content__body pf-m-padding">Panel 2</div>
|
|
67
|
-
</section>
|
|
68
|
-
<section
|
|
69
|
-
class="pf-v6-c-tab-content"
|
|
70
|
-
id="tab3-panel-with-padding"
|
|
71
|
-
role="tabpanel"
|
|
72
|
-
tabindex="0"
|
|
73
|
-
hidden
|
|
74
|
-
>
|
|
75
|
-
<div class="pf-v6-c-tab-content__body pf-m-padding">Panel 3</div>
|
|
76
|
-
</section>
|
|
77
|
-
<section
|
|
78
|
-
class="pf-v6-c-tab-content"
|
|
79
|
-
id="tab4-panel-with-padding"
|
|
80
|
-
role="tabpanel"
|
|
81
|
-
tabindex="0"
|
|
82
|
-
hidden
|
|
83
|
-
>
|
|
84
|
-
<div class="pf-v6-c-tab-content__body pf-m-padding">Panel 4</div>
|
|
85
|
-
</section>
|
|
86
|
-
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
### Secondary
|
|
90
|
-
|
|
91
|
-
```html
|
|
92
|
-
<section
|
|
93
|
-
class="pf-v6-c-tab-content pf-m-secondary"
|
|
94
|
-
id="secondary-tab1-panel"
|
|
95
|
-
role="tabpanel"
|
|
96
|
-
tabindex="0"
|
|
97
|
-
>
|
|
98
|
-
<div class="pf-v6-c-tab-content__body">Panel 1</div>
|
|
99
|
-
</section>
|
|
100
|
-
<section
|
|
101
|
-
class="pf-v6-c-tab-content pf-m-secondary"
|
|
102
|
-
id="secondary-tab2-panel"
|
|
103
|
-
role="tabpanel"
|
|
104
|
-
tabindex="0"
|
|
105
|
-
hidden
|
|
106
|
-
>
|
|
107
|
-
<div class="pf-v6-c-tab-content__body">Panel 2</div>
|
|
108
|
-
</section>
|
|
109
|
-
<section
|
|
110
|
-
class="pf-v6-c-tab-content pf-m-secondary"
|
|
111
|
-
id="secondary-tab3-panel"
|
|
112
|
-
role="tabpanel"
|
|
113
|
-
tabindex="0"
|
|
114
|
-
hidden
|
|
115
|
-
>
|
|
116
|
-
<div class="pf-v6-c-tab-content__body">Panel 3</div>
|
|
117
|
-
</section>
|
|
118
|
-
<section
|
|
119
|
-
class="pf-v6-c-tab-content pf-m-secondary"
|
|
120
|
-
id="secondary-tab4-panel"
|
|
121
|
-
role="tabpanel"
|
|
122
|
-
tabindex="0"
|
|
123
|
-
hidden
|
|
124
|
-
>
|
|
125
|
-
<div class="pf-v6-c-tab-content__body">Panel 4</div>
|
|
126
|
-
</section>
|
|
127
|
-
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
## Documentation
|
|
131
|
-
|
|
132
|
-
### Overview
|
|
133
|
-
|
|
134
|
-
Tab content should be used with the [tabs component](/components/tabs).
|
|
135
|
-
|
|
136
|
-
### Accessibility
|
|
137
|
-
|
|
138
|
-
| Attribute | Applied to | Outcome |
|
|
139
|
-
| -- | -- | -- |
|
|
140
|
-
| `role="tabpanel"` | `.pf-v6-c-tab-content` | Indicates that the element serves as a container for a set of tabs. **Required** |
|
|
141
|
-
| `aria-labelledby=[ID of tab element]` | `.pf-v6-c-tab-content` | Provides an accessible name for the tab panel by referring to the tab element that controls it. **Required**
|
|
142
|
-
| `id=[ID of tab panel]` | `.pf-v6-c-tab-content` | Provides an ID for the tab panel, and should be used as the value of `aria-controls` on the tab element that controls the panel. **Required**
|
|
143
|
-
| `hidden` | `.pf-v6-c-tab-content` | Indicates that the tab panel is not visible. **Required on all but the active tab panel**
|
|
144
|
-
| `tabindex="0"` | `.pf-v6-c-tab-content` | Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. **Required**
|
|
145
|
-
|
|
146
|
-
### Usage
|
|
147
|
-
|
|
148
|
-
| Class | Applied to | Outcome |
|
|
149
|
-
| -- | -- | -- |
|
|
150
|
-
| `.pf-v6-c-tab-content` | `<section>` | Initiates the tab content component. **Required** |
|
|
151
|
-
| `.pf-v6-c-tab-content__body` | `<div>` | Initiates the tab content body component. |
|
|
152
|
-
| `.pf-m-padding` | `.pf-v6-c-tab-content__body` | Modifies the tab content body component padding. |
|
|
153
|
-
| `.pf-m-secondary` | `.pf-v6-c-tab-content` | Modifies the tab content component for secondary styles. |
|