feat(Pill): added onDismiss (microsoft#17583)

* feat(Pills): add base pill * feat(Pills): add unstable comment * Update packages/fluentui/react-northstar/src/components/Pill/Pill.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * feat(Pills): Address review comments * Update packages/fluentui/docs/src/examples/components/Pill/Variations/PillExampleSizes.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * feat(Pills): Address review comments * feat(Pills): Fix example * Update packages/fluentui/react-northstar/src/components/Pill/Pill.tsx Co-authored-by: ling1726 <[email protected]> * feat(Pills): Export styles * feat(Pills): Fix example * feat(Pills): added disabled * feat(Pills): added appearance variations * feat(Pills): fix example * Update packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillStyles.ts Co-authored-by: Oleksandr Fediashov <[email protected]> * feat(Pills): rename example file * feat(Pills):update content * feat(Pills): update example * Update packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * feat(Pills): update PillContent * feat(Pills): update PillContent * feat(Pills): update pillStyles * feat(Pills): update rectangular instead rounded * feat(Pills): Add changelog * feat(Pills): update example * feat(Pills): add pill action * feat(Pills): update changelog * feat(Pills): add behavior-test * feat(Pills): fix test * feat(Pills): fix test * feat(Pill): remove gap from variables * feat(Pill): avoid negative condition in pillActionStyles * feat(Pill): action margin * feat(AvatarStatus): remove smaller from default props PillAction * feat(Pill): remove div from PillAction default props * feat(Pill): update Rectangular title * feat(Pill): remove docblock * feat(Pill): pill action test and behavior definition * feat(Pill): onDismiss * feat(Pill): Revert 1 file Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: ling1726 <[email protected]>
miroslavstastny · May 5, 2021 · 1ebb6bd · 1ebb6bd
1 parent e4d1576
commit 1ebb6bd
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 8 deletions.
diff --git a/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts b/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts
@@ -1,4 +1,5 @@
 import { Accessibility } from '../../types';
+import { keyboardKey } from '../../keyboard-key';
 import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes';
 
 export const pillBehavior: Accessibility<PillBehaviorProps> = p => ({
@@ -9,6 +10,17 @@ export const pillBehavior: Accessibility<PillBehaviorProps> = p => ({
       [IS_FOCUSABLE_ATTRIBUTE]: p.actionable,
     },
   },
+  keyActions: {
+    root: {
+      performDismiss: {
+        keyCombinations: [
+          { keyCode: keyboardKey.Escape },
+          { keyCode: keyboardKey.Delete },
+          { keyCode: keyboardKey.Backspace },
+        ],
+      },
+    },
+  },
 });
 
 export type PillBehaviorProps = {

diff --git a/packages/fluentui/docs/src/examples/components/Pill/Variations/PillExampleActionable.tsx b/packages/fluentui/docs/src/examples/components/Pill/Variations/PillExampleActionable.tsx
@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { Pill } from '@fluentui/react-northstar';
-import { CloseIcon } from '@fluentui/react-icons-northstar';
 
 const PillActionableExample = () => (
   <Pill
     actionable
-    action={{
-      content: <CloseIcon />,
-      title: 'Close',
+    onDismiss={(e, data) => {
+      console.log(e, data);
     }}
   >
     Outlined Pill

diff --git a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx
@@ -1,9 +1,10 @@
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import * as customPropTypes from '@fluentui/react-proptypes';
+import * as _ from 'lodash';
 import { Accessibility, pillBehavior, PillBehaviorProps } from '@fluentui/accessibility';
 import { UIComponentProps, ContentComponentProps, commonPropTypes, SizeValue, createShorthand } from '../../utils';
-import { ShorthandValue, FluentComponentStaticProps } from '../../types';
+import { ShorthandValue, FluentComponentStaticProps, ComponentEventHandler } from '../../types';
 import { BoxProps } from '../Box/Box';
 
 import {
@@ -53,6 +54,13 @@ export interface PillProps extends UIComponentProps, ContentComponentProps<Short
    * A PillAction shorthand for the action slot.
    */
   action?: ShorthandValue<PillActionProps>;
+
+  /**
+   * Called after user will dismiss the Pill.
+   * @param event - React's original SyntheticEvent.
+   * @param data - All props.
+   */
+  onDismiss?: ComponentEventHandler<PillProps>;
 }
 
 export type PillStylesProps = Required<Pick<PillProps, 'appearance' | 'size' | 'rectangular' | 'disabled'>>;
@@ -86,8 +94,15 @@ export const Pill: ComponentWithAs<'span', PillProps> & FluentComponentStaticPro
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(Pill.handledProps, props);
 
+  const handleDismiss = e => {
+    _.invoke(props, 'onDismiss', e, props);
+  };
+
   const getA11yProps = useAccessibility(props.accessibility, {
     debugName: Pill.displayName,
+    actionHandlers: {
+      performDismiss: handleDismiss,
+    },
     mapPropsToBehavior: () => ({
       actionable,
     }),
@@ -125,7 +140,15 @@ export const Pill: ComponentWithAs<'span', PillProps> & FluentComponentStaticPro
           actionable,
         }),
       })}
-      {createShorthand(PillAction, actionable ? action || {} : action, {})}
+      {actionable &&
+        createShorthand(PillAction, action || {}, {
+          overrideProps: (prevProps: PillActionProps & { onClick: (e: React.MouseEvent) => void }) => ({
+            onClick: e => {
+              _.invoke(prevProps, 'onClick', e);
+              handleDismiss(e);
+            },
+          }),
+        })}
     </ElementType>,
   );
 
@@ -148,6 +171,7 @@ Pill.propTypes = {
   appearance: PropTypes.oneOf(['filled', 'inverted', 'outline']),
   actionable: PropTypes.bool,
   action: customPropTypes.shorthandAllowingChildren,
+  onDismiss: PropTypes.func,
 };
 
 Pill.displayName = 'Pill';

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillActionStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillActionStyles.ts
@@ -10,7 +10,7 @@ export const pillActionStyles: ComponentSlotStylesPrepared<PillActionStylesProps
     margin: v.actionMargin,
     width: v.actionWidth,
     cursor: 'pointer',
-
+    outline: 'none',
     ...((p.size === 'small' || p.size === 'smaller') && {
       width: v.smallOrSmallerActionWidth,
     }),

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillVariables.ts
@@ -102,7 +102,7 @@ export const pillVariables = (siteVars: SiteVariablesPrepared): PillVariables =>
   contentPadding: `${pxToRem(6)} ${pxToRem(8)}`,
 
   // Action Pill
-  actionMargin: `0 ${pxToRem(4)}`,
+  actionMargin: `0 ${pxToRem(8)}`,
   actionWidth: pxToRem(16),
   smallOrSmallerActionWidth: pxToRem(12),
 });