@patternfly/react-core 6.4.1-prerelease.9 → 6.4.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 +2 -48
- package/components/package.json +1 -1
- package/deprecated/package.json +1 -1
- package/dist/dynamic/components/AboutModal/package.json +1 -1
- package/dist/dynamic/components/Accordion/package.json +1 -1
- package/dist/dynamic/components/ActionList/package.json +1 -1
- package/dist/dynamic/components/Alert/package.json +1 -1
- package/dist/dynamic/components/Avatar/package.json +1 -1
- package/dist/dynamic/components/BackToTop/package.json +1 -1
- package/dist/dynamic/components/Backdrop/package.json +1 -1
- package/dist/dynamic/components/BackgroundImage/package.json +1 -1
- package/dist/dynamic/components/Badge/package.json +1 -1
- package/dist/dynamic/components/Banner/package.json +1 -1
- package/dist/dynamic/components/Brand/package.json +1 -1
- package/dist/dynamic/components/Breadcrumb/package.json +1 -1
- package/dist/dynamic/components/Button/package.json +1 -1
- package/dist/dynamic/components/CalendarMonth/package.json +1 -1
- package/dist/dynamic/components/Card/package.json +1 -1
- package/dist/dynamic/components/Checkbox/package.json +1 -1
- package/dist/dynamic/components/ClipboardCopy/package.json +1 -1
- package/dist/dynamic/components/CodeBlock/package.json +1 -1
- package/dist/dynamic/components/Content/package.json +1 -1
- package/dist/dynamic/components/DataList/package.json +1 -1
- package/dist/dynamic/components/DatePicker/package.json +1 -1
- package/dist/dynamic/components/DescriptionList/package.json +1 -1
- package/dist/dynamic/components/Divider/package.json +1 -1
- package/dist/dynamic/components/Drawer/package.json +1 -1
- package/dist/dynamic/components/Dropdown/package.json +1 -1
- package/dist/dynamic/components/DualListSelector/package.json +1 -1
- package/dist/dynamic/components/EmptyState/package.json +1 -1
- package/dist/dynamic/components/ExpandableSection/package.json +1 -1
- package/dist/dynamic/components/FileUpload/package.json +1 -1
- package/dist/dynamic/components/Form/package.json +1 -1
- package/dist/dynamic/components/FormSelect/package.json +1 -1
- package/dist/dynamic/components/HelperText/package.json +1 -1
- package/dist/dynamic/components/Hint/package.json +1 -1
- package/dist/dynamic/components/Icon/package.json +1 -1
- package/dist/dynamic/components/InputGroup/package.json +1 -1
- package/dist/dynamic/components/JumpLinks/package.json +1 -1
- package/dist/dynamic/components/Label/package.json +1 -1
- package/dist/dynamic/components/List/package.json +1 -1
- package/dist/dynamic/components/LoginPage/package.json +1 -1
- package/dist/dynamic/components/Masthead/package.json +1 -1
- package/dist/dynamic/components/Menu/package.json +1 -1
- package/dist/dynamic/components/MenuToggle/package.json +1 -1
- package/dist/dynamic/components/Modal/package.json +1 -1
- package/dist/dynamic/components/MultipleFileUpload/package.json +1 -1
- package/dist/dynamic/components/Nav/package.json +1 -1
- package/dist/dynamic/components/NotificationBadge/package.json +1 -1
- package/dist/dynamic/components/NotificationDrawer/package.json +1 -1
- package/dist/dynamic/components/NumberInput/package.json +1 -1
- package/dist/dynamic/components/OverflowMenu/package.json +1 -1
- package/dist/dynamic/components/Page/package.json +1 -1
- package/dist/dynamic/components/Pagination/package.json +1 -1
- package/dist/dynamic/components/Panel/package.json +1 -1
- package/dist/dynamic/components/Popover/package.json +1 -1
- package/dist/dynamic/components/Progress/package.json +1 -1
- package/dist/dynamic/components/ProgressStepper/package.json +1 -1
- package/dist/dynamic/components/Radio/package.json +1 -1
- package/dist/dynamic/components/SearchInput/package.json +1 -1
- package/dist/dynamic/components/Select/package.json +1 -1
- package/dist/dynamic/components/Sidebar/package.json +1 -1
- package/dist/dynamic/components/SimpleList/package.json +1 -1
- package/dist/dynamic/components/Skeleton/package.json +1 -1
- package/dist/dynamic/components/SkipToContent/package.json +1 -1
- package/dist/dynamic/components/Slider/package.json +1 -1
- package/dist/dynamic/components/Spinner/package.json +1 -1
- package/dist/dynamic/components/Switch/package.json +1 -1
- package/dist/dynamic/components/Tabs/package.json +1 -1
- package/dist/dynamic/components/TextArea/package.json +1 -1
- package/dist/dynamic/components/TextInput/package.json +1 -1
- package/dist/dynamic/components/TextInputGroup/package.json +1 -1
- package/dist/dynamic/components/TimePicker/package.json +1 -1
- package/dist/dynamic/components/Timestamp/package.json +1 -1
- package/dist/dynamic/components/Title/package.json +1 -1
- package/dist/dynamic/components/ToggleGroup/package.json +1 -1
- package/dist/dynamic/components/Toolbar/package.json +1 -1
- package/dist/dynamic/components/Tooltip/package.json +1 -1
- package/dist/dynamic/components/TreeView/package.json +1 -1
- package/dist/dynamic/components/Truncate/package.json +1 -1
- package/dist/dynamic/components/Wizard/hooks/package.json +1 -1
- package/dist/dynamic/components/Wizard/package.json +1 -1
- package/dist/dynamic/deprecated/components/Chip/package.json +1 -1
- package/dist/dynamic/deprecated/components/DragDrop/package.json +1 -1
- package/dist/dynamic/deprecated/components/DualListSelector/package.json +1 -1
- package/dist/dynamic/deprecated/components/Modal/package.json +1 -1
- package/dist/dynamic/deprecated/components/Tile/package.json +1 -1
- package/dist/dynamic/deprecated/components/Wizard/package.json +1 -1
- package/dist/dynamic/deprecated/components/package.json +1 -1
- package/dist/dynamic/helpers/AnimationsProvider/AnimationsProvider/package.json +1 -1
- package/dist/dynamic/helpers/AnimationsProvider/package.json +1 -1
- package/dist/dynamic/helpers/FocusTrap/FocusTrap/package.json +1 -1
- package/dist/dynamic/helpers/GenerateId/GenerateId/package.json +1 -1
- package/dist/dynamic/helpers/KeyboardHandler/package.json +1 -1
- package/dist/dynamic/helpers/OUIA/ouia/package.json +1 -1
- package/dist/dynamic/helpers/Popper/Popper/package.json +1 -1
- package/dist/dynamic/helpers/constants/package.json +1 -1
- package/dist/dynamic/helpers/datetimeUtils/package.json +1 -1
- package/dist/dynamic/helpers/fileUtils/package.json +1 -1
- package/dist/dynamic/helpers/htmlConstants/package.json +1 -1
- package/dist/dynamic/helpers/package.json +1 -1
- package/dist/dynamic/helpers/resizeObserver/package.json +1 -1
- package/dist/dynamic/helpers/typeUtils/package.json +1 -1
- package/dist/dynamic/helpers/useInterval/package.json +1 -1
- package/dist/dynamic/helpers/useIsomorphicLayout/package.json +1 -1
- package/dist/dynamic/helpers/useUnmountEffect/package.json +1 -1
- package/dist/dynamic/helpers/util/package.json +1 -1
- package/dist/dynamic/layouts/Bullseye/package.json +1 -1
- package/dist/dynamic/layouts/Flex/package.json +1 -1
- package/dist/dynamic/layouts/Gallery/package.json +1 -1
- package/dist/dynamic/layouts/Grid/package.json +1 -1
- package/dist/dynamic/layouts/Level/package.json +1 -1
- package/dist/dynamic/layouts/Split/package.json +1 -1
- package/dist/dynamic/layouts/Stack/package.json +1 -1
- package/dist/dynamic/styles/package.json +1 -1
- package/dist/esm/components/Checkbox/Checkbox.d.ts +0 -3
- package/dist/esm/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +4 -14
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Drawer/DrawerPanelContent.d.ts.map +1 -1
- package/dist/esm/components/Drawer/DrawerPanelContent.js +4 -2
- package/dist/esm/components/Drawer/DrawerPanelContent.js.map +1 -1
- package/dist/esm/components/ExpandableSection/ExpandableSection.d.ts +0 -4
- package/dist/esm/components/ExpandableSection/ExpandableSection.d.ts.map +1 -1
- package/dist/esm/components/ExpandableSection/ExpandableSection.js +3 -5
- package/dist/esm/components/ExpandableSection/ExpandableSection.js.map +1 -1
- package/dist/esm/components/ExpandableSection/ExpandableSectionToggle.d.ts +0 -4
- package/dist/esm/components/ExpandableSection/ExpandableSectionToggle.d.ts.map +1 -1
- package/dist/esm/components/ExpandableSection/ExpandableSectionToggle.js +2 -2
- package/dist/esm/components/ExpandableSection/ExpandableSectionToggle.js.map +1 -1
- package/dist/esm/components/Modal/Modal.d.ts +0 -2
- package/dist/esm/components/Modal/Modal.d.ts.map +1 -1
- package/dist/esm/components/Modal/Modal.js.map +1 -1
- package/dist/esm/components/Modal/ModalContent.d.ts +0 -2
- package/dist/esm/components/Modal/ModalContent.d.ts.map +1 -1
- package/dist/esm/components/Modal/ModalContent.js +2 -2
- package/dist/esm/components/Modal/ModalContent.js.map +1 -1
- package/dist/esm/components/Progress/ProgressContainer.js +2 -2
- package/dist/esm/components/Progress/ProgressContainer.js.map +1 -1
- package/dist/esm/components/Radio/Radio.d.ts +0 -3
- package/dist/esm/components/Radio/Radio.d.ts.map +1 -1
- package/dist/esm/components/Radio/Radio.js +5 -15
- package/dist/esm/components/Radio/Radio.js.map +1 -1
- package/dist/esm/components/Wizard/WizardNavInternal.js +3 -3
- package/dist/esm/components/Wizard/WizardNavInternal.js.map +1 -1
- package/dist/esm/components/Wizard/WizardNavItem.d.ts +1 -1
- package/dist/esm/components/Wizard/WizardNavItem.d.ts.map +1 -1
- package/dist/esm/components/Wizard/WizardNavItem.js +1 -2
- package/dist/esm/components/Wizard/WizardNavItem.js.map +1 -1
- package/dist/esm/components/Wizard/WizardStep.d.ts +1 -1
- package/dist/esm/components/Wizard/WizardStep.d.ts.map +1 -1
- package/dist/esm/components/Wizard/types.d.ts +2 -3
- package/dist/esm/components/Wizard/types.d.ts.map +1 -1
- package/dist/esm/components/Wizard/types.js +0 -1
- package/dist/esm/components/Wizard/types.js.map +1 -1
- package/dist/esm/helpers/FocusTrap/FocusTrap.d.ts +0 -2
- package/dist/esm/helpers/FocusTrap/FocusTrap.d.ts.map +1 -1
- package/dist/esm/helpers/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/esm/helpers/resizeObserver.js +2 -2
- package/dist/esm/helpers/resizeObserver.js.map +1 -1
- package/dist/js/components/Checkbox/Checkbox.d.ts +0 -3
- package/dist/js/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/js/components/Checkbox/Checkbox.js +4 -14
- package/dist/js/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/js/components/Drawer/DrawerPanelContent.d.ts.map +1 -1
- package/dist/js/components/Drawer/DrawerPanelContent.js +4 -2
- package/dist/js/components/Drawer/DrawerPanelContent.js.map +1 -1
- package/dist/js/components/ExpandableSection/ExpandableSection.d.ts +0 -4
- package/dist/js/components/ExpandableSection/ExpandableSection.d.ts.map +1 -1
- package/dist/js/components/ExpandableSection/ExpandableSection.js +3 -5
- package/dist/js/components/ExpandableSection/ExpandableSection.js.map +1 -1
- package/dist/js/components/ExpandableSection/ExpandableSectionToggle.d.ts +0 -4
- package/dist/js/components/ExpandableSection/ExpandableSectionToggle.d.ts.map +1 -1
- package/dist/js/components/ExpandableSection/ExpandableSectionToggle.js +2 -2
- package/dist/js/components/ExpandableSection/ExpandableSectionToggle.js.map +1 -1
- package/dist/js/components/Modal/Modal.d.ts +0 -2
- package/dist/js/components/Modal/Modal.d.ts.map +1 -1
- package/dist/js/components/Modal/Modal.js.map +1 -1
- package/dist/js/components/Modal/ModalContent.d.ts +0 -2
- package/dist/js/components/Modal/ModalContent.d.ts.map +1 -1
- package/dist/js/components/Modal/ModalContent.js +2 -2
- package/dist/js/components/Modal/ModalContent.js.map +1 -1
- package/dist/js/components/Progress/ProgressContainer.js +2 -2
- package/dist/js/components/Progress/ProgressContainer.js.map +1 -1
- package/dist/js/components/Radio/Radio.d.ts +0 -3
- package/dist/js/components/Radio/Radio.d.ts.map +1 -1
- package/dist/js/components/Radio/Radio.js +5 -15
- package/dist/js/components/Radio/Radio.js.map +1 -1
- package/dist/js/components/Wizard/WizardNavInternal.js +3 -3
- package/dist/js/components/Wizard/WizardNavInternal.js.map +1 -1
- package/dist/js/components/Wizard/WizardNavItem.d.ts +1 -1
- package/dist/js/components/Wizard/WizardNavItem.d.ts.map +1 -1
- package/dist/js/components/Wizard/WizardNavItem.js +1 -2
- package/dist/js/components/Wizard/WizardNavItem.js.map +1 -1
- package/dist/js/components/Wizard/WizardStep.d.ts +1 -1
- package/dist/js/components/Wizard/WizardStep.d.ts.map +1 -1
- package/dist/js/components/Wizard/types.d.ts +2 -3
- package/dist/js/components/Wizard/types.d.ts.map +1 -1
- package/dist/js/components/Wizard/types.js +0 -1
- package/dist/js/components/Wizard/types.js.map +1 -1
- package/dist/js/helpers/FocusTrap/FocusTrap.d.ts +0 -2
- package/dist/js/helpers/FocusTrap/FocusTrap.d.ts.map +1 -1
- package/dist/js/helpers/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/js/helpers/resizeObserver.js +1 -1
- package/dist/js/helpers/resizeObserver.js.map +1 -1
- package/dist/umd/assets/{output-CJfbZNQh.css → output-Bj1Aarly.css} +14883 -14883
- package/dist/umd/react-core.min.js +1 -1
- package/helpers/package.json +1 -1
- package/layouts/package.json +1 -1
- package/next/package.json +1 -1
- package/package.json +2 -2
- package/src/components/Alert/examples/Alert.md +275 -26
- package/src/components/Checkbox/Checkbox.tsx +2 -21
- package/src/components/Checkbox/__tests__/Checkbox.test.tsx +0 -34
- package/src/components/Drawer/DrawerPanelContent.tsx +3 -5
- package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx +0 -37
- package/src/components/ExpandableSection/ExpandableSection.tsx +0 -10
- package/src/components/ExpandableSection/ExpandableSectionToggle.tsx +0 -8
- package/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx +0 -17
- package/src/components/ExpandableSection/__tests__/ExpandableSectionToggle.test.tsx +0 -17
- package/src/components/MenuToggle/examples/MenuToggle.md +96 -13
- package/src/components/Modal/Modal.tsx +0 -2
- package/src/components/Modal/ModalContent.tsx +0 -4
- package/src/components/Modal/__tests__/Modal.test.tsx +0 -9
- package/src/components/Modal/__tests__/ModalContent.test.tsx +1 -17
- package/src/components/Modal/examples/Modal.md +5 -14
- package/src/components/Modal/examples/ModalWithDropdown.tsx +7 -34
- package/src/components/Panel/examples/Panel.md +159 -10
- package/src/components/Progress/ProgressContainer.tsx +2 -2
- package/src/components/Progress/__tests__/Generated/__snapshots__/ProgressContainer.test.tsx.snap +1 -1
- package/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap +1 -1
- package/src/components/Radio/Radio.tsx +3 -21
- package/src/components/Radio/__tests__/Radio.test.tsx +0 -44
- package/src/components/Tabs/__tests__/Tabs.test.tsx +1 -109
- package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap +2 -2
- package/src/components/Tabs/examples/Tabs.md +4 -38
- package/src/components/Tabs/examples/TabsSeparateContent.tsx +2 -3
- package/src/components/Wizard/WizardNavInternal.tsx +3 -3
- package/src/components/Wizard/WizardNavItem.tsx +2 -5
- package/src/components/Wizard/WizardStep.tsx +1 -1
- package/src/components/Wizard/__tests__/Wizard.test.tsx +39 -0
- package/src/components/Wizard/__tests__/WizardNavItem.test.tsx +0 -6
- package/src/components/Wizard/__tests__/WizardStep.test.tsx +0 -2
- package/src/components/Wizard/examples/WizardStepStatus.tsx +7 -28
- package/src/components/Wizard/types.tsx +2 -3
- package/src/demos/AlertGroup.md +1 -1
- package/src/demos/BackToTop.md +1 -1
- package/src/demos/{Button/examples/ButtonProgress.tsx → Button.md} +19 -1
- package/src/demos/CardView/CardView.md +1 -1
- package/src/demos/DataListDemo.md +4 -4
- package/src/demos/DescriptionList/DescriptionList.md +2 -2
- package/src/demos/Nav.md +9 -9
- package/src/demos/{PasswordGenerator/examples/PasswordGenerator.tsx → PasswordGenerator.md} +19 -3
- package/src/demos/PrimaryDetail.md +6 -6
- package/src/demos/RTL/RTL.md +1 -1
- package/src/demos/SearchInput/SearchInput.md +487 -2
- package/src/demos/Toolbar.md +1 -1
- package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx +1 -1
- package/src/helpers/FocusTrap/FocusTrap.tsx +0 -2
- package/src/helpers/FocusTrap/__tests__/Generated/FocusTrap.test.tsx +3 -3
- package/src/helpers/OUIA/OUIA.md +10 -2
- package/src/helpers/resizeObserver.tsx +2 -2
- package/src/layouts/Bullseye/examples/Bullseye.md +5 -1
- package/src/layouts/Flex/examples/Flex.md +442 -42
- package/src/layouts/Level/examples/Level.md +15 -3
- package/src/layouts/Split/examples/Split.md +34 -4
- package/src/components/Alert/examples/AlertCustomIcons.tsx +0 -17
- package/src/components/Alert/examples/AlertExpandable.tsx +0 -36
- package/src/components/Alert/examples/AlertInlineVariants.tsx +0 -12
- package/src/components/Alert/examples/AlertInlineVariations.tsx +0 -45
- package/src/components/Alert/examples/AlertPlainInlineVariants.tsx +0 -12
- package/src/components/Alert/examples/AlertPlainInlineVariations.tsx +0 -7
- package/src/components/Alert/examples/AlertStaticLiveRegion.tsx +0 -29
- package/src/components/Alert/examples/AlertTimeout.tsx +0 -45
- package/src/components/Alert/examples/AlertTruncated.tsx +0 -28
- package/src/components/Alert/examples/AlertVariants.tsx +0 -12
- package/src/components/Alert/examples/AlertVariations.tsx +0 -43
- package/src/components/MenuToggle/examples/MenuToggleAvatarText.tsx +0 -15
- package/src/components/MenuToggle/examples/MenuToggleBadge.tsx +0 -9
- package/src/components/MenuToggle/examples/MenuToggleCollapsed.tsx +0 -3
- package/src/components/MenuToggle/examples/MenuToggleDisabled.tsx +0 -3
- package/src/components/MenuToggle/examples/MenuToggleExpanded.tsx +0 -3
- package/src/components/MenuToggle/examples/MenuToggleFullHeight.tsx +0 -9
- package/src/components/MenuToggle/examples/MenuToggleFullWidth.tsx +0 -7
- package/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx +0 -11
- package/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx +0 -16
- package/src/components/MenuToggle/examples/MenuToggleVariantStyles.tsx +0 -14
- package/src/components/Panel/examples/PanelBasic.tsx +0 -9
- package/src/components/Panel/examples/PanelBordered.tsx +0 -9
- package/src/components/Panel/examples/PanelFooterExample.tsx +0 -10
- package/src/components/Panel/examples/PanelHeaderExample.tsx +0 -11
- package/src/components/Panel/examples/PanelHeaderFooter.tsx +0 -12
- package/src/components/Panel/examples/PanelNoBody.tsx +0 -7
- package/src/components/Panel/examples/PanelRaised.tsx +0 -9
- package/src/components/Panel/examples/PanelScrollable.tsx +0 -35
- package/src/components/Panel/examples/PanelScrollableHeaderFooter.tsx +0 -38
- package/src/components/Panel/examples/PanelSecondaryVariant.tsx +0 -9
- package/src/demos/Button/Button.md +0 -19
- package/src/demos/PasswordGenerator/PasswordGenerator.md +0 -16
- package/src/demos/SearchInput/examples/SearchInputAdvancedComposable.tsx +0 -322
- package/src/demos/SearchInput/examples/SearchInputAutocomplete.tsx +0 -165
- package/src/helpers/FocusTrap/__tests__/FocusTrap.test.tsx +0 -17
- package/src/helpers/OUIA/examples/OuiaExample.tsx +0 -11
- package/src/layouts/Bullseye/examples/BullseyeBasic.tsx +0 -7
- package/src/layouts/Flex/examples/FlexAdjustingWidth.tsx +0 -18
- package/src/layouts/Flex/examples/FlexAlignAdjacentContent.tsx +0 -16
- package/src/layouts/Flex/examples/FlexAlignRightMultipleGroups.tsx +0 -18
- package/src/layouts/Flex/examples/FlexAlignRightSingleItem.tsx +0 -8
- package/src/layouts/Flex/examples/FlexAlignSelfBaseline.tsx +0 -15
- package/src/layouts/Flex/examples/FlexAlignSelfCenter.tsx +0 -15
- package/src/layouts/Flex/examples/FlexAlignSelfFlexEnd.tsx +0 -15
- package/src/layouts/Flex/examples/FlexAlignSelfStretch.tsx +0 -15
- package/src/layouts/Flex/examples/FlexAligningRight.tsx +0 -11
- package/src/layouts/Flex/examples/FlexAlternative.tsx +0 -11
- package/src/layouts/Flex/examples/FlexBasic.tsx +0 -11
- package/src/layouts/Flex/examples/FlexCanGrow.tsx +0 -18
- package/src/layouts/Flex/examples/FlexColumnGap.tsx +0 -16
- package/src/layouts/Flex/examples/FlexColumnLayout.tsx +0 -9
- package/src/layouts/Flex/examples/FlexColumnWidths.tsx +0 -18
- package/src/layouts/Flex/examples/FlexControlTextWidth.tsx +0 -17
- package/src/layouts/Flex/examples/FlexDefaultLayout.tsx +0 -11
- package/src/layouts/Flex/examples/FlexFirstLastOrder.tsx +0 -13
- package/src/layouts/Flex/examples/FlexGap.tsx +0 -16
- package/src/layouts/Flex/examples/FlexIndividuallySpaced.tsx +0 -14
- package/src/layouts/Flex/examples/FlexInline.tsx +0 -11
- package/src/layouts/Flex/examples/FlexJustifyContentEnd.tsx +0 -10
- package/src/layouts/Flex/examples/FlexJustifyContentFlexStart.tsx +0 -9
- package/src/layouts/Flex/examples/FlexJustifyContentSpaceBetween.tsx +0 -9
- package/src/layouts/Flex/examples/FlexNestedItems.tsx +0 -15
- package/src/layouts/Flex/examples/FlexNesting.tsx +0 -15
- package/src/layouts/Flex/examples/FlexNestingInColumns.tsx +0 -15
- package/src/layouts/Flex/examples/FlexOrdering.tsx +0 -24
- package/src/layouts/Flex/examples/FlexResponsiveFirstLastOrder.tsx +0 -15
- package/src/layouts/Flex/examples/FlexResponsiveOrdering.tsx +0 -25
- package/src/layouts/Flex/examples/FlexRowGap.tsx +0 -16
- package/src/layouts/Flex/examples/FlexSpacingNone.tsx +0 -11
- package/src/layouts/Flex/examples/FlexSpacingXl.tsx +0 -11
- package/src/layouts/Flex/examples/FlexStackingElements.tsx +0 -18
- package/src/layouts/Flex/examples/FlexSwitchingColumnRow.tsx +0 -16
- package/src/layouts/Level/examples/LevelBasic.tsx +0 -9
- package/src/layouts/Level/examples/LevelWithGutters.tsx +0 -9
- package/src/layouts/Split/examples/SplitBasic.tsx +0 -9
- package/src/layouts/Split/examples/SplitWithGutter.tsx +0 -9
- package/src/layouts/Split/examples/SplitWrappable.tsx +0 -20
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexAligningRight: React.FunctionComponent = () => (
|
|
4
|
-
<Flex className="example-border">
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>
|
|
9
|
-
<FlexItem>Flex item</FlexItem>
|
|
10
|
-
</Flex>
|
|
11
|
-
);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexAlternative: React.FunctionComponent = () => (
|
|
4
|
-
<Flex component="ul">
|
|
5
|
-
<FlexItem component="li">Flex item</FlexItem>
|
|
6
|
-
<FlexItem component="li">Flex item</FlexItem>
|
|
7
|
-
<FlexItem component="li">Flex item</FlexItem>
|
|
8
|
-
<FlexItem component="li">Flex item</FlexItem>
|
|
9
|
-
<FlexItem component="li">Flex item</FlexItem>
|
|
10
|
-
</Flex>
|
|
11
|
-
);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexBasic: React.FunctionComponent = () => (
|
|
4
|
-
<Flex>
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
<FlexItem>Flex item</FlexItem>
|
|
10
|
-
</Flex>
|
|
11
|
-
);
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexCanGrow: React.FunctionComponent = () => (
|
|
4
|
-
<Flex>
|
|
5
|
-
<Flex grow={{ default: 'grow' }}>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
</Flex>
|
|
10
|
-
<Flex>
|
|
11
|
-
<FlexItem>Flex item</FlexItem>
|
|
12
|
-
<FlexItem>Flex item</FlexItem>
|
|
13
|
-
</Flex>
|
|
14
|
-
<Flex>
|
|
15
|
-
<FlexItem>Flex item</FlexItem>
|
|
16
|
-
</Flex>
|
|
17
|
-
</Flex>
|
|
18
|
-
);
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexColumnGap: React.FunctionComponent = () => (
|
|
4
|
-
<Flex columnGap={{ default: 'columnGap2xl' }}>
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
<FlexItem>Flex item</FlexItem>
|
|
10
|
-
<FlexItem>Flex item</FlexItem>
|
|
11
|
-
<FlexItem>Flex item</FlexItem>
|
|
12
|
-
<FlexItem>Flex item</FlexItem>
|
|
13
|
-
<FlexItem>Flex item</FlexItem>
|
|
14
|
-
<FlexItem>Flex item</FlexItem>
|
|
15
|
-
</Flex>
|
|
16
|
-
);
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexColumnLayout: React.FunctionComponent = () => (
|
|
4
|
-
<Flex direction={{ default: 'column' }}>
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
</Flex>
|
|
9
|
-
);
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexColumnWidths: React.FunctionComponent = () => (
|
|
4
|
-
<Flex>
|
|
5
|
-
<Flex flex={{ default: 'flex_1' }}>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
</Flex>
|
|
8
|
-
<Flex flex={{ default: 'flex_2' }}>
|
|
9
|
-
<FlexItem>Flex item</FlexItem>
|
|
10
|
-
<FlexItem>Flex item</FlexItem>
|
|
11
|
-
</Flex>
|
|
12
|
-
<Flex flex={{ default: 'flex_3' }}>
|
|
13
|
-
<FlexItem>Flex item</FlexItem>
|
|
14
|
-
<FlexItem>Flex item</FlexItem>
|
|
15
|
-
<FlexItem>Flex item</FlexItem>
|
|
16
|
-
</Flex>
|
|
17
|
-
</Flex>
|
|
18
|
-
);
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexControlTextWidth: React.FunctionComponent = () => (
|
|
4
|
-
<Flex direction={{ default: 'column', lg: 'row' }}>
|
|
5
|
-
<Flex flex={{ default: 'flex_1' }}>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>
|
|
8
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam
|
|
9
|
-
dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.
|
|
10
|
-
</FlexItem>
|
|
11
|
-
</Flex>
|
|
12
|
-
<Flex direction={{ default: 'column' }}>
|
|
13
|
-
<FlexItem>Flex item</FlexItem>
|
|
14
|
-
<FlexItem>Flex item</FlexItem>
|
|
15
|
-
</Flex>
|
|
16
|
-
</Flex>
|
|
17
|
-
);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexDefaultLayout: React.FunctionComponent = () => (
|
|
4
|
-
<Flex className="example-border">
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
<FlexItem>Flex item</FlexItem>
|
|
10
|
-
</Flex>
|
|
11
|
-
);
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexFirstLastOrder: React.FunctionComponent = () => (
|
|
4
|
-
<Flex className="example-border">
|
|
5
|
-
<FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '2' }}>
|
|
6
|
-
Item A
|
|
7
|
-
</FlexItem>
|
|
8
|
-
<FlexItem>Item B</FlexItem>
|
|
9
|
-
<FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '-1' }}>
|
|
10
|
-
Item C
|
|
11
|
-
</FlexItem>
|
|
12
|
-
</Flex>
|
|
13
|
-
);
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexGap: React.FunctionComponent = () => (
|
|
4
|
-
<Flex gap={{ default: 'gap2xl' }}>
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
<FlexItem>Flex item</FlexItem>
|
|
10
|
-
<FlexItem>Flex item</FlexItem>
|
|
11
|
-
<FlexItem>Flex item</FlexItem>
|
|
12
|
-
<FlexItem>Flex item</FlexItem>
|
|
13
|
-
<FlexItem>Flex item</FlexItem>
|
|
14
|
-
<FlexItem>Flex item</FlexItem>
|
|
15
|
-
</Flex>
|
|
16
|
-
);
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexIndividuallySpaced: React.FunctionComponent = () => (
|
|
4
|
-
<Flex>
|
|
5
|
-
<FlexItem spacer={{ default: 'spacerNone' }}>Item - none</FlexItem>
|
|
6
|
-
<FlexItem spacer={{ default: 'spacerXs' }}>Item - xs</FlexItem>
|
|
7
|
-
<FlexItem spacer={{ default: 'spacerSm' }}>Item -sm</FlexItem>
|
|
8
|
-
<FlexItem spacer={{ default: 'spacerMd' }}>Item - md</FlexItem>
|
|
9
|
-
<FlexItem spacer={{ default: 'spacerLg' }}>Item - lg</FlexItem>
|
|
10
|
-
<FlexItem spacer={{ default: 'spacerXl' }}>Item - xl</FlexItem>
|
|
11
|
-
<FlexItem spacer={{ default: 'spacer2xl' }}>Item - 2xl</FlexItem>
|
|
12
|
-
<FlexItem spacer={{ default: 'spacer3xl' }}>Item - 3xl</FlexItem>
|
|
13
|
-
</Flex>
|
|
14
|
-
);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexInline: React.FunctionComponent = () => (
|
|
4
|
-
<Flex className="example-border" display={{ default: 'inlineFlex' }}>
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
<FlexItem>Flex item</FlexItem>
|
|
10
|
-
</Flex>
|
|
11
|
-
);
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexJustifyContentEnd: React.FunctionComponent = () => (
|
|
4
|
-
<Flex className="example-border" justifyContent={{ default: 'justifyContentFlexEnd' }}>
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
</Flex>
|
|
10
|
-
);
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexJustifyContentFlexStart: React.FunctionComponent = () => (
|
|
4
|
-
<Flex className="example-border" justifyContent={{ default: 'justifyContentFlexStart' }}>
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
</Flex>
|
|
9
|
-
);
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexJustifyContentSpaceBetween: React.FunctionComponent = () => (
|
|
4
|
-
<Flex className="example-border" justifyContent={{ default: 'justifyContentSpaceBetween' }}>
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
</Flex>
|
|
9
|
-
);
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexNestedItems: React.FunctionComponent = () => (
|
|
4
|
-
<Flex>
|
|
5
|
-
<Flex>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
</Flex>
|
|
9
|
-
<FlexItem>Flex item</FlexItem>
|
|
10
|
-
<FlexItem>Flex item</FlexItem>
|
|
11
|
-
<Flex>
|
|
12
|
-
<FlexItem>Flex item</FlexItem>
|
|
13
|
-
</Flex>
|
|
14
|
-
</Flex>
|
|
15
|
-
);
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexNesting: React.FunctionComponent = () => (
|
|
4
|
-
<Flex>
|
|
5
|
-
<Flex>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
</Flex>
|
|
9
|
-
<Flex>
|
|
10
|
-
<FlexItem>Flex item</FlexItem>
|
|
11
|
-
<FlexItem>Flex item</FlexItem>
|
|
12
|
-
<FlexItem>Flex item</FlexItem>
|
|
13
|
-
</Flex>
|
|
14
|
-
</Flex>
|
|
15
|
-
);
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexNestingInColumns: React.FunctionComponent = () => (
|
|
4
|
-
<Flex>
|
|
5
|
-
<Flex direction={{ default: 'column' }}>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
</Flex>
|
|
10
|
-
<Flex direction={{ default: 'column' }}>
|
|
11
|
-
<FlexItem>Flex item</FlexItem>
|
|
12
|
-
<FlexItem>Flex item</FlexItem>
|
|
13
|
-
</Flex>
|
|
14
|
-
</Flex>
|
|
15
|
-
);
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexOrdering: React.FunctionComponent = () => (
|
|
4
|
-
<Flex className="example-border">
|
|
5
|
-
<Flex spacer={{ default: 'spacerNone' }} order={{ lg: '1' }} className="example-border">
|
|
6
|
-
<FlexItem order={{ md: '2' }}>Set 1, Item A</FlexItem>
|
|
7
|
-
<FlexItem order={{ md: '-1' }}>Set 1, Item B</FlexItem>
|
|
8
|
-
<FlexItem order={{ xl: '1' }}>Set 1, Item C</FlexItem>
|
|
9
|
-
<FlexItem spacer={{ xl: 'spacerNone' }} order={{ xl: '1' }}>
|
|
10
|
-
Set 1, Item D
|
|
11
|
-
</FlexItem>
|
|
12
|
-
</Flex>
|
|
13
|
-
<Flex spacer={{ lg: 'spacerMd' }} className="example-border">
|
|
14
|
-
<FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
|
|
15
|
-
Set 2, Item A
|
|
16
|
-
</FlexItem>
|
|
17
|
-
<FlexItem order={{ default: '1' }}>Set 2, Item B</FlexItem>
|
|
18
|
-
<FlexItem>Set 2, Item C</FlexItem>
|
|
19
|
-
<FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '2' }}>
|
|
20
|
-
Set 2, Item D
|
|
21
|
-
</FlexItem>
|
|
22
|
-
</Flex>
|
|
23
|
-
</Flex>
|
|
24
|
-
);
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexResponsiveFirstLastOrder: React.FunctionComponent = () => (
|
|
4
|
-
<Flex className="example-border">
|
|
5
|
-
<FlexItem spacer={{ lg: 'spacerNone' }} order={{ lg: '2' }}>
|
|
6
|
-
Item A
|
|
7
|
-
</FlexItem>
|
|
8
|
-
<FlexItem spacer={{ md: 'spacerNone', lg: 'spacerMd' }} order={{ default: '-1', md: '1' }}>
|
|
9
|
-
Item B
|
|
10
|
-
</FlexItem>
|
|
11
|
-
<FlexItem spacer={{ default: 'spacerMd' }} order={{ md: '-1' }}>
|
|
12
|
-
Item C
|
|
13
|
-
</FlexItem>
|
|
14
|
-
</Flex>
|
|
15
|
-
);
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexResponsiveOrdering: React.FunctionComponent = () => (
|
|
4
|
-
<Flex className="example-border">
|
|
5
|
-
<Flex spacer={{ default: 'spacerNone' }} order={{ default: '1' }} className="example-border">
|
|
6
|
-
<FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
|
|
7
|
-
Set 1, Item A
|
|
8
|
-
</FlexItem>
|
|
9
|
-
<FlexItem order={{ default: '1' }}>Set 1, Item B</FlexItem>
|
|
10
|
-
<FlexItem>Set 1, Item C</FlexItem>
|
|
11
|
-
<FlexItem spacer={{ default: 'spacerMd' }}>Set 1, Item D</FlexItem>
|
|
12
|
-
</Flex>
|
|
13
|
-
|
|
14
|
-
<Flex spacer={{ default: 'spacerMd' }} className="example-border">
|
|
15
|
-
<FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
|
|
16
|
-
Set 2, Item A
|
|
17
|
-
</FlexItem>
|
|
18
|
-
<FlexItem order={{ lg: '1' }}>Set 2, Item B</FlexItem>
|
|
19
|
-
<FlexItem>Set 2, Item C</FlexItem>
|
|
20
|
-
<FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '2' }}>
|
|
21
|
-
Set 2, Item D
|
|
22
|
-
</FlexItem>
|
|
23
|
-
</Flex>
|
|
24
|
-
</Flex>
|
|
25
|
-
);
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexRowGap: React.FunctionComponent = () => (
|
|
4
|
-
<Flex rowGap={{ default: 'rowGap2xl' }}>
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
<FlexItem>Flex item</FlexItem>
|
|
10
|
-
<FlexItem>Flex item</FlexItem>
|
|
11
|
-
<FlexItem>Flex item</FlexItem>
|
|
12
|
-
<FlexItem>Flex item</FlexItem>
|
|
13
|
-
<FlexItem>Flex item</FlexItem>
|
|
14
|
-
<FlexItem>Flex item</FlexItem>
|
|
15
|
-
</Flex>
|
|
16
|
-
);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexSpacingNone: React.FunctionComponent = () => (
|
|
4
|
-
<Flex spaceItems={{ default: 'spaceItemsNone' }}>
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
<FlexItem>Flex item</FlexItem>
|
|
10
|
-
</Flex>
|
|
11
|
-
);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexSpacingXl: React.FunctionComponent = () => (
|
|
4
|
-
<Flex spaceItems={{ default: 'spaceItemsXl' }}>
|
|
5
|
-
<FlexItem>Flex item</FlexItem>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
<FlexItem>Flex item</FlexItem>
|
|
10
|
-
</Flex>
|
|
11
|
-
);
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexStackingElements: React.FunctionComponent = () => (
|
|
4
|
-
<Flex direction={{ default: 'column' }}>
|
|
5
|
-
<Flex>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
</Flex>
|
|
10
|
-
<Flex>
|
|
11
|
-
<FlexItem>Flex item</FlexItem>
|
|
12
|
-
<FlexItem>Flex item</FlexItem>
|
|
13
|
-
</Flex>
|
|
14
|
-
<Flex>
|
|
15
|
-
<FlexItem>Flex item</FlexItem>
|
|
16
|
-
</Flex>
|
|
17
|
-
</Flex>
|
|
18
|
-
);
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Flex, FlexItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const FlexSwitchingColumnRow: React.FunctionComponent = () => (
|
|
4
|
-
<Flex direction={{ default: 'column', lg: 'row' }}>
|
|
5
|
-
<Flex>
|
|
6
|
-
<FlexItem>Flex item</FlexItem>
|
|
7
|
-
<FlexItem>Flex item</FlexItem>
|
|
8
|
-
<FlexItem>Flex item</FlexItem>
|
|
9
|
-
<FlexItem>Flex item</FlexItem>
|
|
10
|
-
</Flex>
|
|
11
|
-
<Flex direction={{ default: 'column' }}>
|
|
12
|
-
<FlexItem>Flex item</FlexItem>
|
|
13
|
-
<FlexItem>Flex item</FlexItem>
|
|
14
|
-
</Flex>
|
|
15
|
-
</Flex>
|
|
16
|
-
);
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Level, LevelItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const LevelWithGutters: React.FunctionComponent = () => (
|
|
4
|
-
<Level hasGutter>
|
|
5
|
-
<LevelItem>Level Item</LevelItem>
|
|
6
|
-
<LevelItem>Level Item</LevelItem>
|
|
7
|
-
<LevelItem>Level Item</LevelItem>
|
|
8
|
-
</Level>
|
|
9
|
-
);
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Split, SplitItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const SplitWithGutter: React.FunctionComponent = () => (
|
|
4
|
-
<Split hasGutter>
|
|
5
|
-
<SplitItem>content</SplitItem>
|
|
6
|
-
<SplitItem isFilled>pf-m-fill</SplitItem>
|
|
7
|
-
<SplitItem>content</SplitItem>
|
|
8
|
-
</Split>
|
|
9
|
-
);
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { Split, SplitItem } from '@patternfly/react-core';
|
|
2
|
-
|
|
3
|
-
export const SplitWrappable: React.FunctionComponent = () => (
|
|
4
|
-
<Split hasGutter isWrappable>
|
|
5
|
-
<SplitItem>content</SplitItem>
|
|
6
|
-
<SplitItem>content</SplitItem>
|
|
7
|
-
<SplitItem>content</SplitItem>
|
|
8
|
-
<SplitItem>content</SplitItem>
|
|
9
|
-
<SplitItem>content</SplitItem>
|
|
10
|
-
<SplitItem>content</SplitItem>
|
|
11
|
-
<SplitItem>content</SplitItem>
|
|
12
|
-
<SplitItem>content</SplitItem>
|
|
13
|
-
<SplitItem>content</SplitItem>
|
|
14
|
-
<SplitItem>content</SplitItem>
|
|
15
|
-
<SplitItem>content</SplitItem>
|
|
16
|
-
<SplitItem>content</SplitItem>
|
|
17
|
-
<SplitItem>content</SplitItem>
|
|
18
|
-
<SplitItem>content</SplitItem>
|
|
19
|
-
</Split>
|
|
20
|
-
);
|