From 1d0e42ead09356a9e8a0212bf7b6c5cfcdb6cc89 Mon Sep 17 00:00:00 2001 From: mcoker Date: Thu, 3 Jul 2025 18:26:20 -0500 Subject: [PATCH 01/12] feat(theme): add high contrast theme poc --- packages/react-core/src/demos/HighContrast.md | 29 + .../examples/HighContrast/HighContrast.tsx | 391 + .../react-docs/patternfly-docs/button.css | 822 + .../react-docs/patternfly-docs/drawer.css | 854 + packages/react-docs/patternfly-docs/nav.css | 362 + packages/react-docs/patternfly-docs/page.css | 702 + .../patternfly-docs/patternfly-base.css | 8503 ++++ .../patternfly-docs/patternfly-docs.css.js | 7 + .../patternfly-docs/patternfly-variables.css | 2112 + .../react-docs/patternfly-docs/patternfly.css | 35641 ++++++++++++++++ packages/react-docs/patternfly-docs/tabs.css | 891 + 11 files changed, 50314 insertions(+) create mode 100644 packages/react-core/src/demos/HighContrast.md create mode 100644 packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx create mode 100644 packages/react-docs/patternfly-docs/button.css create mode 100644 packages/react-docs/patternfly-docs/drawer.css create mode 100644 packages/react-docs/patternfly-docs/nav.css create mode 100644 packages/react-docs/patternfly-docs/page.css create mode 100644 packages/react-docs/patternfly-docs/patternfly-base.css create mode 100644 packages/react-docs/patternfly-docs/patternfly-variables.css create mode 100644 packages/react-docs/patternfly-docs/patternfly.css create mode 100644 packages/react-docs/patternfly-docs/tabs.css diff --git a/packages/react-core/src/demos/HighContrast.md b/packages/react-core/src/demos/HighContrast.md new file mode 100644 index 00000000000..81dd5143228 --- /dev/null +++ b/packages/react-core/src/demos/HighContrast.md @@ -0,0 +1,29 @@ +--- +id: High contrast +section: patterns +--- + +import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; +import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; +import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; +import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; +import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; +import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import display from '@patternfly/react-styles/css/utilities/Display/display'; +import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing'; +import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +import MagicIcon from '@patternfly/react-icons/dist/esm/icons/magic-icon'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +### High contrast +```js file='./examples/HighContrast/HighContrast.tsx' isFullscreen + +``` diff --git a/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx b/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx new file mode 100644 index 00000000000..d878165e6ee --- /dev/null +++ b/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx @@ -0,0 +1,391 @@ +import { + Alert, + PageSection, + Tabs, + Tab, + TabContent, + TabContentBody, + TabTitleText, + Title, + Content, + DrawerHead, + DrawerActions, + DrawerPanelDescription, + DrawerCloseButton, + PageSidebar, + PageSidebarBody, + Nav, + NavGroup, + NavItem, + Form, + FormGroup, + TextInput, + FormHelperText, + HelperText, + HelperTextItem, + TextArea, + Checkbox, + ActionGroup, + Button, + FormGroupLabelHelp, + Dropdown, + DropdownItem, + DropdownList, + Toolbar, + ToolbarContent, + ToolbarItem, + ToolbarGroup, + MenuToggle, + PageToggleButton, + Masthead, + MastheadMain, + MastheadToggle, + MastheadBrand, + MastheadContent, + MastheadLogo, + ButtonVariant, + DrawerPanelBody, + NotificationBadge, + NotificationBadgeVariant +} from '@patternfly/react-core'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +export const TabsOpenDemo = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isNavOpen, setIsNavOpen] = React.useState(true); + const [isDrawerOpen, setIsDrawerOpen] = React.useState(true); + + // Toggle currently active tab + const handleTabClick = (event, tabIndex) => { + setActiveTabKey(tabIndex); + }; + + const onCloseClick = () => { + setIsDrawerOpen(false); + }; + + const [isChecked, setIsChecked] = React.useState(true); + + const pageForm = ( +
+ + + + + Valid name + + + + + + + + Invalid email + + + + } + > + + setIsChecked(!isChecked)} + /> + + + } + > + + + + + +``` + +### With helper text + +```html +
+
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+ + + +
+
+
+
+ Upload a CSV file +
+
+
+
+ +``` + +### Upload complete non editable + +```html +
+
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+ + + +
+
+ +``` + +### Upload complete editable + +```html +
+
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+ + + +
+
+ +``` + +### Drag file hover component + +```html +
+
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+ + + +
+
+ +``` + +### File upload in form with error + +```html + +
+
+
+
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+ + + + + + + + +
+ +
+
+
+ + + + Must be a CSV file no larger than 1 KB +
+
+
+
+
+
+ + +``` + +### File upload loading + +```html +
+
+
+
+ + + +
+
+ +
+
+ +
+
+
+
+ + + + + +
+
+ +``` + +## Documentation + +### Overview + +### Usage + +| Class | Applied to | Outcome | +| -- | -- | -- | +| `.pf-v6-c-file-upload` | `
`, `
` | Initiates the file upload component. **Required**. | +| `.pf-v6-c-file-upload__file-select` | `
` | Initiates the file select element. **Required** | +| `.pf-v6-c-file-upload__file-details` | `
` | Initiates the file details element. **Required** | +| `.pf-v6-c-file-upload__file-details-spinner` | `
` | Initiates the file details element. **Required** | +| `.pf-v6-c-file-upload__helper-text` | `
` | Initiates a container for [helper text](/components/helper-text) | +| `.pf-m-drag-hover` | `.pf-v6-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. | +| `.pf-m-loading` | `.pf-v6-c-file-upload` | Modifies file upload for the loading state. | diff --git a/packages/react-docs/patternfly-docs/patternfly-dist-hc/docs/components/Form/examples/Form.md b/packages/react-docs/patternfly-docs/patternfly-dist-hc/docs/components/Form/examples/Form.md new file mode 100644 index 00000000000..12972d85f78 --- /dev/null +++ b/packages/react-docs/patternfly-docs/patternfly-dist-hc/docs/components/Form/examples/Form.md @@ -0,0 +1,2013 @@ +--- +id: Form +section: components +subsection: forms +cssPrefix: pf-v6-c-form +---## Examples + +### Vertically aligned labels + +```html + +
+
  + + + + + +
