From a690d0f803b4eff962bf84883487c79e59e95140 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Wed, 30 Jun 2021 15:25:59 +0200
Subject: [PATCH] FilterPill: Wip updated design & storybook (#35616)

* FilterPill: Wip updated design & storybook

* Added hover states

* Fixes
---
 .../FilterPill/FilterPill.story.tsx           | 16 +++++-
 .../src/components/FilterPill/FilterPill.tsx  | 53 +++++++++----------
 2 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx
index 867b1a770ec..d84751db2a8 100644
--- a/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx
+++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Story } from '@storybook/react';
 import { FilterPill, FilterPillProps } from './FilterPill';
 import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
 import mdx from './FilterPill.mdx';
 import { getAvailableIcons } from '../../types';
+import { HorizontalGroup } from '../Layout/Layout';
 
 export default {
   title: 'General/FilterPill',
@@ -24,6 +25,19 @@ export const Basic: Story<FilterPillProps> = (args) => {
   return <FilterPill {...args} />;
 };
 
+export const Example = () => {
+  const [selected, setSelected] = useState('Stockholm');
+  const elements = ['Singapore', 'Paris', 'Stockholm', 'New York', 'London'];
+
+  return (
+    <HorizontalGroup>
+      {elements.map((item) => (
+        <FilterPill key={item} label={item} selected={item === selected} onClick={() => setSelected(item)} />
+      ))}
+    </HorizontalGroup>
+  );
+};
+
 Basic.args = {
   selected: false,
   label: 'Test',
diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
index 1e41b58264d..654f19eb875 100644
--- a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
+++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { stylesFactory, useTheme2 } from '../../themes';
+import { useStyles2 } from '../../themes';
 import { GrafanaTheme2 } from '@grafana/data';
-import { css } from '@emotion/css';
-import { IconButton } from '../IconButton/IconButton';
+import { css, cx } from '@emotion/css';
+import { Icon } from '../Icon/Icon';
 import { IconName } from '../../types';
 
 export interface FilterPillProps {
@@ -13,48 +13,45 @@ export interface FilterPillProps {
 }
 
 export const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick, icon = 'check' }) => {
-  const theme = useTheme2();
-  const styles = getFilterPillStyles(theme, selected);
+  const styles = useStyles2(getStyles);
   return (
-    <div className={styles.wrapper} onClick={onClick}>
-      <IconButton
-        name={icon}
-        onClick={(e) => {
-          e.stopPropagation();
-          onClick(e);
-        }}
-        className={styles.icon}
-        surface="header"
-      />
-      <span className={styles.label}>{label}</span>
+    <div className={cx(styles.wrapper, selected && styles.selected)} onClick={onClick}>
+      <span>{label}</span>
+      {selected && <Icon name={icon} className={styles.icon} />}
     </div>
   );
 };
 
-const getFilterPillStyles = stylesFactory((theme: GrafanaTheme2, isSelected: boolean) => {
-  const labelColor = isSelected ? theme.colors.text.primary : theme.colors.text.secondary;
-
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     wrapper: css`
       padding: ${theme.spacing(0.25)} ${theme.spacing(1)};
       background: ${theme.colors.background.secondary};
-      border-radius: ${theme.shape.borderRadius()};
-      padding: ${theme.spacing(0, 2, 0, 0.5)};
+      border-radius: ${theme.shape.borderRadius(8)};
+      padding: ${theme.spacing(0, 2)};
       font-weight: ${theme.typography.fontWeightMedium};
       font-size: ${theme.typography.size.sm};
-      color: ${theme.colors.text.primary};
+      color: ${theme.colors.text.secondary};
       display: flex;
       align-items: center;
       height: 32px;
       cursor: pointer;
+
+      &:hover {
+        background: ${theme.colors.action.hover};
+        color: ${theme.colors.text.primary};
+      }
+    `,
+    selected: css`
+      color: ${theme.colors.text.primary};
+      background: ${theme.colors.action.selected};
+
+      &:hover {
+        background: ${theme.colors.action.focus};
+      }
     `,
     icon: css`
-      margin-right: ${theme.spacing(1)};
       margin-left: ${theme.spacing(0.5)};
-      color: ${labelColor};
-    `,
-    label: css`
-      color: ${labelColor};
     `,
   };
-});
+};