chore(Accordion, ExpandableSection, DescriptionList): update displaySize prop values (#8206)

* updated displaySize prop to match new recommendations

* update test description

* fix expandable integration demo

* fix displaySize in remaining md files

* address PR feedback for descriptionList example

Author: jenny-s51

packages/react-core/src/components/Accordion/Accordion.tsx

@@ -17,7 +17,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
   /** Flag to indicate the accordion had a border */
   isBordered?: boolean;
   /** Display size variant. */
-  displaySize?: 'default' | 'large';
+  displaySize?: 'default' | 'lg';
 }
 
 export const Accordion: React.FunctionComponent<AccordionProps> = ({
@@ -36,7 +36,7 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
       className={css(
         styles.accordion,
         isBordered && styles.modifiers.bordered,
-        displaySize === 'large' && styles.modifiers.displayLg,
+        displaySize === 'lg' && styles.modifiers.displayLg,
         className
       )}
       aria-label={ariaLabel}

packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx

@@ -128,8 +128,8 @@ test('Renders without pf-m-display-lg by default', () => {
   expect(screen.getByText('Test')).not.toHaveClass('pf-m-display-lg');
 });
 
-test('Renders with pf-m-display-lg when displaySize=large', () => {
-  render(<Accordion displaySize="large">Test</Accordion>);
+test('Renders with pf-m-display-lg when displaySize="lg"', () => {
+  render(<Accordion displaySize="lg">Test</Accordion>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-m-display-lg');
 });

packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx

@@ -14,7 +14,7 @@ export const AccordionBordered: React.FunctionComponent = () => {
   const [expanded, setExpanded] = React.useState('bordered-toggle4');
   const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);
 
-  const displaySize = isDisplayLarge ? 'large' : 'default';
+  const displaySize = isDisplayLarge ? 'lg' : 'default';
   const onToggle = (id: string) => {
     if (id === expanded) {
       setExpanded('');
@@ -124,7 +124,7 @@ export const AccordionBordered: React.FunctionComponent = () => {
           label="Display size large"
           isChecked={isDisplayLarge}
           onChange={setIsDisplayLarge}
-          aria-label="show displlay large variation checkbox"
+          aria-label="show display large variation checkbox"
           id="toggle-display-lg"
           name="toggle-display-lg"
         />

packages/react-core/src/components/DescriptionList/DescriptionList.tsx

@@ -31,7 +31,7 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
   /** Sets the the default placement of description list groups to fill from top to bottom. */
   isFillColumns?: boolean;
   /** Sets the display size of the descriptions in the description list.*/
-  displaySize?: 'lg' | '2xl';
+  displaySize?: 'default' | 'lg' | '2xl';
   /** Sets the number of columns on the description list at various breakpoints */
   columnModifier?: {
     default?: '1Col' | '2Col' | '3Col';
@@ -90,7 +90,7 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   isCompact,
   isFluid,
   isFillColumns,
-  displaySize,
+  displaySize = 'default',
   columnModifier,
   autoFitMinModifier,
   termWidth,

packages/react-core/src/components/DescriptionList/examples/DescriptionList.md

@@ -85,9 +85,9 @@ import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
 ```ts file='./DescriptionListColumnFill.tsx'
 ```
 
-### Display size
+### Large display size
 
-```ts file='./DescriptionListWithDisplaySize.tsx'
+```ts file='./DescriptionListWithLargeDisplaySize.tsx'
 ```
 
 ## Responsive column definitions
@@ -135,9 +135,9 @@ A [card component](/components/card) can be used in place of a description list
 ```ts file='./DescriptionListWithCard.tsx'
 ```
 
-### Description list with display size and card
+### Description list with large display size and card
 
-```ts file='./DescriptionListDisplaySizeAndCard.tsx'
+```ts file='./DescriptionListWithLargeDisplaySizeAndCard.tsx'
 ```
 
 ### Display size with card, three column on large breakpoint

packages/react-core/src/components/DescriptionList/examples/DescriptionListWithDisplaySize.tsx renamed to packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx

@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
-export const DescriptionListWithDisplaySize: React.FunctionComponent = () => {
+export const DescriptionListWithLargeDisplaySize: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(false);
   const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
 

packages/react-core/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCard.tsx renamed to packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx

@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
-export const DescriptionListDisplaySizeAndCard: React.FunctionComponent = () => {
+export const DescriptionListWithLargeDisplaySizeAndCard: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = React.useState<boolean>(false);
   const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
 

packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx

@@ -21,8 +21,8 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
    * property's value should match the contenId property of the expandable section toggle sub-component.
    */
   contentId?: string;
-  /** Display size variant. Set to "large" for disclosure styling. */
-  displaySize?: 'default' | 'large';
+  /** Display size variant. Set to "lg" for disclosure styling. */
+  displaySize?: 'default' | 'lg';
   /** Forces active state. */
   isActive?: boolean;
   /** Indicates the expandable section has a detached toggle. */
@@ -193,7 +193,7 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
           propOrStateIsExpanded && styles.modifiers.expanded,
           isActive && styles.modifiers.active,
           isDetached && styles.modifiers.detached,
-          displaySize === 'large' && styles.modifiers.displayLg,
+          displaySize === 'lg' && styles.modifiers.displayLg,
           isWidthLimited && styles.modifiers.limitWidth,
           isIndented && styles.modifiers.indented,
           variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,

packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx

@@ -49,7 +49,7 @@ test('Detached ExpandableSection renders successfully', () => {
 
 test('Disclosure ExpandableSection', () => {
   const { asFragment } = render(
-    <ExpandableSection {...props} displaySize="large" isWidthLimited>
+    <ExpandableSection {...props} displaySize="lg" isWidthLimited>
       test{' '}
     </ExpandableSection>
   );

packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx

@@ -13,7 +13,7 @@ export const ExpandableSectionDisclosure: React.FunctionComponent = () => {
       toggleText={isExpanded ? 'Show less' : 'Show more'}
       onToggle={onToggle}
       isExpanded={isExpanded}
-      displaySize="large"
+      displaySize="lg"
       isWidthLimited
     >
       This content is visible only when the component is expanded.