Allow setting notification indicator position on split button

Author: kowalczyk-krzysztof

src/platform/packages/private/kbn-split-button/src/split_button.stories.tsx

@@ -193,8 +193,14 @@ export const WithNotificationIndicator = {
     showNotificationIndicator: true,
     notifcationIndicatorTooltipContent: 'You have unsaved changes',
     notificationIndicatorColor: 'primary',
-    notificationIndicatorSize: 'l',
-    size: 'm',
+    notificationIndicatorSize: 'm',
+    notificationIndicatorPosition: {
+      top: 2,
+      left: 25,
+    },
+    size: 's',
+    color: 'text',
+    iconType: 'save',
   },
   render: (args: {
     showNotificationIndicator: boolean;
@@ -205,6 +211,12 @@ export const WithNotificationIndicator = {
     notificationIndicatorSize: React.ComponentProps<
       typeof SplitButtonWithNotification
     >['notificationIndicatorSize'];
+    notificationIndicatorPosition?: {
+      top?: number;
+      right?: number;
+    };
+    color: React.ComponentProps<typeof SplitButton>['color'];
+    iconType: React.ComponentProps<typeof SplitButton>['iconType'];
     size: React.ComponentProps<typeof SplitButton>['size'];
   }) => (
     <SplitButtonWithNotification secondaryButtonIcon="arrowDown" {...args}>

src/platform/packages/private/kbn-split-button/src/split_button_with_notification.tsx

@@ -23,13 +23,22 @@ export type SplitButtonWithNotificationProps = SplitButtonProps & {
   notificationIndicatorColor?: IconColor;
   notificationIndicatorSize?: IconSize;
   notifcationIndicatorTooltipContent?: string;
+  notificationIndicatorPosition?: {
+    top?: number;
+    right?: number;
+    left?: number;
+    bottom?: number;
+  };
+  notificationIndicatorHasStroke?: boolean;
 };
 
 export const SplitButtonWithNotification = ({
   showNotificationIndicator = false,
   notificationIndicatorColor = 'primary',
   notificationIndicatorSize = 'l',
   notifcationIndicatorTooltipContent,
+  notificationIndicatorPosition,
+  notificationIndicatorHasStroke = true,
   ...splitButtonProps
 }: SplitButtonWithNotificationProps) => {
   const euiThemeContext = useEuiTheme();
@@ -52,9 +61,18 @@ export const SplitButtonWithNotification = ({
           data-test-subj="split-button-notification-indicator"
           css={{
             position: 'absolute' as const,
-            top: '-10px',
-            right: secondaryButtonWidth,
+            top: notificationIndicatorPosition?.top ?? -10,
+            right: notificationIndicatorPosition?.right ?? secondaryButtonWidth,
+            left: notificationIndicatorPosition?.left,
+            bottom: notificationIndicatorPosition?.bottom,
             zIndex: 1,
+            ...(notificationIndicatorHasStroke && {
+              '& svg': {
+                stroke: 'white',
+                strokeWidth: '2px',
+                paintOrder: 'stroke fill',
+              },
+            }),
           }}
         >
           <EuiIconTip