Merge branch 'master' into patch-1

carbon-design-system · Apr 20, 2020 · aec5231 · aec5231
2 parents 597fc5f + f18dedd
commit aec5231
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/.yarn/offline-mirror/use-resize-observer-6.0.0.tgz b/.yarn/offline-mirror/use-resize-observer-6.0.0.tgz
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -115,6 +115,7 @@
     "storybook-readme": "^5.0.8",
     "string-replace-loader": "^2.1.0",
     "terser-webpack-plugin": "^2.3.2",
+    "use-resize-observer": "^6.0.0",
     "webpack": "^4.41.5",
     "whatwg-fetch": "^2.0.3"
   },

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -6,8 +6,9 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { useState, useRef, useLayoutEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import classNames from 'classnames';
+import useResizeObserver from 'use-resize-observer/polyfilled';
 import { ChevronDown16 } from '@carbon/icons-react';
 import { settings } from 'carbon-components';
 import Copy from '../Copy';
@@ -36,12 +37,15 @@ function CodeSnippet({
   const { current: uid } = useRef(getUniqueId());
   const codeContentRef = useRef();
 
-  useLayoutEffect(() => {
-    if (codeContentRef.current) {
-      const { height } = codeContentRef.current.getBoundingClientRect();
-      setShouldShowMoreLessBtn(type === 'multi' && height > 255);
-    }
-  }, [children, type]);
+  useResizeObserver({
+    ref: codeContentRef,
+    onResize: () => {
+      if (codeContentRef.current) {
+        const { height } = codeContentRef.current.getBoundingClientRect();
+        setShouldShowMoreLessBtn(type === 'multi' && height > 255);
+      }
+    },
+  });
 
   const codeSnippetClasses = classNames(className, {
     [`${prefix}--snippet`]: true,

diff --git a/yarn.lock b/yarn.lock
@@ -23866,6 +23866,13 @@ use-callback-ref@^1.2.1:
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.1.tgz#898759ccb9e14be6c7a860abafa3ffbd826c89bb"
   integrity sha512-C3nvxh0ZpaOxs9RCnWwAJ+7bJPwQI8LHF71LzbQ3BvzH5XkdtlkMadqElGevg5bYBDFip4sAnD4m06zAKebg1w==
 
+use-resize-observer@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-6.0.0.tgz#8450ade735c386e8d93cdf983c26d34a9f478a54"
+  integrity sha512-Zfe1qsZVhzfgECs+L/ZcSukyVPFGOmWtC7xZI5Lpn4PR2hNgVvD1NmQ/GYBoCSV2pJskxflJWcDzpTAt84nhvw==
+  dependencies:
+    resize-observer-polyfill "^1.5.1"
+
 use-sidecar@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6"