Tabs: adds counter component (#23548)

* Chore: Initial commit

* Initial commit

* Refactor: some style changes

* Refactor: removes isDark/isLight theme logic

* Minor style tweak

* Minor style tweak

* Minor adjustments

* Refactor: changes after PR comments

* Refactor: moves margin-left to counter

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

packages/grafana-ui/src/components/Tabs/Counter.tsx

@@ -0,0 +1,30 @@
+import React, { FC, useContext } from 'react';
+import { css } from 'emotion';
+import { stylesFactory, ThemeContext } from '../../themes';
+import { GrafanaTheme, locale } from '@grafana/data';
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  return {
+    counter: css`
+      label: counter;
+      margin-left: ${theme.spacing.sm};
+      border-radius: ${theme.spacing.lg};
+      background-color: ${theme.colors.bg2};
+      padding: ${theme.spacing.xxs} ${theme.spacing.sm};
+      color: ${theme.colors.textWeak};
+      font-weight: ${theme.typography.weight.semibold};
+      font-size: ${theme.typography.size.sm};
+    `,
+  };
+});
+
+export interface CounterProps {
+  value: number;
+}
+
+export const Counter: FC<CounterProps> = ({ value }) => {
+  const theme = useContext(ThemeContext);
+  const styles = getStyles(theme);
+
+  return <span className={styles.counter}>{locale(value, 0).text}</span>;
+};

packages/grafana-ui/src/components/Tabs/Tab.tsx

@@ -4,12 +4,14 @@ import { GrafanaTheme } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
 import { IconName } from '../../types';
 import { stylesFactory, useTheme } from '../../themes';
+import { Counter } from './Counter';
 
 export interface TabProps {
   label: string;
   active?: boolean;
   icon?: IconName;
   onChangeTab: () => void;
+  counter?: number;
 }
 
 const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
@@ -57,7 +59,7 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
   };
 });
 
-export const Tab: FC<TabProps> = ({ label, active, icon, onChangeTab }) => {
+export const Tab: FC<TabProps> = ({ label, active, icon, onChangeTab, counter }) => {
   const theme = useTheme();
   const tabsStyles = getTabStyles(theme);
 
@@ -65,6 +67,7 @@ export const Tab: FC<TabProps> = ({ label, active, icon, onChangeTab }) => {
     <li className={cx(tabsStyles.tabItem, active && tabsStyles.activeStyle)} onClick={onChangeTab}>
       {icon && <Icon name={icon} />}
       {label}
+      {!!counter && <Counter value={counter} />}
     </li>
   );
 };

packages/grafana-ui/src/components/Tabs/Tabs.story.tsx

@@ -30,6 +30,7 @@ export const Simple = () => {
                     label={tab.label}
                     active={tab.active}
                     onChangeTab={() => updateState(state.map((tab, idx) => ({ ...tab, active: idx === index })))}
+                    counter={(index + 1) * 1000}
                   />
                 );
               })}

public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { config } from 'app/core/config';
 import { css } from 'emotion';
-import { TabsBar, Tab, stylesFactory, TabContent, IconName } from '@grafana/ui';
+import { IconName, stylesFactory, Tab, TabContent, TabsBar } from '@grafana/ui';
 import { DataTransformerConfig, LoadingState, PanelData } from '@grafana/data';
 import { PanelEditorTab, PanelEditorTabId } from './types';
 import { DashboardModel } from '../../state';