[Emotion] Convert EuiFlyout (#6213)

elastic · Sep 14, 2022 · 63027a3 · 63027a3
1 parent 57b11fb
commit 63027a3
Show file tree

Hide file tree

Showing 35 changed files with 585 additions and 459 deletions.
diff --git a/src-docs/src/views/flyout/flyout.js → src-docs/src/views/flyout/flyout.tsx b/src-docs/src/views/flyout/flyout.js → src-docs/src/views/flyout/flyout.tsx
diff --git a/src-docs/src/views/flyout/flyout_banner.js → src-docs/src/views/flyout/flyout_banner.tsx b/src-docs/src/views/flyout/flyout_banner.js → src-docs/src/views/flyout/flyout_banner.tsx
diff --git a/...cs/src/views/flyout/flyout_complicated.js → ...s/src/views/flyout/flyout_complicated.tsx b/...cs/src/views/flyout/flyout_complicated.js → ...s/src/views/flyout/flyout_complicated.tsx
@@ -56,11 +56,9 @@ export default () => {
   const togglePopover = () =>
     setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
 
-  const onSelectedTabChanged = (id) => setSelectedTabId(id);
-
   const renderTabs = tabs.map((tab, index) => (
     <EuiTab
-      onClick={() => onSelectedTabChanged(tab.id)}
+      onClick={() => setSelectedTabId(tab.id)}
       isSelected={tab.id === selectedTabId}
       key={index}
     >
@@ -107,10 +105,6 @@ export default () => {
     },
   ];
 
-  const onSuperSelectChange = (value) => {
-    setSuperSelectValue(value);
-  };
-
   const flyoutContent = (
     <EuiText>
       <p>
@@ -224,7 +218,7 @@ export default () => {
               <EuiSuperSelect
                 options={superSelectOptions}
                 valueOfSelected={superSelectvalue}
-                onChange={(value) => onSuperSelectChange(value)}
+                onChange={(value) => setSuperSelectValue(value)}
                 itemLayoutAlign="top"
                 popoverProps={{ repositionOnScroll: true }}
                 hasDividers

diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
@@ -18,14 +18,14 @@ const flyoutSource = require('!!raw-loader!./flyout');
 import FlyoutComplicated from './flyout_complicated';
 const flyoutComplicatedSource = require('!!raw-loader!./flyout_complicated');
 
-import FlyoutSmall from './flyout_small';
-const flyoutSmallSource = require('!!raw-loader!./flyout_small');
+import FlyoutOwnFocus from './flyout_own_focus';
+const flyoutOwnFocusSource = require('!!raw-loader!./flyout_own_focus');
 
-import FlyoutLarge from './flyout_large';
-const flyoutLargeSource = require('!!raw-loader!./flyout_large');
+import FlyoutSizes from './flyout_sizes';
+const flyoutSizesSource = require('!!raw-loader!./flyout_sizes');
 
-import FlyoutPaddingMedium from './flyout_padding_medium';
-const FlyoutPaddingMediumSource = require('!!raw-loader!./flyout_padding_medium');
+import FlyoutPaddingSizes from './flyout_padding_sizes';
+const FlyoutPaddingSizesSource = require('!!raw-loader!./flyout_padding_sizes');
 
 import FlyoutMaxWidth from './flyout_max_width';
 const flyoutMaxWidthSource = require('!!raw-loader!./flyout_max_width');
@@ -66,7 +66,7 @@ const flyoutComplicatedSnippet = `<EuiFlyout onClose={closeFlyout}>
 </EuiFlyout>
 `;
 
-const flyoutSmallSnippet = `<EuiFlyout ownFocus={false} size="s" onClose={closeFlyout}>
+const flyoutOwnFocusSnippet = `<EuiFlyout ownFocus={false} size="s" onClose={closeFlyout}>
   <EuiFlyoutHeader hasBorder aria-labelledby={flyoutHeadingId}>
     <EuiTitle>
       <h2 id={flyoutHeadingId}><!-- Defaults to medium size. Change the heading level based on your context. --></h2>
@@ -78,7 +78,7 @@ const flyoutSmallSnippet = `<EuiFlyout ownFocus={false} size="s" onClose={closeF
 </EuiFlyout>
 `;
 
-const flyoutMediumPaddingSnippet = `<EuiFlyout paddingSize="m" onClose={closeFlyout}>
+const flyoutSizesPaddingSnippet = `<EuiFlyout paddingSize="m" onClose={closeFlyout}>
   <EuiFlyoutHeader hasBorder aria-labelledby={flyoutHeadingId}>
     <EuiTitle>
       <h2 id={flyoutHeadingId}>
@@ -104,7 +104,7 @@ const flyoutMaxWidthSnippet = `<EuiFlyout maxWidth={448} onClose={closeFlyout}>
 </EuiFlyout>
 `;
 
-const flyoutLargeSnippet = `<EuiFlyout size="l" onClose={closeFlyout}>
+const flyoutSizesSnippet = `<EuiFlyout size="l" onClose={closeFlyout}>
   <EuiFlyoutHeader hasBorder aria-labelledby={flyoutHeadingId}>
     <EuiTitle>
       <h2 id={flyoutHeadingId}><!-- Defaults to medium size. Change the heading level based on your context. --></h2>
@@ -214,8 +214,8 @@ export const FlyoutExample = {
       title: 'Sizing',
       source: [
         {
-          type: GuideSectionTypes.JS,
-          code: flyoutLargeSource,
+          type: GuideSectionTypes.TSX,
+          code: flyoutSizesSource,
         },
       ],
       text: (
@@ -227,16 +227,16 @@ export const FlyoutExample = {
           number or string format.
         </p>
       ),
-      snippet: flyoutLargeSnippet,
-      demo: <FlyoutLarge />,
+      snippet: flyoutSizesSnippet,
+      demo: <FlyoutSizes />,
       props: { EuiFlyout },
     },
     {
       title: 'Adjusting padding',
       source: [
         {
-          type: GuideSectionTypes.JS,
-          code: FlyoutPaddingMediumSource,
+          type: GuideSectionTypes.TSX,
+          code: FlyoutPaddingSizesSource,
         },
       ],
       text: (
@@ -250,8 +250,8 @@ export const FlyoutExample = {
           flyout.
         </p>
       ),
-      snippet: flyoutMediumPaddingSnippet,
-      demo: <FlyoutPaddingMedium />,
+      snippet: flyoutSizesPaddingSnippet,
+      demo: <FlyoutPaddingSizes />,
       props: { EuiFlyout },
     },
     {
@@ -282,7 +282,7 @@ export const FlyoutExample = {
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: flyoutSmallSource,
+          code: flyoutOwnFocusSource,
         },
       ],
       text: (
@@ -302,8 +302,8 @@ export const FlyoutExample = {
           </p>
         </>
       ),
-      snippet: flyoutSmallSnippet,
-      demo: <FlyoutSmall />,
+      snippet: flyoutOwnFocusSnippet,
+      demo: <FlyoutOwnFocus />,
       props: { EuiFlyout },
     },
     {
@@ -339,7 +339,7 @@ export const FlyoutExample = {
       title: 'Understanding max-width',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: flyoutMaxWidthSource,
         },
       ],

diff --git a/...docs/src/views/flyout/flyout_max_width.js → ...ocs/src/views/flyout/flyout_max_width.tsx b/...docs/src/views/flyout/flyout_max_width.js → ...ocs/src/views/flyout/flyout_max_width.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import {
   EuiFlyout,
+  EuiFlyoutProps,
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiLink,
@@ -19,8 +20,10 @@ import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-  const [flyoutSize, setFlyoutSize] = useState('m');
-  const [flyoutMaxWidth, setFlyoutMaxWidth] = useState(false);
+  const [flyoutSize, setFlyoutSize] = useState<EuiFlyoutProps['size']>('m');
+  const [flyoutMaxWidth, setFlyoutMaxWidth] = useState<
+    EuiFlyoutProps['maxWidth']
+  >(false);
   const maxWidthFlyoutTitleId = useGeneratedHtmlId({
     prefix: 'maxWidthFlyoutTitle',
   });
@@ -30,7 +33,10 @@ export default () => {
 
   const closeFlyout = () => setIsFlyoutVisible(false);
 
-  const showFlyout = (size = 'm', maxWidth = false) => {
+  const showFlyout = (
+    size: EuiFlyoutProps['size'] = 'm',
+    maxWidth: EuiFlyoutProps['maxWidth'] = false
+  ) => {
     setFlyoutSize(size);
     setFlyoutMaxWidth(maxWidth);
     setIsFlyoutVisible(true);
@@ -105,6 +111,7 @@ export default () => {
                 max={100}
                 name="range"
                 id={maxWidthFlyoutRangeId}
+                value={50}
               />
             </EuiFormRow>
           </EuiForm>

diff --git a/src-docs/src/views/flyout/flyout_small.js → ...ocs/src/views/flyout/flyout_own_focus.tsx b/src-docs/src/views/flyout/flyout_small.js → ...ocs/src/views/flyout/flyout_own_focus.tsx
diff --git a/...src/views/flyout/flyout_padding_medium.js → ...src/views/flyout/flyout_padding_sizes.tsx b/...src/views/flyout/flyout_padding_medium.js → ...src/views/flyout/flyout_padding_sizes.tsx
@@ -6,6 +6,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
+  EuiFlyoutProps,
   EuiFlyoutHeader,
   EuiFlyoutBody,
   EuiFlyoutFooter,
@@ -63,7 +64,7 @@ export default () => {
       <EuiFlyout
         ownFocus
         onClose={closeFlyout}
-        paddingSize={paddingSize}
+        paddingSize={paddingSize as EuiFlyoutProps['paddingSize']}
         id={mediumPaddingFlyoutId}
         aria-labelledby={mediumPaddingFlyoutTitleId}
       >
@@ -76,15 +77,16 @@ export default () => {
         </EuiFlyoutHeader>
         <EuiFlyoutBody banner={callOut}>
           <EuiFormRow label="Change the paddingSize">
+            {/* @ts-ignore - EuiButtonGroup is not correctly detecting type="single" */}
             <EuiButtonGroup
               legend="Flyout paddingSize"
               color="primary"
-              size="s"
+              buttonSize="s"
               options={sizes}
               idSelected={paddingSize}
-              onChange={(id) => {
+              onChange={(id: string) => {
                 const newName = sizes
-                  .find((size) => size.id === id)
+                  .find((size) => size.id === id)!
                   .label.toLowerCase();
                 setPaddingSize(id);
                 setPaddingSizeName(newName);

diff --git a/src-docs/src/views/flyout/flyout_push.js → src-docs/src/views/flyout/flyout_push.tsx b/src-docs/src/views/flyout/flyout_push.js → src-docs/src/views/flyout/flyout_push.tsx
diff --git a/src-docs/src/views/flyout/flyout_large.js → src-docs/src/views/flyout/flyout_sizes.tsx b/src-docs/src/views/flyout/flyout_large.js → src-docs/src/views/flyout/flyout_sizes.tsx
@@ -56,16 +56,16 @@ export default () => {
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
-          <EuiFormRow label="Change the paddingSize">
+          <EuiFormRow label="Change the flyout size">
             <EuiButtonGroup
               legend="Flyout size"
               color="primary"
-              size="s"
+              buttonSize="s"
               options={sizes}
               idSelected={size}
               onChange={(id) => {
                 const newName = sizes
-                  .find((size) => size.id === id)
+                  .find((size) => size.id === id)!
                   .label.toLowerCase();
                 setSize(id);
                 setSizeName(newName);