fix(Types): ShorthandCollection (#13050)

* fix(Types): fix shorthandCollection Definition * fix(Types): add never * fix(Types): key in keyof * fix(types): shorthand * fix(types): optional * fix(Types): fix shorthandCollection Definition * fix(Types): add never * fix(Types): key in keyof * fix(types): shorthand * fix(types): optional * fix(Types): Partial typ * fix(Types): Fix toolbar usage * fix(Types): remove log * fix(Types): UIComponentProps * fix(Types): Shorthand type * fix(Types): Simplify * Update packages/fluentui/docs/src/examples/components/Toolbar/Performance/CustomToolbar.perf.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * Revert "Update packages/fluentui/docs/src/examples/components/Toolbar/Performance/CustomToolbar.perf.tsx" This reverts commit 6d1e555. * fix(Types): change type * fix(Types): fix usage * fix(types): fix usage * fix(types): Using PROPS * fix(types): Fix import * fix(types): fix usage * fix(types): fix usage * fix(Types): change default generic * chore(types): fix usage * improve typings in Toolbar * restore Dropdown to master * fix typings issues * prettify example * remove useless object parens * fix(types): kind selector * fix(types): add shorthand value * fix(Types): change items type in example * fix(types): kind optinal * fix(types): fix Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]>
microsoft · May 21, 2020 · 57c30dd · 57c30dd
1 parent 73cbfd0
commit 57c30dd
Show file tree

Hide file tree

Showing 17 changed files with 219 additions and 212 deletions.
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
@@ -1,5 +1,5 @@
 import { CopyToClipboard } from '@fluentui/docs-components';
-import { Menu, menuAsToolbarBehavior, Tooltip, Loader } from '@fluentui/react-northstar';
+import { Menu, menuAsToolbarBehavior, Tooltip, Loader, MenuProps, MenuItem } from '@fluentui/react-northstar';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
@@ -64,6 +64,7 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
             : state === CodeSandboxState.Loading
             ? 'Exporting...'
             : 'Click to open';
+
         const codeSandboxIcon =
           state === CodeSandboxState.Default ? (
             <FilesCodeIcon style={{ width: '20px', height: '20px' }} />
@@ -73,101 +74,103 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
             <AcceptIcon style={{ width: '20px', height: '20px' }} />
           );
 
