Update docs to remove measurementRenderAPI

+ update copy/recommendations
elastic · Sep 22, 2023 · 1fda857 · 1fda857
1 parent 1d1506e
commit 1fda857
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 45 deletions.
diff --git a/src-docs/src/views/text_truncate/performance.tsx b/src-docs/src/views/text_truncate/performance.tsx
@@ -6,7 +6,6 @@ import { FixedSizeList } from 'react-window';
 
 import {
   EuiFlexGroup,
-  EuiFlexItem,
   EuiPanel,
   EuiText,
   EuiFormRow,
@@ -18,8 +17,6 @@ import {
 
 export default () => {
   // Testing toggles
-  const [canvasRendering, setCanvasRendering] = useState(true);
-  const measurementRenderAPI = canvasRendering ? 'canvas' : 'dom';
   const [virtualization, setVirtualization] = useState(false);
   const [throttleMs, setThrottleMs] = useState(0);
   const [lineCount, setLineCount] = useState(100);
@@ -52,12 +49,15 @@ export default () => {
 
   return (
     <EuiText>
-      <EuiFlexGroup alignItems="center">
-        <EuiSwitch
-          label="Toggle canvas rendering"
-          checked={canvasRendering}
-          onChange={() => setCanvasRendering(!canvasRendering)}
-        />
+      <EuiFlexGroup alignItems="center" gutterSize="xl">
+        <EuiFormRow label="Lines" display="columnCompressed">
+          <EuiFieldNumber
+            value={lineCount}
+            onChange={(e) => setLineCount(Number(e.target.value))}
+            style={{ width: 100 }}
+            compressed
+          />
+        </EuiFormRow>
         <EuiSwitch
           label="Toggle virtualization"
           checked={virtualization}
@@ -71,16 +71,6 @@ export default () => {
             compressed
           />
         </EuiFormRow>
-        <EuiFlexItem css={{ justifyContent: 'flex-end', flexDirection: 'row' }}>
-          <EuiFormRow label="Lines" display="columnCompressed">
-            <EuiFieldNumber
-              value={lineCount}
-              onChange={(e) => setLineCount(Number(e.target.value))}
-              style={{ width: 100 }}
-              compressed
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="m" />
 
@@ -109,7 +99,6 @@ export default () => {
                 text={text[index]}
                 truncation="middle"
                 width={width}
-                measurementRenderAPI={measurementRenderAPI}
               />
             )}
           </FixedSizeList>
@@ -120,7 +109,6 @@ export default () => {
               text={text}
               truncation="middle"
               width={width}
-              measurementRenderAPI={measurementRenderAPI}
             />
           ))
         )}

diff --git a/src-docs/src/views/text_truncate/text_truncate_example.js b/src-docs/src/views/text_truncate/text_truncate_example.js
@@ -233,17 +233,17 @@ export const TextTruncateExample = {
       text: (
         <>
           <p>
-            <strong>EuiTextTruncate</strong> uses an extra DOM element under the
+            <strong>EuiTextTruncate</strong> uses a canvas element under the
             hood to manipulate text and calculate whether the text width fits
             within the available width. Additionally, by default, the component
             will include its own resize observer in order to react to width
             changes.
           </p>
           <p>
             These functionalities can cause performance issues if the component
-            is rendered many times per page, and we would strongly recommend
-            using caution when doing so. Several escape hatches are available
-            for performance improvements:
+            is rendered over hundreds of times per page, and we would strongly
+            recommend using caution when doing so. Several escape hatches are
+            available for performance improvements:
           </p>
           <ol
             css={({ euiTheme }) =>
@@ -258,37 +258,30 @@ export const TextTruncateExample = {
               Pass a <EuiCode>width</EuiCode> prop to skip initializing a resize
               observer for each component instance. For text within a container
               of the same width, we would strongly recommend applying a single
-              resize observer to the parent container and passing down that
-              width to all child <strong>EuiTextTruncate</strong>s.
-            </li>
-            <li>
-              Use the <EuiCode>measurementRenderAPI="canvas"</EuiCode> prop to
-              utilize the Canvas API for text measurement. While this can be
-              significantly more performant at higher iterations, please do note
-              that there are minute pixel to subpixel differences in this
-              rendering method.
+              resize observer to the parent container and passing that width to
+              all child <strong>EuiTextTruncate</strong>s. Additionally, you may
+              want to consider{' '}
+              <EuiLink href="https://lodash.com/docs/#throttle" target="_blank">
+                throttling
+              </EuiLink>{' '}
+              any resize observers or width-based logic.
             </li>
             <li>
-              Strongly consider using{' '}
+              Use{' '}
               <EuiLink
                 href="https://github.com/bvaughn/react-window"
                 target="_blank"
               >
                 virtualization
               </EuiLink>{' '}
               to reduce the number of rendered elements visible at any given
-              time, or{' '}
-              <EuiLink href="https://lodash.com/docs/#throttle" target="_blank">
-                throttling
-              </EuiLink>{' '}
-              any resize observers or width-based logic.
+              time. For over hundreds of instances, this will generally be the
+              most effective solution for performance or rerender issues.
             </li>
             <li>
               If necessary, consider pulling out the underlying{' '}
-              <EuiCode>TruncationUtilsForDOM</EuiCode> and{' '}
-              <EuiCode>TruncationUtilsForCanvas</EuiCode> truncation utils and
-              re-using the same canvas context or DOM node, as opposed to
-              repeatedly creating new ones.
+              <EuiCode>TruncationUtils</EuiCode> and re-using the same canvas
+              context, as opposed to repeatedly creating new ones.
             </li>
           </ol>
         </>
@@ -299,7 +292,6 @@ export const TextTruncateExample = {
       snippet: `<EuiTextTruncate
   text="Hello world"
   width={width}
-  measurementRenderAPI="canvas"
 />`,
     },
   ],