+
+ + + +
+
+ + +``` + +### Horizontally aligned labels + +```html +
+
+
+
+
+ + + +
+
+
+
  + + + + + +
+
+ + + +
+
+
+
+ Label (no top padding)  + + + + + +
+
+
+ + + +
+
+ + + +
+
+
+
+ +``` + +### Horizontal layout at a custom breakpoint + +```html +
+
+
  + + + + + +
+
+ + + +
+
+
+ +``` + +### Form sections + +```html +
+
+
+
+
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+
+ +
+
+
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+
+ +``` + +### Help text + +```html +
+
+
+
+
+ + + +
+
+
+ + + + This is helper text. +
+
+
+
+
+
+
+
+
+ + + + + + + + +
+
+
+ + + + This is helper text for a warning input. +
+
+
+
+
+
+
+
+
+ + + + + + + + +
+
+
+ + + + This is helper text for an invalid input. +
+
+
+
+
+
+
+
+
+ + + + + + + + +
+
+
+ + + + This is helper text for success input. +
+
+
+
+
+
+
+
+
+ + + + + + + + +
+
+
+ + + + This is helper text with an icon. +
+
+
+
+
+
+ +``` + +### Label with additional info + +```html +
+
+
+
  + + + + + +
+
More info about the name field
+
+
+ + + +
+
+
+ +``` + +### Label with additional info (horizontal form) + +```html +
+
+
+
  + + + + + +
