@fibery/ui-kit 1.14.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -28,6 +28,7 @@
   ],
   "license": "UNLICENSED",
   "dependencies": {
+    "react-intersection-observer": "9.3.5",
     "@linaria/core": "3.0.0-beta.15",
     "@linaria/react": "3.0.0-beta.15",
     "@popperjs/core": "2.11.6",
@@ -60,8 +61,8 @@
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
     "@fibery/helpers": "1.1.0",
-    "@fibery/emoji-data": "2.0.0",
-    "@fibery/react": "1.0.3"
+    "@fibery/react": "1.0.3",
+    "@fibery/emoji-data": "2.1.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/antd/styles.ts

@@ -1,12 +1,28 @@
 import {css} from "@linaria/core";
 import {colors, layout, border, shadows, space, textStyles, themeVars, transition} from "../designSystem";
 
+const inputVariables = {
+  default: {
+    "--input-border": themeVars.inputBorderColor,
+    "--input-hover-border": `0 0 0 1px ${themeVars.opacity.opacity40}`,
+    "--input-focus-border": `0 0 0 1px ${themeVars.opacity.opacity25}`,
+    "--input-focus-shadow": `0 0 0 3px ${themeVars.focus}`,
+  },
+  error: {
+    "--input-border": themeVars.inputErrorBorderColor,
+    "--input-hover-border": themeVars.inputErrorBorderHoverColor,
+    "--input-focus-border": themeVars.inputErrorBorderFocusColor,
+    "--input-focus-shadow": themeVars.inputErrorBorderFocusShadow,
+  },
+};
+
 export const inputOverrides = {
   main: {
+    ...inputVariables.default,
     font: "inherit",
     color: themeVars.textColor,
     outline: "none",
-    backgroundColor: themeVars.inputBgColor,
+    backgroundColor: `${themeVars.inputBgColor} !important`,
     borderRadius: border.radius6,
     minHeight: layout.inputHeight,
     paddingTop: 0,
@@ -16,18 +32,18 @@ export const inputOverrides = {
     border: 0,
     borderColor: colors.transparent,
     transition: `box-shadow ${transition}`,
-    boxShadow: themeVars.inputBorderColor,
+    boxShadow: `var(--input-border, ${themeVars.inputBorderColor})`,
     letterSpacing: 0,
     "::placeholder": {
       color: themeVars.inputPlaceholderTextColor,
     },
   },
   hover: {
-    boxShadow: `0 0 0 1px ${themeVars.opacity.opacity40} !important`,
+    boxShadow: `var(--input-hover-border, 0 0 0 1px ${themeVars.opacity.opacity40}) !important`,
     transition: `box-shadow ${transition}`,
   },
   focus: {
-    boxShadow: `0 0 0 1px ${themeVars.opacity.opacity25}, 0 0 0 3px ${themeVars.focus} !important`,
+    boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.opacity.opacity25}), var(--input-focus-shadow, 0 0 0 3px ${themeVars.focus}) !important`,
     transition: `box-shadow ${transition}`,
   },
   disabled: {
@@ -63,6 +79,7 @@ export const inputStyles = css`
     },
     "& .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
     "& .ant-input": inputOverrides.main,
+    "& .ant-input-status-error": inputVariables.error,
     "& .ant-input[readonly].ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
     "& .ant-input:hover[readonly].ant-input:hover[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
     "& .ant-input-affix-wrapper:hover .ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},

package/src/designSystem.ts

@@ -157,6 +157,10 @@ const lightColors = {
   inputBorderFocusColor: `0 0 0 1px  ${getOpacities(slate.slate8).opacity100}`,
   inputBorderBlendMode: "multiply",
   inputPlaceholderTextColor: slate.slate9,
+  inputErrorBorderColor: `0 0 0 1px ${red.red11}`,
+  inputErrorBorderHoverColor: `0 0 0 1px ${getOpacities(red.red11).opacity40}`,
+  inputErrorBorderFocusColor: `0 0 0 1px ${getOpacities(red.red11).opacity25}`,
+  inputErrorBorderFocusShadow: `0 0 0 3px ${getOpacities(red.red11).opacity25}`,
   buttonPrimaryColor: indigo.indigo10,
   buttonColor: slate.slate10,
   buttonPrimaryTextColor: slate.slate2,
@@ -241,6 +245,8 @@ const lightColors = {
   filterGroup1Bg: slate.slate2,
   filterGroup2Bg: slate.slate3,
   filterGroupBorder: blackA.blackA3,
+  colorBgNotificationFocusedDefault: indigo.indigo3,
+  colorBgNotificationFocusedHover: indigo.indigo4,
   //end
   disabledInversedTextColor: shades.opacity25,
   danger: red.red9,
@@ -269,12 +275,12 @@ const lightColors = {
   gridHeaderTextColor: slate.slate9,
   // cell
   gridCellBgColor: whiteA.whiteA0,
-  gridCellBorderColor: slate.slate4,
+  gridCellBorderColor: slate.slate5,
   gridPinnedCellBorderColor: slate.slate8,
   gridDisabledCellBgColor: slate.slate2,
   gridSelectedCellBgColor: indigo.indigo3,
   gridHighlightedCellBgColor: indigo.indigo4,
-  gridSelectedCellBorderColor: indigo.indigo5,
+  gridSelectedCellBorderColor: indigo.indigo6,
   gridSelectedPinnedCellBorderColor: indigo.indigo7,
   gridDisabledSelectedCellBgColor: indigo.indigo4,
   gridActiveCellBorderColor: indigo.indigo8,
@@ -341,6 +347,10 @@ const darkColors = {
   inputBorderFocusColor: `0 0 0 1px ${getOpacities(slateDark.slate9).opacity100}`,
   inputBorderBlendMode: "lighten",
   inputPlaceholderTextColor: slateDark.slate9,
+  inputErrorBorderColor: `0 0 0 1px ${red.red7}`,
+  inputErrorBorderHoverColor: `0 0 0 1px ${getOpacities(red.red7).opacity40}`,
+  inputErrorBorderFocusColor: `0 0 0 1px ${getOpacities(red.red7).opacity25}`,
+  inputErrorBorderFocusShadow: `0 0 0 3px ${getOpacities(red.red7).opacity25}`,
   buttonPrimaryColor: indigoDark.indigo10,
   buttonColor: slateDark.slate10,
   buttonPrimaryTextColor: slate.slate6,
@@ -422,6 +432,8 @@ const darkColors = {
   filterGroup1Bg: slateDark.slate6,
   filterGroup2Bg: slateDark.slate7,
   filterGroupBorder: whiteA.whiteA3,
+  colorBgNotificationFocusedDefault: getOpacities(indigoDark.indigo11).opacity20,
+  colorBgNotificationFocusedHover: getOpacities(indigoDark.indigo11).opacity30,
   //end
   disabledInversedTextColor: lights.opacity25,
   danger: redDark.red10,
@@ -450,12 +462,12 @@ const darkColors = {
   gridHeaderTextColor: slateDark.slate10,
   // cell
   gridCellBgColor: slateDark.slate2,
-  gridCellBorderColor: slateDark.slate5,
+  gridCellBorderColor: slateDark.slate6,
   gridPinnedCellBorderColor: slateDark.slate8,
   gridDisabledCellBgColor: slateDark.slate3,
   gridSelectedCellBgColor: indigoDark.indigo3,
   gridHighlightedCellBgColor: indigoDark.indigo5,
-  gridSelectedCellBorderColor: indigoDark.indigo6,
+  gridSelectedCellBorderColor: indigoDark.indigo7,
   gridSelectedPinnedCellBorderColor: indigoDark.indigo7,
   gridDisabledSelectedCellBgColor: indigoDark.indigo5,
   gridActiveCellBorderColor: indigoDark.indigo9,
@@ -592,24 +604,11 @@ export const getLinkedHighlightBackgroundColor = _.memoize(
   (themeMode, color) => `${themeMode}-${color}`
 );
 
-// REMOVE AFTER MIGRATION ON BACKEND
-export const migrateEnumColor = (color: string) => {
-  const pastelIdx = pastelColors.indexOf(color);
-
-  if (pastelIdx > -1) {
-    return cardTypeColors[pastelIdx];
-  }
-
-  return color;
-};
-
 export const getEnumBackgroundColor = _.memoize(
   (mode: ThemeMode, color: string) => {
-    const migratedColor = migrateEnumColor(color);
-
     return getThemeValue(mode, {
-      light: a11yColor(getOpacities(migratedColor).opacity20, lightColors.whiteColor, 1),
-      dark: a11yColor(getOpacities(migratedColor).opacity30, darkColors.menuBg, 1.3),
+      light: a11yColor(getOpacities(color).opacity20, lightColors.whiteColor, 1),
+      dark: a11yColor(getOpacities(color).opacity30, darkColors.menuBg, 1.3),
     });
   },
   (themeMode, color) => `${themeMode}-${color}`
@@ -652,8 +651,6 @@ export const cardTypeColors = [
   "#B04E31",
 ] as const;
 
-const pastelColors = cardTypeColors.map((color) => makeChromaColor(color).luminance(0.8).hex());
-
 export const dropCursorColor = chroma(brandColors.blue).alpha(0.7).css();
 export const colors = {
   ...getTypeColors(brandColors.green, "light"),
@@ -925,13 +922,6 @@ export const textStyles = {
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
   },
-  fake: {
-    fontFamily,
-    fontSize: typeSizes[7],
-    lineHeight: lineHeight.regular,
-    fontWeight: fontWeight.regular,
-    color: colors.shades.opacity25,
-  },
   link: {
     color: themeVars.linkColor,
     borderBottom: themeVars.linkBorder,

package/src/emoji-picker/app-icon-picker.tsx

@@ -1,14 +1,11 @@
-import {EmojiItem} from "@fibery/emoji-data/lib/src";
-import {ColorPicker} from "../ColorPicker";
+import {CustomEmoji, EmojiItem} from "@fibery/emoji-data";
+import {useThemeMode} from "../ThemeProvider";
+import {cardTypeColors, getIconColor} from "../designSystem";
 import {$TSFixMe} from "../tsfixme";
-import {LazyIconDataStore} from "./lazy-icon-data-store";
+import {EmojiPickerContentWithColor} from "./emoji-picker-content-with-color";
 import {EmojiPickerContent} from "./primitives/content";
-import {EmojiPickerFooter} from "./primitives/footer";
-import {EmojiPickerGrid} from "./primitives/grid";
-import {EmojiPickerHeader} from "./primitives/header";
 import {EmojiPickerRoot} from "./primitives/root";
-import {EmojiPickerSearch} from "./primitives/search";
-import {cardTypeColors} from "../designSystem";
+import {LazyIconDataStore} from "./stores/lazy-icon-data-store";
 
 const i18n = {search: "Search icon...", notfound: "No Icons Found"};
 
@@ -19,35 +16,43 @@ export type AppIconPickerProps = {
   onColorSelect?: (c: $TSFixMe) => void;
 
   onSelect: (emoji: EmojiItem) => void;
+  autoFocus?: boolean;
 };
 export const AppIconPicker: React.FC<AppIconPickerProps> = ({
   onSelect,
   color,
-  colors = cardTypeColors,
+  colors = cardTypeColors as unknown as string[],
   onColorSelect,
   getHoverColor,
+  autoFocus = true,
 }) => {
+  const themeMode = useThemeMode();
+
   return (
     <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect}>
       <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
-        <LazyIconDataStore fallback={<div style={{height: "282px"}}></div>}>
-          <EmojiPickerHeader>
-            <EmojiPickerSearch autoFocus />
-          </EmojiPickerHeader>
-
-          <EmojiPickerGrid />
+        <LazyIconDataStore fallback={<div style={{height: "302px"}}></div>}>
+          <EmojiPickerContentWithColor
+            color={color}
+            colors={colors}
+            getHoverColor={getHoverColor}
+            onColorSelect={onColorSelect}
+            searchAutofocus={autoFocus}
+            renderEmoji={({emoji}) => (
+              <svg
+                style={{
+                  display: "block",
+                  width: 20,
+                  height: 20,
+                  fill: color ? getIconColor(themeMode, color) : undefined,
+                }}
+                viewBox="0 0 24 24"
+              >
+                <use href={(emoji as CustomEmoji).imageUrl} />
+              </svg>
+            )}
+          />
         </LazyIconDataStore>
-
-        {onColorSelect ? (
-          <EmojiPickerFooter>
-            <ColorPicker
-              colors={colors}
-              getSwatchHoverColor={getHoverColor}
-              color={color}
-              onChangeComplete={onColorSelect}
-            />
-          </EmojiPickerFooter>
-        ) : null}
       </EmojiPickerContent>
     </EmojiPickerRoot>
   );

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -0,0 +1,107 @@
+import {css} from "@linaria/core";
+import {useState} from "react";
+import {IconButton} from "../Button/icon-button";
+import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../Collapsible";
+import {ColorPicker} from "../ColorPicker";
+import {useThemeMode} from "../ThemeProvider";
+import {getIconColor, space} from "../designSystem";
+import ColorCoding from "../icons/react/ColorCoding";
+import ColorCodingFilled from "../icons/react/ColorCodingFilled";
+import {$TSFixMe} from "../tsfixme";
+import {EmojiPickerGrid, EmojiPickerGridProps} from "./primitives/grid";
+import {EmojiPickerHeader} from "./primitives/header";
+import {EmojiPickerSearch} from "./primitives/search";
+
+const colorPickerWrapperCss = css`
+  padding-top: ${space.l}px;
+`;
+
+const disableScrollCss = css`
+  overflow-y: hidden;
+`;
+
+type ColorPickerCollapsibleTrigger = {opened: boolean; color?: string};
+
+const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = ({opened, color}) => {
+  const themeMode = useThemeMode();
+  const iconColor = color ? getIconColor(themeMode, color) : undefined;
+
+  const Icon = opened ? ColorCodingFilled : ColorCoding;
+
+  const label = opened ? "Close color picker" : "Open color picker";
+
+  return (
+    <CollapsibleTrigger asChild>
+      <IconButton
+        aria-label={label}
+        size="big"
+        className={css`
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        `}
+      >
+        <Icon color={iconColor} iconSize={18} containerSize={20} />
+      </IconButton>
+    </CollapsibleTrigger>
+  );
+};
+
+const collapsibleWrapperCss = css`
+  max-height: 302px; // search + emoji grid
+  overflow: hidden;
+`;
+
+export type EmojiPickerContentWithColorProps = {
+  color?: string;
+  getHoverColor?: (color: string) => string | undefined;
+  colors?: string[];
+  onColorSelect?: (c: $TSFixMe) => void;
+
+  searchRef?: React.RefObject<HTMLInputElement>;
+  searchAutofocus?: boolean;
+} & Pick<EmojiPickerGridProps, "renderEmoji">;
+
+export const EmojiPickerContentWithColor: React.FC<EmojiPickerContentWithColorProps> = ({
+  searchRef,
+  colors,
+  color,
+  onColorSelect,
+  getHoverColor,
+  searchAutofocus = true,
+  renderEmoji,
+}) => {
+  const [colorOpened, setColorOpened] = useState(false);
+
+  const showColorPicker = Boolean(onColorSelect);
+
+  return (
+    <CollapsibleRoot
+      className={collapsibleWrapperCss}
+      open={colorOpened}
+      onOpenChange={setColorOpened}
+      onWheel={() => setColorOpened(false)}
+    >
+      <EmojiPickerHeader>
+        <EmojiPickerSearch
+          searchRef={searchRef}
+          autoFocus={searchAutofocus}
+          extraAction={showColorPicker ? <ColorPickerCollapsibleTrigger opened={colorOpened} color={color} /> : null}
+        />
+        {showColorPicker ? (
+          <CollapsibleContent>
+            <div className={colorPickerWrapperCss}>
+              <ColorPicker
+                colors={colors}
+                getSwatchHoverColor={getHoverColor}
+                color={color}
+                onChangeComplete={onColorSelect}
+              />
+            </div>
+          </CollapsibleContent>
+        ) : null}
+      </EmojiPickerHeader>
+
+      <EmojiPickerGrid className={colorOpened ? disableScrollCss : undefined} renderEmoji={renderEmoji} />
+    </CollapsibleRoot>
+  );
+};

package/src/emoji-picker/emoji-picker.tsx

@@ -1,16 +1,13 @@
 import {EmojiItem} from "@fibery/emoji-data/lib/src";
+import {css} from "@linaria/core";
+import {Button} from "../Button";
+import {cardTypeColors, space} from "../designSystem";
 import {$TSFixMe} from "../tsfixme";
-import {EmojiPickerRoot} from "./primitives/root";
+import {EmojiPickerContentWithColor} from "./emoji-picker-content-with-color";
 import {EmojiPickerContent} from "./primitives/content";
-import {EmojiPickerHeader} from "./primitives/header";
-import {EmojiPickerSearch} from "./primitives/search";
-import {cx, css} from "@linaria/core";
-import {EmojiPickerSkinTone} from "./primitives/skin-tone";
-import {EmojiPickerGrid} from "./primitives/grid";
-import {LazyEmojiDataStore} from "./lazy-emoji-data-store";
-import {ColorPicker} from "../ColorPicker";
 import {EmojiPickerFooter} from "./primitives/footer";
-import {cardTypeColors} from "../designSystem";
+import {EmojiPickerRoot} from "./primitives/root";
+import {EmojiPickerSkinTone} from "./primitives/skin-tone";
 
 const i18n = {search: "Search emoji..."};
 
@@ -19,54 +16,54 @@ export type EmojiPickerProps = {
   getHoverColor?: (color: string) => string | undefined;
   colors?: string[];
   onColorSelect?: (c: $TSFixMe) => void;
+  onCustomCategorySettings?: () => void;
+  onAddCustomEmoji?: () => void;
+  onSelect: (emoji: EmojiItem) => void;
   showSkinTones?: boolean;
 
-  onSelect: (emoji: EmojiItem) => void;
+  searchRef?: React.RefObject<HTMLInputElement>;
 };
 export const EmojiPicker: React.FC<EmojiPickerProps> = ({
   onSelect,
   color,
-  colors = cardTypeColors,
+  colors = cardTypeColors as unknown as string[],
   onColorSelect,
+  onCustomCategorySettings,
+  onAddCustomEmoji,
   getHoverColor,
   showSkinTones,
+  searchRef,
 }) => {
+  const showFooter = Boolean(onAddCustomEmoji) || showSkinTones;
+
   return (
-    <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect}>
+    <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect} onCustomCategorySettings={onCustomCategorySettings}>
       <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
-        <LazyEmojiDataStore fallback={<div style={{height: "282px"}}></div>}>
-          <EmojiPickerHeader>
-            <EmojiPickerSearch
-              autoFocus
-              className={cx(
-                showSkinTones &&
-                  css`
-                    width: 250px !important;
-                  `
-              )}
-            />
-            {/* Temporary hacks. SkinTone should move to footer */}
+        <EmojiPickerContentWithColor
+          color={color}
+          colors={colors}
+          getHoverColor={getHoverColor}
+          onColorSelect={onColorSelect}
+          searchRef={searchRef}
+        />
+
+        {showFooter ? (
+          <EmojiPickerFooter>
+            {onAddCustomEmoji ? (
+              <Button size=":button-size/small" onClick={onAddCustomEmoji}>
+                Add Emoji
+              </Button>
+            ) : null}
+
             {showSkinTones ? (
               <EmojiPickerSkinTone
                 className={css`
                   position: absolute;
                   top: 4px;
-                  right: 12px;
+                  right: ${space.l}px;
                 `}
               />
             ) : null}
-          </EmojiPickerHeader>
-          <EmojiPickerGrid />
-        </LazyEmojiDataStore>
-
-        {onColorSelect ? (
-          <EmojiPickerFooter>
-            <ColorPicker
-              colors={colors}
-              getSwatchHoverColor={getHoverColor}
-              color={color}
-              onChangeComplete={onColorSelect}
-            />
           </EmojiPickerFooter>
         ) : null}
       </EmojiPickerContent>

package/src/emoji-picker/emoji.tsx

@@ -1,11 +1,8 @@
-import {LazyEmojiDataStore} from "./lazy-emoji-data-store";
 import {Emoji as EmojiPrimitive, EmojiProps as EmojiPrimitiveProps} from "./primitives/emoji";
+import {isApple} from "./utils/emoji-set";
+import {detectEmojiSupportLevel} from "./utils/emoji-support";
 
 export type EmojiProps = EmojiPrimitiveProps;
-export const Emoji: React.FC<EmojiPrimitiveProps> = function EmojiOrLoader(props) {
-  return (
-    <LazyEmojiDataStore fallback={<div style={{width: props.size, height: props.size}} />}>
-      <EmojiPrimitive {...props} />
-    </LazyEmojiDataStore>
-  );
+export const Emoji: React.FC<EmojiPrimitiveProps> = (props) => {
+  return <EmojiPrimitive version={detectEmojiSupportLevel()} native={isApple()} {...props} />;
 };

package/src/emoji-picker/icon-emoji-picker.tsx

@@ -6,6 +6,7 @@ import {space, textStyles} from "../designSystem";
 import {$TSFixMe} from "../tsfixme";
 import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";
 import {EmojiPicker, EmojiPickerProps} from "./emoji-picker";
+import EmojiDelete from "../icons/react/EmojiDelete";
 
 const TabHeader: React.FC<React.PropsWithChildren> = ({children}) => (
   <div
@@ -23,6 +24,8 @@ export type IconEmojiPickerProps = React.PropsWithChildren<{
   onIconSelect?: AppIconPickerProps["onSelect"];
   onEmojiSelect?: EmojiPickerProps["onSelect"];
   onColorSelect?: (c: $TSFixMe) => void;
+  onCreateClick?: () => void;
+  onCustomEmojisSettings?: () => void;
   onReset?: () => void;
   resetLabel?: string;
   defaultTab?: TabKey;
@@ -34,6 +37,8 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
   onIconSelect,
   onEmojiSelect,
   onColorSelect,
+  onCreateClick,
+  onCustomEmojisSettings,
   defaultTab,
   onReset,
   resetLabel = "Reset",
@@ -51,13 +56,17 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
           key: "emojis",
           label: <TabHeader>Emojis</TabHeader>,
           children: (
-            <EmojiPicker
-              color={color}
-              onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
-              getHoverColor={getHoverColor}
-              onSelect={onEmojiSelect}
-              showSkinTones
-            />
+            <>
+              <EmojiPicker
+                color={color}
+                onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
+                onCustomCategorySettings={onCustomEmojisSettings}
+                onAddCustomEmoji={onCreateClick}
+                getHoverColor={getHoverColor}
+                onSelect={onEmojiSelect}
+                showSkinTones
+              />
+            </>
           ),
         },
         onIconSelect && {
@@ -80,7 +89,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
               padding-right: ${space.l}px;
             `}
           >
-            <Button size={":button-size/small"} onClick={onReset}>
+            <Button Icon={EmojiDelete} size={":button-size/small"} onClick={onReset}>
               {resetLabel}
             </Button>
           </div>