diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index 51bd1209df..3602ae53e9 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -98,7 +98,7 @@ export const Example = ({ // Content that appears between h3 and code block to explain example children, // Show dark theme switcher on full page examples - hasThemeSwitcher = process.env.hasThemeSwitcher, + hasThemeSwitcher = false, // Show dark theme switcher on full page examples hasRTLSwitcher = process.env.hasRTLSwitcher, // Map of relative imports matched to their npm package import path (passed to Codesandbox) diff --git a/packages/documentation-framework/hooks/useTheme.js b/packages/documentation-framework/hooks/useTheme.js index afffaf7750..0d06e2ffb3 100644 --- a/packages/documentation-framework/hooks/useTheme.js +++ b/packages/documentation-framework/hooks/useTheme.js @@ -39,7 +39,8 @@ class ThemeManager { if (!this.isBrowser) { return; } - return localStorage.getItem(this.storageKey); + const storedValue = localStorage.getItem(this.storageKey); + return storedValue || this.defaultMode; } setStoredValue(value) { @@ -104,7 +105,7 @@ const registerThemeManager = (themeType, manager) => { const colorThemeManager = new ThemeManager({ storageKey: 'theme-preference', modes: COLOR_MODES, - defaultMode: COLOR_MODES.SYSTEM, + defaultMode: COLOR_MODES.LIGHT, cssClass: 'pf-v6-theme-dark', classEnabledMode: COLOR_MODES.DARK, mediaQueryString: '(prefers-color-scheme: dark)' @@ -113,7 +114,7 @@ const colorThemeManager = new ThemeManager({ const highContrastThemeManager = new ThemeManager({ storageKey: 'high-contrast-preference', modes: HIGH_CONTRAST_MODES, - defaultMode: HIGH_CONTRAST_MODES.SYSTEM, + defaultMode: HIGH_CONTRAST_MODES.OFF, cssClass: 'pf-v6-theme-high-contrast', classEnabledMode: HIGH_CONTRAST_MODES.ON, mediaQueryString: '(prefers-contrast: more)' @@ -138,7 +139,7 @@ export const useTheme = (themeType) => { throw new Error(`Theme manager not found for theme type: ${themeType}`); } - const [mode, setMode] = useState(theme.getStoredValue()); + const [mode, setMode] = useState(theme.defaultMode); const [resolvedTheme, setResolvedTheme] = useState(theme.resolve()); useEffect(() => { diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/HighContrast/HighContrast.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/HighContrast/HighContrast.md new file mode 100644 index 0000000000..42b1e156a6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/HighContrast/HighContrast.md @@ -0,0 +1,33 @@ +--- +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'; +import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import { useState } from 'react'; +import { ThemeSelector } from '@patternfly/documentation-framework/components/themeSelector/themeSelector'; + +### High contrast + +```js file='./HighContrast.tsx' isFullscreen + +``` diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/HighContrast/HighContrast.tsx b/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/HighContrast/HighContrast.tsx new file mode 100644 index 0000000000..cc3b28b05b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/patterns/HighContrast/HighContrast.tsx @@ -0,0 +1,670 @@ +import { + Alert, + PageSection, + Tabs, + Tab, + TabContent, + TabContentBody, + TabTitleText, + Title, + Content, + PageSidebar, + PageSidebarBody, + Nav, + NavGroup, + NavItem, + Form, + FormGroup, + TextInput, + FormHelperText, + HelperText, + HelperTextItem, + TextArea, + Checkbox, + ActionGroup, + Button, + FormGroupLabelHelp, + Dropdown, + DropdownList, + Toolbar, + ToolbarContent, + ToolbarItem, + ToolbarGroup, + MenuToggle, + PageToggleButton, + Masthead, + MastheadMain, + MastheadToggle, + MastheadBrand, + MastheadContent, + MastheadLogo, + ButtonVariant, + NotificationBadge, + NotificationBadgeVariant, + NotificationDrawer, + NotificationDrawerBody, + NotificationDrawerHeader, + NotificationDrawerList, + NotificationDrawerListItem, + NotificationDrawerListItemBody, + NotificationDrawerListItemHeader, + MenuToggleElement, + DropdownItem +} from '@patternfly/react-core'; +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'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import { Ref, RefObject, useState, MouseEvent as ReactMouseEvent, FormEvent } from 'react'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import { ThemeSelector } from '@patternfly/documentation-framework/components/themeSelector/themeSelector'; + +type Validate = 'success' | 'warning' | 'error' | 'default'; +const emailRegex = /^[^@]+@[^@]+\.[a-zA-Z]+$/i; + +export const TabsOpenDemo = () => { + const [activeTabKey, setActiveTabKey] = useState(0); + const [isNavOpen, setIsNavOpen] = useState(true); + const [isDrawerOpen, setIsDrawerOpen] = useState(false); + const [isOpenMap, setIsOpenMap] = useState(new Array(7).fill(false)); + const [email, setEmail] = useState(''); + const [name, setName] = useState(''); + const [description, setDescription] = useState(''); + const [validatedEmail, setValidatedEmail] = useState('default'); + const [emailHelperText, setEmailHelperText] = useState('Enter your email to continue'); + const [isChecked, setIsChecked] = useState(true); + + const onToggle = (index: number) => () => { + const newState = [...isOpenMap.slice(0, index), !isOpenMap[index], ...isOpenMap.slice(index + 1)]; + setIsOpenMap(newState); + }; + + const onSelect = () => { + setIsOpenMap(new Array(7).fill(false)); + }; + + const onDrawerClose = (_event: ReactMouseEvent | KeyboardEvent) => { + setIsOpenMap(new Array(7).fill(false)); + setIsDrawerOpen(false); + }; + + const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap; + const dropdownItems = ( + <> + Action + ev.preventDefault()} + > + Link + + Disabled Action + + Disabled Link + + + ); + + // Toggle currently active tab + const handleTabClick = (event, tabIndex) => { + setActiveTabKey(tabIndex); + }; + + const handleEmailChange = (_event, newEmail: string) => { + setEmail(newEmail); + }; + + const handleNameChange = (_event, newName: string) => { + setName(newName); + }; + + const handleDescriptionChange = (_event, newDesc: string) => { + setDescription(newDesc); + }; + + const invalidateEmail = () => { + setEmailHelperText('Invalid email address'); + setValidatedEmail('error'); + }; + + const resetForm = () => { + setEmail(''); + setName(''); + setDescription(''); + setIsChecked(false); + setValidatedEmail('default'); + setEmailHelperText('Enter your email to continue'); + }; + + const handleSubmit = (_event) => { + if (emailRegex.test(email)) { + resetForm(); + } else { + invalidateEmail(); + } + }; + + const handleCancel = () => { + resetForm(); + }; + + const generateAlertContent = () => { + if (validatedEmail === 'error') { + return 'Please provide a valid email address'; + } + }; + + const pageForm = ( +
+ + + + + + + + })} + > + {emailHelperText} + + + + + } + > + 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/documentation-site/patternfly-docs/temp-styles/patternfly-dist-hc/docs/components/Form/examples/Form.md b/packages/documentation-site/patternfly-docs/temp-styles/patternfly-dist-hc/docs/components/Form/examples/Form.md new file mode 100644 index 0000000000..12972d85f7 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/temp-styles/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/documentation-site/patternfly-docs/temp-styles/patternfly-dist-hc/docs/components/JumpLinks/examples/JumpLinks.md b/packages/documentation-site/patternfly-docs/temp-styles/patternfly-dist-hc/docs/components/JumpLinks/examples/JumpLinks.md new file mode 100644 index 0000000000..acc3aa0ce1 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/temp-styles/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` | `