Feature/custom button #625
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -44,10 +44,6 @@ | |
| height: 40px; | ||
| } | ||
|
|
||
| .sub-menu { | ||
| flex-flow: row; | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,205 @@ | ||
| import React, { ReactNode, useState, useEffect, forwardRef } from "react"; | ||
| import { Button as AntButton, Tooltip } from "antd"; | ||
| import styled, { css, RuleSet } from "styled-components"; | ||
| import type { ButtonProps as AntButtonProps } from "antd"; | ||
| import { | ||
| NAV_BAR_TOOLTIP_OFFSET, | ||
| TOOLTIP_COLOR, | ||
| TOOLTIP_DELAY, | ||
| } from "../../constants"; | ||
| import { ButtonClass, TooltipPlacement } from "../../constants/interfaces"; | ||
|
|
||
| interface CustomButtonProps extends Omit<AntButtonProps, "type" | "variant"> { | ||
| variant?: ButtonClass; | ||
| titleText?: string; | ||
| icon?: ReactNode; | ||
| onClick?: () => void; | ||
| } | ||
|
|
||
| interface TooltipText { | ||
| defaultText: string; | ||
| disabledText?: string; | ||
| } | ||
|
|
||
| interface TooltipButtonProps extends CustomButtonProps { | ||
| tooltipText: TooltipText; | ||
| tooltipPlacement?: TooltipPlacement; | ||
| } | ||
|
|
||
| const baseStyles = css` | ||
| font-family: ${(props) => props.theme.typography}; | ||
| border-radius: 3px; | ||
| height: 32px; | ||
| padding: 6px 16px; | ||
| font-size: 14px; | ||
| align-items: center; | ||
| gap: 8px; | ||
| cursor: pointer; | ||
|
|
||
| &:disabled { | ||
| cursor: not-allowed; | ||
| } | ||
|
|
||
| &:focus-visible { | ||
| outline: 1px solid ${({ theme }) => theme.colors.lightPurpleBg}; | ||
| outline-offset: 1px; | ||
| } | ||
| `; | ||
|
|
||
| const generateButtonStyles = ( | ||
| variant: "primary" | "secondary", | ||
| theme: "light" | "dark" | ||
| ) => css` | ||
| ${({ | ||
| theme: { | ||
| colors: { button }, | ||
| }, | ||
| }) => { | ||
| const buttonTheme = button[variant][theme]; | ||
| const { background, text, border, hover, active, disabled } = | ||
| buttonTheme; | ||
|
|
||
| return css` | ||
| background-color: ${background}; | ||
| border: 1px solid ${variant === "primary" ? background : border}; | ||
| color: ${text}; | ||
|
|
||
| &&& { | ||
| &:hover:not(:disabled) { | ||
| background-color: ${hover.background}; | ||
| border-color: ${hover.background}; | ||
| color: ${hover.text}; | ||
| } | ||
|
|
||
| &:active:not(:disabled) { | ||
| background-color: ${hover.background}; | ||
|
There was a problem hiding this comment. Nit: I feel like I'd expect this to be |
||
| border-color: ${active.background}; | ||
| color: ${active.text}; | ||
| } | ||
|
|
||
| &:disabled { | ||
| background-color: ${disabled.background}; | ||
| border-color: ${disabled.background}; | ||
| color: ${disabled.text}; | ||
| } | ||
| } | ||
| `; | ||
| }} | ||
| `; | ||
|
|
||
| const actionStyles = css` | ||
| ${({ | ||
| theme: { | ||
| colors: { | ||
| button: { action }, | ||
| }, | ||
| }, | ||
| }) => css` | ||
| background: ${action.background}; | ||
| border: none; | ||
| color: ${action.text}; | ||
| padding: 6px 8px; | ||
| min-width: auto; | ||
|
|
||
| &&& { | ||
| &:hover:not(:disabled) { | ||
| color: ${action.hover.background}; | ||
| } | ||
|
|
||
| &:active:not(:disabled) { | ||
| border: ${action.active.text}; | ||
| color: ${action.active.text}; | ||
| } | ||
|
|
||
| &:disabled { | ||
| color: ${action.disabled.text}; | ||
| } | ||
| } | ||
| `} | ||
| `; | ||
|
|
||
| const variantStyles: Record<ButtonClass, RuleSet<object>> = { | ||
| [ButtonClass.LightPrimary]: generateButtonStyles("primary", "light"), | ||
| [ButtonClass.LightSecondary]: generateButtonStyles("secondary", "light"), | ||
| [ButtonClass.DarkPrimary]: generateButtonStyles("primary", "dark"), | ||
| [ButtonClass.DarkSecondary]: generateButtonStyles("secondary", "dark"), | ||
| [ButtonClass.Action]: actionStyles, | ||
| }; | ||
|
|
||
| const StyledButton = styled(AntButton)<CustomButtonProps>` | ||
| ${baseStyles} | ||
| ${({ variant = ButtonClass.LightPrimary }) => variantStyles[variant]} | ||
| `; | ||
|
|
||
| export const CustomButton = forwardRef<HTMLButtonElement, CustomButtonProps>( | ||
| ( | ||
| { | ||
| children, | ||
| variant = ButtonClass.LightPrimary, | ||
| titleText, | ||
| icon, | ||
| onClick, | ||
| disabled, | ||
| ...props | ||
| }, | ||
| ref | ||
| ) => { | ||
| return ( | ||
| <StyledButton | ||
| ref={ref} | ||
| variant={variant} | ||
| onClick={onClick} | ||
| disabled={disabled} | ||
| {...props} | ||
| > | ||
| {titleText || children} {icon} | ||
| </StyledButton> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| CustomButton.displayName = "CustomButton"; | ||
|
|
||
| export const TooltipButton: React.FC<TooltipButtonProps> = ({ | ||
| tooltipText = { defaultText: "", disabledText: "" }, | ||
| tooltipPlacement, | ||
| disabled = false, | ||
| ...buttonProps | ||
| }) => { | ||
| const tooltipRenderText = disabled | ||
| ? tooltipText.disabledText | ||
| : tooltipText.defaultText; | ||
| const [tooltipVisible, setTooltipVisible] = useState(false); | ||
|
|
||
| const handleMouseEnter = (e: React.MouseEvent<HTMLElement>) => { | ||
| setTooltipVisible(true); | ||
| buttonProps.onMouseEnter?.(e); | ||
| }; | ||
|
|
||
| const handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => { | ||
| setTooltipVisible(false); | ||
| buttonProps.onMouseLeave?.(e); | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| className="inline-block" | ||
| onMouseEnter={handleMouseEnter} | ||
| onMouseLeave={handleMouseLeave} | ||
| > | ||
| <Tooltip | ||
| placement={tooltipPlacement} | ||
| title={tooltipRenderText} | ||
| color={TOOLTIP_COLOR} | ||
| mouseEnterDelay={TOOLTIP_DELAY} | ||
| align={{ targetOffset: NAV_BAR_TOOLTIP_OFFSET }} | ||
| trigger={["hover", "focus"]} | ||
| open={tooltipVisible} | ||
| > | ||
| <div> | ||
| <CustomButton {...buttonProps} disabled={disabled} /> | ||
| </div> | ||
| </Tooltip> | ||
| </div> | ||
| ); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeesh. Which brand of CSS magic does this triple ampersand belong to? Does this mean "parent-parent-parent"..?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No! It's both better and worse than that.
In
styled-componentsthis just directly raises the specificity of the current selector. Yes, this is arbitrary and smells a bit like using!importantbut for me its a needed workaround for quality of life when stylingantd.Because some
antdcomponents apply many different class names, change element nesting, and even changes which base html element is rendered for different components, it can be tricky to ensure that our styles will be consistently applied. This solves that in a brute force kind of way, but is better than using!importantbecause these triple applied class hashes CAN be overridden by something of greater selector specificity, whereas!importantignores the specificity hierarchy entirely.When our styles don't really map onto ant's opinions very well, I prefer to just sort of veto all their styling by using this triple ampersand.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, I sort of it get it now.
Does there come a point where we eschew the ant buttons altogether and just roll our own from scratch 🤔 ? I'd be curious as to when the team would consider that to be worth it.
This isn't a request for changes though! Feel free to resolve.