@fibery/ui-kit 1.15.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -40,6 +40,7 @@
     "chroma-js": "2.1.2",
     "chrono-node": "^2.4.1",
     "classnames": "2.3.1",
+    "cmdk": "0.2.0",
     "color-hash": "1.0.3",
     "d3-shape": "1.3.7",
     "date-fns": "^2.29.2",
@@ -53,15 +54,16 @@
     "rc-progress": "3.4.1",
     "react-color": "2.19.3",
     "react-day-picker": "8.1.4",
+    "react-intersection-observer": "9.3.5",
     "react-popper": "2.3.0",
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/react": "1.0.3",
+    "@fibery/emoji-data": "2.1.1",
     "@fibery/helpers": "1.1.0",
-    "@fibery/emoji-data": "2.1.0"
+    "@fibery/react": "1.0.3"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -91,10 +93,10 @@
     "react-dom": "18.2.0",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
-    "typescript": "5.0.3",
+    "typescript": "5.1.6",
     "unist-util-reduce": "0.2.2",
-    "@fibery/eslint-config": "8.3.0",
-    "@fibery/babel-preset": "7.2.0"
+    "@fibery/babel-preset": "7.2.0",
+    "@fibery/eslint-config": "8.3.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/Button/actions-button-compact.tsx

@@ -0,0 +1,13 @@
+import {IconButton, IconButtonProps} from "./icon-button";
+import MoreCompactIcon from "../icons/react/MoreCompact";
+import {forwardRef} from "react";
+
+export const ActionsButtonCompact = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function ActionsButtonCompactComponent({...rest}, ref) {
+    return (
+      <IconButton ref={ref} size="small" {...rest}>
+        <MoreCompactIcon iconSize={18} containerSize={20} />
+      </IconButton>
+    );
+  }
+);

package/src/Button/actions-button.tsx

@@ -0,0 +1,30 @@
+import {IconButton, IconButtonProps} from "./icon-button";
+import MoreCompact from "../icons/react/MoreCompact";
+import {forwardRef} from "react";
+import {css} from "@linaria/core";
+import {border, themeVars} from "../designSystem";
+
+export const ActionsButton = forwardRef<HTMLButtonElement, IconButtonProps>(function ActionsButtonComponent(
+  {...rest},
+  ref
+) {
+  return (
+    <IconButton ref={ref} size="normal" {...rest}>
+      <MoreCompact iconSize={18} containerSize={20} />
+    </IconButton>
+  );
+});
+
+// TODO: Shoud be a variant inside button?
+export const actionButtonInlineStyle = css`
+  background-color: ${themeVars.actionMenuButtonColor};
+  box-shadow: ${themeVars.entityCardShadow};
+  border-radius: ${border.radius6};
+
+  .Button:hover {
+    background-color: ${themeVars.actionMenuButtonHoverColor} !important;
+  }
+  .Button:focus {
+    background-color: ${themeVars.actionMenuButtonHoverColor} !important;
+  }
+`;

package/src/Button/button-base.tsx

@@ -143,14 +143,13 @@ const StyledButtonBase = styled.button<StyledProps>`
 `;
 
 export type ButtonBaseProps = {
-  dataId?: string;
   color?: string;
   primary?: boolean;
   dangerous?: boolean;
   borderless?: boolean;
 } & ComponentPropsWithoutRef<"button">;
 export const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(function ButtonBase(
-  {primary, color, borderless, dangerous, className, type = "button", dataId, ...buttonProps},
+  {primary, color, borderless, dangerous, className, type = "button", ...buttonProps},
   ref
 ) {
   const theme = useTheme();
@@ -177,14 +176,5 @@ export const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(functio
     borderWidth,
   };
 
-  return (
-    <StyledButtonBase
-      ref={ref}
-      type={type}
-      className={className}
-      data-testid={dataId}
-      {...styledProps}
-      {...buttonProps}
-    />
-  );
+  return <StyledButtonBase ref={ref} type={type} className={className} {...styledProps} {...buttonProps} />;
 });

package/src/Button/button.tsx

@@ -4,14 +4,12 @@ import {styled} from "@linaria/react";
 import cx from "classnames";
 import _ from "lodash";
 import React, {forwardRef} from "react";
-import {ButtonBase, ButtonBaseProps, buttonBorderWidth, getMainColor, getTextColor} from "./button-base";
+import {Item} from "../Item";
+import {useTheme} from "../ThemeProvider";
 import {border, colors, getOpacities, opacity, space, textStyles} from "../designSystem";
