Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-accordion
propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
---

import { useState } from 'react';
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';

## Examples
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useState } from 'react';
import {
Accordion,
AccordionItem,
Expand All @@ -10,8 +11,8 @@ import {
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';

export const AccordionBordered: React.FunctionComponent = () => {
const [expanded, setExpanded] = React.useState('bordered-toggle4');
const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);
const [expanded, setExpanded] = useState('bordered-toggle4');
const [isDisplayLarge, setIsDisplayLarge] = useState(false);

const displaySize = isDisplayLarge ? 'lg' : 'default';
const onToggle = (id: string) => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { useState } from 'react';
import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';

export const AccordionDefinitionList: React.FunctionComponent = () => {
const [expanded, setExpanded] = React.useState('def-list-toggle2');
const [expanded, setExpanded] = useState('def-list-toggle2');

const onToggle = (id: string) => {
if (id === expanded) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { useState } from 'react';
import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';

export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent = () => {
const [expanded, setExpanded] = React.useState(['ex2-toggle4']);
const [expanded, setExpanded] = useState(['ex2-toggle4']);

const toggle = (id) => {
const index = expanded.indexOf(id);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { useState } from 'react';
import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';

export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
const [expanded, setExpanded] = React.useState('ex-toggle2');
const [expanded, setExpanded] = useState('ex-toggle2');

const onToggle = (id: string) => {
if (id === expanded) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { useState } from 'react';
import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';

export const AccordionToggleIconAtStart: React.FunctionComponent = () => {
const [expanded, setExpanded] = React.useState('start-toggle-toggle2');
const [expanded, setExpanded] = useState('start-toggle-toggle2');

const onToggle = (id: string) => {
if (id === expanded) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-action-list
propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
---

import { Fragment } from 'react';
import { Fragment, useState } from 'react';
import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Fragment } from 'react';
import { Fragment, useState } from 'react';
import {
ActionList,
ActionListGroup,
Expand All @@ -14,7 +14,7 @@ import {
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

export const ActionListSingleGroup: React.FunctionComponent = () => {
const [isOpen, setIsOpen] = React.useState(false);
const [isOpen, setIsOpen] = useState(false);

const onToggle = () => {
setIsOpen(!isOpen);
Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/components/Alert/Alert.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Fragment, useEffect, useRef, useState, type JSX } from 'react';
import { Fragment, useEffect, useRef, useState } from 'react';
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/Alert/alert';
import { AlertIcon } from './AlertIcon';
Expand All @@ -22,7 +22,7 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
/** Close button; use the alert action close button component. */
actionClose?: React.ReactNode;
/** Action links; use a single alert action link component or multiple wrapped in an array
* or React.Fragment.
* or React fragment.
*/
actionLinks?: React.ReactNode;
/** Content rendered inside the alert. */
Expand Down Expand Up @@ -54,7 +54,7 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
/** Title of the alert. */
title: React.ReactNode;
/** Sets the element to use as the alert title. Default is h4. */
component?: keyof JSX.IntrinsicElements;
component?: keyof React.JSX.IntrinsicElements;
/** Adds accessible text to the alert toggle. */
toggleAriaLabel?: string;
/** Position of the tooltip which is displayed if text is truncated. */
Expand Down
Loading
Loading