@patternfly/patternfly 5.0.0-alpha.13 → 5.0.0-alpha.18
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.woff +0 -0
- package/assets/pficon/pficon.woff2 +0 -0
- package/components/Accordion/accordion.css +2 -0
- package/components/Accordion/accordion.scss +2 -0
- package/components/AppLauncher/app-launcher.css +2 -0
- package/components/AppLauncher/app-launcher.scss +2 -0
- package/components/Breadcrumb/breadcrumb.css +2 -0
- package/components/Breadcrumb/breadcrumb.scss +2 -0
- package/components/ContextSelector/context-selector.css +5 -1
- package/components/ContextSelector/context-selector.scss +6 -2
- package/components/DataList/data-list.css +2 -1
- package/components/DataList/data-list.scss +2 -1
- package/components/Drawer/drawer.css +13 -13
- package/components/Dropdown/dropdown.css +12 -10
- package/components/Dropdown/dropdown.scss +2 -0
- package/components/ExpandableSection/expandable-section.css +2 -0
- package/components/ExpandableSection/expandable-section.scss +2 -0
- package/components/Label/label.css +2 -0
- package/components/Label/label.scss +2 -0
- package/components/Login/login.css +1 -1
- package/components/Menu/menu.css +2 -0
- package/components/Menu/menu.scss +2 -0
- package/components/MenuToggle/menu-toggle.css +2 -0
- package/components/MenuToggle/menu-toggle.scss +2 -0
- package/components/Page/page.css +60 -60
- package/components/Pagination/pagination.css +2 -2
- package/components/SearchInput/search-input.css +2 -0
- package/components/SearchInput/search-input.scss +2 -0
- package/components/Table/table-grid.css +28 -28
- package/components/Table/table-tree-view.css +4 -4
- package/components/TextInputGroup/text-input-group.css +4 -2
- package/components/TextInputGroup/text-input-group.scss +4 -3
- package/components/Toolbar/toolbar.css +35 -35
- package/components/TreeView/tree-view.css +7 -15
- package/components/TreeView/tree-view.scss +7 -18
- package/components/Wizard/wizard.css +2 -0
- package/components/Wizard/wizard.scss +2 -0
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
- package/docs/components/Accordion/examples/Accordion.md +12 -12
- package/docs/components/ActionList/examples/ActionList.md +6 -6
- package/docs/components/Alert/examples/Alert.md +19 -19
- package/docs/components/AlertGroup/examples/AlertGroup.md +12 -12
- package/docs/components/AppLauncher/examples/application-launcher.md +51 -46
- package/docs/components/Avatar/examples/Avatar.md +11 -11
- package/docs/components/BackToTop/examples/BackToTop.md +4 -4
- package/docs/components/Backdrop/examples/Backdrop.md +4 -4
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
- package/docs/components/Badge/examples/Badge.md +5 -5
- package/docs/components/Banner/examples/Banner.md +8 -8
- package/docs/components/Brand/examples/Brand.md +9 -9
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
- package/docs/components/Button/examples/Button.md +35 -35
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
- package/docs/components/Card/examples/Card.md +27 -27
- package/docs/components/Check/examples/Check.md +13 -13
- package/docs/components/Chip/examples/Chip.md +13 -13
- package/docs/components/ChipGroup/examples/ChipGroup.md +15 -15
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
- package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
- package/docs/components/CodeEditor/examples/CodeEditor.md +56 -33
- package/docs/components/Content/examples/Content.md +10 -10
- package/docs/components/ContextSelector/examples/context-selector.css +5 -1
- package/docs/components/ContextSelector/examples/context-selector.md +86 -80
- package/docs/components/DataList/examples/DataList.md +83 -83
- package/docs/components/DatePicker/examples/DatePicker.md +10 -10
- package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
- package/docs/components/Divider/examples/Divider.md +10 -10
- package/docs/components/DragDrop/examples/DragDrop.md +5 -5
- package/docs/components/Drawer/examples/Drawer.md +43 -43
- package/docs/components/Dropdown/examples/Dropdown.css +5 -2
- package/docs/components/Dropdown/examples/Dropdown.md +50 -50
- package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
- package/docs/components/EmptyState/examples/EmptyState.md +19 -19
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
- package/docs/components/FileUpload/examples/FileUpload.md +8 -8
- package/docs/components/Form/examples/Form.md +64 -64
- package/docs/components/FormControl/examples/FormControl.md +20 -20
- package/docs/components/HelperText/examples/HelperText.md +12 -12
- package/docs/components/Hint/examples/Hint.md +7 -7
- package/docs/components/Icon/examples/Icon.md +10 -10
- package/docs/components/InlineEdit/examples/InlineEdit.md +24 -24
- package/docs/components/InputGroup/examples/InputGroup.md +10 -10
- package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
- package/docs/components/Label/examples/Label.md +31 -31
- package/docs/components/LabelGroup/examples/LabelGroup.md +22 -22
- package/docs/components/List/examples/List.md +18 -18
- package/docs/components/LogViewer/examples/LogViewer.md +69 -69
- package/docs/components/Login/examples/Login.md +32 -32
- package/docs/components/Masthead/examples/masthead.md +9 -9
- package/docs/components/Menu/examples/Menu.md +81 -79
- package/docs/components/MenuToggle/examples/MenuToggle.md +24 -24
- package/docs/components/ModalBox/examples/ModalBox.md +35 -35
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +25 -25
- package/docs/components/Nav/examples/Navigation.md +69 -69
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +44 -44
- package/docs/components/NumberInput/examples/NumberInput.md +12 -12
- package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
- package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
- package/docs/components/Page/examples/Page.md +54 -54
- package/docs/components/Pagination/examples/Pagination.md +27 -27
- package/docs/components/Panel/examples/Panel.md +10 -10
- package/docs/components/Popover/examples/Popover.md +34 -34
- package/docs/components/Progress/examples/Progress.md +31 -31
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -38
- package/docs/components/Radio/examples/Radio.md +11 -11
- package/docs/components/SearchInput/examples/SearchInput.md +34 -34
- package/docs/components/Select/examples/Select.md +143 -143
- package/docs/components/Sidebar/examples/Sidebar.md +14 -14
- package/docs/components/SimpleList/examples/SimpleList.md +15 -15
- package/docs/components/Skeleton/examples/Skeleton.md +8 -8
- package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
- package/docs/components/Slider/examples/Slider.md +24 -24
- package/docs/components/Spinner/examples/Spinner.md +24 -24
- package/docs/components/Switch/examples/Switch.md +19 -19
- package/docs/components/TabContent/examples/TabContent.md +13 -13
- package/docs/components/Table/examples/Table.md +155 -155
- package/docs/components/Tabs/examples/Tabs.md +47 -47
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -19
- package/docs/components/Tile/examples/Tile.md +15 -15
- package/docs/components/Timestamp/examples/Timestamp.md +5 -5
- package/docs/components/Title/examples/Title.md +17 -17
- package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
- package/docs/components/Toolbar/examples/Toolbar.md +113 -113
- package/docs/components/Tooltip/examples/Tooltip.md +10 -10
- package/docs/components/TreeView/examples/TreeView.md +34 -34
- package/docs/components/Truncate/examples/Truncate.md +4 -4
- package/docs/components/Wizard/examples/Wizard.md +59 -59
- package/docs/demos/AboutModal/examples/AboutModal.md +4 -4
- package/docs/demos/Alert/examples/Alert.md +13 -13
- package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
- package/docs/demos/Banner/examples/Banner.md +8 -8
- package/docs/demos/Card/examples/Card.md +7 -7
- package/docs/demos/CardView/examples/CardView.md +7 -7
- package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
- package/docs/demos/Dashboard/examples/Dashboard.md +9 -5
- package/docs/demos/DataList/examples/DataList.md +22 -22
- package/docs/demos/DescriptionList/examples/DescriptionList.md +12 -12
- package/docs/demos/Drawer/examples/Drawer.md +20 -20
- package/docs/demos/HelperText/examples/HelperText.md +8 -8
- package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
- package/docs/demos/Masthead/examples/Masthead.md +29 -29
- package/docs/demos/Modal/examples/Modal.md +24 -24
- package/docs/demos/Nav/examples/Nav.md +47 -47
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -28
- package/docs/demos/Page/examples/Page.md +36 -36
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -32
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +36 -36
- package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
- package/docs/demos/Table/examples/Table.md +78 -78
- package/docs/demos/Tabs/examples/Tabs.md +25 -25
- package/docs/demos/Toolbar/examples/Toolbar.md +16 -16
- package/docs/demos/Wizard/examples/Wizard.md +54 -54
- package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
- package/docs/layouts/Flex/examples/Flex.md +98 -98
- package/docs/layouts/Gallery/examples/Gallery.md +7 -7
- package/docs/layouts/Grid/examples/Grid.md +9 -9
- package/docs/layouts/Level/examples/Level.md +5 -5
- package/docs/layouts/Split/examples/Split.md +7 -7
- package/docs/layouts/Stack/examples/Stack.md +6 -6
- package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
- package/docs/utilities/Alignment/examples/Alignment.md +6 -6
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
- package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
- package/docs/utilities/Display/examples/Display.md +11 -11
- package/docs/utilities/Flex/examples/Flex.md +34 -34
- package/docs/utilities/Float/examples/Float.md +4 -4
- package/docs/utilities/Sizing/examples/Sizing.md +50 -50
- package/docs/utilities/Spacing/examples/Spacing.md +34 -34
- package/docs/utilities/Text/examples/Text.md +27 -27
- package/icons/{pf-icons.json → pf-icons.mjs} +1 -1
- package/layouts/Grid/grid.css +5 -5
- package/package.json +56 -61
- package/patternfly-no-reset.css +196 -177
- package/patternfly.css +196 -177
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -1597,38 +1597,38 @@ cssPrefix: pf-c-calendar-month
|
|
|
1597
1597
|
|
|
1598
1598
|
### Accessibility
|
|
1599
1599
|
|
|
1600
|
-
| Attribute
|
|
1601
|
-
|
|
|
1602
|
-
| `aria-hidden="true"`
|
|
1603
|
-
| `aria-hidden="true"`
|
|
1604
|
-
| `.pf-screen-reader`
|
|
1605
|
-
| `aria-label="[Prev/Next] month"`
|
|
1606
|
-
| `disabled`
|
|
1607
|
-
| `aria-label="[date] [month] [year]"` | `.pf-c-calendar-month__date`
|
|
1600
|
+
| Attribute | Applied to | Outcome |
|
|
1601
|
+
| -- | -- | -- |
|
|
1602
|
+
| `aria-hidden="true"` | `.pf-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
|
|
1603
|
+
| `aria-hidden="true"` | `.pf-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
|
|
1604
|
+
| `.pf-screen-reader` | `.pf-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
|
|
1605
|
+
| `aria-label="[Prev/Next] month"` | `.pf-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
|
|
1606
|
+
| `disabled` | `.pf-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-c-calendar-month__dates-cell.pf-m-disabled`** |
|
|
1607
|
+
| `aria-label="[date] [month] [year]"` | `.pf-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |
|
|
1608
1608
|
|
|
1609
1609
|
### Usage
|
|
1610
1610
|
|
|
1611
|
-
| Class
|
|
1612
|
-
|
|
|
1613
|
-
| `.pf-c-calendar-month`
|
|
1614
|
-
| `.pf-c-calendar-month__header`
|
|
1615
|
-
| `.pf-c-calendar-month__header-nav-control` | `<div>`
|
|
1616
|
-
| `.pf-c-calendar-month__header-month`
|
|
1617
|
-
| `.pf-c-calendar-month__header-year`
|
|
1618
|
-
| `.pf-c-calendar-month__calendar`
|
|
1619
|
-
| `.pf-c-calendar-month__days`
|
|
1620
|
-
| `.pf-c-calendar-month__days-row`
|
|
1621
|
-
| `.pf-c-calendar-month__day`
|
|
1622
|
-
| `.pf-c-calendar-month__dates`
|
|
1623
|
-
| `.pf-c-calendar-month__dates-row`
|
|
1624
|
-
| `.pf-c-calendar-month__dates-cell`
|
|
1625
|
-
| `.pf-c-calendar-month__date`
|
|
1626
|
-
| `.pf-m-prev-month`
|
|
1627
|
-
| `.pf-m-next-month`
|
|
1628
|
-
| `.pf-m-current`
|
|
1629
|
-
| `.pf-m-selected`
|
|
1630
|
-
| `.pf-m-start-range`
|
|
1631
|
-
| `.pf-m-in-range`
|
|
1632
|
-
| `.pf-m-end-range`
|
|
1633
|
-
| `.pf-m-adjacent-month`
|
|
1634
|
-
| `.pf-m-disabled`
|
|
1611
|
+
| Class | Applied to | Outcome |
|
|
1612
|
+
| -- | -- | -- |
|
|
1613
|
+
| `.pf-c-calendar-month` | `<div>` | Initiates the calendar month component. **Required** |
|
|
1614
|
+
| `.pf-c-calendar-month__header` | `<div>` | Initiates the calendar month header. **Required** |
|
|
1615
|
+
| `.pf-c-calendar-month__header-nav-control` | `<div>` | Initiates a nav control for navigating by month. **Required** |
|
|
1616
|
+
| `.pf-c-calendar-month__header-month` | `<div>` | Initiates the month select. **Required** |
|
|
1617
|
+
| `.pf-c-calendar-month__header-year` | `<div>` | Initiates the year input. **Required** |
|
|
1618
|
+
| `.pf-c-calendar-month__calendar` | `<table>` | Initiates the calendar. **Required** |
|
|
1619
|
+
| `.pf-c-calendar-month__days` | `<thead>` | Initiates the calendar days section. **Required** |
|
|
1620
|
+
| `.pf-c-calendar-month__days-row` | `<tr>` | Initiates the calendar days row. **Required** |
|
|
1621
|
+
| `.pf-c-calendar-month__day` | `<th>` | Initiates a calendar day. **Required** |
|
|
1622
|
+
| `.pf-c-calendar-month__dates` | `<tbody>` | Initiates the calendar dates section. **Required** |
|
|
1623
|
+
| `.pf-c-calendar-month__dates-row` | `<tr>` | Initiates a calendar dates row. **Required** |
|
|
1624
|
+
| `.pf-c-calendar-month__dates-cell` | `<td>` | Initiates a calendar date cell. **Required** |
|
|
1625
|
+
| `.pf-c-calendar-month__date` | `<button>` | Initiates a calendar date. **Required** |
|
|
1626
|
+
| `.pf-m-prev-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required** |
|
|
1627
|
+
| `.pf-m-next-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required** |
|
|
1628
|
+
| `.pf-m-current` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the current day. **Required** |
|
|
1629
|
+
| `.pf-m-selected` | `.pf-c-calendar-month__dates-cell` | Indicates a date is selected. |
|
|
1630
|
+
| `.pf-m-start-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the start of a range. |
|
|
1631
|
+
| `.pf-m-in-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in a range. |
|
|
1632
|
+
| `.pf-m-end-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the end of a range. |
|
|
1633
|
+
| `.pf-m-adjacent-month` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in an adjacent month. |
|
|
1634
|
+
| `.pf-m-disabled` | `.pf-c-calendar-month__dates-cell` | Indicates a date is disabled and unavailable. |
|
|
@@ -906,30 +906,30 @@ A card is a generic rectangular container that can be used to build other compon
|
|
|
906
906
|
|
|
907
907
|
### Usage
|
|
908
908
|
|
|
909
|
-
| Class
|
|
910
|
-
|
|
|
911
|
-
| `.pf-c-card`
|
|
912
|
-
| `.pf-c-card__title`
|
|
913
|
-
| `.pf-c-card__body`
|
|
914
|
-
| `.pf-c-card__footer`
|
|
915
|
-
| `.pf-c-card__header`
|
|
916
|
-
| `.pf-c-card__header-toggle`
|
|
917
|
-
| `.pf-c-card__header-toggle-icon` | `<span>`
|
|
918
|
-
| `.pf-c-card__actions`
|
|
919
|
-
| `.pf-c-card__header-main`
|
|
920
|
-
| `.pf-c-card__expandable-content` | `<div>`
|
|
921
|
-
| `.pf-c-card__sr-input`
|
|
922
|
-
| `.pf-m-compact`
|
|
923
|
-
| `.pf-m-display-lg`
|
|
924
|
-
| `.pf-m-no-fill`
|
|
925
|
-
| `.pf-m-hoverable-raised`
|
|
926
|
-
| `.pf-m-selectable-raised`
|
|
927
|
-
| `.pf-m-selected-raised`
|
|
928
|
-
| `.pf-m-non-selectable-raised`
|
|
929
|
-
| `.pf-m-flat`
|
|
930
|
-
| `.pf-m-rounded`
|
|
931
|
-
| `.pf-m-plain`
|
|
932
|
-
| `.pf-m-expanded`
|
|
933
|
-
| `.pf-m-toggle-right`
|
|
934
|
-
| `.pf-m-full-height`
|
|
935
|
-
| `.pf-m-no-offset`
|
|
909
|
+
| Class | Applied | Outcome |
|
|
910
|
+
| ---- | ---- | ---- |
|
|
911
|
+
| `.pf-c-card` | `<div>` | Creates a card component. **Required** |
|
|
912
|
+
| `.pf-c-card__title` | `<div>` | Creates the title of a card. |
|
|
913
|
+
| `.pf-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements. |
|
|
914
|
+
| `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
|
|
915
|
+
| `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
|
|
916
|
+
| `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
|
|
917
|
+
| `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
|
|
918
|
+
| `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
|
|
919
|
+
| `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-c-card__header` has content outside of a card header toggle or card header actions** |
|
|
920
|
+
| `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
|
|
921
|
+
| `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused. |
|
|
922
|
+
| `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
|
|
923
|
+
| `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
|
|
924
|
+
| `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
|
|
925
|
+
| `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
|
|
926
|
+
| `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
|
|
927
|
+
| `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
|
|
928
|
+
| `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable. |
|
|
929
|
+
| `.pf-m-flat` | `.pf-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
|
|
930
|
+
| `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
|
|
931
|
+
| `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
|
|
932
|
+
| `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state. |
|
|
933
|
+
| `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
|
|
934
|
+
| `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent. |
|
|
935
|
+
| `.pf-m-no-offset` | `.pf-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
|
|
@@ -209,20 +209,20 @@ If you extend this component or modify the styles of this component, then make s
|
|
|
209
209
|
|
|
210
210
|
### Accessibility
|
|
211
211
|
|
|
212
|
-
| Attribute
|
|
213
|
-
|
|
|
212
|
+
| Attribute | Applied to | Outcome |
|
|
213
|
+
| -- | -- | -- |
|
|
214
214
|
| `disabled` | `.pf-c-check__input` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
|
|
215
|
-
| `required` | `.pf-c-check__input` | Indicates that the element is required.
|
|
215
|
+
| `required` | `.pf-c-check__input` | Indicates that the element is required. |
|
|
216
216
|
|
|
217
217
|
### Usage
|
|
218
218
|
|
|
219
|
-
| Class
|
|
220
|
-
|
|
|
221
|
-
| `.pf-c-check`
|
|
222
|
-
| `.pf-c-check__input`
|
|
223
|
-
| `.pf-c-check__label`
|
|
224
|
-
| `.pf-c-check__label-required` | `<span>`
|
|
225
|
-
| `.pf-c-check__description`
|
|
226
|
-
| `.pf-c-check__body`
|
|
227
|
-
| `.pf-m-standalone`
|
|
228
|
-
| `.pf-m-disabled`
|
|
219
|
+
| Class | Applied to | Outcome |
|
|
220
|
+
| -- | -- | -- |
|
|
221
|
+
| `.pf-c-check` | `<div>`, `<label>` | Initiates the check component. **Required** |
|
|
222
|
+
| `.pf-c-check__input` | `<input type="checkbox">` | Initiates a check input. **Required** |
|
|
223
|
+
| `.pf-c-check__label` | `<label>`, `<span>` | Initiates a label. **Required** |
|
|
224
|
+
| `.pf-c-check__label-required` | `<span>` | Initiates a required indicator. |
|
|
225
|
+
| `.pf-c-check__description` | `<span>` | Initiates a check description. |
|
|
226
|
+
| `.pf-c-check__body` | `<span>` | Initiates a check body. |
|
|
227
|
+
| `.pf-m-standalone` | `.pf-c-check` | Modifies the check component for use with a standalone `<input type="checkbox">`. **Required when there is no label** |
|
|
228
|
+
| `.pf-m-disabled` | `.pf-c-check__label` | Modifies the check component for the disabled state. **Required when input is disabled** |
|
|
@@ -80,20 +80,20 @@ A Chip is used to display items that have been filtered or selected from a large
|
|
|
80
80
|
|
|
81
81
|
## Accessibility
|
|
82
82
|
|
|
83
|
-
| Attribute
|
|
84
|
-
|
|
|
85
|
-
| `aria-label="[button label text]"`
|
|
83
|
+
| Attribute | Applied to | Outcome |
|
|
84
|
+
| -- | -- | -- |
|
|
85
|
+
| `aria-label="[button label text]"` | `.pf-c-button` | Provides an accessible name for the button when an icon is used instead of text. Required when an icon is used with no supporting text. |
|
|
86
86
|
| `aria-labelledby="[id value of .pf-c-button]"` | `.pf-c-button` | Gives the button an accessible name by referring to the element that provides the position of the button within a list. Required when the button is being removed. |
|
|
87
|
-
| `aria-hidden="true"`
|
|
87
|
+
| `aria-hidden="true"` | `<i>` | Hides the icon from assistive technologies. |
|
|
88
88
|
|
|
89
89
|
## Usage
|
|
90
90
|
|
|
91
|
-
| Class
|
|
92
|
-
|
|
|
93
|
-
| `.pf-c-chip`
|
|
94
|
-
| `.pf-c-chip__text` | `<span>`
|
|
95
|
-
| `.pf-c-chip__icon` | `<span>`
|
|
96
|
-
| `.pf-c-button`
|
|
97
|
-
| `.pf-c-badge`
|
|
98
|
-
| `.pf-m-overflow`
|
|
99
|
-
| `.pf-m-draggable`
|
|
91
|
+
| Class | Applied to | Outcome |
|
|
92
|
+
| -- | -- | -- |
|
|
93
|
+
| `.pf-c-chip` | `<div>`, `<button>`, | Initiates the chip component. Use a `<button>` with overflow chips **Required** |
|
|
94
|
+
| `.pf-c-chip__text` | `<span>` | Initiates the text inside of the chip. **Required** |
|
|
95
|
+
| `.pf-c-chip__icon` | `<span>` | Initiates the icon inside of the chip. |
|
|
96
|
+
| `.pf-c-button` | `.pf-c-chip <button>` | Initiates the button used to remove the chip. |
|
|
97
|
+
| `.pf-c-badge` | `<span>` | Initiates the badge inside the chip. |
|
|
98
|
+
| `.pf-m-overflow` | `button.pf-c-chip` | Applies styling of the overflow chip. |
|
|
99
|
+
| `.pf-m-draggable` | `.pf-c-chip` | Modifies the chip to be in the draggable state. |
|
|
@@ -580,21 +580,21 @@ The chip group requires the [chip component](/components/chip).
|
|
|
580
580
|
|
|
581
581
|
**All single chip accessibility and usage requirements apply.**
|
|
582
582
|
|
|
583
|
-
| Attributes for closable chip group button
|
|
584
|
-
|
|
|
585
|
-
| `role="list"`
|
|
586
|
-
| `aria-label="[button label text]"`
|
|
587
|
-
| `aria-labelledby="[id value of .pf-c-chip-group__close > button] [id value of .pf-c-chip-group__label]"` | `.pf-c-chip-group__close > button` | Provides an accessible name for the button. **Required**
|
|
583
|
+
| Attributes for closable chip group button | Applied to | Outcome |
|
|
584
|
+
| -- | -- | -- |
|
|
585
|
+
| `role="list"` | `.pf-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
|
|
586
|
+
| `aria-label="[button label text]"` | `.pf-c-chip-group__close > button` | Provides an accessible name for a chip group close when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
|
|
587
|
+
| `aria-labelledby="[id value of .pf-c-chip-group__close > button] [id value of .pf-c-chip-group__label]"` | `.pf-c-chip-group__close > button` | Provides an accessible name for the button. **Required** |
|
|
588
588
|
|
|
589
589
|
### Usage
|
|
590
590
|
|
|
591
|
-
| Class
|
|
592
|
-
|
|
|
593
|
-
| `.pf-c-chip-group`
|
|
594
|
-
| `.pf-c-chip-group__list`
|
|
595
|
-
| `.pf-c-chip-group__list-item` | `<li>`
|
|
596
|
-
| `.pf-c-chip-group__label`
|
|
597
|
-
| `.pf-c-chip-group__close`
|
|
598
|
-
| `.pf-c-chip-group__main`
|
|
599
|
-
| `.pf-c-button`
|
|
600
|
-
| `.pf-m-category`
|
|
591
|
+
| Class | Applied to | Outcome |
|
|
592
|
+
| -- | -- | -- |
|
|
593
|
+
| `.pf-c-chip-group` | `<div>` | Initiates the chip group component. **Required.** |
|
|
594
|
+
| `.pf-c-chip-group__list` | `<ul>` | Initiates the container for a list of chips. **Required.** |
|
|
595
|
+
| `.pf-c-chip-group__list-item` | `<li>` | Initiates the list item inside of the chip group. **Required.** |
|
|
596
|
+
| `.pf-c-chip-group__label` | `<span>` | Initiates the label to be used in the chip group. |
|
|
597
|
+
| `.pf-c-chip-group__close` | `<div>` | Initiates the container used for the button to remove the chip group. |
|
|
598
|
+
| `.pf-c-chip-group__main` | `<div>` | Initiates the container for the label and list elements so that they wrap together. **Required** |
|
|
599
|
+
| `.pf-c-button` | `.pf-c-chip-group__close <button>` | Initiates the button used to remove the chip group. |
|
|
600
|
+
| `.pf-m-category` | `.pf-c-chip-group` | Modifies the chip group to support category styling. |
|
|
@@ -350,28 +350,28 @@ cssPrefix: pf-c-clipboard-copy
|
|
|
350
350
|
|
|
351
351
|
### Accessibility
|
|
352
352
|
|
|
353
|
-
| Attribute
|
|
354
|
-
|
|
|
355
|
-
| `aria-label="Copy to clipboard"`, `aria-label="Show content"` | `.pf-c-button.pf-m-control`
|
|
356
|
-
| `aria-label="[input label text]"`
|
|
357
|
-
| `aria-hidden="true"`
|
|
358
|
-
| `aria-controls="[id of expandable element]"`
|
|
359
|
-
| `hidden`
|
|
360
|
-
| `aria-labelledby="[id of button] [id of input label]"`
|
|
353
|
+
| Attribute | Applied to | Outcome |
|
|
354
|
+
| -- | -- | -- |
|
|
355
|
+
| `aria-label="Copy to clipboard"`, `aria-label="Show content"` | `.pf-c-button.pf-m-control` | Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.** |
|
|
356
|
+
| `aria-label="[input label text]"` | `.pf-c-form-control` | Provides an accessible label for the input. Provide a label that describes the contents in the input. **Required** |
|
|
357
|
+
| `aria-hidden="true"` | `<i>` | Hides the icon from assistive technologies. |
|
|
358
|
+
| `aria-controls="[id of expandable element]"` | `.pf-c-button.pf-m-control` | Identifies the element controlled by the toggle button. **Required** |
|
|
359
|
+
| `hidden` | `.pf-c-clipboard-copy__expandable-content` | Indicates that the expandable content is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
|
|
360
|
+
| `aria-labelledby="[id of button] [id of input label]"` | `.pf-c-button.pf-m-control` | Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. **Important:** If the label is defined on the `<input>` using `aria-label`, then use the `id` of the `<input>`. If the label is defined in a `<label>`, then use the `id` of the `<label>`. **Alternatively** this attribute can be ignored if the text input label is defined as part of the value in `aria-label`. |
|
|
361
361
|
|
|
362
362
|
### Usage
|
|
363
363
|
|
|
364
|
-
| Class
|
|
365
|
-
|
|
|
366
|
-
| `.pf-c-clipboard-copy`
|
|
367
|
-
| `.pf-c-clipboard-copy__group`
|
|
368
|
-
| `.pf-c-clipboard-copy__toggle-icon`
|
|
369
|
-
| `.pf-c-clipboard-copy__expandable-content` | `<div>`
|
|
370
|
-
| `.pf-c-clipboard-copy__text`
|
|
371
|
-
| `.pf-c-clipboard-copy__actions`
|
|
372
|
-
| `.pf-c-clipboard-copy__actions-item`
|
|
373
|
-
| `.pf-m-inline`
|
|
374
|
-
| `.pf-m-block`
|
|
375
|
-
| `.pf-m-expanded`
|
|
376
|
-
| `.pf-m-expanded`
|
|
377
|
-
| `.pf-m-code`
|
|
364
|
+
| Class | Applied to | Outcome |
|
|
365
|
+
| -- | -- | -- |
|
|
366
|
+
| `.pf-c-clipboard-copy` | `<div>` | Initiates a clipboard copy component. **Required** |
|
|
367
|
+
| `.pf-c-clipboard-copy__group` | `<div>` | Initiates a wrapper for the clipboard copy group. **Required** |
|
|
368
|
+
| `.pf-c-clipboard-copy__toggle-icon` | `<div>` | Initiates a toggle button icon. |
|
|
369
|
+
| `.pf-c-clipboard-copy__expandable-content` | `<div>` | Initiates an expandable element. |
|
|
370
|
+
| `.pf-c-clipboard-copy__text` | `<span>` | Initiates the inline copy clipboard text element. **Required** |
|
|
371
|
+
| `.pf-c-clipboard-copy__actions` | `<span>` | Initiates the inline copy clipboard actions element. **Required** |
|
|
372
|
+
| `.pf-c-clipboard-copy__actions-item` | `<span>` | Initiates the inline copy clipboard actions item element. **Required** |
|
|
373
|
+
| `.pf-m-inline` | `.pf-c-clipboard-copy` | Modifies the clipboard copy component for inline styles. |
|
|
374
|
+
| `.pf-m-block` | `.pf-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting. |
|
|
375
|
+
| `.pf-m-expanded` | `.pf-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. |
|
|
376
|
+
| `.pf-m-expanded` | `.pf-c-button.pf-m-control` | Modifies the control toggle button for the expanded state. |
|
|
377
|
+
| `.pf-m-code` | `code.pf-c-clipboard-copy__text` | Modifies the inline copy clipboard text styles for use with the `<code>` element. |
|
|
@@ -169,12 +169,12 @@ name: azure-sample-repo<div
|
|
|
169
169
|
|
|
170
170
|
### Usage
|
|
171
171
|
|
|
172
|
-
| Class
|
|
173
|
-
|
|
|
174
|
-
| `.pf-c-code-block`
|
|
175
|
-
| `.pf-c-code-block__header`
|
|
176
|
-
| `.pf-c-code-block__actions`
|
|
177
|
-
| `.pf-c-code-block__actions-item` | `<div>`
|
|
178
|
-
| `.pf-c-code-block__content`
|
|
179
|
-
| `.pf-c-code-block__pre`
|
|
180
|
-
| `.pf-c-code-block__code`
|
|
172
|
+
| Class | Applied to | Outcome |
|
|
173
|
+
| -- | -- | -- |
|
|
174
|
+
| `.pf-c-code-block` | `<div>` | Initiates the code block component. **Required** |
|
|
175
|
+
| `.pf-c-code-block__header` | `<div>` | Initiates the code block header. |
|
|
176
|
+
| `.pf-c-code-block__actions` | `<div>` | Initiates the code block actions. |
|
|
177
|
+
| `.pf-c-code-block__actions-item` | `<div>` | Initiates a code block action item. |
|
|
178
|
+
| `.pf-c-code-block__content` | `<div>` | Initiates the code block content. **Required** |
|
|
179
|
+
| `.pf-c-code-block__pre` | `<pre>` | Initiates the code block `<pre>` element. **Required** |
|
|
180
|
+
| `.pf-c-code-block__code` | `<code>` | Initiates the code block `<code>` element. **Required** |
|
|
@@ -107,23 +107,38 @@ cssPrefix: pf-c-code-editor
|
|
|
107
107
|
<div class="pf-c-code-editor__header-main"></div>
|
|
108
108
|
<div class="pf-c-code-editor__tab">
|
|
109
109
|
<span class="pf-c-code-editor__tab-icon">
|
|
110
|
-
<i class="fas fa-code"></i>
|
|
110
|
+
<i class="fas fa-code" aria-hidden="true"></i>
|
|
111
111
|
</span>
|
|
112
112
|
<span class="pf-c-code-editor__tab-text">YAML</span>
|
|
113
113
|
</div>
|
|
114
114
|
</div>
|
|
115
115
|
<div class="pf-c-code-editor__main">
|
|
116
|
-
<div class="pf-c-empty-state
|
|
116
|
+
<div class="pf-c-empty-state">
|
|
117
117
|
<div class="pf-c-empty-state__content">
|
|
118
|
-
<div class="pf-c-empty-
|
|
119
|
-
<
|
|
118
|
+
<div class="pf-c-empty-state__header">
|
|
119
|
+
<div class="pf-c-empty-state__icon">
|
|
120
|
+
<i class="fas fa- fa-code" aria-hidden="true"></i>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="pf-c-empty-state__title">
|
|
123
|
+
<h1 class="pf-c-empty-state__title-text">Start editing</h1>
|
|
124
|
+
</div>
|
|
120
125
|
</div>
|
|
121
|
-
|
|
126
|
+
|
|
122
127
|
<div
|
|
123
128
|
class="pf-c-empty-state__body"
|
|
124
129
|
>Drag a file here or browse to upload.</div>
|
|
125
|
-
|
|
126
|
-
<
|
|
130
|
+
|
|
131
|
+
<div class="pf-c-empty-state__footer">
|
|
132
|
+
<div class="pf-c-empty-state__actions">
|
|
133
|
+
<button class="pf-c-button pf-m-primary" type="button">Browse</button>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="pf-c-empty-state__actions">
|
|
136
|
+
<button
|
|
137
|
+
class="pf-c-button pf-m-link"
|
|
138
|
+
type="button"
|
|
139
|
+
>Start from scratch</button>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
127
142
|
</div>
|
|
128
143
|
</div>
|
|
129
144
|
</div>
|
|
@@ -139,23 +154,38 @@ cssPrefix: pf-c-code-editor
|
|
|
139
154
|
<div class="pf-c-code-editor__header-main"></div>
|
|
140
155
|
<div class="pf-c-code-editor__tab">
|
|
141
156
|
<span class="pf-c-code-editor__tab-icon">
|
|
142
|
-
<i class="fas fa-code"></i>
|
|
157
|
+
<i class="fas fa-code" aria-hidden="true"></i>
|
|
143
158
|
</span>
|
|
144
159
|
<span class="pf-c-code-editor__tab-text">YAML</span>
|
|
145
160
|
</div>
|
|
146
161
|
</div>
|
|
147
162
|
<div class="pf-c-code-editor__main pf-m-drag-hover">
|
|
148
|
-
<div class="pf-c-empty-state
|
|
163
|
+
<div class="pf-c-empty-state">
|
|
149
164
|
<div class="pf-c-empty-state__content">
|
|
150
|
-
<div class="pf-c-empty-
|
|
151
|
-
<
|
|
165
|
+
<div class="pf-c-empty-state__header">
|
|
166
|
+
<div class="pf-c-empty-state__icon">
|
|
167
|
+
<i class="fas fa- fa-code" aria-hidden="true"></i>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="pf-c-empty-state__title">
|
|
170
|
+
<h1 class="pf-c-empty-state__title-text">Start editing</h1>
|
|
171
|
+
</div>
|
|
152
172
|
</div>
|
|
153
|
-
|
|
173
|
+
|
|
154
174
|
<div
|
|
155
175
|
class="pf-c-empty-state__body"
|
|
156
176
|
>Drag a file here or browse to upload.</div>
|
|
157
|
-
|
|
158
|
-
<
|
|
177
|
+
|
|
178
|
+
<div class="pf-c-empty-state__footer">
|
|
179
|
+
<div class="pf-c-empty-state__actions">
|
|
180
|
+
<button class="pf-c-button pf-m-primary" type="button">Browse</button>
|
|
181
|
+
</div>
|
|
182
|
+
<div class="pf-c-empty-state__actions">
|
|
183
|
+
<button
|
|
184
|
+
class="pf-c-button pf-m-link"
|
|
185
|
+
type="button"
|
|
186
|
+
>Start from scratch</button>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
159
189
|
</div>
|
|
160
190
|
</div>
|
|
161
191
|
</div>
|
|
@@ -220,24 +250,17 @@ cssPrefix: pf-c-code-editor
|
|
|
220
250
|
|
|
221
251
|
## Documentation
|
|
222
252
|
|
|
223
|
-
### Overview
|
|
224
|
-
|
|
225
|
-
### Accessibility
|
|
226
|
-
|
|
227
|
-
| Class | Applied to | Outcome |
|
|
228
|
-
| ----- | ---------- | ------- |
|
|
229
|
-
|
|
230
253
|
### Usage
|
|
231
254
|
|
|
232
|
-
| Class
|
|
233
|
-
|
|
|
234
|
-
| `.pf-c-code-editor`
|
|
235
|
-
| `.pf-c-code-editor__header`
|
|
236
|
-
| `.pf-c-code-editor__main`
|
|
237
|
-
| `.pf-c-code-editor__code`
|
|
238
|
-
| `.pf-c-code-editor__controls`
|
|
239
|
-
| `.pf-c-code-editor__header-main`
|
|
240
|
-
| `.pf-c-code-editor__keyboard-shortcuts` | `<div>`
|
|
241
|
-
| `.pf-c-code-editor__tab`
|
|
242
|
-
| `.pf-c-code-editor__tab-text`
|
|
243
|
-
| `.pf-c-code-editor__tab-icon`
|
|
255
|
+
| Class | Applied to | Outcome |
|
|
256
|
+
| -- | -- | -- |
|
|
257
|
+
| `.pf-c-code-editor` | `<div>` | Initiates the code editor component. **Required** |
|
|
258
|
+
| `.pf-c-code-editor__header` | `<div>` | Initiates the code editor header used for the controls and tab elements. **Required** |
|
|
259
|
+
| `.pf-c-code-editor__main` | `<div>` | Initiates the main container for a code editor e.g. Monaco **Required** |
|
|
260
|
+
| `.pf-c-code-editor__code` | `<div>` | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |
|
|
261
|
+
| `.pf-c-code-editor__controls` | `<div>` | Initiates the code editor controls. |
|
|
262
|
+
| `.pf-c-code-editor__header-main` | `<div>` | Initiates the code editor header content area. |
|
|
263
|
+
| `.pf-c-code-editor__keyboard-shortcuts` | `<div>` | Initiates the code editor header keyboard shortcuts area. |
|
|
264
|
+
| `.pf-c-code-editor__tab` | `<div>` | Initiates the code editor tab. |
|
|
265
|
+
| `.pf-c-code-editor__tab-text` | `<span>` | Initiates the code editor tab text. |
|
|
266
|
+
| `.pf-c-code-editor__tab-icon` | `<span>` | Initiates the code editor tab icon. |
|
|
@@ -163,11 +163,11 @@ cssPrefix: pf-c-content
|
|
|
163
163
|
|
|
164
164
|
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `pf-c-content` as container. It can handle almost any HTML tag:
|
|
165
165
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
166
|
+
* `<p>` paragraphs
|
|
167
|
+
* `<ul>` `<ol>` `<dl>` lists
|
|
168
|
+
* `<h1>` to `<h6>` headings
|
|
169
|
+
* `<blockquote>` quotes
|
|
170
|
+
* `<em>` and `<strong>`
|
|
171
171
|
|
|
172
172
|
This `pf-c-content` class can be used in any context where you just want to (or can only) write some text.
|
|
173
173
|
|
|
@@ -175,8 +175,8 @@ This component is an exception to the variable system since we style type select
|
|
|
175
175
|
|
|
176
176
|
### Usage
|
|
177
177
|
|
|
178
|
-
| Class
|
|
179
|
-
|
|
|
180
|
-
| `.pf-c-content` | `<div>`, `<section>`, or `<article>` | Generates vertical rhythm and typographic treatment to html elements.
|
|
181
|
-
| `.pf-m-visited` | `.pf-c-content`, `<a>`
|
|
182
|
-
| `.pf-m-plain`
|
|
178
|
+
| Class | Applied to | Outcome |
|
|
179
|
+
| -- | -- | -- |
|
|
180
|
+
| `.pf-c-content` | `<div>`, `<section>`, or `<article>` | Generates vertical rhythm and typographic treatment to html elements. |
|
|
181
|
+
| `.pf-m-visited` | `.pf-c-content`, `<a>` | Modifies all links in a content block to include visited styles. Can also be applied to a single link in a content block. |
|
|
182
|
+
| `.pf-m-plain` | `<ul>`, `<ol>` | Removes the list marker and indentation. |
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
#ws-core-c-context-selector-basic, #ws-core-c-context-selector-
|
|
1
|
+
#ws-core-c-context-selector-basic, #ws-core-c-context-selector-plain-with-text {
|
|
2
2
|
min-height: 380px;
|
|
3
3
|
}
|
|
4
|
+
|
|
5
|
+
#ws-core-c-context-selector-with-footer {
|
|
6
|
+
min-height: 420px;
|
|
7
|
+
}
|