-import MoreIcon from "../icons/react/More";
-import MoreCompactIcon from "../icons/react/MoreCompact";
 import {IconBaseProps} from "../icons/types";
-import {Item} from "../Item";
 import {Spinner} from "../loaders";
-import {useTheme} from "../ThemeProvider";
+import {ButtonBase, ButtonBaseProps, buttonBorderWidth, getMainColor, getTextColor} from "./button-base";
 
 type PositionInGroup = "first" | "middle" | "last";
 
@@ -218,32 +216,3 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     </StyledButton>
   );
 });
-
-// TODO can be inlined
-export function ActionsButton({
-  onClick,
-  label = ``,
-  disabled,
-}: {
-  onClick: ButtonProps["onClick"];
-  label?: string;
-  disabled?: boolean;
-}) {
-  return <Button Icon={MoreIcon} onClick={onClick} borderless aria-label={label} disabled={disabled} />;
-}
-
-export const ActionsButtonCompact = forwardRef<HTMLButtonElement, ButtonProps & {inverted?: boolean}>(
-  ({inverted, ...rest}, ref) => {
-    const theme = useTheme();
-    return (
-      <Button
-        ref={ref}
-        size={":button-size/small"}
-        Icon={MoreCompactIcon}
-        color={inverted ? colors.inversedTextColor : theme.buttonColor}
-        borderless
-        {...rest}
-      />
-    );
-  }
-);

package/src/Select/components.tsx

