feat: eng-22373: enable floating buttons

src/components/Button/BaseButton.tsx

@@ -40,6 +40,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             split,
             splitButtonChecked = false,
             splitButtonProps,
+            floatingButtonProps,
             style,
             text,
             theme,
@@ -82,6 +83,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             { [styles.pillShape]: shape === ButtonShape.Pill },
             { [styles.dropShadow]: dropShadow },
             { [styles.dark]: theme === ButtonTheme.dark },
+            { [styles.floating]: floatingButtonProps?.enabled },
         ]);
 
         const buttonBaseClassNames: string = mergeClasses([

src/components/Button/Button.stories.tsx

@@ -212,6 +212,9 @@ const buttonArgs: Object = {
     disabled: false,
     disruptive: false,
     dropShadow: false,
+    floatingButtonProps: {
+        enabled: false,
+    },
     htmlType: 'button',
     iconProps: {
         path: IconName.mdiCardsHeart,

src/components/Button/Button.types.ts

@@ -53,6 +53,14 @@ export interface InternalButtonProps extends ButtonProps {
     ref?: Ref<HTMLButtonElement>;
 }
 
+export interface FloatingButtonProps {
+    /**
+     * Determines if the button is floating.
+     * @default false
+     */
+    enabled?: boolean;
+}
+
 export type NativeButtonProps = Omit<OcBaseProps<HTMLButtonElement>, 'type'>;
 
 export interface SplitButtonProps
@@ -193,4 +201,8 @@ export interface ButtonProps extends NativeButtonProps {
      * The button is a toggle button with distinct on and off states.
      */
     toggle?: boolean;
+    /**
+     * The button is always floating on bottom right corner.
+     */
+    floatingButtonProps?: FloatingButtonProps;
 }

src/components/Button/button.module.scss

@@ -163,6 +163,13 @@
         width: fit-content;
     }
 
+    &.floating {
+        position: fixed;
+        bottom: 40px;
+        right: 40px;
+        z-index: $z-index-400;
+    }
+
     &:disabled,
     &.disabled {
         opacity: $disabled-alpha-value;