diff options
Diffstat (limited to 'server/sonar-web/design-system/src')
5 files changed, 68 insertions, 27 deletions
diff --git a/server/sonar-web/design-system/src/components/Dropdown.tsx b/server/sonar-web/design-system/src/components/Dropdown.tsx index d79f7d011bc..ab273c08f0c 100644 --- a/server/sonar-web/design-system/src/components/Dropdown.tsx +++ b/server/sonar-web/design-system/src/components/Dropdown.tsx @@ -61,6 +61,9 @@ interface State { open: boolean; } +/** @deprecated Use DropdownMenu.Root and other DropdownMenu.* elements from Echoes instead. + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3354918914/DropdownMenus | Migration Guide} + */ export class Dropdown extends React.PureComponent<Readonly<Props>, State> { state: State = { open: false }; @@ -142,6 +145,9 @@ interface ActionsDropdownProps extends Omit<Props, 'children' | 'overlay'> { toggleClassName?: string; } +/** @deprecated Use DropdownMenu.Root and other DropdownMenu.* elements from Echoes instead. + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3354918914/DropdownMenus | Migration Guide} + */ export function ActionsDropdown(props: Readonly<ActionsDropdownProps>) { const { children, buttonSize, ariaLabel, toggleClassName, ...dropdownProps } = props; diff --git a/server/sonar-web/design-system/src/components/DropdownMenu.tsx b/server/sonar-web/design-system/src/components/DropdownMenu.tsx index 335f28f434e..c8027c1fc24 100644 --- a/server/sonar-web/design-system/src/components/DropdownMenu.tsx +++ b/server/sonar-web/design-system/src/components/DropdownMenu.tsx @@ -39,6 +39,9 @@ interface Props extends React.HtmlHTMLAttributes<HTMLMenuElement> { size?: InputSizeKeys; } +/** @deprecated Use DropdownMenu.Root and other DropdownMenu.* elements from Echoes instead. + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3354918914/DropdownMenus | Migration Guide} + */ export function DropdownMenu({ children, className, @@ -75,6 +78,9 @@ type ItemLinkProps = Omit<ListItemProps, 'innerRef'> & innerRef?: React.Ref<HTMLAnchorElement>; }; +/** @deprecated Use DropdownMenu.Root and other DropdownMenu.* elements from Echoes instead. + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3354918914/DropdownMenus | Migration Guide} + */ export function ItemLink(props: ItemLinkProps) { const { children, @@ -111,6 +117,9 @@ interface ItemNavLinkProps extends ItemLinkProps { end?: boolean; } +/** @deprecated Use DropdownMenu.Root and other DropdownMenu.* elements from Echoes instead. + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3354918914/DropdownMenus | Migration Guide} + */ export function ItemNavLink(props: ItemNavLinkProps) { const { children, className, disabled, end, icon, onClick, selected, innerRef, to, ...liProps } = props; @@ -138,6 +147,9 @@ interface ItemButtonProps extends ListItemProps { onClick: React.MouseEventHandler<HTMLButtonElement>; } +/** @deprecated Use DropdownMenu.Root and other DropdownMenu.* elements from Echoes instead. + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3354918914/DropdownMenus | Migration Guide} + */ export const ItemButton = forwardRef( (props: ItemButtonProps, ref: ForwardedRef<HTMLButtonElement>) => { const { children, className, disabled, icon, innerRef, onClick, selected, ...liProps } = props; @@ -258,6 +270,9 @@ export const ItemHeaderHighlight = styled.span` font-weight: 600; `; +/** @deprecated Use DropdownMenu.Root and other DropdownMenu.* elements from Echoes instead. + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3354918914/DropdownMenus | Migration Guide} + */ export const ItemHeader = styled.li` background-color: ${themeColor('dropdownMenuHeader')}; color: ${themeContrast('dropdownMenuHeader')}; @@ -266,6 +281,9 @@ export const ItemHeader = styled.li` `; ItemHeader.defaultProps = { className: 'dropdown-menu-header', role: 'menuitem' }; +/** @deprecated Use DropdownMenu.Root and other DropdownMenu.* elements from Echoes instead. + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3354918914/DropdownMenus | Migration Guide} + */ export const ItemDivider = styled.li` height: 1px; background-color: ${themeColor('popupBorder')}; diff --git a/server/sonar-web/design-system/src/components/DropdownToggler.tsx b/server/sonar-web/design-system/src/components/DropdownToggler.tsx index 10d959b7128..c41ea91ab8b 100644 --- a/server/sonar-web/design-system/src/components/DropdownToggler.tsx +++ b/server/sonar-web/design-system/src/components/DropdownToggler.tsx @@ -31,6 +31,9 @@ interface Props extends PopupProps { withFocusOutHandler?: boolean; } +/** @deprecated Use DropdownMenu.Root and other DropdownMenu.* elements from Echoes instead. + * See the {@link https://xtranet-sonarsource.atlassian.net/wiki/spaces/Platform/pages/3354918914/DropdownMenus | Migration Guide} + */ export function DropdownToggler(props: Props) { const { children, diff --git a/server/sonar-web/design-system/src/components/MainMenuItem.tsx b/server/sonar-web/design-system/src/components/MainMenuItem.tsx index cef7db8ed9e..c2f33f554bf 100644 --- a/server/sonar-web/design-system/src/components/MainMenuItem.tsx +++ b/server/sonar-web/design-system/src/components/MainMenuItem.tsx @@ -49,10 +49,14 @@ export const MainMenuItem = styled.li` } &:hover, - &.hover, - &[aria-expanded='true'] { + &.hover { border-bottom: ${themeBorder('active', 'menuBorder', 1)}; color: ${themeContrast('mainBarHover')}; } } + + &[aria-expanded='true'] a { + border-bottom: ${themeBorder('active', 'menuBorder', 1)}; + color: ${themeContrast('mainBarHover')}; + } `; diff --git a/server/sonar-web/design-system/src/components/NavBarTabs.tsx b/server/sonar-web/design-system/src/components/NavBarTabs.tsx index 590cb913605..7d2aecf4447 100644 --- a/server/sonar-web/design-system/src/components/NavBarTabs.tsx +++ b/server/sonar-web/design-system/src/components/NavBarTabs.tsx @@ -17,9 +17,10 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ + import styled from '@emotion/styled'; import classNames from 'classnames'; -import React from 'react'; +import React, { forwardRef } from 'react'; import tw, { theme } from 'twin.macro'; import { themeBorder, themeColor, themeContrast } from '../helpers/theme'; import { isDefined } from '../helpers/types'; @@ -48,29 +49,36 @@ interface NavBarTabLinkProps extends Omit<NavLinkProps, 'children'> { withChevron?: boolean; } -export function NavBarTabLink(props: NavBarTabLinkProps) { - const { active, children, className, text, withChevron = false, ...linkProps } = props; - return ( - <NavBarTabLinkWrapper> - <NavLink - className={({ isActive }) => - classNames( - 'sw-flex sw-items-center', - { active: isDefined(active) ? active : isActive }, - className, - ) - } - {...linkProps} - > - <span className="sw-inline-block sw-text-center" data-text={text}> - {text} - </span> - {children} - {withChevron && <ChevronDownIcon className="sw-ml-1" />} - </NavLink> - </NavBarTabLinkWrapper> - ); -} +export const NavBarTabLink = forwardRef<HTMLAnchorElement, NavBarTabLinkProps>( + (props: NavBarTabLinkProps, ref) => { + const { active, children, className, text, withChevron = false, ...linkProps } = props; + return ( + <NavBarTabLinkWrapper> + <NavLink + className={({ isActive }) => + classNames( + 'sw-flex sw-items-center', + { active: isDefined(active) ? active : isActive }, + className, + ) + } + ref={ref} + {...linkProps} + > + <span className="sw-inline-block sw-text-center" data-text={text}> + {text} + </span> + + {children} + + {withChevron && <ChevronDownIcon className="sw-ml-1" />} + </NavLink> + </NavBarTabLinkWrapper> + ); + }, +); + +NavBarTabLink.displayName = 'NavBarTabLink'; export function DisabledTabLink(props: { label: string; overlay: React.ReactNode }) { return ( @@ -102,11 +110,13 @@ const NavBarTabLinkWrapper = styled.li` & > a.active, & > a:active, & > a:hover, - & > a:focus { + & > a:focus, + & > a[aria-expanded='true'] { border-bottom-color: ${themeColor('tabBorder')}; } & > a.active > span[data-text], + & > a[aria-expanded='true'] > span[data-text], & > a:active > span { ${tw`sw-body-md-highlight`}; } |