generated from allen-cell-animated/github-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* bump antd and typescript, and update build tools and components to work with new versions * consolidate ts.config * replace ant-vars.less with ConfigProvider * semantic color variables names for config provider * align css var colors and theme color variables, divide light and dark theme colors * consolidate theme variables * further consolidate theme variables * styled-components.dropdown menu items (#616) * use styled-component to streamline appearance of dropdown menu items * prevent ant from overridding text color during hover/focus on dropdown items * trim unneedd props from baseStyles on dropdown items * restructure colors and theming to provide for styled-components use of themeColors * remove unused nav button drop down item variety * don't open drop downs by default * remove unused imports * make selector more specific and remove !important tag * change focus to focus-visible in selectors and typing for styled-components theme * only export semantic and component colors from theme
- Loading branch information
Showing
16 changed files
with
1,284 additions
and
732 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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,144 @@ | ||
| import React from "react"; | ||
| import { Link, LinkProps } from "react-router-dom"; | ||
| import styled, { css } from "styled-components"; | ||
| import { ArrowRight } from "../Icons"; | ||
|
|
||
| // Dropdown items can be of a few component | ||
| // varieties, including buttons, router links, and | ||
| // anchor tags. This file unifies their styling, | ||
| // and then divides them into three component exports | ||
| // for semantically explicit usage in dropdowns. | ||
|
|
||
| // Common styles | ||
| const baseStyles = css` | ||
| font-family: ${(props) => props.theme.typography}; | ||
| background: none; | ||
| border: 2px solid ${({ theme }) => theme.colors.dropdown.background}; | ||
| border-radius: 3px; | ||
| color: ${({ theme }) => theme.colors.dropdown.text}; | ||
| cursor: pointer; | ||
| height: 28px; | ||
| padding: 6px; | ||
| width: 100%; | ||
| min-width: 177px; | ||
| font-size: 14px; | ||
| &&& { | ||
| &:focus-visible, | ||
| &:focus-visible:hover { | ||
| outline: 1.5px solid ${({ theme }) => theme.colors.dropdown.active}; | ||
| border: 2px solid ${({ theme }) => theme.colors.dropdown.background}; | ||
| color: ${({ theme }) => theme.colors.dropdown.activeTextColor}; | ||
| background-color: ${({ theme }) => theme.colors.dropdown.active}; | ||
| svg { | ||
| fill: ${({ theme }) => theme.colors.dropdown.background}; | ||
| } | ||
| } | ||
| &:hover:not(:focus-visible) { | ||
| background-color: ${({ theme }) => theme.colors.dropdown.active}; | ||
| color: ${({ theme }) => theme.colors.dropdown.activeTextColor}; | ||
| border-color: ${({ theme }) => theme.colors.dropdown.active}; | ||
| svg { | ||
| fill: ${({ theme }) => theme.colors.dropdown.background}; | ||
| } | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| const contentStyles = css` | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 8px; | ||
| justify-content: space-between; | ||
| color: inherit; | ||
| svg { | ||
| font-size: 10px; | ||
| } | ||
| `; | ||
|
|
||
| // Styled components | ||
| const StyledDropdownButton = styled.button` | ||
| ${baseStyles} | ||
| ${contentStyles} | ||
| `; | ||
|
|
||
| const StyledRouterLink = styled(Link)` | ||
| ${baseStyles} | ||
| ${contentStyles} | ||
| `; | ||
|
|
||
| const StyledExternalLink = styled.a` | ||
| ${baseStyles} | ||
| ${contentStyles} | ||
| `; | ||
|
|
||
| // Typing for the props of each variant | ||
| interface BaseDropdownItemProps { | ||
| children: React.ReactNode; | ||
| onClick?: () => void; | ||
| className?: string; | ||
| } | ||
|
|
||
| interface ButtonProps extends BaseDropdownItemProps { | ||
| isSubmenuTrigger?: boolean; | ||
| } | ||
|
|
||
| interface RouterProps extends BaseDropdownItemProps { | ||
| to: LinkProps["to"]; | ||
| newTab?: boolean; | ||
| } | ||
|
|
||
| interface AnchorProps extends Omit<BaseDropdownItemProps, "onClick"> { | ||
| href: string; | ||
| newTab?: boolean; | ||
| } | ||
|
|
||
| const getNewTabAttributes = (newTab?: boolean) => | ||
| newTab ? { target: "_blank", rel: "noopener noreferrer" } : {}; | ||
|
|
||
| // Components for use in dropdown menus: | ||
| export const DropdownButton: React.FC<ButtonProps> = ({ | ||
| children, | ||
| className, | ||
| onClick, | ||
| isSubmenuTrigger, | ||
| }) => ( | ||
| <StyledDropdownButton type="button" onClick={onClick} className={className}> | ||
| {children} | ||
| {isSubmenuTrigger && ArrowRight} | ||
| </StyledDropdownButton> | ||
| ); | ||
|
|
||
| export const DropdownRouterLink: React.FC<RouterProps> = ({ | ||
| children, | ||
| className, | ||
| to, | ||
| newTab, | ||
| }) => ( | ||
| <StyledRouterLink | ||
| to={to} | ||
| className={className} | ||
| {...getNewTabAttributes(newTab)} | ||
| > | ||
| {children} | ||
| </StyledRouterLink> | ||
| ); | ||
|
|
||
| export const DropdownAnchor: React.FC<AnchorProps> = ({ | ||
| children, | ||
| className, | ||
| href, | ||
| newTab, | ||
| }) => ( | ||
| <StyledExternalLink | ||
| href={href} | ||
| className={className} | ||
| {...getNewTabAttributes(newTab)} | ||
| > | ||
| {children} | ||
| </StyledExternalLink> | ||
| ); |
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 |
|---|---|---|
| @@ -1,44 +1,18 @@ | ||
| .menu { | ||
| .menu-wrapper { | ||
| width: fit-content; | ||
| background-color: var(--dark-theme-dropdown-menu-bg); | ||
| border-radius: 3px; | ||
| padding: 8px; | ||
| } | ||
|
|
||
| .menu svg { | ||
| fill: var(--dark-theme-menu-text-color); | ||
| padding: 4px; | ||
| } | ||
|
|
||
| .menu :global(.ant-dropdown-menu-item), | ||
| .menu :global(.ant-dropdown-menu-submenu) { | ||
| border: 2px solid var(--dark-theme-dropdown-menu-item-bg); | ||
| border-radius: 4px; | ||
| height: 32px; | ||
| .menu { | ||
| background-color: inherit; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 4px; | ||
| } | ||
|
|
||
| .menu :global(.ant-dropdown-menu-item) :global(.ant-btn) { | ||
| color: var(--dark-theme-dropdown-menu-item-color); | ||
| .menu-wrapper .menu :global(.ant-dropdown-menu-submenu-title), | ||
| .menu-wrapper .menu :global(.ant-dropdown-menu-item-only-child) { | ||
| padding: 0px; | ||
| } | ||
|
|
||
| .menu :global(.ant-dropdown-menu-item):hover, | ||
| .menu :global(.ant-dropdown-menu-submenu):hover { | ||
| background-color: var(--dark-theme-dropdown-menu-item-hover-bg); | ||
| } | ||
|
|
||
| .menu :global(.ant-dropdown-menu-item):hover *, | ||
| .menu :global(.ant-dropdown-menu-submenu):hover * { | ||
| color: var(--dark-theme-dropdown-menu-item-hover-color); | ||
| fill: var(--dark-theme-dropdown-menu-item-hover-color); | ||
| } | ||
|
|
||
| .menu :global(.ant-dropdown-menu-item):focus-within, | ||
| .menu :global(.ant-dropdown-menu-submenu):focus-within { | ||
| z-index: 1000; | ||
| background-color: var(--dark-theme-dropdown-menu-item-focus-bg); | ||
| outline: 1px solid var(--dark-theme-dropdown-menu-item-focus-outline); | ||
| } | ||
|
|
||
| .menu :global(.ant-dropdown-menu-item) *:focus-visible { | ||
| color: var(--dark-theme-dropdown-menu-item-focus-color); | ||
| } |
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
Oops, something went wrong.