Revert "toggle css visibility in HoverDisclosure" (#1561)

* Revert "toggle css visibility in HoverDisclosure"
* Update changelog and tests

This reverts commit 28afb99.

Co-authored-by: Luke Bowerman <[email protected]>

Author: dbchristopher

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [UNRELEASED]
 
 - `useDialog` needs to support scenario it is controlled but `onClose` isn't specified
+- Reverts: `HoverDisclosure` toggles visibility with css rather than inserting elements into the DOM
 - `Space` revert mistakenly applied `flex-shrink: 0`
 
 ## [0.9.17] - 2020-10-12

packages/components/src/Button/size.ts

@@ -69,7 +69,7 @@ export const buttonSizeMap = {
 export const iconButtonIconSizeMap = {
   xxsmall: 'xxsmall',
   xsmall: 'xsmall',
-  small: 'xsmall',
+  small: 'small',
   medium: 'small',
   large: 'medium',
 }

packages/components/src/Tree/Tree.test.tsx

@@ -158,15 +158,9 @@ describe('Tree', () => {
       </Tree>
     )
 
-    expect(screen.queryByText('Tree Detail')?.parentElement).toHaveStyleRule(
-      'visibility',
-      'hidden'
-    )
+    expect(screen.queryByText('Tree Detail')).not.toBeInTheDocument()
     fireEvent.mouseEnter(screen.getByText('Tree Label'), { bubbles: true })
-    expect(screen.queryByText('Tree Detail')?.parentElement).toHaveStyleRule(
-      'visibility',
-      'visible'
-    )
+    expect(screen.queryByText('Tree Detail')).toBeInTheDocument()
   })
 
   test("Child Tree adopts Parent Tree's detailHoverDisclosure prop value (when Child Tree does not have prop value)", () => {
@@ -183,17 +177,11 @@ describe('Tree', () => {
       </Tree>
     )
 
-    expect(screen.queryByText('Child Detail')?.parentElement).toHaveStyleRule(
-      'visibility',
-      'hidden'
-    )
+    expect(screen.queryByText('Child Detail')).not.toBeInTheDocument()
     fireEvent.mouseEnter(screen.getByText('Child Label'), {
       bubbles: true,
     })
-    expect(screen.queryByText('Child Detail')?.parentElement).toHaveStyleRule(
-      'visibility',
-      'visible'
-    )
+    expect(screen.queryByText('Child Detail')).toBeInTheDocument()
   })
 
   test("Child Tree detailHoverDisclosure prop value overrides Parent Tree's detailHoverDisclosure prop value", () => {

packages/components/src/Tree/TreeItem.test.tsx

@@ -68,15 +68,9 @@ describe('TreeItem', () => {
       </TreeItem>
     )
 
-    expect(screen.queryByText('Detail')?.parentElement).toHaveStyleRule(
-      'visibility',
-      'hidden'
-    )
+    expect(screen.queryByText('Detail')).not.toBeInTheDocument()
     fireEvent.mouseEnter(screen.getByText('Label'), { bubbles: true })
-    expect(screen.queryByText('Detail')?.parentElement).toHaveStyleRule(
-      'visibility',
-      'visible'
-    )
+    expect(screen.queryByText('Detail')).toBeInTheDocument()
   })
 
   test("Child TreeItem adopts Parent Tree's detailHoverDisclosure prop value (when Child TreeItem does not have detailHoverDisclosure prop value)", () => {
@@ -91,15 +85,9 @@ describe('TreeItem', () => {
       </Tree>
     )
 
-    expect(screen.queryByText('Child Detail')?.parentElement).toHaveStyleRule(
-      'visibility',
-      'hidden'
-    )
+    expect(screen.queryByText('Child Detail')).not.toBeInTheDocument()
     fireEvent.mouseEnter(screen.getByText('Child Label'), { bubbles: true })
-    expect(screen.queryByText('Child Detail')?.parentElement).toHaveStyleRule(
-      'visibility',
-      'visible'
-    )
+    expect(screen.queryByText('Child Detail')).toBeInTheDocument()
   })
 
   test("Child TreeItem's detailHoverDisclosure prop value overrides Parent Tree's detailHoverDisclosure prop value", () => {

packages/components/src/utils/HoverDisclosure/HoverDisclosure.tsx

@@ -25,7 +25,6 @@
  */
 
 import React, { FC, useContext } from 'react'
-import styled from 'styled-components'
 import { HoverDisclosureContext } from './HoverDisclosureContext'
 
 export interface HoverDisclosureProps {
@@ -37,11 +36,5 @@ export const HoverDisclosure: FC<HoverDisclosureProps> = ({
   visible,
 }) => {
   const context = useContext(HoverDisclosureContext)
-  return (
-    <Disclosure visible={visible || context.visible}>{children}</Disclosure>
-  )
+  return visible || context.visible ? <>{children}</> : null
 }
-
-const Disclosure = styled.span<HoverDisclosureProps>`
-  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
-`