chore: handle dismiss and actionable

chpalac · chpalac · commit a08c6bfb97e9 · 2022-05-05T09:02:39.000-03:00
diff --git a/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts b/packages/fluentui/accessibility/src/behaviors/Pill/pillBehavior.ts
@@ -15,12 +15,12 @@ export const pillBehavior: Accessibility<PillBehaviorProps> = p => ({
   },
   keyActions: {
     root: {
-      ...(p.actionable && {
+      ...(p.dismissible && {
         performDismiss: {
           keyCombinations: [{ keyCode: keyboardKey.Delete }, { keyCode: keyboardKey.Backspace }],
         },
       }),
-      ...(p.selectable && {
+      ...((p.selectable || p.actionable) && {
         performClick: {
           keyCombinations: [{ keyCode: keyboardKey.Enter }, { keyCode: SpacebarKey }],
         },
@@ -34,4 +34,5 @@ export type PillBehaviorProps = {
   selectable: boolean;
   selected: boolean;
   role: AriaRole;
+  dismissible: boolean;
 };
diff --git a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx
@@ -111,7 +111,7 @@ export interface PillProps extends UIComponentProps, ContentComponentProps<Short
 }
 
 export type PillStylesProps = Required<
-  Pick<PillProps, 'appearance' | 'size' | 'rectangular' | 'disabled' | 'selectable' | 'selected'>
+  Pick<PillProps, 'appearance' | 'size' | 'rectangular' | 'disabled' | 'selectable' | 'selected' | 'actionable'>
 >;
 
 export const pillClassName = 'ui-pill';
@@ -144,6 +144,7 @@ export const Pill = (React.forwardRef<HTMLSpanElement, PillProps>((props, ref) =
     selectable,
     selectedIndicator,
     role,
+    onDismiss,
   } = props;
 
   const [selected, setSelected] = useAutoControlled({
@@ -178,6 +179,7 @@ export const Pill = (React.forwardRef<HTMLSpanElement, PillProps>((props, ref) =
       selectable,
       selected,
       role,
+      dismissible: Boolean(onDismiss),
     }),
     rtl: context.rtl,
   });
@@ -191,6 +193,7 @@ export const Pill = (React.forwardRef<HTMLSpanElement, PillProps>((props, ref) =
       disabled,
       selectable,
       selected,
+      actionable,
     }),
     mapPropsToInlineStyles: () => ({
       className,
@@ -242,7 +245,7 @@ export const Pill = (React.forwardRef<HTMLSpanElement, PillProps>((props, ref) =
           actionable,
         }),
       })}
-      {actionable &&
+      {Boolean(onDismiss) &&
         createShorthand(PillAction, action || {}, {
           overrideProps: (prevProps: PillActionProps & { onClick: (e: React.MouseEvent) => void }) => ({
             onClick: e => {
diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Pill/pillStyles.ts
@@ -82,6 +82,10 @@ export const pillStyles: ComponentSlotStylesPrepared<PillStylesProps, PillVariab
         }),
       }),
 
+      ...(p.actionable && {
+        cursor: 'pointer',
+      }),
+
       ...getBorderFocusStyles({ variables: siteVariables }),
     };
   },
