Removed detached class per Core updates

Author: Eric Olkowski

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

@@ -68,7 +68,6 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * animation will not occur.
    */
   direction?: 'up' | 'down';
-  hasDetachedAnimations?: boolean;
 }
 
 interface ExpandableSectionState {
@@ -204,7 +203,6 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       truncateMaxLines,
       direction,
-      hasDetachedAnimations,
       ...props
     } = this.props;
 
@@ -257,8 +255,6 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       </div>
     );
 
-    const shouldApplyDetachedAnimations = hasDetachedAnimations && isDetached;
-
     return (
       <div
         className={css(
@@ -267,10 +263,7 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
           displaySize === 'lg' && styles.modifiers.displayLg,
           isWidthLimited && styles.modifiers.limitWidth,
           isIndented && styles.modifiers.indented,
-          shouldApplyDetachedAnimations && 'pf-m-detached',
-          shouldApplyDetachedAnimations &&
-            direction &&
-            (direction === 'up' ? styles.modifiers.expandTop : 'pf-m-expand-bottom'),
+          isDetached && direction && (direction === 'up' ? styles.modifiers.expandTop : 'pf-m-expand-bottom'),
           variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,
           className
         )}

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

@@ -28,8 +28,6 @@ export interface ExpandableSectionToggleProps extends Omit<React.HTMLProps<HTMLD
   isExpanded?: boolean;
   /** Callback function to toggle the expandable content. */
   onToggle?: (isExpanded: boolean) => void;
-  /** Flag indicating that the expandable section and expandable toggle are detached from one another. */
-  isDetached?: boolean;
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({
@@ -41,14 +39,12 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   toggleId,
   direction = 'down',
   hasTruncatedContent = false,
-  isDetached = true,
   ...props
 }: ExpandableSectionToggleProps) => (
   <div
     className={css(
       styles.expandableSection,
       isExpanded && styles.modifiers.expanded,
-      isDetached && 'pf-m-detached',
       hasTruncatedContent && styles.modifiers.truncate,
       className
     )}

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

@@ -130,18 +130,6 @@ test('Renders with ARIA attributes when contentId and toggleId are passed', () =
   expect(wrapper).toContainHTML('aria-controls="content-id"');
 });
 
-test(`Does not render with class pf-m-detached by default`, () => {
-  render(<ExpandableSection>Test content</ExpandableSection>);
-
-  expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-detached');
-});
-
-test(`Renders with class pf-m-detached when isDetached is true`, () => {
-  render(<ExpandableSection isDetached>Test content</ExpandableSection>);
-
-  expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-detached');
-});
-
 test(`Does not render with classes pf-m-expand-top nor pf-m-expand-bottom by default`, () => {
   render(<ExpandableSection>Test content</ExpandableSection>);
 
@@ -156,13 +144,13 @@ test(`Does not render with classes pf-m-expand-top nor pf-m-expand-bottom when o
   expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-bottom');
 });
 
-test(`Does not render with class pf-m-expand-top when only direction="up"`, () => {
+test(`Does not render with class pf-m-expand-top when direction="up" and isDetached is false`, () => {
   render(<ExpandableSection direction="up">Test content</ExpandableSection>);
 
   expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-top');
 });
 
-test(`Does not render with class pf-m-expand-bottom when only direction="down"`, () => {
+test(`Does not render with class pf-m-expand-bottom when direction="down" and isDetached is false`, () => {
   render(<ExpandableSection direction="down">Test content</ExpandableSection>);
 
   expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-bottom');

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

@@ -14,19 +14,3 @@ test('Renders with children', () => {
 
   expect(screen.getByRole('button')).toHaveTextContent('Toggle test');
 });
-
-test('Renders with class pf-m-detached by default', () => {
-  render(<ExpandableSectionToggle data-testid="section-wrapper">Toggle test</ExpandableSectionToggle>);
-
-  expect(screen.getByTestId('section-wrapper')).toHaveClass('pf-m-detached');
-});
-
-test('Does not render with class pf-m-detached when isDetached is false', () => {
-  render(
-    <ExpandableSectionToggle isDetached={false} data-testid="section-wrapper">
-      Toggle test
-    </ExpandableSectionToggle>
-  );
-
-  expect(screen.getByTestId('section-wrapper')).not.toHaveClass('pf-m-detached');
-});