Merge pull request #20368 from thebuilder/ui/fix-find-dom-node

UI: fix deprecated ReactDOM.findDOMNode calls
storybookjs · Dec 23, 2022 · d2f66cb · d2f66cb
2 parents a2ad903 + 0f293fa
commit d2f66cb
Show file tree

Hide file tree

Showing 5 changed files with 236 additions and 268 deletions.
diff --git a/code/addons/a11y/src/components/Report/Rules.tsx b/code/addons/a11y/src/components/Report/Rules.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { Badge } from '@storybook/components';
 import type { CheckResult } from 'axe-core';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 
 const List = styled.div({
   display: 'flex',
@@ -53,6 +53,11 @@ const formatSeverityText = (severity: string) => {
 };
 
 const Rule: FC<RuleProps> = ({ rule }) => {
+  const { ref, width } = useResizeDetector({
+    refreshMode: 'debounce',
+    handleHeight: false,
+    handleWidth: true,
+  });
   let badgeType: any = null;
   switch (rule.impact) {
     case ImpactValue.CRITICAL:
@@ -71,14 +76,10 @@ const Rule: FC<RuleProps> = ({ rule }) => {
       break;
   }
   return (
-    <ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
-      {(size) => (
-        <Item elementWidth={size.width || 0}>
-          <StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
-          <Message>{rule.message}</Message>
-        </Item>
-      )}
-    </ReactResizeDetector>
+    <Item ref={ref} elementWidth={width || 0}>
+      <StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
+      <Message>{rule.message}</Message>
+    </Item>
   );
 };
 

diff --git a/code/addons/a11y/src/components/Tabs.tsx b/code/addons/a11y/src/components/Tabs.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { styled } from '@storybook/theming';
 import type { NodeResult, Result } from 'axe-core';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 import HighlightToggle from './Report/HighlightToggle';
 
 import type { RuleType } from './A11YPanel';
@@ -99,6 +99,11 @@ function retrieveAllNodesFromResults(items: Result[]): NodeResult[] {
 }
 
 export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
+  const { ref, width } = useResizeDetector({
+    refreshMode: 'debounce',
+    handleHeight: false,
+    handleWidth: true,
+  });
   const { tab: activeTab, setTab } = useA11yContext();
 
   const handleToggle = React.useCallback(
@@ -111,38 +116,32 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
   const highlightToggleId = `${tabs[activeTab].type}-global-checkbox`;
   const highlightLabel = `Highlight results`;
   return (
-    <ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
-      {(size) => (
-        <Container>
-          <List>
-            <TabsWrapper>
-              {tabs.map((tab, index) => (
-                <Item
-                  /* eslint-disable-next-line react/no-array-index-key */
-                  key={index}
-                  data-index={index}
-                  active={activeTab === index}
-                  onClick={handleToggle}
-                >
-                  {tab.label}
-                </Item>
-              ))}
-            </TabsWrapper>
-          </List>
-          {tabs[activeTab].items.length > 0 ? (
-            <GlobalToggle elementWidth={size.width || 0}>
-              <HighlightToggleLabel htmlFor={highlightToggleId}>
-                {highlightLabel}
-              </HighlightToggleLabel>
-              <HighlightToggle
-                toggleId={highlightToggleId}
-                elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
-              />
-            </GlobalToggle>
-          ) : null}
-          {tabs[activeTab].panel}
-        </Container>
-      )}
-    </ReactResizeDetector>
+    <Container ref={ref}>
+      <List>
+        <TabsWrapper>
+          {tabs.map((tab, index) => (
+            <Item
+              /* eslint-disable-next-line react/no-array-index-key */
+              key={index}
+              data-index={index}
+              active={activeTab === index}
+              onClick={handleToggle}
+            >
+              {tab.label}
+            </Item>
+          ))}
+        </TabsWrapper>
+      </List>
+      {tabs[activeTab].items.length > 0 ? (
+        <GlobalToggle elementWidth={width || 0}>
+          <HighlightToggleLabel htmlFor={highlightToggleId}>{highlightLabel}</HighlightToggleLabel>
+          <HighlightToggle
+            toggleId={highlightToggleId}
+            elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
+          />
+        </GlobalToggle>
+      ) : null}
+      {tabs[activeTab].panel}
+    </Container>
   );
 };