+
More info about the name field
+
+
+ + + +
+
+
+ +``` + +### Action group + +```html +
+
+
+ + +
+
+
+ +``` + +### Field group (non-expandable) + +```html +
+
+
+
+
+
Field group Title
+
+
Field group description text
+
+
+ +
+
+
+
+
  + + + + + +
+
+ + + +
+
+
+
  + + + + + +
+
+ + + +
+
+
+
+
+ +``` + +### Expandable and nested field groups + +```html +
+
+
+
+
+ + + +
+
+ +
+
+
+
+ + + +
+
+ +
+
+
+ +
+
+
+
+
+
Field group 1
+
+
Field group 1 description text
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
Nested field group 1
+
+
Nested field group 1 description text
+
+
+ +
+
+
+
+
  + + + + + +
+
+ + + +
+
+
+
  + + + + + +
+
+ + + +
+
+
+
+ +
+
+
+ +
+
+
+
+
+
Nested field group 2
+
+
+
+ +
+
+
+
+
  + + + + + +
+
+ + + +
+
+
+
  + + + + + +
+
+ + + +
+
+
+
+ +
+
+
+ +
+
+
+
+
+
Nested field group 3
+
+
Nested field group 3 description text
+
+
+ +
+
+
+
+
  + + + + + +
+
+ + + +
+
+
+
  + + + + + +
+
+ + + +
+
+
+
+ +
+
+
+
+ + + +
+
+ +
+
+
+
+ + + +
+
+
+
+ +
+
+
+ +
+
+
+
+
+
Field group 2
+
+
Field group 2 description text
+
+
+
+
+
  + + + + + +
+
+ + + +
+
+
+
  + + + + + +
+
+ + + +
+
+
+
+
+
+
Nested field group 3
+
+
+
+
+
+
  + + + + + +
+
+ + + +
+
+
+
  + + + + + +
+
+ + + +
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
Field group 3
+
+
Field group 3 description text
+
+
+
+
+
+
+
+ + + +
+
+ +
+
+
+
+ + + +
+
+ +
+
+
+
+
Nested field group 1 (non-expandable)
+
+
+
+
+
+
  + + + + + +
+
+ + + +
+
+
+
  + + + + + +
+
+ + + +
+
+
+
+ +
+
+
+
+
Nested field group 2 (non-expandable)
+
+
Field group 2 description text
+
+
+
+
+
  + + + + + +
+
+ + + +
+
+
+
  + + + + + +
+
+ + + +
+
+
+
+
+
+ +
+
+
+
+
Field group 4 (non-expandable)
+
+
Field group 4 description text
+
+
+
+
+
  + + + + + +
+
+ + + +
+
+
+
  + + + + + +