+        const items: MenuProps['items'] = [
+          {
+            icon: <CodeSnippetIcon style={{ width: '20px', height: '20px' }} />,
+            onClick: onShowCode,
+            active: showCode,
+            children: (Component: typeof MenuItem, props) => (
+              <Tooltip content="Try it" key="show-code" trigger={<Component {...props} />} />
+            ),
+          },
+
+          {
+            icon: <EditIcon style={{ width: '20px', height: '20px' }} />,
+            onClick: onShowVariables,
+            active: showVariables,
+            children: (Component: typeof MenuItem, props) => (
+              <Tooltip content="Theme it" key="show-variables" trigger={<Component {...props} />} />
+            ),
+          },
+          {
+            key: 'divider-1',
+            style: { margin: '0 5px' },
+            kind: 'divider',
+          },
+          {
+            icon: <CircleIcon outline style={{ width: '20px', height: '20px' }} />,
+            onClick: onShowTransparent,
+            active: showTransparent,
+            children: (Component: typeof MenuItem, props) => (
+              <Tooltip content="Transparent" key="show-transparent" trigger={<Component {...props} />} />
+            ),
+          },
+          {
+            icon: <IndentIcon rotate={180} style={{ width: '20px', height: '20px' }} />,
+            onClick: onShowRtl,
+            active: showRtl,
+            children: (Component: typeof MenuItem, props) => (
+              <Tooltip content="RTL" key="show-rtl" trigger={<Component {...props} />} />
+            ),
+          },
+
+          {
+            icon: <OpenOutsideIcon style={{ width: '20px', height: '20px' }} />,
+            children: (Component: typeof MenuItem, props) => (
+              <Tooltip content="Popout" key="maximize" trigger={<Component {...props} />} />
+            ),
+            as: NavLink,
+            to: `/maximize/${_.kebabCase(
+              examplePath
+                .split('/')
+                .slice(-1)
+                .pop(),
+            )}/${showRtl}`,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+          },
+          {
+            key: 'divider-2',
+            style: { margin: '0 5px' },
+            kind: 'divider',
+          },
+          {
+            onClick: onCodeSandboxClick,
+            icon: codeSandboxIcon,
+            children: (Component: typeof MenuItem, props) => (
+              <Tooltip content={codeSandboxTooltip} key="show-codesandbox" trigger={<Component {...props} />} />
+            ),
+          },
+          {
+            icon: <LinkIcon style={{ width: '20px', height: '20px' }} />,
+            children: (Component: typeof MenuItem, props) => (
+              <CopyToClipboard key="copy-link" value={anchorName}>
+                {(active, onClick) => (
+                  <Tooltip
+                    content={active ? 'Copied!' : 'Permalink'}
+                    trigger={
+                      <Component
+                        {...props}
+                        onClick={(e: React.SyntheticEvent) => {
+                          onClick();
+                          onCopyLink(e);
+                        }}
+                      />
+                    }
+                  />
+                )}
+              </CopyToClipboard>
+            ),
+          },
+        ];
+
         return (
           <Menu
             {...rest}
             iconOnly
             accessibility={menuAsToolbarBehavior}
             aria-label={`Actions for ${titleForAriaLabel || 'untitled'} example`}
-            items={[
-              {
-                icon: <CodeSnippetIcon style={{ width: '20px', height: '20px' }} />,
-                onClick: onShowCode,
-                active: showCode,
-                children: (Component, props) => (
-                  <Tooltip content="Try it" key="show-code" trigger={<Component {...props} />} />
-                ),
-              },
-
-              {
-                icon: <EditIcon style={{ width: '20px', height: '20px' }} />,
-                onClick: onShowVariables,
-                active: showVariables,
-                children: (Component, props) => (
-                  <Tooltip content="Theme it" key="show-variables" trigger={<Component {...props} />} />
-                ),
-              },
-              {
-                key: 'divider-1',
-                style: { margin: '0 5px' },
-                kind: 'divider',
-              },
-              {
-                icon: <CircleIcon outline style={{ width: '20px', height: '20px' }} />,
-                onClick: onShowTransparent,
-                active: showTransparent,
-                children: (Component, props) => (
-                  <Tooltip content="Transparent" key="show-transparent" trigger={<Component {...props} />} />
-                ),
-              },
-              {
-                icon: <IndentIcon rotate={180} style={{ width: '20px', height: '20px' }} />,
-                onClick: onShowRtl,
-                active: showRtl,
-                children: (Component, props) => (
-                  <Tooltip content="RTL" key="show-rtl" trigger={<Component {...props} />} />
-                ),
-              },
-
-              {
-                icon: <OpenOutsideIcon style={{ width: '20px', height: '20px' }} />,
-                children: (Component, props) => (
-                  <Tooltip content="Popout" key="maximize" trigger={<Component {...props} />} />
-                ),
-                as: NavLink,
-                to: `/maximize/${_.kebabCase(
-                  examplePath
-                    .split('/')
-                    .slice(-1)
-                    .pop(),
-                )}/${showRtl}`,
-                target: '_blank',
-                rel: 'noopener noreferrer',
-              },
-              {
-                key: 'divider-2',
-                style: { margin: '0 5px' },
-                kind: 'divider',
-              },
-              {
-                onClick: onCodeSandboxClick,
-                icon: codeSandboxIcon,
-                children: (Component, props) => (
-                  <Tooltip content={codeSandboxTooltip} key="show-codesandbox" trigger={<Component {...props} />} />
-                ),
-              },
-              {
-                icon: <LinkIcon style={{ width: '20px', height: '20px' }} />,
-                children: (Component, props) => (
-                  <CopyToClipboard key="copy-link" value={anchorName}>
-                    {(active, onClick) => (
-                      <Tooltip
-                        content={active ? 'Copied!' : 'Permalink'}
-                        trigger={
-                          <Component
-                            {...props}
-                            onClick={(e: React.SyntheticEvent) => {
-                              onClick();
-                              onCopyLink(e);
-                            }}
-                          />
-                        }
-                      />
-                    )}
-                  </CopyToClipboard>
-                ),
-              },
-            ]}
+            items={items}
           />
         );
       }}

diff --git a/packages/fluentui/docs/src/examples/components/Menu/Slots/MenuExampleDivider.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Menu/Slots/MenuExampleDivider.shorthand.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { Menu, MenuShorthandKinds } from '@fluentui/react-northstar';
+import { Menu } from '@fluentui/react-northstar';
 
 const items = [
   { key: 'editorials', content: 'Editorials' },
-  { key: 'divider-1', kind: 'divider' as MenuShorthandKinds },
+  { key: 'divider-1', kind: 'divider' as const },
   { key: 'review', content: 'Reviews' },
-  { key: 'divider-2', kind: 'divider' as MenuShorthandKinds, content: '...' },
+  { key: 'divider-2', kind: 'divider' as const, content: '...' },
   { key: 'events', content: 'Upcoming Events' },
 ];
 

