Skip to content

Commit

Permalink
feat: eng-22373: enable floating buttons (#212)
Browse files Browse the repository at this point in the history 
* feat: eng-22373: enable floating buttons

Adding floatingButtonProps in BaseButton to enable it floating in botton right corner

* feat: eng-22373: enable round button shape
support round button

* fix: eng-22373: take care special cases

take care splitting button and 2-state button, also only make it round shape when it's icon only
  • Loading branch information
@yzhang-eightfold
yzhang-eightfold authored Jun 30, 2022
1 parent 7e775b7 commit d1ac476
Show file tree
Hide file tree
Showing 8 changed files with 61 additions and 6 deletions.
6 changes: 6 additions & 0 deletions src/components/Button/BaseButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
disabled = false,
disruptive = false,
dropShadow = false,
floatingButtonProps,
htmlType,
iconProps,
id,
Expand Down Expand Up @@ -80,8 +81,13 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
{ [styles.buttonSize2]: size === ButtonSize.Medium },
{ [styles.buttonSize3]: size === ButtonSize.Small },
{ [styles.pillShape]: shape === ButtonShape.Pill },
{
[styles.roundShape]:
shape === ButtonShape.Round && !split && !textExists,
},
{ [styles.dropShadow]: dropShadow },
{ [styles.dark]: theme === ButtonTheme.dark },
{ [styles.floating]: floatingButtonProps?.enabled },
]);

const buttonBaseClassNames: string = mergeClasses([
Expand Down
9 changes: 8 additions & 1 deletion src/components/Button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,11 @@ export default {
action: 'contextmenu',
},
shape: {
options: [ButtonShape.Rectangle, ButtonShape.Pill],
options: [
ButtonShape.Rectangle,
ButtonShape.Pill,
ButtonShape.Round,
],
control: { type: 'inline-radio' },
},
size: {
Expand Down Expand Up @@ -212,6 +216,9 @@ const buttonArgs: Object = {
disabled: false,
disruptive: false,
dropShadow: false,
floatingButtonProps: {
enabled: false,
},
htmlType: 'button',
iconProps: {
path: IconName.mdiCardsHeart,
Expand Down
13 changes: 13 additions & 0 deletions src/components/Button/Button.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export enum ButtonWidth {
export enum ButtonShape {
Rectangle = 'rectangle',
Pill = 'pill',
Round = 'round',
}

export enum ButtonTheme {
Expand All @@ -53,6 +54,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
Expand Down Expand Up @@ -133,6 +142,10 @@ export interface ButtonProps extends NativeButtonProps {
* @default false
*/
dropShadow?: boolean;
/**
* The button is always floating on bottom right corner.
*/
floatingButtonProps?: FloatingButtonProps;
/**
* The button html type.
*/
Expand Down
4 changes: 3 additions & 1 deletion src/components/Button/DefaultButton/DefaultButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
counter,
disabled = false,
dropShadow = false,
floatingButtonProps,
htmlType,
iconProps,
onClick,
Expand Down Expand Up @@ -62,6 +63,7 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
counter={counter}
disabled={disabled}
dropShadow={dropShadow}
floatingButtonProps={floatingButtonProps}
htmlType={htmlType}
iconProps={iconProps}
onClick={onClick}
Expand All @@ -73,8 +75,8 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
style={style}
text={text}
theme={theme}
type={ButtonType.Default}
toggle={toggle}
type={ButtonType.Default}
buttonWidth={buttonWidth}
/>
);
Expand Down
4 changes: 3 additions & 1 deletion src/components/Button/NeutralButton/NeutralButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export const NeutralButton: FC<ButtonProps> = React.forwardRef(
counter,
disabled = false,
dropShadow = false,
floatingButtonProps,
htmlType,
iconProps,
onClick,
Expand Down Expand Up @@ -60,6 +61,7 @@ export const NeutralButton: FC<ButtonProps> = React.forwardRef(
counter={counter}
disabled={disabled}
dropShadow={dropShadow}
floatingButtonProps={floatingButtonProps}
htmlType={htmlType}
iconProps={iconProps}
onClick={onClick}
Expand All @@ -71,8 +73,8 @@ export const NeutralButton: FC<ButtonProps> = React.forwardRef(
style={style}
text={text}
theme={theme}
type={ButtonType.Neutral}
toggle={toggle}
type={ButtonType.Neutral}
buttonWidth={buttonWidth}
/>
);
Expand Down
6 changes: 4 additions & 2 deletions src/components/Button/PrimaryButton/PrimaryButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export const PrimaryButton: FC<ButtonProps> = React.forwardRef(
disabled = false,
disruptive = false,
dropShadow = false,
floatingButtonProps,
htmlType,
iconProps,
onClick,
Expand Down Expand Up @@ -61,23 +62,24 @@ export const PrimaryButton: FC<ButtonProps> = React.forwardRef(
checked={checked}
classNames={buttonClassNames}
counter={counter}
splitButtonChecked={splitButtonChecked}
disabled={disabled}
disruptive={disruptive}
dropShadow={dropShadow}
floatingButtonProps={floatingButtonProps}
htmlType={htmlType}
iconProps={iconProps}
onClick={onClick}
onContextMenu={onContextMenu}
shape={shape}
size={size}
split={split}
splitButtonChecked={splitButtonChecked}
splitButtonProps={splitButtonProps}
style={style}
text={text}
theme={theme}
type={ButtonType.Primary}
toggle={toggle}
type={ButtonType.Primary}
buttonWidth={buttonWidth}
/>
);
Expand Down
4 changes: 3 additions & 1 deletion src/components/Button/SecondaryButton/SecondaryButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export const SecondaryButton: FC<ButtonProps> = React.forwardRef(
disabled = false,
disruptive = false,
dropShadow = false,
floatingButtonProps,
htmlType,
iconProps,
onClick,
Expand Down Expand Up @@ -63,6 +64,7 @@ export const SecondaryButton: FC<ButtonProps> = React.forwardRef(
disabled={disabled}
disruptive={disruptive}
dropShadow={dropShadow}
floatingButtonProps={floatingButtonProps}
htmlType={htmlType}
iconProps={iconProps}
onClick={onClick}
Expand All @@ -74,8 +76,8 @@ export const SecondaryButton: FC<ButtonProps> = React.forwardRef(
style={style}
text={text}
theme={theme}
type={ButtonType.Secondary}
toggle={toggle}
type={ButtonType.Secondary}
buttonWidth={buttonWidth}
/>
);
Expand Down
21 changes: 21 additions & 0 deletions src/components/Button/button.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,20 @@
border-radius: $corner-radius-xl;
}

&.round-shape {
border-radius: 50%;

&.button-size-1 {
padding: $button-padding-vertical-large;
}
&.button-size-2 {
padding: $button-padding-vertical-medium;
}
&.button-size-3 {
padding: $button-padding-vertical-small;
}
}

&.drop-shadow {
box-shadow: 0 1px 2px rgba(15, 20, 31, 0.12),
0 2px 8px rgba(15, 20, 31, 0.16);
Expand Down Expand Up @@ -163,6 +177,13 @@
width: fit-content;
}

&.floating {
position: fixed;
bottom: 40px;
right: 40px;
z-index: $z-index-400;
}

&:disabled,
&.disabled {
opacity: $disabled-alpha-value;
Expand Down

0 comments on commit d1ac476

Please sign in to comment.