+
+ + + +
+
+
+
+ +
+
+
+
+ + + +
+
+ +
+
+
+
+ + + +
+
+
+ +``` + +## Documentation + +To avoid the form label's required indicator or help tooltip icon from wrapping separately from the form label text, all whitespace characters between the last word of the label text, the required indicator (`.pf-v6-c-form__label-required`), and help tooltip icon (`.pf-v6-c-form__label-help`) must be removed, and ` ` characters added in between to maintain spacing. Also the help tooltip icon's `.pf-v6-c-form__label-required` element must be a `` instead of a `
+
+ +
+
+
+
+
+ + + +
+
+ +
+
+
+
+
+ +
+
+ +
+
+ + + +
+
+ +
+
+
+
+
+ +
+
+ + + +
+
+ +
+
+
+
+
+ + + +
+
+ + + +
+
+ .00 +
+
+
+
+
+ + + +
+
+ @example.com +
+
+
+
+
+ + + +
+
+ + + + + + + + +
+
+
+
+
+ + + +
+
+ +
+
+
+
+
+ + + +
+
+ +
+
+
+
+
+ + + +
+
+ % +
+
+ +``` + +## Documentation + +### Accessibility + +When using the `.pf-v6-c-input-group` always ensure labels are used outside the input group with the `.pf-v6-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form). + +| Attribute | Applied to | Outcome | +| -- | -- | -- | +| `aria-describedby` | `.pf-v6-c-form-control` | When using `.pf-v6-c-input-group__text` or `.pf-v6-c-input-group__action` make use of this on the input field. | + +### Usage + +| Class | Applied to | Outcome | +| -- | -- | -- | +| `.pf-v6-c-input-group` | `
` | Initiates the input group. **Required** | +| `.pf-v6-c-input-group__item` | `
` | Initiates the input group item. | +| `.pf-v6-c-input-group__text` | `` | Initiates input group text. This should be used within `.pf-v6-c-input-group__item` to contain text. | +| `.pf-m-plain` | `.pf-v6-c-input-group__item` | Removes the border from the input group element. | +| `.pf-m-box` | `.pf-v6-c-input-group__item` | Adds appropriate styling for items that are not form controls. | +| `.pf-m-fill` | `.pf-v6-c-input-group__item` | Allows the input group element to stretch to fill available space. | +| `.pf-m-disabled` | `.pf-v6-c-input-group__item` | Adds disabled styling to match a disabled input within the input group. | +| `.pf-m-search-expandable` | `.pf-v6-c-input-group` | Modifies an input group to be an expandable search input. **Note:** The expandable search input can be found in the [search input](/components/search-input/) component docs for react and [text input group](/components/text-input-group/html#search-input-group-expandable) component docs for core. | +| `.pf-m-search-input` | `.pf-v6-c-input-group__item` | Identifies the text input an expandable search input. | +| `.pf-m-search-expand` | `.pf-v6-c-input-group__item` | Identifies the expand button in an expandable search input. | +| `.pf-m-search-action` | `.pf-v6-c-input-group__item` | Identifies actions adjacent to the search input when an expandable search input is expanded. | diff --git a/packages/react-docs/patternfly-docs/patternfly-dist-hc/docs/components/JumpLinks/examples/JumpLinks.md b/packages/react-docs/patternfly-docs/patternfly-dist-hc/docs/components/JumpLinks/examples/JumpLinks.md new file mode 100644 index 00000000000..acc3aa0ce1c --- /dev/null +++ b/packages/react-docs/patternfly-docs/patternfly-dist-hc/docs/components/JumpLinks/examples/JumpLinks.md @@ -0,0 +1,758 @@ +--- +id: Jump links +section: components +cssPrefix: pf-v6-c-jump-links +---## Examples + +### Horizontal default + +```html + + +``` + +### Horizontal with centered list + +```html + + +``` + +### Horizontal with label + +```html + +
+ + +``` + +### Vertical default + +```html + + +``` + +### Vertical with label + +```html + + +``` + +### Vertical with inactive subsections + +```html + + +``` + +### Vertical with active subsections + +```html + + +``` + +### Expandable + +```html + + +``` + +### Expanded + +```html + + +``` + +### Expandable (responsive) + +```html + + +``` + +### Expandable (responsive) with no label + +```html + + +``` + +## Documentation + +### Overview + +### Accessibility + +| Attribute | Applied to | Outcome | +| -- | -- | -- | +| `aria-label` | `.pf-v6-c-jump-links` | Provides an accessible name for the jump links. | + +### Usage + +| Class | Applied to | Outcome | +| -- | -- | -- | +| `.pf-v6-c-jump-links` | `
` | Initiates the jump links container. | +| `.pf-v6-c-jump-links__header` | `
` | Initiates the jump links header. | +| `.pf-v6-c-jump-links__toggle` | `
` | Initiates the jump links expandable toggle. | +| `.pf-v6-c-jump-links__toggle-text` | `` | Initiates the jump links expandable toggle text. | +| `.pf-v6-c-jump-links__toggle-icon` | `` | Initiates the jump links expandable toggle icon. | +| `.pf-v6-c-jump-links__label` | `
` | Initiates the jump links label. | +| `.pf-v6-c-jump-links__main` | `
` | Initiates the jump links main container for when a label and list is used in the horizontal variation. | +| `.pf-v6-c-jump-links__list` | `