diff --git a/...uentui/docs/src/examples/components/Menu/Slots/MenuExampleDividerHorizontal.shorthand.tsx b/...uentui/docs/src/examples/components/Menu/Slots/MenuExampleDividerHorizontal.shorthand.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { Menu, MenuShorthandKinds } from '@fluentui/react-northstar';
+import { Menu } from '@fluentui/react-northstar';
 import { TriangleEndIcon } from '@fluentui/react-icons-northstar';
 
 const items = [
   { key: 'editorials', content: 'Editorials' },
   {
     key: 'divider-1',
-    kind: 'divider' as MenuShorthandKinds,
+    kind: 'divider' as const,
     content: '▸',
   },
   { key: 'review', content: 'Reviews' },
   {
     key: 'divider-2',
-    kind: 'divider' as MenuShorthandKinds,
+    kind: 'divider' as const,
     content: <TriangleEndIcon />,
   },
   { key: 'events', content: 'Upcoming Events' },

diff --git a/packages/fluentui/docs/src/examples/components/Toolbar/Performance/CustomToolbar.perf.tsx b/packages/fluentui/docs/src/examples/components/Toolbar/Performance/CustomToolbar.perf.tsx
@@ -4,9 +4,7 @@ import {
   Button,
   Text,
   Toolbar,
-  ShorthandCollection,
   Status,
-  ToolbarItemShorthandKinds,
   ShorthandValue,
   ComponentStyleFunctionParam,
   ThemeInput,
@@ -335,30 +333,25 @@ interface CustomToolbarProps {
   onEndCallClick?: () => void;
 }
 
-type CustomToolbarLayout = (
-  props: CustomToolbarProps,
-) => ShorthandCollection<ToolbarItemProps | ToolbarCustomItemProps, ToolbarItemShorthandKinds>;
+type CustomToolbarLayout = (props: CustomToolbarProps) => ToolbarProps['items'];
 
 const commonLayout: CustomToolbarLayout = props =>
   [
     props.isRecording && {
       key: 'recording',
-      kind: 'custom' as ToolbarItemShorthandKinds,
+      kind: 'custom' as const,
       focusable: true,
       content: <Status state="error" title="Recording" variables={{ isRecordingIndicator: true }} />,
       variables: { isCtItemPrimary: true, isCtItemIndicator: true },
     },
-
     {
       key: 'timer-custom',
-      kind: 'custom' as ToolbarItemShorthandKinds,
+      kind: 'custom' as const,
       focusable: true,
       content: <Text>10:45</Text>,
       variables: { isCtItemPrimary: true, isCtItemIndicator: true },
     },
-
-    { key: 'timer-divider', kind: 'divider' as ToolbarItemShorthandKinds },
-
+    { key: 'timer-divider', kind: 'divider' as const },
     {
       tooltip: props.cameraActive ? tooltips.videoOn : tooltips.videoOff,
       active: props.cameraActive,
@@ -367,7 +360,6 @@ const commonLayout: CustomToolbarLayout = props =>
       onClick: () => _.invoke(props, 'onCameraChange', !props.cameraActive),
       variables: { isCtItemPrimary: true },
     },
-
     {
       tooltip: props.micActive ? tooltips.micOn : tooltips.micOff,
       active: props.micActive,
@@ -376,7 +368,6 @@ const commonLayout: CustomToolbarLayout = props =>
       onClick: () => _.invoke(props, 'onMicChange', !props.micActive),
       variables: { isCtItemPrimary: true },
     },
-
     {
       tooltip: props.screenShareActive ? tooltips.shareStop : tooltips.share,
       active: props.screenShareActive,
@@ -389,7 +380,6 @@ const commonLayout: CustomToolbarLayout = props =>
       onClick: () => _.invoke(props, 'onScreenShareChange', !props.screenShareActive),
       variables: { isCtItemPrimary: true },
     },
-
     {
       tooltip: tooltips.moreActions,
       key: 'more',

diff --git a/...uentui/docs/src/examples/components/Toolbar/Usage/ToolbarExamplePopupInMenu.shorthand.tsx b/...uentui/docs/src/examples/components/Toolbar/Usage/ToolbarExamplePopupInMenu.shorthand.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Toolbar, ToolbarItemShorthandKinds, Input } from '@fluentui/react-northstar';
+import { Toolbar, Input } from '@fluentui/react-northstar';
 import { MoreIcon, ItalicIcon, SearchIcon } from '@fluentui/react-icons-northstar';
 
 const ToolbarExamplePopupInMenu = () => {
@@ -30,7 +30,7 @@ const ToolbarExamplePopupInMenu = () => {
         {
           icon: <ItalicIcon {...{ outline: true }} />,
           key: 'italic',
-          kind: 'toggle' as ToolbarItemShorthandKinds,
+          kind: 'toggle',
           title: 'Italic',
         },
         {