@@ -28,6 +28,9 @@ export function DropdownIndicator<
   IsMulti extends boolean = boolean,
   Group extends GroupBase<TOption> = GroupBase<TOption>
 >(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
+  if (props.selectProps.isDisabled) {
+    return null;
+  }
   return (
     <div className={cn(expanderStyle, props.selectProps.menuIsOpen && expanderExpandedStyle)}>
       <ArrowCollapseVertical color={themeVars.disabledTextColor} />
@@ -43,6 +46,9 @@ export function ClearIndicator<
   innerProps,
   selectProps,
 }: ClearIndicatorProps<TOption, IsMulti, Group> | MultiValueRemoveProps<TOption, IsMulti, Group>) {
+  if (selectProps.isDisabled) {
+    return null;
+  }
   return (
     <div {...innerProps}>
       <Button borderless Icon={RemoveIcon} disabled={selectProps.isDisabled} size={":button-size/super-small"} />

package/src/Select/styles.ts

@@ -165,10 +165,15 @@ export const componentsStyles: StylesConfig = {
     cursor: state.isDisabled ? "not-allowed" : "default",
   }),
   indicatorSeparator: () => ({}),
-  input: (provided) => ({
-    ...provided,
-    color: themeVars.textColor,
-  }),
+  input: (provided, state) => {
+    if (state.isDisabled) {
+      return {display: "none"};
+    }
+    return {
+      ...provided,
+      color: themeVars.textColor,
+    };
+  },
 };
 
 export const singleLineComponentsStyle: StylesConfig = {

package/src/antd/styles.ts

@@ -22,7 +22,7 @@ export const inputOverrides = {
     font: "inherit",
     color: themeVars.textColor,
     outline: "none",
-    backgroundColor: themeVars.inputBgColor,
+    backgroundColor: `${themeVars.inputBgColor} !important`,
     borderRadius: border.radius6,
     minHeight: layout.inputHeight,
     paddingTop: 0,
@@ -32,22 +32,22 @@ export const inputOverrides = {
     border: 0,
     borderColor: colors.transparent,
     transition: `box-shadow ${transition}`,
-    boxShadow: "var(--input-border)",
+    boxShadow: `var(--input-border, ${themeVars.inputBorderColor})`,
     letterSpacing: 0,
     "::placeholder": {
       color: themeVars.inputPlaceholderTextColor,
     },
   },
   hover: {
-    boxShadow: "var(--input-hover-border) !important",
+    boxShadow: `var(--input-hover-border, 0 0 0 1px ${themeVars.opacity.opacity40}) !important`,
     transition: `box-shadow ${transition}`,
   },
   focus: {
-    boxShadow: "var(--input-focus-border), var(--input-focus-shadow) !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: {
-    color: `${themeVars.accentTextColor}`,
+    color: `${themeVars.textColor}`,
     backgroundColor: `${themeVars.inputDisabledBgColor} !important`,
     borderColor: colors.transparent,
     boxShadow: `${themeVars.inputDisabledBorderColor} !important`,

package/src/designSystem.ts

@@ -61,7 +61,7 @@ const makeChromaColor = (color: string) => {
   try {
     return chroma(color);
   } catch (e) {
-    return chroma(brandColors.green);
+    return chroma(brandColors.blue);
   }
 };
 
@@ -103,7 +103,7 @@ const brandColors = {
 } as const;
 
 export const getDarkenColor = _.memoize((color: string): string => {
-  return makeChromaColor(color).darken(0.4).css();
+  return makeChromaColor(color).darken(0.6).css();
 });
 
 const lightColors = {
@@ -245,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,
@@ -370,7 +372,7 @@ const darkColors = {
   }`,
   separatorColor: getOpacities(slateDark.slate8).opacity50,
   separatorBreadcrumbsColor: slateDark.slate8,
-  iconColor: slate.slate9,
+  iconColor: slateDark.slate10,
   appIconColor: getOpacities(slate.slate2).opacity70,
   mentionBgColor: slateDark.slate5,
   entityCardBgColor: slateDark.slate5,
@@ -430,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,
@@ -579,11 +583,7 @@ export const getThemeColors: (themeColor: string, theme: ThemeMode) => ThemeColo
 );
 
 export const getTextColor = _.memoize((color: string): string => {
-  return makeChromaColor(color).luminance() > 0.45 ? makeChromaColor(color).luminance(0.1).saturate(3).hex() : "white";
-});
-
-export const getBrightenColor = _.memoize((color: string): string => {
-  return makeChromaColor(color).brighten(0.15).hex();
+  return makeChromaColor(color).hex();
 });
 
 export const getLinkedHighlightBackgroundColor = _.memoize(
@@ -600,24 +600,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}`
@@ -660,8 +647,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"),
@@ -784,7 +769,7 @@ export const getObjectColorMemoized = _.memoize((name) => {
     return "#999999";
   }
   const colorHash = new ColorHash({
-    lightness: [0.4, 0.5, 0.6],
+    lightness: [0.5, 0.6, 0.7],
     saturation: [0.6, 0.7, 0.8, 0.9, 1],
   });
   return colorHash.hex(name);

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 "./stores/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,110 @@
+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";
+import {Tooltip} from "../tooltip";
+
+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 ? "Hide color picker" : "Show color picker";
+
+  return (
+    <CollapsibleTrigger asChild>
+      <Tooltip title={label}>
+        <IconButton
+          data-testid="emoji-picker-color-trigger"
+          size="big"
+          className={css`
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          `}
+        >
+          <Icon color={iconColor} iconSize={18} containerSize={20} />
+        </IconButton>
+      </Tooltip>
+    </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,15 +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 {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,6 +17,7 @@ export type EmojiPickerProps = {
   colors?: string[];
   onColorSelect?: (c: $TSFixMe) => void;
   onCustomCategorySettings?: () => void;
+  onAddCustomEmoji?: () => void;
   onSelect: (emoji: EmojiItem) => void;
   showSkinTones?: boolean;
 
@@ -27,48 +26,44 @@ export type EmojiPickerProps = {
 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} onCustomCategorySettings={onCustomCategorySettings}>
       <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
-        <EmojiPickerHeader>
-          <EmojiPickerSearch
-            searchRef={searchRef}
-            autoFocus
-            className={cx(
-              showSkinTones &&
-                css`
-                  width: 250px !important;
-                `
-            )}
-          />
-          {/* Temporary hacks. SkinTone should move to footer */}
-          {showSkinTones ? (
-            <EmojiPickerSkinTone
-              className={css`
-                position: absolute;
-                top: 4px;
-                right: 12px;
-              `}
-            />
-          ) : null}
-        </EmojiPickerHeader>
-        <EmojiPickerGrid />
+        <EmojiPickerContentWithColor
+          color={color}
+          colors={colors}
+          getHoverColor={getHoverColor}
+          onColorSelect={onColorSelect}
+          searchRef={searchRef}
+        />
 
-        {onColorSelect ? (
+        {showFooter ? (
           <EmojiPickerFooter>
-            <ColorPicker
-              colors={colors}
-              getSwatchHoverColor={getHoverColor}
-              color={color}
-              onChangeComplete={onColorSelect}
-            />
+            {onAddCustomEmoji ? (
+              <Button size=":button-size/small" onClick={onAddCustomEmoji}>
+                Add Emoji
+              </Button>
+            ) : null}
+
+            {showSkinTones ? (
+              <EmojiPickerSkinTone
+                className={css`
+                  position: absolute;
+                  top: 4px;
+                  right: ${space.l}px;
+                `}
+              />
+            ) : null}
           </EmojiPickerFooter>
         ) : null}
       </EmojiPickerContent>