Replace AccordionHeaderExpandIcon with ChevronRightRegular from react…

…-icons (microsoft#21218) Remove AccordionHeaderExpandIcon, and use the resizable ChevronRightRegular icon from react-icons instead. And add fontSize styling to AccordionHeader's icon slots, so custom resizable icons can be used.
mlp73 · Jan 17, 2022 · 2ce79c7 · 2ce79c7
1 parent 5ea9fb6
commit 2ce79c7
Show file tree

Hide file tree

Showing 14 changed files with 42 additions and 65 deletions.
diff --git a/change/@fluentui-react-accordion-ec06e66a-08a1-42d2-9cdb-b73bd749dfd2.json b/change/@fluentui-react-accordion-ec06e66a-08a1-42d2-9cdb-b73bd749dfd2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove AccordionHeaderExpandIcon, and use ChevronRightRegular from @fluentui/react-icons instead",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-components-aee23b3f-377a-44d8-96e7-c2a589390027.json b/change/@fluentui-react-components-aee23b3f-377a-44d8-96e7-c2a589390027.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove AccordionHeaderExpandIcon",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-accordion/etc/react-accordion.api.md b/packages/react-accordion/etc/react-accordion.api.md
@@ -66,15 +66,9 @@ export type AccordionHeaderContextValues = {
     accordionHeader: AccordionHeaderContextValue;
 };
 
-// @public (undocumented)
-export const AccordionHeaderExpandIcon: ForwardRefComponent<AccordionHeaderExpandIconProps>;
-
 // @public (undocumented)
 export type AccordionHeaderExpandIconPosition = 'start' | 'end';
 
-// @public (undocumented)
-export type AccordionHeaderExpandIconProps = IntrinsicShorthandProps<'span'>;
-
 // @public (undocumented)
 export type AccordionHeaderProps = ComponentProps<AccordionHeaderSlots> & Partial<AccordionHeaderCommons>;
 
@@ -85,7 +79,7 @@ export type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
 export type AccordionHeaderSlots = {
     root: IntrinsicShorthandProps<'div'>;
     button: ARIAButtonShorthandProps;
-    expandIcon: AccordionHeaderExpandIconProps;
+    expandIcon: IntrinsicShorthandProps<'span'>;
     icon?: IntrinsicShorthandProps<'div'>;
     children: ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>>;
 };

diff --git a/packages/react-accordion/package.json b/packages/react-accordion/package.json
@@ -46,6 +46,7 @@
   "dependencies": {
     "@fluentui/react-aria": "9.0.0-beta.4",
     "@fluentui/react-context-selector": "9.0.0-beta.4",
+    "@fluentui/react-icons": "^2.0.154-beta.5",
     "@fluentui/react-make-styles": "9.0.0-beta.4",
     "@fluentui/react-tabster": "9.0.0-beta.5",
     "@fluentui/react-theme": "9.0.0-beta.4",

diff --git a/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.types.ts b/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.types.ts
@@ -5,7 +5,6 @@ import type {
   IntrinsicShorthandProps,
   ObjectShorthandProps,
 } from '@fluentui/react-utilities';
-import type { AccordionHeaderExpandIconProps } from './AccordionHeaderExpandIcon';
 import type { ARIAButtonShorthandProps } from '@fluentui/react-aria';
 
 export type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
@@ -31,7 +30,7 @@ export type AccordionHeaderSlots = {
   /**
    * Expand icon slot rendered before (or after) children content in heading
    */
-  expandIcon: AccordionHeaderExpandIconProps;
+  expandIcon: IntrinsicShorthandProps<'span'>;
   /**
    * Expand icon slot rendered before (or after) children content in heading
    */

diff --git a/packages/react-accordion/src/components/AccordionHeader/AccordionHeaderExpandIcon.tsx b/packages/react-accordion/src/components/AccordionHeader/AccordionHeaderExpandIcon.tsx
diff --git a/...eact-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap b/...eact-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
@@ -17,14 +17,17 @@ exports[`AccordionHeader renders a default state 1`] = `
       className=""
     >
       <svg
+        aria-hidden={true}
+        className=""
         fill="currentColor"
         height="1em"
         transform="rotate(0)"
-        viewBox="0 0 2048 2048"
+        viewBox="0 0 20 20"
         width="1em"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M515 1955l930-931L515 93l90-90 1022 1021L605 2045l-90-90z"
+          d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 01-.7-.7L12.8 10 7.65 4.85a.5.5 0 010-.7z"
         />
       </svg>
     </span>

diff --git a/packages/react-accordion/src/components/AccordionHeader/index.ts b/packages/react-accordion/src/components/AccordionHeader/index.ts
@@ -1,5 +1,4 @@
 export * from './AccordionHeader';
-export * from './AccordionHeaderExpandIcon';
 export * from './AccordionHeader.types';
 export * from './renderAccordionHeader';
 export * from './useAccordionHeader';

diff --git a/...nts/AccordionHeader/useAccordionHeader.ts → ...ts/AccordionHeader/useAccordionHeader.tsx b/...nts/AccordionHeader/useAccordionHeader.ts → ...ts/AccordionHeader/useAccordionHeader.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
 import { useAccordionItemContext } from '../AccordionItem/index';
-import { AccordionHeaderExpandIcon } from './AccordionHeaderExpandIcon';
 import { useARIAButton } from '@fluentui/react-aria';
 import type { AccordionHeaderProps, AccordionHeaderState, AccordionHeaderSlots } from './AccordionHeader.types';
 import { useContextSelector } from '@fluentui/react-context-selector';
 import { AccordionContext } from '../Accordion/AccordionContext';
+import { ChevronRightRegular } from '@fluentui/react-icons';
+import { useFluent } from '@fluentui/react-shared-contexts';
 
 /**
  * Returns the props and state required to render the component
@@ -25,6 +26,18 @@ export const useAccordionHeader = (props: AccordionHeaderProps, ref: React.Ref<H
     ctx => !ctx.collapsible && ctx.openItems.length === 1 && open,
   );
 
+  const { dir } = useFluent();
+
+  // Calculate how to rotate the expand icon [>] (ChevronRightRegular)
+  let expandIconRotation: 0 | 90 | -90 | 180;
+  if (expandIconPosition === 'end') {
+    // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed
+    expandIconRotation = open ? -90 : 90;
+  } else {
+    // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed
+    expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
+  }
+
   const buttonShorthand = useARIAButton(button, {
     required: true,
     defaultProps: {
@@ -43,7 +56,7 @@ export const useAccordionHeader = (props: AccordionHeaderProps, ref: React.Ref<H
     components: {
       root: 'div',
       button: 'button',
-      expandIcon: AccordionHeaderExpandIcon,
+      expandIcon: 'span',
       icon: 'div',
       children: 'div',
     },
@@ -56,6 +69,7 @@ export const useAccordionHeader = (props: AccordionHeaderProps, ref: React.Ref<H
     expandIcon: resolveShorthand(expandIcon, {
       required: true,
       defaultProps: {
+        children: <ChevronRightRegular transform={`rotate(${expandIconRotation})`} />,
         'aria-hidden': true,
       },
     }),

diff --git a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
@@ -52,6 +52,7 @@ const useStyles = makeStyles({
   },
   expandIcon: {
     lineHeight: '0',
+    fontSize: '20px',
   },
   expandIconStart: {
     paddingRight: '8px',
@@ -66,7 +67,7 @@ const useStyles = makeStyles({
   },
   icon: {
     marginRight: '8px',
-    marginLeft: '8px',
+    fontSize: '20px',
   },
   iconExpandIconEnd: {
     marginLeft: '10px',

diff --git a/packages/react-accordion/src/stories/AccordionExpandIcon.stories.tsx b/packages/react-accordion/src/stories/AccordionExpandIcon.stories.tsx
@@ -27,7 +27,7 @@ export const ExpandIcon = (args: AccordionHeaderProps) => (
 );
 
 ExpandIcon.args = {
-  expandIcon: <RocketIcon fontSize={20} />,
+  expandIcon: <RocketIcon />,
 } as AccordionHeaderProps;
 
 ExpandIcon.parameters = {

diff --git a/packages/react-accordion/src/stories/AccordionWithIcon.stories.tsx b/packages/react-accordion/src/stories/AccordionWithIcon.stories.tsx
@@ -27,7 +27,7 @@ export const WithIcon = (args: AccordionHeaderProps) => (
 );
 
 WithIcon.args = {
-  icon: <RocketIcon fontSize={20} />,
+  icon: <RocketIcon />,
 } as AccordionHeaderProps;
 
 WithIcon.parameters = {

diff --git a/packages/react-components/etc/react-components.api.md b/packages/react-components/etc/react-components.api.md
@@ -14,9 +14,7 @@ import { AccordionHeader } from '@fluentui/react-accordion';
 import { accordionHeaderClassName } from '@fluentui/react-accordion';
 import { AccordionHeaderContextValue } from '@fluentui/react-accordion';
 import { AccordionHeaderContextValues } from '@fluentui/react-accordion';
-import { AccordionHeaderExpandIcon } from '@fluentui/react-accordion';
 import { AccordionHeaderExpandIconPosition } from '@fluentui/react-accordion';
-import { AccordionHeaderExpandIconProps } from '@fluentui/react-accordion';
 import { AccordionHeaderProps } from '@fluentui/react-accordion';
 import { AccordionHeaderSize } from '@fluentui/react-accordion';
 import { AccordionHeaderSlots } from '@fluentui/react-accordion';
@@ -397,12 +395,8 @@ export { AccordionHeaderContextValue }
 
 export { AccordionHeaderContextValues }
 
-export { AccordionHeaderExpandIcon }
-
 export { AccordionHeaderExpandIconPosition }
 
-export { AccordionHeaderExpandIconProps }
-
 export { AccordionHeaderProps }
 
 export { AccordionHeaderSize }

diff --git a/packages/react-components/src/index.ts b/packages/react-components/src/index.ts
@@ -63,7 +63,6 @@ export {
   Accordion,
   AccordionContext,
   AccordionHeader,
-  AccordionHeaderExpandIcon,
   AccordionItem,
   AccordionItemContext,
   AccordionPanel,
@@ -94,7 +93,6 @@ export type {
   AccordionHeaderContextValue,
   AccordionHeaderContextValues,
   AccordionHeaderExpandIconPosition,
-  AccordionHeaderExpandIconProps,
   AccordionHeaderProps,
   AccordionHeaderSize,
   AccordionHeaderSlots,