Use J and K keys to move focus. @@ -289,8 +298,10 @@ export const OverlayPropsOverrides = () => { role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay', + sx: {minWidth: '320px'}, }} focusZoneSettings={{disabled: true}} + preventOverflow={false} >
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx index 84ec0727c24..f214b8c1410 100644 --- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx +++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx @@ -15,9 +15,9 @@ export default { } as Meta const hoverCard = ( - + - + Follow @@ -53,8 +53,9 @@ export const Default = () => { onOpen={() => setOpen(true)} onClose={() => setOpen(false)} renderAnchor={props => Button} - overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}} + overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay', sx: {minWidth: '320px'}}} focusZoneSettings={{disabled: true}} + preventOverflow={false} > {hoverCard} @@ -83,9 +84,11 @@ export const Playground = (args: Args) => { role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay', + sx: {minWidth: '320px'}, }} side={args.side} focusZoneSettings={{disabled: true}} + preventOverflow={false} > {hoverCard} diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx index bfc08cf041a..e046e301938 100644 --- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -84,6 +84,11 @@ interface AnchoredOverlayBaseProps extends Pick { const anchorRef = useProvidedRefOrCreate(externalAnchorRef) const [overlayRef, updateOverlayRef] = useRenderForcingRef() @@ -198,7 +204,7 @@ export const AnchoredOverlay: React.FC {children} diff --git a/packages/react/src/Autocomplete/Autocomplete.docs.json b/packages/react/src/Autocomplete/Autocomplete.docs.json index ff776c4ab01..94b13ca91e6 100644 --- a/packages/react/src/Autocomplete/Autocomplete.docs.json +++ b/packages/react/src/Autocomplete/Autocomplete.docs.json @@ -3,12 +3,52 @@ "name": "Autocomplete", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-autocomplete--default" + }, + { + "id": "components-autocomplete-features--with-token-input" + }, + { + "id": "components-autocomplete-features--add-new-item" + }, + { + "id": "components-autocomplete-features--custom-search-filter-fn" + }, + { + "id": "components-autocomplete-features--custom-sort-after-menu-close" + }, + { + "id": "components-autocomplete-features--with-callback-when-overlay-open-state-changes" + }, + { + "id": "components-autocomplete-features--async-loading-of-items" + }, + { + "id": "components-autocomplete-features--rendering-the-menu-outside-an-overlay" + }, + { + "id": "components-autocomplete-features--custom-overlay-menu-anchor" + }, + { + "id": "components-autocomplete-features--in-overlay-with-custom-scroll-container-ref" + }, + { + "id": "components-autocomplete-features--in-a-dialog" + } + ], "importPath": "@primer/react", "props": [ { "name": "children", "type": "React.ReactNode" + }, + { + "name": "id", + "type": "string", + "description": "May be used to customize how the ID is set on the text input to be used by ARIA attributes on related elements.", + "defaultValue": "" } ], "subcomponents": [ @@ -68,7 +108,7 @@ { "name": "selectedItemIds", "required": true, - "type": "(string | number)[]", + "type": "string[]", "description": "The IDs of the selected items" }, { diff --git a/packages/react/src/Avatar/Avatar.docs.json b/packages/react/src/Avatar/Avatar.docs.json index ca2581332dc..e678fec6eb5 100644 --- a/packages/react/src/Avatar/Avatar.docs.json +++ b/packages/react/src/Avatar/Avatar.docs.json @@ -3,7 +3,23 @@ "name": "Avatar", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-avatar--default" + }, + { + "id": "components-avatar-features--square" + }, + { + "id": "components-avatar-features--square-sx-prop" + }, + { + "id": "components-avatar-features--size" + }, + { + "id": "components-avatar-features--size-responsive" + } + ], "importPath": "@primer/react", "props": [ { @@ -24,6 +40,13 @@ "defaultValue": "false", "description": "If true, the avatar will be square instead of circular." }, + { + "name": "src", + "type": "string", + "required": false, + "description": "URL of the avatar image.", + "defaultValue": "" + }, { "name": "sx", "type": "SystemStyleObject" diff --git a/packages/react/src/Avatar/Avatar.features.stories.tsx b/packages/react/src/Avatar/Avatar.features.stories.tsx index dc5ee4b0636..2c448438db4 100644 --- a/packages/react/src/Avatar/Avatar.features.stories.tsx +++ b/packages/react/src/Avatar/Avatar.features.stories.tsx @@ -21,18 +21,18 @@ export const SquareSxProp = () => ( export const Size = () => ( - - - - - - - - - - - - + + + + + + + + + + + + ) @@ -41,52 +41,52 @@ export const SizeResponsive = () => ( ) diff --git a/packages/react/src/Avatar/Avatar.stories.tsx b/packages/react/src/Avatar/Avatar.stories.tsx index 476c118a998..c5b07cc1403 100644 --- a/packages/react/src/Avatar/Avatar.stories.tsx +++ b/packages/react/src/Avatar/Avatar.stories.tsx @@ -16,14 +16,14 @@ type Args = { sizeAtWide?: number } & Omit -export const Default = () => +export const Default = () => export const Playground: StoryFn = args => { return ( ) @@ -63,12 +63,6 @@ Playground.argTypes = { disable: true, }, }, - ref: { - controls: false, - table: { - disable: true, - }, - }, sx: { controls: false, table: { diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx index 4f5f066a147..b8120519df8 100644 --- a/packages/react/src/Avatar/Avatar.tsx +++ b/packages/react/src/Avatar/Avatar.tsx @@ -1,21 +1,15 @@ import {clsx} from 'clsx' import React from 'react' import Box from '../Box' -import styled from 'styled-components' -import {get} from '../constants' -import type {BetterCssProperties, BetterSystemStyleObject, SxProp} from '../sx' -import sx, {merge} from '../sx' -import type {ComponentProps} from '../utils/types' +import type {SxProp} from '../sx' import type {ResponsiveValue} from '../hooks/useResponsiveValue' import {isResponsiveValue} from '../hooks/useResponsiveValue' -import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations' import {defaultSxProp} from '../utils/defaultSxProp' import classes from './Avatar.module.css' -import {useFeatureFlag} from '../FeatureFlags' export const DEFAULT_AVATAR_SIZE = 20 -type StyledAvatarProps = { +export type AvatarProps = { /** Sets the width and height of the avatar. */ size?: number | ResponsiveValue /** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */ @@ -24,99 +18,56 @@ type StyledAvatarProps = { src: string /** Provide alt text when the Avatar is used without the user's name next to it. */ alt?: string -} & SxProp - -const StyledAvatar = styled.img.attrs(props => ({ - height: props.size, - width: props.size, -}))` - display: inline-block; - overflow: hidden; // Ensure page layout in Firefox should images fail to load - line-height: ${get('lineHeights.condensedUltra')}; - vertical-align: middle; - // If the avatar is square and size is greater than 24px (at any breakpoint), border-radius will be 6px. Otherwise, it will be 4px. - border-radius: ${props => (props.square ? 'clamp(4px, var(--avatar-size) - 24px, 6px)' : '50%')}; - box-shadow: 0 0 0 1px ${get('colors.avatar.border')}; - height: var(--avatar-size); - width: var(--avatar-size); - ${sx} -` - -export type AvatarProps = ComponentProps + /** Additional class name. */ + className?: string +} & SxProp & + React.ComponentPropsWithoutRef<'img'> const Avatar = React.forwardRef(function Avatar( {alt = '', size = DEFAULT_AVATAR_SIZE, square = false, sx: sxProp = defaultSxProp, className, ...rest}, ref, ) { - const enabled = useFeatureFlag('primer_react_css_modules_ga') const isResponsive = isResponsiveValue(size) - const avatarSx = isResponsive - ? merge( - getBreakpointDeclarations( - size, - '--avatar-size' as keyof React.CSSProperties, - value => `${value || DEFAULT_AVATAR_SIZE}px`, - ), - sxProp as SxProp, - ) - : merge({'--avatar-size': `${size}px`} as React.CSSProperties, sxProp as SxProp) - - if (enabled) { - const cssSizeVars = {} as Record + const cssSizeVars = {} as Record - if (isResponsive) { - for (const [key, value] of Object.entries(size)) { - cssSizeVars[`--avatarSize-${key}`] = `${value}px` - } - } else { - cssSizeVars['--avatarSize-regular'] = `${size}px` - } - - if (sxProp !== defaultSxProp) { - return ( - - ) + if (isResponsive) { + for (const [key, value] of Object.entries(size)) { + cssSizeVars[`--avatarSize-${key}`] = `${value}px` } + } else { + cssSizeVars['--avatarSize-regular'] = `${size}px` + } + if (sxProp !== defaultSxProp) { return ( - ) } return ( - ) diff --git a/packages/react/src/AvatarPair/AvatarPair.docs.json b/packages/react/src/AvatarPair/AvatarPair.docs.json index 6185196dff3..176ec3916df 100644 --- a/packages/react/src/AvatarPair/AvatarPair.docs.json +++ b/packages/react/src/AvatarPair/AvatarPair.docs.json @@ -3,7 +3,17 @@ "name": "AvatarPair", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-avatarpair--default" + }, + { + "id": "components-avatarpair-features--parent-circle" + }, + { + "id": "components-avatarpair-features--parent-square" + } + ], "importPath": "@primer/react", "props": [ { diff --git a/packages/react/src/AvatarPair/AvatarPair.features.stories.tsx b/packages/react/src/AvatarPair/AvatarPair.features.stories.tsx index 7129a28c6fd..1b0fadfdff2 100644 --- a/packages/react/src/AvatarPair/AvatarPair.features.stories.tsx +++ b/packages/react/src/AvatarPair/AvatarPair.features.stories.tsx @@ -10,7 +10,7 @@ export default { export const ParentCircle = () => ( - + ) @@ -18,6 +18,6 @@ export const ParentCircle = () => ( export const ParentSquare = () => ( - + ) diff --git a/packages/react/src/AvatarPair/AvatarPair.stories.tsx b/packages/react/src/AvatarPair/AvatarPair.stories.tsx index 217b417d297..3184e529f78 100644 --- a/packages/react/src/AvatarPair/AvatarPair.stories.tsx +++ b/packages/react/src/AvatarPair/AvatarPair.stories.tsx @@ -10,7 +10,7 @@ export default { export const Default = () => ( - + ) diff --git a/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx b/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx new file mode 100644 index 00000000000..ed132a155ed --- /dev/null +++ b/packages/react/src/AvatarStack/AvatarStack.dev.stories.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import type {Meta} from '@storybook/react' +import AvatarStack from './AvatarStack' +import Avatar from '../Avatar' +import Link from '../Link' + +export default { + title: 'Components/AvatarStack/Dev', + component: AvatarStack, +} as Meta + +export const SxProp = () => ( + + + + + + +) + +export const WithLinkWrappers = () => ( + + + + + + + + + + + + + + +) diff --git a/packages/react/src/AvatarStack/AvatarStack.docs.json b/packages/react/src/AvatarStack/AvatarStack.docs.json index 3f38da7c4eb..286e889c4d8 100644 --- a/packages/react/src/AvatarStack/AvatarStack.docs.json +++ b/packages/react/src/AvatarStack/AvatarStack.docs.json @@ -3,9 +3,43 @@ "name": "AvatarStack", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-avatarstack--default" + }, + { + "id": "components-avatarstack-features--align-left" + }, + { + "id": "components-avatarstack-features--align-right" + }, + { + "id": "components-avatarstack-features--disable-expand-on-hover" + }, + { + "id": "components-avatarstack-features--custom-size-on-parent" + }, + { + "id": "components-avatarstack-features--custom-size-on-parent-responsive" + }, + { + "id": "components-avatarstack-features--custom-size-on-children" + }, + { + "id": "components-avatarstack-features--custom-size-on-children-responsive" + }, + { + "id": "components-avatarstack-features--with-single-avatar" + } + ], "importPath": "@primer/react", "props": [ + { + "name": "children", + "type": "ReactNode", + "description": "A set of Avatar components to stack", + "defaultValue": "" + }, { "name": "alignRight", "type": "boolean", @@ -24,6 +58,12 @@ "defaultValue": "20", "description": "The size of the avatar children in pixels." }, + { + "name": "className", + "type": "string", + "description": "Class name for custom styling.", + "defaultValue": "" + }, { "name": "sx", "type": "SystemStyleObject" diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css new file mode 100644 index 00000000000..ea13c99ecae --- /dev/null +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -0,0 +1,190 @@ +/* stylelint-disable max-nesting-depth */ +/* stylelint-disable selector-max-specificity */ +.AvatarStack { + --avatar-border-width: 1px; + --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55); + --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85); + + position: relative; + display: flex; + min-width: var(--avatar-stack-size); + height: var(--avatar-stack-size); + + &:where([data-responsive]) { + @media screen and (--viewportRange-narrow) { + --avatar-stack-size: var(--stackSize-narrow); + } + + @media screen and (--viewportRange-regular) { + --avatar-stack-size: var(--stackSize-regular); + } + + @media screen and (--viewportRange-wide) { + --avatar-stack-size: var(--stackSize-wide); + } + } + + &:where([data-avatar-count='1']) { + .AvatarItem { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor); + } + } + + &:where([data-avatar-count='2']) { + /* this calc explained: */ + + /* 1. avatar size + the non-overlapping part of the second avatar */ + + /* 2. + the border widths of the first two avatars */ + min-width: calc( + var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + var(--avatar-border-width) + ); + } + + &:where([data-avatar-count='3']) { + /* this calc explained: */ + + /* 1. avatar size + the non-overlapping part of the second avatar */ + + /* 2. + the non-overlapping part of the third avatar */ + min-width: calc( + var(--avatar-stack-size) + + calc( + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + calc(var(--avatar-stack-size) + var(--avatar-three-margin)) + ) + ); + } + + &:where([data-avatar-count='3+']) { + /* this calc explained: */ + + /* 1. avatar size + the non-overlapping part of the second avatar */ + + /* 2. + the non-overlapping part of the third and fourth avatar */ + min-width: calc( + var(--avatar-stack-size) + + calc( + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + calc(var(--avatar-stack-size) + var(--avatar-three-margin)) * 2 + ) + ); + } + + &:where([data-align-right]) { + justify-content: flex-end; + + .AvatarItem { + margin-left: 0 !important; + + &:first-child { + margin-right: 0; + } + + &:nth-child(n + 2) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--avatar-two-margin); + } + + &:nth-child(n + 3) { + /* stylelint-disable-next-line primer/spacing */ + margin-right: var(--avatar-three-margin); + } + } + + .AvatarStackBody { + flex-direction: row-reverse; + + &:not([data-disable-expand]):hover, + &:not([data-disable-expand]):focus-within { + .AvatarItem { + margin-right: var(--base-size-4) !important; + margin-left: 0 !important; + + &:first-child { + margin-right: 0 !important; + } + } + } + } + } +} + +.AvatarStackBody { + position: absolute; + display: flex; + + &:where([data-disable-expand]) { + position: relative; + } +} + +.AvatarItem { + --avatarSize-regular: var(--avatar-stack-size); + + position: relative; + display: flex; + width: var(--avatar-stack-size); + height: var(--avatar-stack-size); + overflow: hidden; + flex-shrink: 0; + + &:is(img) { + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default); + } + + &:first-child { + z-index: 10; + margin-left: 0; + } + + &:nth-child(n + 2) { + z-index: 9; + /* stylelint-disable-next-line primer/spacing */ + margin-left: var(--avatar-two-margin); + } + + &:nth-child(n + 3) { + z-index: 8; + /* stylelint-disable-next-line primer/spacing */ + margin-left: var(--avatar-three-margin); + opacity: 0.55; + } + + &:nth-child(n + 4) { + z-index: 7; + opacity: 0.4; + } + + &:nth-child(n + 5) { + z-index: 6; + opacity: 0.25; + } + + &:nth-child(n + 6) { + visibility: hidden; + opacity: 0; + } +} + +.AvatarStackBody:not([data-disable-expand]):hover, +.AvatarStackBody:not([data-disable-expand]):focus-within { + width: auto; + + .AvatarItem { + margin-left: var(--base-size-4); + visibility: visible; + opacity: 1; + transition: + margin 0.2s ease-in-out, + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out, + box-shadow 0.1s ease-in-out; + + &:first-child { + margin-left: 0; + } + } +} diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index ccd87f1e24f..78856581e62 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -12,6 +12,9 @@ import {isResponsiveValue} from '../hooks/useResponsiveValue' import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations' import {defaultSxProp} from '../utils/defaultSxProp' import type {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys' +import classes from './AvatarStack.module.css' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' import {hasInteractiveNodes} from '../internal/utils/hasInteractiveNodes' import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles' @@ -19,170 +22,182 @@ type StyledAvatarStackWrapperProps = { count?: number } & SxProp -const AvatarStackWrapper = styled.span` - --avatar-border-width: 1px; - --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55); - --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85); +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' - display: flex; - position: relative; - height: var(--avatar-stack-size); - min-width: var(--avatar-stack-size); +const AvatarStackWrapper = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'span', + styled.span` + --avatar-border-width: 1px; + --avatar-two-margin: calc(var(--avatar-stack-size) * -0.55); + --avatar-three-margin: calc(var(--avatar-stack-size) * -0.85); - .pc-AvatarStackBody { display: flex; - position: absolute; - - ${getGlobalFocusStyles('1px')} - } - - .pc-AvatarItem { - --avatar-size: var(--avatar-stack-size); - flex-shrink: 0; - height: var(--avatar-stack-size); - width: var(--avatar-stack-size); - box-shadow: 0 0 0 var(--avatar-border-width) - ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; position: relative; - overflow: hidden; + height: var(--avatar-stack-size); + min-width: var(--avatar-stack-size); - &:first-child { - margin-left: 0; - z-index: 10; - } + .pc-AvatarStackBody { + display: flex; + position: absolute; - &:nth-child(n + 2) { - margin-left: var(--avatar-two-margin); - z-index: 9; + ${getGlobalFocusStyles('1px')} } - &:nth-child(n + 3) { - margin-left: var(--avatar-three-margin); - opacity: ${100 - 3 * 15}%; - z-index: 8; - } + .pc-AvatarItem { + --avatar-size: var(--avatar-stack-size); + flex-shrink: 0; + height: var(--avatar-stack-size); + width: var(--avatar-stack-size); + position: relative; + overflow: hidden; + display: flex; + + &:is(img) { + box-shadow: 0 0 0 var(--avatar-border-width) + ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))}; + } - &:nth-child(n + 4) { - opacity: ${100 - 4 * 15}%; - z-index: 7; - } + &:first-child { + margin-left: 0; + z-index: 10; + } - &:nth-child(n + 5) { - opacity: ${100 - 5 * 15}%; - z-index: 6; - } + &:nth-child(n + 2) { + margin-left: var(--avatar-two-margin); + z-index: 9; + } + + &:nth-child(n + 3) { + margin-left: var(--avatar-three-margin); + opacity: ${100 - 3 * 15}%; + z-index: 8; + } - &:nth-child(n + 6) { - opacity: 0; - visibility: hidden; + &:nth-child(n + 4) { + opacity: ${100 - 4 * 15}%; + z-index: 7; + } + + &:nth-child(n + 5) { + opacity: ${100 - 5 * 15}%; + z-index: 6; + } + + &:nth-child(n + 6) { + opacity: 0; + visibility: hidden; + } } - } - &.pc-AvatarStack--two { - // this calc explained: - // 1. avatar size + the non-overlapping part of the second avatar - // 2. + the border widths of the first two avatars - min-width: calc( - var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + var(--avatar-border-width) - ); - } + &.pc-AvatarStack--two { + // this calc explained: + // 1. avatar size + the non-overlapping part of the second avatar + // 2. + the border widths of the first two avatars + min-width: calc( + var(--avatar-stack-size) + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + var(--avatar-border-width) + ); + } - &.pc-AvatarStack--three { - // this calc explained: - // 1. avatar size + the non-overlapping part of the second avatar - // 2. + the non-overlapping part of the third avatar - min-width: calc( - var(--avatar-stack-size) + - calc( - calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + - calc(var(--avatar-stack-size) + var(--avatar-three-margin)) - ) - ); - } + &.pc-AvatarStack--three { + // this calc explained: + // 1. avatar size + the non-overlapping part of the second avatar + // 2. + the non-overlapping part of the third avatar + min-width: calc( + var(--avatar-stack-size) + + calc( + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + calc(var(--avatar-stack-size) + var(--avatar-three-margin)) + ) + ); + } - &.pc-AvatarStack--three-plus { - // this calc explained: - // 1. avatar size + the non-overlapping part of the second avatar - // 2. + the non-overlapping part of the third and fourth avatar - min-width: calc( - var(--avatar-stack-size) + - calc( - calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + - calc(var(--avatar-stack-size) + var(--avatar-three-margin)) * 2 - ) - ); - } + &.pc-AvatarStack--three-plus { + // this calc explained: + // 1. avatar size + the non-overlapping part of the second avatar + // 2. + the non-overlapping part of the third and fourth avatar + min-width: calc( + var(--avatar-stack-size) + + calc( + calc(var(--avatar-stack-size) + var(--avatar-two-margin)) + + calc(var(--avatar-stack-size) + var(--avatar-three-margin)) * 2 + ) + ); + } - &.pc-AvatarStack--right { - justify-content: flex-end; - .pc-AvatarItem { - margin-left: 0 !important; + &.pc-AvatarStack--right { + justify-content: flex-end; + .pc-AvatarItem { + margin-left: 0 !important; - &:first-child { - margin-right: 0; - } + &:first-child { + margin-right: 0; + } - &:nth-child(n + 2) { - margin-right: var(--avatar-two-margin); - } + &:nth-child(n + 2) { + margin-right: var(--avatar-two-margin); + } - &:nth-child(n + 3) { - margin-right: var(--avatar-three-margin); + &:nth-child(n + 3) { + margin-right: var(--avatar-three-margin); + } } - } - .pc-AvatarStackBody { - flex-direction: row-reverse; + .pc-AvatarStackBody { + flex-direction: row-reverse; - &:not(.pc-AvatarStack--disableExpand):hover, - &:not(.pc-AvatarStack--disableExpand):focus-within { - .pc-AvatarItem { - margin-right: ${get('space.1')}!important; - margin-left: 0 !important; + &:not(.pc-AvatarStack--disableExpand):hover, + &:not(.pc-AvatarStack--disableExpand):focus-within { + .pc-AvatarItem { + margin-right: ${get('space.1')}!important; + margin-left: 0 !important; - &:first-child { - margin-right: 0 !important; + &:first-child { + margin-right: 0 !important; + } } } } } - } - .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover, - .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within { - width: auto; + .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover, + .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within { + width: auto; - .pc-AvatarItem { - margin-left: ${get('space.1')}; - opacity: 100%; - visibility: visible; - ${props => (props.count === 1 ? '' : `box-shadow: inset 0 0 0 4px ${get('colors.canvas.default')};`)} - transition: + .pc-AvatarItem { + margin-left: ${get('space.1')}; + opacity: 100%; + visibility: visible; + ${props => (props.count === 1 ? '' : `box-shadow: inset 0 0 0 4px ${get('colors.canvas.default')};`)} + transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, box-shadow 0.1s ease-in-out; - ${getGlobalFocusStyles('1px')} + ${getGlobalFocusStyles('1px')} - &:first-child { - margin-left: 0; + &:first-child { + margin-left: 0; + } } } - } - .pc-AvatarStack--disableExpand { - position: relative; - } + .pc-AvatarStack--disableExpand { + position: relative; + } - ${sx}; -` -const transformChildren = (children: React.ReactNode) => { + ${sx}; + `, +) + +const transformChildren = (children: React.ReactNode, enabled: boolean) => { return React.Children.map(children, child => { if (!React.isValidElement(child)) return child return React.cloneElement(child, { ...child.props, - className: clsx(child.props.className, 'pc-AvatarItem'), + className: clsx(child.props.className, 'pc-AvatarItem', {[classes.AvatarItem]: enabled}), }) }) } @@ -195,6 +210,44 @@ export type AvatarStackProps = { children: React.ReactNode } & SxProp +const AvatarStackBody = ({ + disableExpand, + hasInteractiveChildren, + stackContainer, + children, +}: { + disableExpand: boolean | undefined + hasInteractiveChildren: boolean | undefined + stackContainer: React.RefObject +} & React.ComponentPropsWithoutRef<'div'>) => { + const bodyClassNames = clsx('pc-AvatarStackBody', { + 'pc-AvatarStack--disableExpand': disableExpand, + }) + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + + if (enabled) { + return ( + + {children} + + ) + } + return ( + + {children} + + ) +} + const AvatarStack = ({ children, alignRight, @@ -203,6 +256,7 @@ const AvatarStack = ({ className, sx: sxProp = defaultSxProp, }: AvatarStackProps) => { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) const [hasInteractiveChildren, setHasInteractiveChildren] = useState(false) const stackContainer = useRef(null) @@ -216,9 +270,6 @@ const AvatarStack = ({ }, className, ) - const bodyClassNames = clsx('pc-AvatarStackBody', { - 'pc-AvatarStack--disableExpand': disableExpand, - }) const getAvatarChildSizes = () => { const avatarSizeMap: Record = { @@ -259,6 +310,7 @@ const AvatarStack = ({ }, ) } + const childSizes = getAvatarChildSizes() useEffect(() => { if (stackContainer.current) { @@ -282,8 +334,16 @@ const AvatarStack = ({ const getResponsiveAvatarSizeStyles = () => { // if there is no size set on the AvatarStack, use the `size` props of the Avatar children to set the `--avatar-stack-size` CSS variable if (!size) { + if (enabled) { + return { + '--stackSize-narrow': `${childSizes.narrow}px`, + '--stackSize-regular': `${childSizes.regular}px`, + '--stackSize-wide': `${childSizes.wide}px`, + } + } + return getBreakpointDeclarations( - getAvatarChildSizes(), + childSizes, '--avatar-stack-size' as keyof React.CSSProperties, value => `${value}px`, ) @@ -291,6 +351,14 @@ const AvatarStack = ({ // if the `size` prop is set and responsive, set the `--avatar-stack-size` CSS variable for each viewport if (isResponsiveValue(size)) { + if (enabled) { + return { + '--stackSize-narrow': `${size.narrow || DEFAULT_AVATAR_SIZE}px`, + '--stackSize-regular': `${size.regular || DEFAULT_AVATAR_SIZE}px`, + '--stackSize-wide': `${size.wide || DEFAULT_AVATAR_SIZE}px`, + } + } + return getBreakpointDeclarations( size, '--avatar-stack-size' as keyof React.CSSProperties, @@ -303,20 +371,28 @@ const AvatarStack = ({ } const avatarStackSx = merge( - getResponsiveAvatarSizeStyles(), + !enabled && getResponsiveAvatarSizeStyles(), sxProp as SxProp, ) return ( - - 3 ? '3+' : count) : undefined} + data-align-right={enabled && alignRight ? '' : undefined} + data-responsive={enabled && (!size || isResponsiveValue(size)) ? '' : undefined} + className={clsx(wrapperClassNames, {[classes.AvatarStack]: enabled})} + style={enabled ? getResponsiveAvatarSizeStyles() : undefined} + sx={avatarStackSx} + > + {' '} - {transformChildren(children)} - + {transformChildren(children, enabled)} + ) } diff --git a/packages/react/src/Banner/Banner.docs.json b/packages/react/src/Banner/Banner.docs.json index 9451a4dbef5..9a22b629a39 100644 --- a/packages/react/src/Banner/Banner.docs.json +++ b/packages/react/src/Banner/Banner.docs.json @@ -1,10 +1,53 @@ { "id": "banner", "name": "Banner", - "status": "draft", + "status": "alpha", "a11yReviewed": true, "importPath": "@primer/react/experimental", - "stories": [], + "stories": [ + { + "id": "experimental-components-banner--default" + }, + { + "id": "experimental-components-banner-features--critical" + }, + { + "id": "experimental-components-banner-features--info" + }, + { + "id": "experimental-components-banner-features--success" + }, + { + "id": "experimental-components-banner-features--upsell" + }, + { + "id": "experimental-components-banner-features--warning" + }, + { + "id": "experimental-components-banner-features--dismiss" + }, + { + "id": "experimental-components-banner-features--dismiss-with-actions" + }, + { + "id": "experimental-components-banner-features--with-hidden-title" + }, + { + "id": "experimental-components-banner-features--with-hidden-title-and-actions" + }, + { + "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-actions" + }, + { + "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-secondary-action" + }, + { + "id": "experimental-components-banner-features--with-actions" + }, + { + "id": "experimental-components-banner-features--custom-icon" + } + ], "props": [ { "name": "aria-label", @@ -69,15 +112,30 @@ }, { "name": "Banner.Description", - "props": [] + "props": [ + { + "name": "className", + "type": "string", + "description": "Class name(s) for custom styling.", + "defaultValue": "" + } + ] }, { "name": "Banner.PrimaryAction", - "props": [] + "props": [], + "passthrough": { + "element": "Button", + "url": "/react/Button" + } }, { "name": "Banner.SecondaryAction", - "props": [] + "props": [], + "passthrough": { + "element": "Button", + "url": "/react/Button" + } } ] } diff --git a/packages/react/src/Banner/Banner.test.tsx b/packages/react/src/Banner/Banner.test.tsx index 13fecdc6fb8..59975b0f63c 100644 --- a/packages/react/src/Banner/Banner.test.tsx +++ b/packages/react/src/Banner/Banner.test.tsx @@ -115,9 +115,9 @@ describe('Banner', () => { />, ) - expect(screen.getByRole('button', {name: 'test primary action'})).toBeInTheDocument() + expect(screen.queryAllByRole('button', {name: 'test primary action', hidden: true}).length).toBe(2) - await user.click(screen.getByRole('button', {name: 'test primary action'})) + await user.click(screen.queryAllByText('test primary action')[0]) expect(onClick).toHaveBeenCalledTimes(1) }) @@ -132,9 +132,9 @@ describe('Banner', () => { />, ) - expect(screen.getByRole('button', {name: 'test secondary action'})).toBeInTheDocument() + expect(screen.queryAllByRole('button', {name: 'test secondary action', hidden: true}).length).toBe(2) - await user.click(screen.getByRole('button', {name: 'test secondary action'})) + await user.click(screen.queryAllByText('test secondary action')[0]) expect(onClick).toHaveBeenCalledTimes(1) }) @@ -148,8 +148,8 @@ describe('Banner', () => { />, ) - expect(screen.getByRole('button', {name: 'test primary action'})).toBeInTheDocument() - expect(screen.getByRole('button', {name: 'test secondary action'})).toBeInTheDocument() + expect(screen.queryAllByRole('button', {name: 'test primary action', hidden: true}).length).toBe(2) + expect(screen.queryAllByRole('button', {name: 'test secondary action', hidden: true}).length).toBe(2) }) it('should call `onDismiss` when the dismiss button is activated', async () => { diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx index f33021d67d7..e1c7a1119e8 100644 --- a/packages/react/src/Banner/Banner.tsx +++ b/packages/react/src/Banner/Banner.tsx @@ -1,14 +1,10 @@ import {clsx} from 'clsx' import React, {forwardRef, useEffect} from 'react' -import styled from 'styled-components' import {AlertIcon, InfoIcon, StopIcon, CheckCircleIcon, XIcon} from '@primer/octicons-react' import {Button, IconButton, type ButtonProps} from '../Button' -import {get} from '../constants' import {VisuallyHidden} from '../VisuallyHidden' import {useMergedRefs} from '../internal/hooks/useMergedRefs' -import {useFeatureFlag} from '../FeatureFlags' import classes from './Banner.module.css' -import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' type BannerVariant = 'critical' | 'info' | 'success' | 'upsell' | 'warning' @@ -88,8 +84,6 @@ const labels: Record = { warning: 'Warning', } -const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff' - export const Banner = React.forwardRef(function Banner( { 'aria-label': label, @@ -111,7 +105,6 @@ export const Banner = React.forwardRef(function Banner const hasActions = primaryAction || secondaryAction const bannerRef = React.useRef(null) const ref = useMergedRefs(forwardRef, bannerRef) - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) const supportsCustomIcon = variant === 'info' || variant === 'upsell' if (__DEV__) { @@ -137,40 +130,19 @@ export const Banner = React.forwardRef(function Banner } return ( - - {!enabled ? : null} - - {icon && supportsCustomIcon ? icon : iconForVariant[variant]} - - - + {icon && supportsCustomIcon ? icon : iconForVariant[variant]} + + {title ? ( hideTitle ? ( @@ -189,221 +161,15 @@ export const Banner = React.forwardRef(function Banner ) : null} - + ) }) -const StyledBanner = toggleStyledComponent( - CSS_MODULES_FEATURE_FLAG, - /** - * For styling, it's important that the icons and the text have the same height - * for alignment to occur in multi-line scenarios. Currently, we use a - * line-height of `20px` so that means that the height of icons should match - * that value. - */ - 'div', - styled.div` - display: grid; - grid-template-columns: auto minmax(0, 1fr) auto; - align-items: start; - background-color: var(--banner-bgColor); - border: var(--borderWidth-thin, 1px) solid var(--banner-borderColor); - padding: var(--base-size-8, 0.5rem); - border-radius: var(--borderRadius-medium, ${get('radii.2')}); - - @supports (container-type: inline-size) { - container: banner / inline-size; - } - - &[data-variant='critical'] { - --banner-bgColor: ${get('colors.danger.subtle')}; - --banner-borderColor: ${get('colors.danger.muted')}; - --banner-icon-fgColor: ${get('colors.danger.fg')}; - } - - &[data-variant='info'] { - --banner-bgColor: ${get('colors.accent.subtle')}; - --banner-borderColor: ${get('colors.accent.muted')}; - --banner-icon-fgColor: ${get('colors.accent.fg')}; - } - - &[data-variant='success'] { - --banner-bgColor: ${get('colors.success.subtle')}; - --banner-borderColor: ${get('colors.success.muted')}; - --banner-icon-fgColor: ${get('colors.success.fg')}; - } - - &[data-variant='upsell'] { - --banner-bgColor: var(--bgColor-upsell-muted, ${get('colors.done.subtle')}); - --banner-borderColor: var(--borderColor-upsell-muted, ${get('colors.done.muted')}); - --banner-icon-fgColor: var(--fgColor-upsell-muted, ${get('colors.done.fg')}); - } - - &[data-variant='warning'] { - --banner-bgColor: ${get('colors.attention.subtle')}; - --banner-borderColor: ${get('colors.attention.muted')}; - --banner-icon-fgColor: ${get('colors.attention.fg')}; - } - - /* BannerIcon ------------------------------------------------------------- */ - - .BannerIcon { - display: grid; - place-items: center; - padding: var(--base-size-8, 0.5rem); - } - - .BannerIcon svg { - color: var(--banner-icon-fgColor); - fill: var(--banner-icon-fgColor); - /* 20px is the line box height of the trailing action buttons */ - height: var(--base-size-20, 1.25rem); - } - - &[data-title-hidden=''] .BannerIcon svg { - height: var(--base-size-16, 1rem); - } - - /* BannerContainer -------------------------------------------------------- */ - - .BannerContainer { - font-size: var(--text-body-size-medium, 0.875rem); - align-items: start; - line-height: var(--text-body-lineHeight-medium, calc(20 / 14)); - row-gap: var(--base-size-4, 0.25rem); - column-gap: var(--base-size-4, 0.25rem); - } - - & :where(.BannerContainer) { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - } - - &[data-dismissible]:not([data-title-hidden='']) .BannerContainer { - display: grid; - grid-template-columns: auto; - grid-template-rows: auto; - } - - /* BannerContent ---------------------------------------------------------- */ - - .BannerContent { - display: grid; - row-gap: var(--base-size-4, 0.25rem); - grid-column-start: 1; - margin-block: var(--base-size-8, 0.5rem); - } - - &[data-title-hidden=''] .BannerContent { - margin-block: var(--base-size-6, 0.375rem); - } - - @media screen and (min-width: 544px) { - .BannerContent { - flex: 1 1 0%; - } - } - - .BannerTitle { - margin: 0; - font-size: inherit; - font-weight: var(--base-text-weight-semibold, 600); - } - - /* BannerActions ---------------------------------------------------------- */ - .BannerActionsContainer { - display: flex; - column-gap: var(--base-size-12, 0.5rem); - align-items: center; - } - - .BannerActions :where([data-primary-action='trailing']) { - display: none; - } - - @media screen and (min-width: 544px) { - .BannerActions :where([data-primary-action='trailing']) { - display: flex; - } - - .BannerActions :where([data-primary-action='leading']) { - display: none; - } - } - - &[data-dismissible]:not([data-title-hidden]) .BannerActions { - margin-block-end: var(--base-size-6, 0.375rem); - } - - &[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='trailing'] { - display: none; - } - - &[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='leading'] { - display: flex; - } - - /* BannerDismiss ---------------------------------------------------------- */ - - .BannerDismiss { - display: grid; - place-items: center; - padding: var(--base-size-8, 0.5rem); - margin-inline-start: var(--base-size-4, 0.25rem); - } - - .BannerDismiss svg { - color: var(--banner-icon-fgColor); - } - `, -) - -const BannerContainerQuery = ` - @container banner (max-width: 500px) { - .BannerContainer { - display: grid; - grid-template-rows: auto auto; - } - - .BannerActions { - margin-block-end: var(--size-small, 0.375rem); - } - - .BannerActions [data-primary-action="trailing"] { - display: none; - } - - .BannerActions [data-primary-action="leading"] { - display: flex; - } - } - - @container banner (min-width: 500px) { - .BannerContainer { - display: grid; - grid-template-columns: auto auto; - } - - .BannerActions [data-primary-action="trailing"] { - display: flex; - min-height: var(--base-size-32, 2rem); - } - - .BannerActions [data-primary-action="leading"] { - display: none; - } - } -` - type HeadingElement = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' export type BannerTitleProps = { @@ -413,16 +179,8 @@ export type BannerTitleProps = { export function BannerTitle(props: BannerTitleProps) { const {as: Heading = 'h2', className, children, ...rest} = props - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) return ( - + {children} ) @@ -444,31 +202,13 @@ export type BannerActionsProps = { } export function BannerActions({primaryAction, secondaryAction}: BannerActionsProps) { - const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) return ( - - + + {secondaryAction ?? null} {primaryAction ?? null} - + {primaryAction ?? null} {secondaryAction ?? null} diff --git a/packages/react/src/BaseStyles.dev.stories.tsx b/packages/react/src/BaseStyles.dev.stories.tsx new file mode 100644 index 00000000000..d313f089009 --- /dev/null +++ b/packages/react/src/BaseStyles.dev.stories.tsx @@ -0,0 +1,11 @@ +import {BaseStyles} from '.' +import type {Meta} from '@storybook/react' +import React from 'react' +import type {ComponentProps} from './utils/types' + +export default { + title: 'Behaviors/BaseStyles/Dev', + component: BaseStyles, +} as Meta> + +export const Default = () => Hello diff --git a/packages/react/src/BaseStyles.module.css b/packages/react/src/BaseStyles.module.css new file mode 100644 index 00000000000..f1c0e87ec64 --- /dev/null +++ b/packages/react/src/BaseStyles.module.css @@ -0,0 +1,50 @@ +/* stylelint-disable selector-max-specificity */ +/* stylelint-disable selector-type-no-unknown */ + +/* -------------------------------- + * Global Styles + *--------------------------------- */ +* { + box-sizing: border-box; +} + +body { + margin: 0; +} + +table { + /* stylelint-disable-next-line primer/borders */ + border-collapse: collapse; +} + +[role='button']:focus:not(:focus-visible):not(.focus-visible), +[role='tabpanel'][tabindex='0']:focus:not(:focus-visible):not(.focus-visible), +button:focus:not(:focus-visible):not(.focus-visible), +summary:focus:not(:focus-visible):not(.focus-visible), +a:focus:not(:focus-visible):not(.focus-visible) { + outline: none; + box-shadow: none; +} + +[tabindex='0']:focus:not(:focus-visible):not(.focus-visible), +details-dialog:focus:not(:focus-visible):not(.focus-visible) { + outline: none; +} + +/* -------------------------------------------------------------------------- */ + +.BaseStyles { + /* Global styles for light mode */ + &:has([data-color-mode='light']) { + input & { + color-scheme: light; + } + } + + /* Global styles for dark mode */ + &:has([data-color-mode='dark']) { + input & { + color-scheme: dark; + } + } +} diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx index 351c1cb39f2..2a5ffb24347 100644 --- a/packages/react/src/BaseStyles.tsx +++ b/packages/react/src/BaseStyles.tsx @@ -1,13 +1,19 @@ import React from 'react' +import {clsx} from 'clsx' import styled, {createGlobalStyle} from 'styled-components' +import type {ComponentProps} from './utils/types' import type {SystemCommonProps, SystemTypographyProps} from './constants' import {COMMON, TYPOGRAPHY} from './constants' import {useTheme} from './ThemeProvider' -import type {ComponentProps} from './utils/types' +import {useFeatureFlag} from './FeatureFlags' +import {toggleStyledComponent} from './internal/utils/toggleStyledComponent' +import classes from './BaseStyles.module.css' // load polyfill for :focus-visible import 'focus-visible' +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' + const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>` * { box-sizing: border-box; } body { margin: 0; } @@ -29,27 +35,34 @@ const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>` } ` -const Base = styled.div` - ${TYPOGRAPHY}; - ${COMMON}; -` +const Base = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + ${TYPOGRAPHY}; + ${COMMON}; + `, +) export type BaseStylesProps = ComponentProps function BaseStyles(props: BaseStylesProps) { - const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', ...rest} = props + const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', className, ...rest} = props const {colorScheme, dayScheme, nightScheme} = useTheme() + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + + const stylingProps = enabled ? {className: clsx(classes.BaseStyles, className)} : {className} /** * We need to map valid primer/react color modes onto valid color modes for primer/primitives * valid color modes for primer/primitives: auto | light | dark * valid color modes for primer/primer: auto | day | night | light | dark */ - return ( - + {!enabled && } {children} ) diff --git a/packages/react/src/Blankslate/Blankslate.docs.json b/packages/react/src/Blankslate/Blankslate.docs.json index 9241118b4ea..234cfa9cb89 100644 --- a/packages/react/src/Blankslate/Blankslate.docs.json +++ b/packages/react/src/Blankslate/Blankslate.docs.json @@ -3,13 +3,35 @@ "name": "Blankslate", "status": "draft", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "experimental-components-blankslate--default" + }, + { + "id": "experimental-components-blankslate-features--with-visual" + }, + { + "id": "experimental-components-blankslate-features--with-primary-action" + }, + { + "id": "experimental-components-blankslate-features--with-secondary-action" + }, + { + "id": "experimental-components-blankslate-features--with-border" + }, + { + "id": "experimental-components-blankslate-features--narrow" + }, + { + "id": "experimental-components-blankslate-features--spacious" + } + ], "importPath": "@primer/react/experimental", "props": [ { "name": "border", "type": "boolean", - "description": "" + "description": "Add a border around this component" }, { "name": "narrow", @@ -20,6 +42,12 @@ "name": "spacious", "type": "boolean", "description": "" + }, + { + "name": "className", + "type": "string", + "description": "Class name(s) for custom styling.", + "defaultValue": "" } ], "subcomponents": [ @@ -45,7 +73,8 @@ "props": [ { "name": "href", - "type": "string" + "type": "string", + "description": "Link to complete primary action" } ] }, @@ -54,7 +83,8 @@ "props": [ { "name": "href", - "type": "string" + "type": "string", + "description": "Link to complete secondary action" } ] } diff --git a/packages/react/src/Blankslate/Blankslate.module.css b/packages/react/src/Blankslate/Blankslate.module.css index 05fa2c0a442..5f0029cbcfd 100644 --- a/packages/react/src/Blankslate/Blankslate.module.css +++ b/packages/react/src/Blankslate/Blankslate.module.css @@ -31,6 +31,7 @@ .Description { margin: 0; margin-bottom: var(--base-size-8); + text-align: center; } .Heading { diff --git a/packages/react/src/BranchName/BranchName.docs.json b/packages/react/src/BranchName/BranchName.docs.json index 7529b5ef337..585a62d2720 100644 --- a/packages/react/src/BranchName/BranchName.docs.json +++ b/packages/react/src/BranchName/BranchName.docs.json @@ -3,7 +3,17 @@ "name": "BranchName", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-branchname--default" + }, + { + "id": "components-branchname-features--with-branch-icon" + }, + { + "id": "components-branchname-features--not-a-link" + } + ], "importPath": "@primer/react", "props": [ { @@ -21,4 +31,4 @@ } ], "subcomponents": [] -} \ No newline at end of file +} diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx index 4b6d7697c9f..d2d4556b577 100644 --- a/packages/react/src/BranchName/BranchName.tsx +++ b/packages/react/src/BranchName/BranchName.tsx @@ -31,7 +31,7 @@ type BranchNameProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any function BranchName(props: BranchNameProps, ref: ForwardedRef) { const {as: BaseComponent = 'a', className, children, sx, ...rest} = props - const enabled = useFeatureFlag('primer_react_css_modules_team') + const enabled = useFeatureFlag('primer_react_css_modules_staff') if (enabled) { if (sx) { diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.docs.json b/packages/react/src/Breadcrumbs/Breadcrumbs.docs.json index 640e078d600..1ee3dcb3b4c 100644 --- a/packages/react/src/Breadcrumbs/Breadcrumbs.docs.json +++ b/packages/react/src/Breadcrumbs/Breadcrumbs.docs.json @@ -3,9 +3,20 @@ "name": "Breadcrumbs", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-breadcrumbs--default" + } + ], "importPath": "@primer/react", "props": [ + { + "name": "className", + "type": "string", + "required": false, + "description": "", + "defaultValue": "" + }, { "name": "children", "type": "Breadcrumbs.Item[]", @@ -25,7 +36,14 @@ "name": "selected", "type": "boolean", "defaultValue": "false", - "description": "" + "description": "Whether this item represents the current page" + }, + { + "name": "to", + "type": "string | Partial", + "required": false, + "description": "Used when the item is rendered using a component like React Router's `Link`. The path to navigate to.", + "defaultValue": "" }, { "name": "ref", @@ -47,4 +65,4 @@ } } ] -} \ No newline at end of file +} diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.module.css b/packages/react/src/Breadcrumbs/Breadcrumbs.module.css new file mode 100644 index 00000000000..96c61e7072c --- /dev/null +++ b/packages/react/src/Breadcrumbs/Breadcrumbs.module.css @@ -0,0 +1,60 @@ +.BreadcrumbsBase { + display: flex; + justify-content: space-between; +} + +.BreadcrumbsList { + padding-left: 0; + margin-top: 0; + margin-bottom: 0; +} + +.ItemWrapper { + display: inline-block; + font-size: var(--text-body-size-medium); + white-space: nowrap; + list-style: none; + + &::after { + display: inline-block; + height: 0.8em; + /* stylelint-disable-next-line primer/spacing */ + margin: 0 0.5em; + font-size: var(--text-body-size-medium); + content: ''; + /* stylelint-disable-next-line primer/borders, primer/colors */ + border-right: 0.1em solid var(--fgColor-muted); + transform: rotate(15deg) translateY(0.0625em); + } + + &:first-child { + margin-left: 0; + } + + &:last-child { + &::after { + content: none; + } + } +} + +.Item { + display: inline-block; + font-size: var(--text-body-size-medium); + color: var(--fgColor-link); + text-decoration: none; + + &:hover, + &:focus { + text-decoration: underline; + } +} + +.ItemSelected { + color: var(--fgColor-default); + pointer-events: none; + + &:focus { + text-decoration: none; + } +} diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx index 7b1753aa853..32b72149679 100644 --- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx @@ -7,38 +7,51 @@ import {get} from '../constants' import type {SxProp} from '../sx' import sx from '../sx' import type {ComponentProps} from '../utils/types' +import classes from './Breadcrumbs.module.css' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' +import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' const SELECTED_CLASS = 'selected' +const CSS_MODULES_FLAG = 'primer_react_css_modules_team' -const Wrapper = styled.li` - display: inline-block; - white-space: nowrap; - list-style: none; - &::after { - font-size: ${get('fontSizes.1')}; - content: ''; +const Wrapper = toggleStyledComponent( + CSS_MODULES_FLAG, + 'li', + styled.li` display: inline-block; - height: 0.8em; - margin: 0 0.5em; - border-right: 0.1em solid; - border-color: ${get('colors.fg.muted')}; - transform: rotate(15deg) translateY(0.0625em); - } - &:first-child { - margin-left: 0; - } - &:last-child { + white-space: nowrap; + list-style: none; &::after { - content: none; + font-size: ${get('fontSizes.1')}; + content: ''; + display: inline-block; + height: 0.8em; + margin: 0 0.5em; + border-right: 0.1em solid; + border-color: ${get('colors.fg.muted')}; + transform: rotate(15deg) translateY(0.0625em); } - } -` + &:first-child { + margin-left: 0; + } + &:last-child { + &::after { + content: none; + } + } + `, +) -const BreadcrumbsBase = styled.nav` - display: flex; - justify-content: space-between; - ${sx}; -` +const BreadcrumbsBase = toggleStyledComponent( + CSS_MODULES_FLAG, + 'nav', + styled.nav` + display: flex; + justify-content: space-between; + ${sx}; + `, +) export type BreadcrumbsProps = React.PropsWithChildren< { @@ -46,13 +59,31 @@ export type BreadcrumbsProps = React.PropsWithChildren< } & SxProp > +const BreadcrumbsList = ({children}: React.PropsWithChildren) => { + const enabled = useFeatureFlag(CSS_MODULES_FLAG) + if (enabled) { + return {children} + } + + return ( + + {children} + + ) +} + function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren) { - const wrappedChildren = React.Children.map(children, child => {child}) + const enabled = useFeatureFlag(CSS_MODULES_FLAG) + const wrappedChildren = React.Children.map(children, child => ( + {child} + )) return ( - - - {wrappedChildren} - + + {wrappedChildren} ) } @@ -60,29 +91,48 @@ function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren< type StyledBreadcrumbsItemProps = { to?: To selected?: boolean -} & SxProp - -const BreadcrumbsItem = styled.a.attrs(props => ({ - className: clsx(props.selected && SELECTED_CLASS, props.className), - 'aria-current': props.selected ? 'page' : null, -}))` - color: ${get('colors.accent.fg')}; - display: inline-block; - font-size: ${get('fontSizes.1')}; - text-decoration: none; - &:hover, - &:focus { - text-decoration: underline; - } - &.selected { - color: ${get('colors.fg.default')}; - pointer-events: none; - } - &.selected:focus { + className?: string +} & SxProp & + React.ComponentPropsWithoutRef<'a'> + +const StyledBreadcrumbsItem = toggleStyledComponent( + CSS_MODULES_FLAG, + 'a', + styled.a` + color: ${get('colors.accent.fg')}; + display: inline-block; + font-size: ${get('fontSizes.1')}; text-decoration: none; - } - ${sx}; -` + &:hover, + &:focus { + text-decoration: underline; + } + &.selected { + color: ${get('colors.fg.default')}; + pointer-events: none; + } + &.selected:focus { + text-decoration: none; + } + ${sx}; + `, +) + +const BreadcrumbsItem = React.forwardRef(({selected, className, ...rest}, ref) => { + const enabled = useFeatureFlag(CSS_MODULES_FLAG) + return ( + + ) +}) as PolymorphicForwardRefComponent<'a', StyledBreadcrumbsItemProps> Breadcrumbs.displayName = 'Breadcrumbs' diff --git a/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap b/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap index 9b4c8a741f8..250ad1236ce 100644 --- a/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap +++ b/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap @@ -28,6 +28,5 @@ exports[`Breadcrumbs.Item respects the "selected" prop 1`] = ` `; diff --git a/packages/react/src/Button/Button.docs.json b/packages/react/src/Button/Button.docs.json index 627f75d6808..39e688b1acf 100644 --- a/packages/react/src/Button/Button.docs.json +++ b/packages/react/src/Button/Button.docs.json @@ -3,7 +3,86 @@ "name": "Button", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-button--default" + }, + { + "id": "components-button-features--primary" + }, + { + "id": "components-button-features--danger" + }, + { + "id": "components-button-features--invisible" + }, + { + "id": "components-button-features--link" + }, + { + "id": "components-button-features--leading-visual" + }, + { + "id": "components-button-features--trailing-visual" + }, + { + "id": "components-button-features--trailing-counter" + }, + { + "id": "components-button-features--trailing-counter-with-no-text" + }, + { + "id": "components-button-features--trailing-counter-all-variants" + }, + { + "id": "components-button-features--trailing-action" + }, + { + "id": "components-button-features--block" + }, + { + "id": "components-button-features--disabled" + }, + { + "id": "components-button-features--inactive" + }, + { + "id": "components-button-features--small" + }, + { + "id": "components-button-features--medium" + }, + { + "id": "components-button-features--large" + }, + { + "id": "components-button-features--loading" + }, + { + "id": "components-button-features--loading-custom-announcement" + }, + { + "id": "components-button-features--loading-with-leading-visual" + }, + { + "id": "components-button-features--loading-with-trailing-visual" + }, + { + "id": "components-button-features--loading-with-trailing-action" + }, + { + "id": "components-button-features--loading-trigger" + }, + { + "id": "components-button-features--label-wrap" + }, + { + "id": "components-button-features--inactive-button-with-tooltip" + }, + { + "id": "components-button-features--expanded-button" + } + ], "importPath": "@primer/react", "props": [ { @@ -29,7 +108,7 @@ }, { "name": "count", - "type": "number | string", + "type": "number", "description": "For counter buttons, the number to display." }, { @@ -83,9 +162,14 @@ "type": "React.ElementType", "description": "A visual to display after the button text." }, + { + "name": "trailingAction", + "type": "React.ElementType", + "description": "Trailing action appears to the right of the trailing visual and is always locked to the end" + }, { "name": "variant", - "type": "'default'\n| 'primary'\n| 'danger'\n| 'invisible'", + "type": "'default'\n| 'primary'\n| 'danger'\n| 'invisible'\n| 'link'", "defaultValue": "'default'", "description": "Change the visual style of the button." }, @@ -94,6 +178,12 @@ "type": "boolean", "defaultValue": "false", "description": "Whether the button label should wrap to multiple lines of it is longer than the button width." + }, + { + "name": "disabled", + "type": "boolean", + "description": "Avoid disabling buttons because it will make them inaccessible to users who rely on keyboard navigation. Buttons that are disabled can not be clicked, selected, or navigated through.", + "defaultValue": "" } ], "passthrough": { diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index f64137b8433..d49124a624f 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -1,13 +1,9 @@ import type {ComponentPropsWithRef} from 'react' -import React, {forwardRef, useMemo} from 'react' +import React, {forwardRef} from 'react' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import Box from '../Box' -import type {BetterSystemStyleObject} from '../sx' -import {merge} from '../sx' -import {useTheme} from '../ThemeProvider' import type {ButtonProps} from './types' -import {StyledButton} from './types' -import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles' +import {getAlignContentSize} from './styles' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' import {defaultSxProp} from '../utils/defaultSxProp' import {VisuallyHidden} from '../VisuallyHidden' @@ -18,20 +14,8 @@ import {ConditionalWrapper} from '../internal/components/ConditionalWrapper' import {AriaStatus} from '../live-region' import {clsx} from 'clsx' import classes from './ButtonBase.module.css' -import {useFeatureFlag} from '../FeatureFlags' import {isElement} from 'react-is' -const iconWrapStyles = { - display: 'flex', - pointerEvents: 'none', -} - -const renderVisual = (Visual: React.ElementType | React.ReactElement, loading: boolean, visualName: string) => ( - - {loading ? : isElement(Visual) ? Visual : } - -) - const renderModuleVisual = ( Visual: React.ElementType | React.ReactElement, loading: boolean, @@ -70,17 +54,9 @@ const ButtonBase = forwardRef( ...rest } = props - const enabled = useFeatureFlag('primer_react_css_modules_ga') const innerRef = React.useRef(null) useRefObjectAsForwardedRef(forwardedRef, innerRef) - const {theme} = useTheme() - const baseStyles = useMemo(() => { - return merge.all([getButtonStyles(theme), getVariantStyles(variant, theme)]) - }, [theme, variant]) - const sxStyles = useMemo(() => { - return merge(baseStyles, sxProp) - }, [baseStyles, sxProp]) const uuid = useId(id) const loadingAnnouncementID = `${uuid}-loading-announcement` @@ -104,131 +80,7 @@ const ButtonBase = forwardRef( }, [innerRef]) } - if (enabled) { - if (sxProp !== defaultSxProp) { - return ( - - Boolean(descriptionID)) - .join(' ')} - // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state. - // We only set it when the button is in a loading state because it will supercede the aria-label when the screen - // reader announces the button name. - aria-labelledby={ - loading - ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') - : ariaLabelledBy - } - id={id} - onClick={loading ? undefined : onClick} - > - {Icon ? ( - loading ? ( - - ) : isElement(Icon) ? ( - Icon - ) : ( - - ) - ) : ( - <> - - { - /* If there are no leading/trailing visuals/actions to replace with a loading spinner, - render a loading spiner in place of the button content. */ - loading && - !LeadingVisual && - !TrailingVisual && - !TrailingAction && - renderModuleVisual(Spinner, loading, 'loadingSpinner', false) - } - { - /* Render a leading visual unless the button is in a loading state. - Then replace the leading visual with a loading spinner. */ - LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false) - } - {children && ( - - {children} - - )} - { - /* If there is a count, render a counter label unless there is a trailing visual. - Then render the counter label as a trailing visual. - Replace the counter label or the trailing visual with a loading spinner if: - - the button is in a loading state - - there is no leading visual to replace with a loading spinner - */ - count !== undefined && !TrailingVisual - ? renderModuleVisual( - () => ( - - {count} - - ), - Boolean(loading) && !LeadingVisual, - 'trailingVisual', - true, - ) - : TrailingVisual - ? renderModuleVisual( - TrailingVisual, - Boolean(loading) && !LeadingVisual, - 'trailingVisual', - false, - ) - : null - } - - { - /* If there is a trailing action, render it unless the button is in a loading state - and there is no leading or trailing visual to replace with a loading spinner. */ - TrailingAction && - renderModuleVisual( - TrailingAction, - Boolean(loading) && !LeadingVisual && !TrailingVisual, - 'trailingAction', - false, - ) - } - - )} - - {loading && ( - - {loadingAnnouncement} - - )} - - ) - } + if (sxProp !== defaultSxProp) { return ( - Boolean(labelID)).join(' ') : ariaLabelledBy } id={id} - // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent onClick={loading ? undefined : onClick} > {Icon ? ( @@ -275,7 +127,12 @@ const ButtonBase = forwardRef( ) ) : ( <> - + { /* If there are no leading/trailing visuals/actions to replace with a loading spinner, render a loading spiner in place of the button content. */ @@ -287,7 +144,7 @@ const ButtonBase = forwardRef( } { /* Render a leading visual unless the button is in a loading state. - Then replace the leading visual with a loading spinner. */ + Then replace the leading visual with a loading spinner. */ LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false) } {children && ( @@ -322,7 +179,7 @@ const ButtonBase = forwardRef( ) : null } - + { /* If there is a trailing action, render it unless the button is in a loading state and there is no leading or trailing visual to replace with a loading spinner. */ @@ -336,7 +193,7 @@ const ButtonBase = forwardRef( } )} - + {loading && ( {loadingAnnouncement} @@ -345,7 +202,6 @@ const ButtonBase = forwardRef( ) } - return ( - Boolean(descriptionID)) @@ -379,6 +235,7 @@ const ButtonBase = forwardRef( loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy } id={id} + // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent onClick={loading ? undefined : onClick} > {Icon ? ( @@ -391,7 +248,7 @@ const ButtonBase = forwardRef( ) ) : ( <> - + { /* If there are no leading/trailing visuals/actions to replace with a loading spinner, render a loading spiner in place of the button content. */ @@ -399,15 +256,15 @@ const ButtonBase = forwardRef( !LeadingVisual && !TrailingVisual && !TrailingAction && - renderVisual(Spinner, loading, 'loadingSpinner') + renderModuleVisual(Spinner, loading, 'loadingSpinner', false) } { /* Render a leading visual unless the button is in a loading state. Then replace the leading visual with a loading spinner. */ - LeadingVisual && renderVisual(LeadingVisual, Boolean(loading), 'leadingVisual') + LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false) } {children && ( - + {children} )} @@ -419,25 +276,35 @@ const ButtonBase = forwardRef( - there is no leading visual to replace with a loading spinner */ count !== undefined && !TrailingVisual - ? renderVisual( - () => {count}, + ? renderModuleVisual( + () => ( + + {count} + + ), Boolean(loading) && !LeadingVisual, 'trailingVisual', + true, ) : TrailingVisual - ? renderVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual') + ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false) : null } - + { /* If there is a trailing action, render it unless the button is in a loading state and there is no leading or trailing visual to replace with a loading spinner. */ TrailingAction && - renderVisual(TrailingAction, Boolean(loading) && !LeadingVisual && !TrailingVisual, 'trailingAction') + renderModuleVisual( + TrailingAction, + Boolean(loading) && !LeadingVisual && !TrailingVisual, + 'trailingAction', + false, + ) } )} - + {loading && ( {loadingAnnouncement} diff --git a/packages/react/src/Button/IconButton.docs.json b/packages/react/src/Button/IconButton.docs.json index dc357c85695..88d7ae75938 100644 --- a/packages/react/src/Button/IconButton.docs.json +++ b/packages/react/src/Button/IconButton.docs.json @@ -3,7 +3,56 @@ "name": "IconButton", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-iconbutton--default" + }, + { + "id": "components-iconbutton-features--primary" + }, + { + "id": "components-iconbutton-features--danger" + }, + { + "id": "components-iconbutton-features--invisible" + }, + { + "id": "components-iconbutton-features--disabled" + }, + { + "id": "components-iconbutton-features--small" + }, + { + "id": "components-iconbutton-features--medium" + }, + { + "id": "components-iconbutton-features--large" + }, + { + "id": "components-iconbutton-features--with-description" + }, + { + "id": "components-iconbutton-features--external-tooltip" + }, + { + "id": "components-iconbutton-features--external-tooltip-version1" + }, + { + "id": "components-iconbutton-features--as-a-menu-anchor" + }, + { + "id": "components-iconbutton-features--loading" + }, + { + "id": "components-iconbutton-features--loading-trigger" + }, + { + "id": "components-iconbutton-features--keybinding-hint-on-description" + }, + { + "id": "components-iconbutton-features--keybinding-hint" + } + ], "importPath": "@primer/react", "props": [ { @@ -46,8 +95,13 @@ "name": "keyshortcuts", "type": "string", "defaultValue": "", - "required": false, - "description": "Keyboard shortcuts that trigger the button. Keyboard shortcut will be appended to the accessible name or description (depending on the tooltip type) of the button with a comma (i.e. Bold, Command+B) and it will be displayed in the tooltip." + "deprecated": true, + "description": "Use `keybindingHint` instead." + }, + { + "name": "keybindingHint", + "type": "string", + "description": "Optional keybinding hint to show in the tooltip for this button. See the `KeybindingHint` component documentation for the correct format for this string. Has no effect if tooltip is overridden or disabled. Does **not** bind any keybindings for this button - this is only for visual hints." }, { "name": "tooltipDirection", @@ -56,6 +110,13 @@ "description": "The direction of the tooltip. ", "required": false }, + { + "name": "description", + "type": "string", + "required": false, + "description": "If `description` is provided, we will use a Tooltip to describe the button. Then `aria-label` is used to label the button.", + "defaultValue": "" + }, { "name": "sx", "type": "SystemStyleObject" diff --git a/packages/react/src/Button/IconButton.features.stories.tsx b/packages/react/src/Button/IconButton.features.stories.tsx index e8581bd6482..d8db5c4b4c2 100644 --- a/packages/react/src/Button/IconButton.features.stories.tsx +++ b/packages/react/src/Button/IconButton.features.stories.tsx @@ -84,13 +84,13 @@ export const LoadingTrigger = () => { return } -export const KeyshortcutsOnDescription = () => ( +export const KeybindingHintOnDescription = () => ( ) -export const Keyshortcuts = () => +export const KeybindingHint = () => diff --git a/packages/react/src/Button/IconButton.tsx b/packages/react/src/Button/IconButton.tsx index 4b3d00f6e3e..4b86ea1bd48 100644 --- a/packages/react/src/Button/IconButton.tsx +++ b/packages/react/src/Button/IconButton.tsx @@ -21,6 +21,7 @@ const IconButton = forwardRef( // This is planned to be a temporary prop until the default tooltip on icon buttons are fully rolled out. unsafeDisableTooltip = false, keyshortcuts, + keybindingHint, className, ...props }, @@ -58,15 +59,14 @@ const IconButton = forwardRef( /> ) } else { - // Does it have keyshortcuts? - const tooltipSuffix = keyshortcuts ? `, ${keyshortcuts}` : '' const tooltipText = description ?? ariaLabel return ( { expect(triggerEl).toHaveAttribute('aria-keyshortcuts', 'Command+H') }) it('should append the keyshortcuts to the tooltip text that labels the icon button when keyshortcuts prop is passed', () => { - const {getByRole, getByText} = render() - const triggerEl = getByRole('button') - const tooltipEl = getByText('Heart, Command+H') - expect(tooltipEl).toBeInTheDocument() - expect(triggerEl).toHaveAttribute('aria-labelledby', tooltipEl.id) + const {getByRole} = render() + const triggerEl = getByRole('button', {name: 'Heart ( command h )'}) + expect(triggerEl).toBeInTheDocument() }) - it('should render aria-keyshorts on an icon button when keyshortcuts prop is passed (Description Type)', () => { + it('should render aria-keyshortcuts on an icon button when keyshortcuts prop is passed (Description Type)', () => { const {getByRole} = render( , ) @@ -354,12 +352,10 @@ describe('Button', () => { expect(triggerEl).toHaveAttribute('aria-keyshortcuts', 'Command+H') }) it('should append the keyshortcuts to the tooltip text that describes the icon button when keyshortcuts prop is passed (Description Type)', () => { - const {getByRole, getByText} = render( + const {getByRole} = render( , ) - const triggerEl = getByRole('button') - const tooltipEl = getByText('Love is all around, Command+H') - expect(tooltipEl).toBeInTheDocument() - expect(triggerEl.getAttribute('aria-describedby')).toEqual(expect.stringContaining(tooltipEl.id)) + const triggerEl = getByRole('button', {name: 'Heart'}) + expect(triggerEl).toHaveAccessibleDescription('Love is all around ( command h )') }) }) diff --git a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap index 27d49686024..9808d784a94 100644 --- a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -1,315 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Button respects block prop 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 2; - border: 1px solid; - border-color: var(--button-default-borderColor-rest,undefined); - font-family: inherit; - font-weight: semibold; - font-size: 14px; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: btn.text; - background-color: btn.bg; - box-shadow: undefined,undefined; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0[data-inactive] { - cursor: auto; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: primer.fg.disabled; - border-color: var(--button-default-borderColor-disabled,undefined); - background-color: var(--button-default-bgColor-disabled,undefined); -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 12px; - background-color: btn.counterBg; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: 1.6666667; -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0[data-label-wrap="true"] { - min-width: -webkit-fit-content; - min-width: -moz-fit-content; - min-width: fit-content; - height: unset; - min-height: var(--control-medium-size,2rem); -} - -.c0[data-label-wrap="true"] [data-component="buttonContent"] { - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px); -} - -.c0[data-label-wrap="true"] [data-component="text"] { - white-space: unset; - word-break: break-word; -} - -.c0[data-label-wrap="true"][data-size="small"] { - height: unset; - min-height: var(--control-small-size,1.75rem); -} - -.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] { - padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px); -} - -.c0[data-label-wrap="true"][data-size="large"] { - height: unset; - min-height: var(--control-large-size,2.5rem); - padding-inline: var(--control-large-paddingInline-spacious,1rem); -} - -.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] { - padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px); -} - -.c0[data-inactive]:not([disabled]) { - background-color: var(--button-inactive-bgColor,undefined); - border-color: var(--button-inactive-bgColor,undefined); - color: var(--button-inactive-fgColor,undefined); -} - -.c0[data-inactive]:not([disabled]):focus-visible { - box-shadow: none; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: 1.4285714; - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0 [data-component="loadingSpinner"] { - grid-area: text; - margin-right: 0px !important; - place-self: center; - color: fg.muted; -} - -.c0 [data-component="loadingSpinner"] + [data-component="text"] { - visibility: hidden; -} - -.c0:hover:not([disabled]):not([data-inactive]) { - background-color: btn.hoverBg; - border-color: var(--button-default-borderColor-hover,undefined); -} - -.c0:active:not([disabled]):not([data-inactive]) { - background-color: btn.activeBg; - border-color: var(--button-default-borderColor-active,undefined); -} - -.c0[aria-expanded=true] { - background-color: btn.activeBg; - border-color: var(--button-default-borderColor-active,undefined); -} - -.c0 [data-component="leadingVisual"], -.c0 [data-component="trailingVisual"], -.c0 [data-component="trailingAction"] { - color: var(--button-color,undefined); -} - -.c0[data-component="IconButton"][data-no-visuals]:not(:disabled) { - color: fg.muted; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - Block @@ -319,314 +28,23 @@ exports[`Button respects block prop 1`] = ` `; exports[`Button respects the alignContent prop 1`] = ` -.c1 { - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; -} - -.c0 { - border-radius: 2; - border: 1px solid; - border-color: var(--button-default-borderColor-rest,undefined); - font-family: inherit; - font-weight: semibold; - font-size: 14px; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: btn.text; - background-color: btn.bg; - box-shadow: undefined,undefined; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0[data-inactive] { - cursor: auto; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: primer.fg.disabled; - border-color: var(--button-default-borderColor-disabled,undefined); - background-color: var(--button-default-bgColor-disabled,undefined); -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 12px; - background-color: btn.counterBg; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: 1.6666667; -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0[data-label-wrap="true"] { - min-width: -webkit-fit-content; - min-width: -moz-fit-content; - min-width: fit-content; - height: unset; - min-height: var(--control-medium-size,2rem); -} - -.c0[data-label-wrap="true"] [data-component="buttonContent"] { - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px); -} - -.c0[data-label-wrap="true"] [data-component="text"] { - white-space: unset; - word-break: break-word; -} - -.c0[data-label-wrap="true"][data-size="small"] { - height: unset; - min-height: var(--control-small-size,1.75rem); -} - -.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] { - padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px); -} - -.c0[data-label-wrap="true"][data-size="large"] { - height: unset; - min-height: var(--control-large-size,2.5rem); - padding-inline: var(--control-large-paddingInline-spacious,1rem); -} - -.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] { - padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px); -} - -.c0[data-inactive]:not([disabled]) { - background-color: var(--button-inactive-bgColor,undefined); - border-color: var(--button-inactive-bgColor,undefined); - color: var(--button-inactive-fgColor,undefined); -} - -.c0[data-inactive]:not([disabled]):focus-visible { - box-shadow: none; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: 1.4285714; - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0 [data-component="loadingSpinner"] { - grid-area: text; - margin-right: 0px !important; - place-self: center; - color: fg.muted; -} - -.c0 [data-component="loadingSpinner"] + [data-component="text"] { - visibility: hidden; -} - -.c0:hover:not([disabled]):not([data-inactive]) { - background-color: btn.hoverBg; - border-color: var(--button-default-borderColor-hover,undefined); -} - -.c0:active:not([disabled]):not([data-inactive]) { - background-color: btn.activeBg; - border-color: var(--button-default-borderColor-active,undefined); -} - -.c0[aria-expanded=true] { - background-color: btn.activeBg; - border-color: var(--button-default-borderColor-active,undefined); -} - -.c0 [data-component="leadingVisual"], -.c0 [data-component="trailingVisual"], -.c0 [data-component="trailingAction"] { - color: var(--button-color,undefined); -} - -.c0[data-component="IconButton"][data-no-visuals]:not(:disabled) { - color: fg.muted; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - Align start @@ -636,314 +54,23 @@ exports[`Button respects the alignContent prop 1`] = ` `; exports[`Button respects the large size prop 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 2; - border: 1px solid; - border-color: var(--button-default-borderColor-rest,undefined); - font-family: inherit; - font-weight: semibold; - font-size: 14px; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: btn.text; - background-color: btn.bg; - box-shadow: undefined,undefined; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0[data-inactive] { - cursor: auto; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: primer.fg.disabled; - border-color: var(--button-default-borderColor-disabled,undefined); - background-color: var(--button-default-bgColor-disabled,undefined); -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 12px; - background-color: btn.counterBg; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: 1.6666667; -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0[data-label-wrap="true"] { - min-width: -webkit-fit-content; - min-width: -moz-fit-content; - min-width: fit-content; - height: unset; - min-height: var(--control-medium-size,2rem); -} - -.c0[data-label-wrap="true"] [data-component="buttonContent"] { - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px); -} - -.c0[data-label-wrap="true"] [data-component="text"] { - white-space: unset; - word-break: break-word; -} - -.c0[data-label-wrap="true"][data-size="small"] { - height: unset; - min-height: var(--control-small-size,1.75rem); -} - -.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] { - padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px); -} - -.c0[data-label-wrap="true"][data-size="large"] { - height: unset; - min-height: var(--control-large-size,2.5rem); - padding-inline: var(--control-large-paddingInline-spacious,1rem); -} - -.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] { - padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px); -} - -.c0[data-inactive]:not([disabled]) { - background-color: var(--button-inactive-bgColor,undefined); - border-color: var(--button-inactive-bgColor,undefined); - color: var(--button-inactive-fgColor,undefined); -} - -.c0[data-inactive]:not([disabled]):focus-visible { - box-shadow: none; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: 1.4285714; - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0 [data-component="loadingSpinner"] { - grid-area: text; - margin-right: 0px !important; - place-self: center; - color: fg.muted; -} - -.c0 [data-component="loadingSpinner"] + [data-component="text"] { - visibility: hidden; -} - -.c0:hover:not([disabled]):not([data-inactive]) { - background-color: btn.hoverBg; - border-color: var(--button-default-borderColor-hover,undefined); -} - -.c0:active:not([disabled]):not([data-inactive]) { - background-color: btn.activeBg; - border-color: var(--button-default-borderColor-active,undefined); -} - -.c0[aria-expanded=true] { - background-color: btn.activeBg; - border-color: var(--button-default-borderColor-active,undefined); -} - -.c0 [data-component="leadingVisual"], -.c0 [data-component="trailingVisual"], -.c0 [data-component="trailingAction"] { - color: var(--button-color,undefined); -} - -.c0[data-component="IconButton"][data-no-visuals]:not(:disabled) { - color: fg.muted; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - Smol @@ -953,314 +80,23 @@ exports[`Button respects the large size prop 1`] = ` `; exports[`Button respects the small size prop 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 2; - border: 1px solid; - border-color: var(--button-default-borderColor-rest,undefined); - font-family: inherit; - font-weight: semibold; - font-size: 14px; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: btn.text; - background-color: btn.bg; - box-shadow: undefined,undefined; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0[data-inactive] { - cursor: auto; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: primer.fg.disabled; - border-color: var(--button-default-borderColor-disabled,undefined); - background-color: var(--button-default-bgColor-disabled,undefined); -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 12px; - background-color: btn.counterBg; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: 1.6666667; -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0[data-label-wrap="true"] { - min-width: -webkit-fit-content; - min-width: -moz-fit-content; - min-width: fit-content; - height: unset; - min-height: var(--control-medium-size,2rem); -} - -.c0[data-label-wrap="true"] [data-component="buttonContent"] { - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px); -} - -.c0[data-label-wrap="true"] [data-component="text"] { - white-space: unset; - word-break: break-word; -} - -.c0[data-label-wrap="true"][data-size="small"] { - height: unset; - min-height: var(--control-small-size,1.75rem); -} - -.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] { - padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px); -} - -.c0[data-label-wrap="true"][data-size="large"] { - height: unset; - min-height: var(--control-large-size,2.5rem); - padding-inline: var(--control-large-paddingInline-spacious,1rem); -} - -.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] { - padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px); -} - -.c0[data-inactive]:not([disabled]) { - background-color: var(--button-inactive-bgColor,undefined); - border-color: var(--button-inactive-bgColor,undefined); - color: var(--button-inactive-fgColor,undefined); -} - -.c0[data-inactive]:not([disabled]):focus-visible { - box-shadow: none; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: 1.4285714; - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0 [data-component="loadingSpinner"] { - grid-area: text; - margin-right: 0px !important; - place-self: center; - color: fg.muted; -} - -.c0 [data-component="loadingSpinner"] + [data-component="text"] { - visibility: hidden; -} - -.c0:hover:not([disabled]):not([data-inactive]) { - background-color: btn.hoverBg; - border-color: var(--button-default-borderColor-hover,undefined); -} - -.c0:active:not([disabled]):not([data-inactive]) { - background-color: btn.activeBg; - border-color: var(--button-default-borderColor-active,undefined); -} - -.c0[aria-expanded=true] { - background-color: btn.activeBg; - border-color: var(--button-default-borderColor-active,undefined); -} - -.c0 [data-component="leadingVisual"], -.c0 [data-component="trailingVisual"], -.c0 [data-component="trailingAction"] { - color: var(--button-color,undefined); -} - -.c0[data-component="IconButton"][data-no-visuals]:not(:disabled) { - color: fg.muted; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - Smol @@ -1270,317 +106,23 @@ exports[`Button respects the small size prop 1`] = ` `; exports[`Button styles danger button appropriately 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 2; - border: 1px solid; - border-color: var(--button-default-borderColor-rest,undefined); - font-family: inherit; - font-weight: semibold; - font-size: 14px; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: btn.danger.text; - background-color: btn.bg; - box-shadow: undefined; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0[data-inactive] { - cursor: auto; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: btn.danger.disabledText; - background-color: btn.danger.disabledBg; - border-color: var(--button-default-borderColor-disabled,undefined); -} - -.c0:disabled [data-component=ButtonCounter] { - color: btn.danger.disabledCounterFg; - background-color: btn.danger.disabledCounterBg; -} - -.c0 [data-component=ButtonCounter] { - font-size: 12px; - color: btn.danger.counterFg; - background-color: btn.danger.counterBg; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: 1.6666667; -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0[data-label-wrap="true"] { - min-width: -webkit-fit-content; - min-width: -moz-fit-content; - min-width: fit-content; - height: unset; - min-height: var(--control-medium-size,2rem); -} - -.c0[data-label-wrap="true"] [data-component="buttonContent"] { - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px); -} - -.c0[data-label-wrap="true"] [data-component="text"] { - white-space: unset; - word-break: break-word; -} - -.c0[data-label-wrap="true"][data-size="small"] { - height: unset; - min-height: var(--control-small-size,1.75rem); -} - -.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] { - padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px); -} - -.c0[data-label-wrap="true"][data-size="large"] { - height: unset; - min-height: var(--control-large-size,2.5rem); - padding-inline: var(--control-large-paddingInline-spacious,1rem); -} - -.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] { - padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px); -} - -.c0[data-inactive]:not([disabled]) { - background-color: var(--button-inactive-bgColor,undefined); - border-color: var(--button-inactive-bgColor,undefined); - color: var(--button-inactive-fgColor,undefined); -} - -.c0[data-inactive]:not([disabled]):focus-visible { - box-shadow: none; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: 1.4285714; - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0 [data-component="loadingSpinner"] { - grid-area: text; - margin-right: 0px !important; - place-self: center; - color: fg.muted; -} - -.c0 [data-component="loadingSpinner"] + [data-component="text"] { - visibility: hidden; -} - -.c0:hover:not([disabled]):not([data-inactive]) { - color: btn.danger.hoverText; - background-color: btn.danger.hoverBg; - border-color: btn.danger.hoverBorder; - box-shadow: undefined; -} - -.c0:hover:not([disabled]):not([data-inactive]) [data-component=ButtonCounter] { - background-color: btn.danger.hoverCounterBg; - color: btn.danger.hoverCounterFg; -} - -.c0:active:not([disabled]):not([data-inactive]) { - color: btn.danger.selectedText; - background-color: btn.danger.selectedBg; - box-shadow: undefined; - border-color: btn.danger.selectedBorder; -} - -.c0[aria-expanded=true] { - color: btn.danger.selectedText; - background-color: btn.danger.selectedBg; - box-shadow: undefined; - border-color: btn.danger.selectedBorder; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - Danger @@ -1590,324 +132,23 @@ exports[`Button styles danger button appropriately 1`] = ` `; exports[`Button styles invisible button appropriately 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 2; - border: 1px solid; - border-color: transparent; - font-family: inherit; - font-weight: semibold; - font-size: 14px; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: var(--button-invisible-fgColor-rest,undefined); - background-color: transparent; - box-shadow: none; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0[data-inactive] { - cursor: auto; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: primer.fg.disabled; - background-color: var(--button-invisible-bgColor-disabled,transparent); -} - -.c0:disabled [data-component=ButtonCounter], -.c0:disabled [data-component="leadingVisual"], -.c0:disabled [data-component="trailingAction"] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: 1.6666667; -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0[data-label-wrap="true"] { - min-width: -webkit-fit-content; - min-width: -moz-fit-content; - min-width: fit-content; - height: unset; - min-height: var(--control-medium-size,2rem); -} - -.c0[data-label-wrap="true"] [data-component="buttonContent"] { - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px); -} - -.c0[data-label-wrap="true"] [data-component="text"] { - white-space: unset; - word-break: break-word; -} - -.c0[data-label-wrap="true"][data-size="small"] { - height: unset; - min-height: var(--control-small-size,1.75rem); -} - -.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] { - padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px); -} - -.c0[data-label-wrap="true"][data-size="large"] { - height: unset; - min-height: var(--control-large-size,2.5rem); - padding-inline: var(--control-large-paddingInline-spacious,1rem); -} - -.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] { - padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px); -} - -.c0[data-inactive]:not([disabled]) { - background-color: var(--button-inactive-bgColor,undefined); - border-color: var(--button-inactive-bgColor,undefined); - color: var(--button-inactive-fgColor,undefined); -} - -.c0[data-inactive]:not([disabled]):focus-visible { - box-shadow: none; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; - color: var(--button-invisible-iconColor-rest,undefined); -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: 1.4285714; - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; - color: var(--button-invisible-iconColor-rest,undefined); -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; - color: var(--button-invisible-iconColor-rest,undefined); -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0 [data-component="loadingSpinner"] { - grid-area: text; - margin-right: 0px !important; - place-self: center; - color: fg.muted; -} - -.c0 [data-component="loadingSpinner"] + [data-component="text"] { - visibility: hidden; -} - -.c0:hover:not([disabled]) { - background-color: actionListItem.default.hoverBg; -} - -.c0:active:not([disabled]) { - background-color: actionListItem.default.activeBg; -} - -.c0[aria-expanded=true] { - background-color: actionListItem.default.selectedBg; -} - -.c0[data-component="IconButton"][data-no-visuals] { - color: var(--button-invisible-iconColor-rest,undefined); -} - -.c0[data-no-visuals] { - color: var(--button-invisible-fgColor-rest,undefined); -} - -.c0:has([data-component="ButtonCounter"]) { - color: var(--button-invisible-fgColor-rest,undefined); -} - -.c0:disabled[data-no-visuals] { - color: primer.fg.disabled; -} - -.c0:disabled[data-no-visuals] [data-component=ButtonCounter] { - color: inherit; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - Invisible @@ -1917,313 +158,23 @@ exports[`Button styles invisible button appropriately 1`] = ` `; exports[`Button styles primary button appropriately 1`] = ` -.c1 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c0 { - border-radius: 2; - border: 1px solid; - border-color: btn.primary.border; - font-family: inherit; - font-weight: semibold; - font-size: 14px; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-text-decoration: none; - text-decoration: none; - text-align: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 32px; - padding: 0 12px; - gap: 8px; - min-width: -webkit-max-content; - min-width: -moz-max-content; - min-width: max-content; - -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); - transition: 80ms cubic-bezier(0.65,0,0.35,1); - -webkit-transition-property: color,fill,background-color,border-color; - transition-property: color,fill,background-color,border-color; - color: btn.primary.text; - background-color: btn.primary.bg; - box-shadow: undefined; -} - -.c0:focus:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0:focus:not(:disabled):not(:focus-visible) { - outline: solid 1px transparent; -} - -.c0:focus-visible:not(:disabled) { - box-shadow: none; - outline: 2px solid; - outline-offset: -2px; -} - -.c0[href] { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c0[href]:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0:hover { - -webkit-transition-duration: 80ms; - transition-duration: 80ms; -} - -.c0:active { - -webkit-transition: none; - transition: none; -} - -.c0[data-inactive] { - cursor: auto; -} - -.c0:disabled { - cursor: not-allowed; - box-shadow: none; - color: btn.primary.disabledText; - background-color: btn.primary.disabledBg; - border-color: btn.primary.disabledBorder; -} - -.c0:disabled [data-component=ButtonCounter] { - color: inherit; -} - -.c0 [data-component=ButtonCounter] { - font-size: 12px; - background-color: btn.primary.counterBg; - color: btn.primary.text; -} - -.c0[data-component=IconButton] { - display: inline-grid; - padding: unset; - place-content: center; - width: 32px; - min-width: unset; -} - -.c0[data-size="small"] { - padding: 0 8px; - height: 28px; - gap: 4px; - font-size: 12px; -} - -.c0[data-size="small"] [data-component="text"] { - line-height: 1.6666667; -} - -.c0[data-size="small"] [data-component=ButtonCounter] { - font-size: 12px; -} - -.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 4px; -} - -.c0[data-size="small"][data-component=IconButton] { - width: 28px; - padding: unset; -} - -.c0[data-size="large"] { - padding: 0 16px; - height: 40px; - gap: 8px; -} - -.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0[data-size="large"][data-component=IconButton] { - width: 40px; - padding: unset; -} - -.c0[data-block="block"] { - width: 100%; -} - -.c0[data-label-wrap="true"] { - min-width: -webkit-fit-content; - min-width: -moz-fit-content; - min-width: fit-content; - height: unset; - min-height: var(--control-medium-size,2rem); -} - -.c0[data-label-wrap="true"] [data-component="buttonContent"] { - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - -webkit-align-self: stretch; - -ms-flex-item-align: stretch; - align-self: stretch; - padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px); -} - -.c0[data-label-wrap="true"] [data-component="text"] { - white-space: unset; - word-break: break-word; -} - -.c0[data-label-wrap="true"][data-size="small"] { - height: unset; - min-height: var(--control-small-size,1.75rem); -} - -.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] { - padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px); -} - -.c0[data-label-wrap="true"][data-size="large"] { - height: unset; - min-height: var(--control-large-size,2.5rem); - padding-inline: var(--control-large-paddingInline-spacious,1rem); -} - -.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] { - padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px); -} - -.c0[data-inactive]:not([disabled]) { - background-color: var(--button-inactive-bgColor,undefined); - border-color: var(--button-inactive-bgColor,undefined); - color: var(--button-inactive-fgColor,undefined); -} - -.c0[data-inactive]:not([disabled]):focus-visible { - box-shadow: none; -} - -.c0 [data-component="leadingVisual"] { - grid-area: leadingVisual; -} - -.c0 [data-component="text"] { - grid-area: text; - line-height: 1.4285714; - white-space: nowrap; -} - -.c0 [data-component="trailingVisual"] { - grid-area: trailingVisual; -} - -.c0 [data-component="trailingAction"] { - margin-right: -4px; -} - -.c0 [data-component="buttonContent"] { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: grid; - grid-template-areas: "leadingVisual text trailingVisual"; - grid-template-columns: min-content minmax(0,auto) min-content; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; -} - -.c0 [data-component="buttonContent"] > :not(:last-child) { - margin-right: 8px; -} - -.c0 [data-component="loadingSpinner"] { - grid-area: text; - margin-right: 0px !important; - place-self: center; - color: fg.muted; -} - -.c0 [data-component="loadingSpinner"] + [data-component="text"] { - visibility: hidden; -} - -.c0:hover:not([disabled]):not([data-inactive]) { - color: btn.primary.hoverText; - background-color: btn.primary.hoverBg; -} - -.c0:focus:not([disabled]) { - box-shadow: inset 0 0 0 3px; -} - -.c0:focus-visible:not([disabled]) { - box-shadow: inset 0 0 0 3px; -} - -.c0:active:not([disabled]):not([data-inactive]) { - background-color: btn.primary.selectedBg; - box-shadow: undefined; -} - -.c0[aria-expanded=true] { - background-color: btn.primary.selectedBg; - box-shadow: undefined; -} - -@media (forced-colors:active) { - .c0:focus { - outline: solid 1px transparent; - } -} - Primary diff --git a/packages/react/src/Button/types.ts b/packages/react/src/Button/types.ts index 2d3fae5b07b..6824ae17e69 100644 --- a/packages/react/src/Button/types.ts +++ b/packages/react/src/Button/types.ts @@ -31,7 +31,7 @@ export type ButtonBaseProps = { */ size?: Size /** - * Items that are disabled can not be clicked, selected, or navigated through. + * Avoid disabling buttons because it will make them inaccessible to users who rely on keyboard navigation. that are disabled can not be clicked, selected, or navigated through. */ disabled?: boolean /** @@ -94,7 +94,9 @@ export type IconButtonProps = ButtonA11yProps & { unsafeDisableTooltip?: boolean description?: string tooltipDirection?: TooltipDirection + /** @deprecated Use `keybindingHint` instead. */ keyshortcuts?: string + keybindingHint?: string } & Omit // adopted from React.AnchorHTMLAttributes diff --git a/packages/react/src/ButtonGroup/ButtonGroup.docs.json b/packages/react/src/ButtonGroup/ButtonGroup.docs.json index 06c470b1253..bc7c4828eb8 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.docs.json +++ b/packages/react/src/ButtonGroup/ButtonGroup.docs.json @@ -3,7 +3,23 @@ "name": "ButtonGroup", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-buttongroup--default" + }, + { + "id": "components-buttongroup-features--icon-buttons" + }, + { + "id": "components-buttongroup-features--loading-buttons" + }, + { + "id": "components-buttongroup-features--dropdown-split" + }, + { + "id": "components-buttongroup-features--as-toolbar" + } + ], "importPath": "@primer/react", "props": [ { @@ -16,4 +32,4 @@ } ], "subcomponents": [] -} \ No newline at end of file +} diff --git a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx index b233506fd88..da2b99ff6e6 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx @@ -132,3 +132,11 @@ export const DropdownSplit = () => { ) } + +export const AsToolbar = () => ( + + Button 1 + Button 2 + Button 3 + +) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.test.tsx b/packages/react/src/ButtonGroup/ButtonGroup.test.tsx new file mode 100644 index 00000000000..67b3b0b3b6f --- /dev/null +++ b/packages/react/src/ButtonGroup/ButtonGroup.test.tsx @@ -0,0 +1,58 @@ +import {Button} from '../Button' +import {render, screen} from '@testing-library/react' +import axe from 'axe-core' +import {FeatureFlags} from '../FeatureFlags' +import {behavesAsComponent} from '../utils/testing' +import type {ButtonGroupProps} from './ButtonGroup' +import ButtonGroup from './ButtonGroup' +import React from 'react' + +const TestButtonGroup = (props: ButtonGroupProps) => ( + + Button 1 + Button 2 + Button 3 + +) + +describe('ButtonGroup', () => { + behavesAsComponent({ + Component: TestButtonGroup, + options: {skipSx: true, skipAs: true}, + }) + + it('should support `className` on the outermost element', () => { + const Element = () => + const FeatureFlagElement = () => { + return ( + + + + ) + } + expect(render().container.firstChild).toHaveClass('test-class-name') + expect(render().container.firstChild).toHaveClass('test-class-name') + }) + + it('renders a ', () => { + const container = render() + expect(container.getByTestId('button-group').tagName).toBe('DIV') + }) + + it('should have no axe violations', async () => { + const {container} = render() + const results = await axe.run(container) + expect(results).toHaveNoViolations() + }) + + it('should respect role prop', () => { + render() + expect(screen.getByRole('toolbar')).toBeInTheDocument() + }) +}) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx index 9e9111f591a..e3cc3e0632a 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx @@ -6,9 +6,12 @@ import classes from './ButtonGroup.module.css' import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' import {clsx} from 'clsx' import {useFeatureFlag} from '../FeatureFlags' +import {FocusKeys, useFocusZone} from '../hooks/useFocusZone' +import {useProvidedRefOrCreate} from '../hooks' +import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' const StyledButtonGroup = toggleStyledComponent( - 'primer_react_css_modules_team', + 'primer_react_css_modules_ga', 'div', styled.div` display: inline-flex; @@ -95,24 +98,35 @@ const StyledButtonGroup = toggleStyledComponent( ) export type ButtonGroupProps = ComponentProps + const ButtonGroup = React.forwardRef(function ButtonGroup( - {children, className, ...rest}, + {children, className, role, ...rest}, forwardRef, ) { - const enabled = useFeatureFlag('primer_react_css_modules_team') + const enabled = useFeatureFlag('primer_react_css_modules_ga') const buttons = React.Children.map(children, (child, index) => {child}) + const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject) + + useFocusZone({ + containerRef: buttonRef, + disabled: role !== 'toolbar', + bindKeys: FocusKeys.ArrowHorizontal, + focusOutBehavior: 'wrap', + }) + return ( {buttons} ) -}) +}) as PolymorphicForwardRefComponent<'div', ButtonGroupProps> ButtonGroup.displayName = 'ButtonGroup' diff --git a/packages/react/src/Checkbox/Checkbox.docs.json b/packages/react/src/Checkbox/Checkbox.docs.json index 8e493070d97..ffe55c31e13 100644 --- a/packages/react/src/Checkbox/Checkbox.docs.json +++ b/packages/react/src/Checkbox/Checkbox.docs.json @@ -3,7 +3,23 @@ "name": "Checkbox", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-checkbox--default" + }, + { + "id": "components-checkbox-features--with-leading-visual" + }, + { + "id": "components-checkbox-features--disabled" + }, + { + "id": "components-checkbox-features--with-caption" + }, + { + "id": "components-checkbox-features--indeterminate" + } + ], "importPath": "@primer/react", "props": [ { @@ -63,4 +79,4 @@ } ], "subcomponents": [] -} \ No newline at end of file +} diff --git a/packages/react/src/Checkbox/Checkbox.test.tsx b/packages/react/src/Checkbox/Checkbox.test.tsx index bf115bfd6ec..05dbad28317 100644 --- a/packages/react/src/Checkbox/Checkbox.test.tsx +++ b/packages/react/src/Checkbox/Checkbox.test.tsx @@ -9,7 +9,7 @@ describe('Checkbox', () => { beforeEach(() => { jest.resetAllMocks() }) - behavesAsComponent({Component: Checkbox}) + behavesAsComponent({Component: Checkbox, options: {skipAs: true}}) checkExports('Checkbox', { default: Checkbox, diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx index 19acab2f020..5b60739d4d0 100644 --- a/packages/react/src/Checkbox/Checkbox.tsx +++ b/packages/react/src/Checkbox/Checkbox.tsx @@ -1,17 +1,12 @@ import {clsx} from 'clsx' -import styled from 'styled-components' import {useProvidedRefOrCreate} from '../hooks' import React, {useContext, useEffect, type ChangeEventHandler, type InputHTMLAttributes, type ReactElement} from 'react' -import sx, {type SxProp} from '../sx' +import {type SxProp} from '../sx' import useLayoutEffect from '../utils/useIsomorphicLayoutEffect' import type {FormValidationStatus} from '../utils/types/FormValidationStatus' import {CheckboxGroupContext} from '../CheckboxGroup/CheckboxGroupContext' -import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles' -import {get} from '../constants' -import {sharedCheckboxAndRadioStyles} from '../internal/utils/sharedCheckboxAndRadioStyles' import classes from './Checkbox.module.css' import sharedClasses from './shared.module.css' -import {useFeatureFlag} from '../FeatureFlags' import Box from '../Box' export type CheckboxProps = { @@ -43,106 +38,6 @@ export type CheckboxProps = { } & Exclude, 'value'> & SxProp -const StyledCheckbox = styled.input` - ${sharedCheckboxAndRadioStyles}; - border-radius: ${get('radii.1')}; - transition: - background-color, - border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */ - - &::before { - width: var(--base-size-16, 16px); - height: var(--base-size-16, 16px); - visibility: hidden; - content: ''; - background-color: ${get('colors.fg.onEmphasis')}; - transition: visibility 0s linear 230ms; - clip-path: inset(var(--base-size-16, 16px) 0 0 0); - mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='); - mask-size: 75%; - mask-repeat: no-repeat; - mask-position: center; - - animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; - } - - &:checked, - &:indeterminate { - background: var(--control-checked-bgColor-rest, ${get('colors.accent.fg')}); - border-color: var( - --control-checked-bgColor-rest, - ${get('colors.accent.fg')} - ); /* using bgColor here to avoid a border change in dark high contrast */ - - &::before { - animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms; - } - } - - &:disabled { - cursor: not-allowed; - } - - &:checked { - transition: - background-color, - border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; - - &::before { - visibility: visible; - transition: visibility 0s linear 0s; - } - - &:disabled { - background-color: var(--control-checked-bgColor-disabled, ${get('colors.fg.muted')}); - border-color: var(--control-checked-borderColor-disabled, ${get('colors.fg.muted')}); - opacity: 1; - - &::before { - background-color: var(--control-checked-fgColor-disabled, ${get('colors.fg.onEmphasis')}); - } - } - - /* Windows High Contrast mode */ - @media (forced-colors: active) { - background-color: canvastext; - border-color: canvastext; - } - } - - &:indeterminate { - background: var(--control-checked-bgColor-rest, ${get('colors.accent.fg')}); - &::before { - mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'); - visibility: visible; - } - } - - ${getGlobalFocusStyles()}; - - ${sx}; - - @keyframes checkmarkIn { - from { - clip-path: inset(var(--base-size-16, 16px) 0 0 0); - } - - to { - clip-path: inset(0 0 0 0); - } - } - - @keyframes checkmarkOut { - from { - clip-path: inset(0 0 0 0); - } - - to { - clip-path: inset(var(--base-size-16, 16px) 0 0 0); - } - } -` - /** * An accessible, native checkbox component */ @@ -163,7 +58,6 @@ const Checkbox = React.forwardRef( }, ref, ): ReactElement => { - const enabled = useFeatureFlag('primer_react_css_modules_staff') const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject) const checkboxGroupContext = useContext(CheckboxGroupContext) const handleOnChange: ChangeEventHandler = e => { @@ -204,21 +98,17 @@ const Checkbox = React.forwardRef( } }) - if (enabled) { - if (sxProp) { - return ( - - ) - } - return + if (sxProp) { + return ( + + ) } - - return + return }, ) diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx new file mode 100644 index 00000000000..333c3ef0cea --- /dev/null +++ b/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx @@ -0,0 +1,49 @@ +import React from 'react' +import type {Meta} from '@storybook/react' +import {Checkbox, CheckboxGroup, FormControl} from '..' + +export default { + title: 'Components/CheckboxGroup/Dev', + component: CheckboxGroup, + parameters: {controls: {exclude: ['aria-labelledby', 'id', 'onChange', 'sx']}}, +} as Meta + +export const SxProps = () => ( + + + Caption + + + Choices + + + + Choice one + + + + Choice two + + + + Choice three + + +) diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.docs.json b/packages/react/src/CheckboxGroup/CheckboxGroup.docs.json index 4d289ce5c81..d32a6d208f8 100644 --- a/packages/react/src/CheckboxGroup/CheckboxGroup.docs.json +++ b/packages/react/src/CheckboxGroup/CheckboxGroup.docs.json @@ -3,7 +3,26 @@ "name": "CheckboxGroup", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-checkboxgroup--default" + }, + { + "id": "components-checkboxgroup-features--visually-hidden-label" + }, + { + "id": "components-checkboxgroup-features--with-external-label" + }, + { + "id": "components-checkboxgroup-features--error" + }, + { + "id": "components-checkboxgroup-features--success" + }, + { + "id": "components-checkboxgroup-features--caption" + } + ], "importPath": "@primer/react", "props": [ { @@ -102,4 +121,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css b/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css new file mode 100644 index 00000000000..12fac66ad61 --- /dev/null +++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css @@ -0,0 +1,31 @@ +.ConfirmationHeader { + display: flex; + padding: var(--base-size-8); + flex-direction: row; + + > h1 { + padding: var(--base-size-6) var(--base-size-8); + + /* override default margin */ + margin: 0; + font-size: var(--text-title-size-medium); + font-weight: var(--text-title-weight-medium); + flex-grow: 1; + } +} + +.ConfirmationBody { + padding: 0 var(--base-size-16) var(--base-size-16) var(--base-size-16); + font-size: var(--text-body-size-medium); + flex-grow: 1; +} + +.ConfirmationFooter { + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + grid-gap: var(--base-size-8); + align-items: end; + justify-content: end; + padding: var(--base-size-4) var(--base-size-16) var(--base-size-16); +} diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx index 51607879b34..5fab91cb57e 100644 --- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx +++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx @@ -25,6 +25,7 @@ export const Default = () => { const [isOpen, setIsOpen] = useState(false) const buttonRef = useRef(null) const onDialogClose = useCallback(() => setIsOpen(false), []) + return ( <> setIsOpen(!isOpen)}> @@ -44,3 +45,60 @@ export const Default = () => { ) } + +interface PlaygroundProps { + open: boolean +} + +export const Playground = ({open, ...args}: PlaygroundProps) => { + const [isOpen, setIsOpen] = useState(false) + const buttonRef = useRef(null) + const onDialogClose = useCallback(() => setIsOpen(false), []) + + return ( + <> + setIsOpen(!isOpen)}> + Show dialog + + {(isOpen || open) && ( + + Deleting the universe could have disastrous effects, including but not limited to destroying all life on + Earth. + + )} + + ) +} + +Playground.args = { + open: false, +} + +Playground.argTypes = { + open: { + control: { + type: 'boolean', + }, + }, + title: { + control: { + type: 'text', + }, + }, + cancelButtonContent: { + control: { + type: 'text', + }, + }, + confirmButtonContent: { + control: { + type: 'text', + }, + }, +} diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx index 0e45f3c683d..95fe993d620 100644 --- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx +++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx @@ -10,6 +10,9 @@ import type {DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/ import {Dialog} from '../Dialog/Dialog' import {useFocusZone} from '../hooks/useFocusZone' import BaseStyles from '../BaseStyles' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' +import classes from './ConfirmationDialog.module.css' /** * Props to customize the ConfirmationDialog. @@ -43,54 +46,85 @@ export interface ConfirmationDialogProps { confirmButtonType?: 'normal' | 'primary' | 'danger' } -const StyledConfirmationHeader = styled.div` - padding: ${get('space.2')}; - display: flex; - flex-direction: row; -` -const StyledTitle = styled(Box).attrs({as: 'h1'})` - font-size: ${get('fontSizes.3')}; - font-weight: ${get('fontWeights.bold')}; - padding: 6px ${get('space.2')}; - flex-grow: 1; - margin: 0; /* override default margin */ -` +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' + +const StyledConfirmationHeader = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + padding: ${get('space.2')}; + display: flex; + flex-direction: row; + `, +) + +const StyledTitle = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'h1', + styled(Box).attrs({as: 'h1'})` + font-size: ${get('fontSizes.3')}; + font-weight: ${get('fontWeights.bold')}; + padding: 6px ${get('space.2')}; + flex-grow: 1; + margin: 0; /* override default margin */ + `, +) + const ConfirmationHeader: React.FC> = ({title, onClose, dialogLabelId}) => { const onCloseClick = useCallback(() => { onClose('close-button') }, [onClose]) + + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) return ( - + {title} ) } -const StyledConfirmationBody = styled(Box)` - font-size: ${get('fontSizes.1')}; - padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')}; - flex-grow: 1; -` +const StyledConfirmationBody = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled(Box)` + font-size: ${get('fontSizes.1')}; + padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')}; + flex-grow: 1; + `, +) + const ConfirmationBody: React.FC> = ({children}) => { - return {children} + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return {children} } -const StyledConfirmationFooter = styled(Box)` - display: grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - grid-gap: ${get('space.2')}; - align-items: end; - justify-content: end; - padding: ${get('space.1')} ${get('space.3')} ${get('space.3')}; -` +const StyledConfirmationFooter = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled(Box)` + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + grid-gap: ${get('space.2')}; + align-items: end; + justify-content: end; + padding: ${get('space.1')} ${get('space.3')} ${get('space.3')}; + `, +) + const ConfirmationFooter: React.FC> = ({footerButtons}) => { const {containerRef: footerRef} = useFocusZone({ bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab, focusInStrategy: 'closest', }) + + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + // Must have exactly 2 buttons! return ( - }> + } + className={enabled && classes.ConfirmationFooter} + > ) diff --git a/packages/react/src/CounterLabel/CounterLabel.docs.json b/packages/react/src/CounterLabel/CounterLabel.docs.json index 17a0b4cb94e..b551fb900a0 100644 --- a/packages/react/src/CounterLabel/CounterLabel.docs.json +++ b/packages/react/src/CounterLabel/CounterLabel.docs.json @@ -3,7 +3,17 @@ "name": "CounterLabel", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-counterlabel--default" + }, + { + "id": "components-counterlabel-features--primary-theme" + }, + { + "id": "components-counterlabel-features--secondary-theme" + } + ], "importPath": "@primer/react", "props": [ { @@ -11,7 +21,17 @@ "type": "'primary' | 'secondary'", "defaultValue": "", "description": "Pass in 'primary' for a darker background and inverse text, or 'secondary' for a lighter background and primary text. Omitting the scheme prop renders the default counter scheme" + }, + { + "name": "className", + "type": "string", + "description": "Class name(s) for custom styling.", + "defaultValue": "" + }, + { + "name": "sx", + "type": "BetterSystemStyleObject" } ], "subcomponents": [] -} \ No newline at end of file +} diff --git a/packages/react/src/CounterLabel/CounterLabel.tsx b/packages/react/src/CounterLabel/CounterLabel.tsx index be06080269f..08105b8701d 100644 --- a/packages/react/src/CounterLabel/CounterLabel.tsx +++ b/packages/react/src/CounterLabel/CounterLabel.tsx @@ -1,13 +1,9 @@ import {clsx} from 'clsx' import type {HTMLAttributes} from 'react' import React, {forwardRef} from 'react' -import styled from 'styled-components' -import {get} from '../constants' -import sx from '../sx' import type {SxProp} from '../sx' import {VisuallyHidden} from '../VisuallyHidden' import {defaultSxProp} from '../utils/defaultSxProp' -import {useFeatureFlag} from '../FeatureFlags' import Box from '../Box' import classes from './CounterLabel.module.css' @@ -20,7 +16,6 @@ export type CounterLabelProps = React.PropsWithChildren< const CounterLabel = forwardRef( ({scheme = 'secondary', sx = defaultSxProp, className, children, ...rest}, forwardedRef) => { - const enabled = useFeatureFlag('primer_react_css_modules_staff') const label = ({children}) const counterProps = { ref: forwardedRef, @@ -29,67 +24,27 @@ const CounterLabel = forwardRef( ...rest, } - if (enabled) { - if (sx !== defaultSxProp) { - return ( - <> - - {children} - - {label} - - ) - } + if (sx !== defaultSxProp) { return ( <> - + {children} - + {label} ) } - return ( <> - + {children} - + {label} ) }, ) -const StyledCounterLabel = styled.span` - display: inline-block; - padding: var(--base-size-2, 0.125rem) var(--base-size-6, 0.375rem); - font-size: 12px; - font-weight: var(--base-text-weight-semibold, bold); - line-height: 1; - border-radius: 20px; - border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--counter-borderColor, var(--color-counter-border)); - - &:where([data-scheme='primary']) { - background-color: ${get('colors.neutral.emphasis')}; - color: ${get('colors.fg.onEmphasis')}; - } - - &:where([data-scheme='secondary']) { - background-color: ${get('colors.neutral.muted')}; - color: ${get('colors.fg.default')}; - } - - &:where(:empty) { - display: none; - } - - /* Place the sx prop styles after previously inserted styles so that it will win out in specificity */ - & { - ${sx} - } -` - CounterLabel.displayName = 'CounterLabel' export default CounterLabel diff --git a/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap b/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap index 1d08b1f9ece..77ff00aad26 100644 --- a/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap +++ b/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CounterLabel renders with secondary scheme when no "scheme" prop is provided 1`] = ` -.c1:not(:focus):not(:active):not(:focus-within) { +.c0:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -11,30 +11,16 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro width: 1px; } -.c0 { - display: inline-block; - padding: var(--base-size-2,0.125rem) var(--base-size-6,0.375rem); - font-size: 12px; - font-weight: var(--base-text-weight-semibold,bold); - line-height: 1; - border-radius: 20px; - border: var(--borderWidth-thin,max(1px,0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border)); -} - -.c0:where(:empty) { - display: none; -} - 1234  ( 1234 @@ -44,7 +30,7 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro `; exports[`CounterLabel respects the primary "scheme" prop 1`] = ` -.c1:not(:focus):not(:active):not(:focus-within) { +.c0:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -54,30 +40,16 @@ exports[`CounterLabel respects the primary "scheme" prop 1`] = ` width: 1px; } -.c0 { - display: inline-block; - padding: var(--base-size-2,0.125rem) var(--base-size-6,0.375rem); - font-size: 12px; - font-weight: var(--base-text-weight-semibold,bold); - line-height: 1; - border-radius: 20px; - border: var(--borderWidth-thin,max(1px,0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border)); -} - -.c0:where(:empty) { - display: none; -} - 1234  ( 1234 diff --git a/packages/react/src/DataTable/DataTable.docs.json b/packages/react/src/DataTable/DataTable.docs.json index b3458391ed0..88d0373ae34 100644 --- a/packages/react/src/DataTable/DataTable.docs.json +++ b/packages/react/src/DataTable/DataTable.docs.json @@ -1,9 +1,12 @@ { "id": "data_table", "name": "DataTable", - "status": "draft", - "a11yReviewed": false, + "status": "alpha", + "a11yReviewed": true, "stories": [ + { + "id": "experimental-components-datatable--default" + }, { "id": "experimental-components-datatable-features--with-title" }, @@ -67,6 +70,34 @@ "name": "cellPadding", "type": "'condensed' | 'normal' | 'spacious'", "description": "Specify the amount of space that should be available around the contents of a cell" + }, + { + "name": "aria-describedby", + "type": "string", + "required": false, + "description": "Provide an id to an element which uniquely describes this table", + "defaultValue": "" + }, + { + "name": "aria-labelledby", + "type": "string", + "required": false, + "description": "Provide an id to an element which uniquely labels this table", + "defaultValue": "" + }, + { + "name": "initialSortColumn", + "type": "string | number", + "required": false, + "description": "Provide the id or field of the column by which the table is sorted. When\nusing this `prop`, the input data must be sorted by this column in\nascending order", + "defaultValue": "" + }, + { + "name": "initialSortDirection", + "type": "'ASC' | 'DESC'", + "required": false, + "description": "Provide the sort direction that the table should be sorted by on the\ncurrently sorted column", + "defaultValue": "" } ], "subcomponents": [ @@ -103,6 +134,15 @@ } ] }, + { + "name": "Table.Actions", + "props": [ + { + "name": "children", + "type": "React.ReactNode" + } + ] + }, { "name": "Table.Body", "props": [ @@ -124,6 +164,13 @@ { "name": "Table.Header", "props": [ + { + "name": "align", + "type": "'end' | 'start'", + "required": false, + "description": "The horizontal alignment of the cell's content", + "defaultValue": "" + }, { "name": "children", "type": "React.ReactNode" @@ -133,6 +180,13 @@ { "name": "Table.Cell", "props": [ + { + "name": "align", + "type": "'end' | 'start'", + "required": false, + "description": "The horizontal alignment of the cell's content", + "defaultValue": "" + }, { "name": "children", "type": "React.ReactNode" @@ -144,6 +198,10 @@ } ] }, + { + "name": "Table.CellPlaceholder", + "props": [] + }, { "name": "Table.Container", "props": [ @@ -153,6 +211,10 @@ } ] }, + { + "name": "Table.Divider", + "props": [] + }, { "name": "Table.Title", "props": [ @@ -163,7 +225,8 @@ { "name": "id", "type": "string", - "required": true + "required": true, + "description": "Provide a unique id for the table subtitle. This should be used along with\n`aria-labelledby` on `DataTable`" } ] }, @@ -177,7 +240,8 @@ { "name": "id", "type": "string", - "required": true + "required": true, + "description": "Provide a unique id for the table subtitle. This should be used along with\n`aria-describedby` on `DataTable`" } ] }, @@ -187,16 +251,19 @@ { "name": "cellPadding", "type": "'condensed' | 'normal' | 'spacious'", - "description": "Specify the amount of space that should be available around the contents of a cell" + "description": "Specify the amount of space that should be available around the contents of a cell", + "defaultValue": "normal" }, { "name": "columns", + "required": true, "type": "Array>" }, { "name": "rows", "type": "number", - "description": "Optionally specify the number of rows which should be included in the skeleton state of the component" + "description": "Optionally specify the number of rows which should be included in the skeleton state of the component", + "defaultValue": "10" } ] }, @@ -206,28 +273,42 @@ { "name": "aria-label", "type": "string", - "required": true + "required": true, + "description": "Defines a string value that labels the current element.\nProvide a label for the navigation landmark rendered by this component\n@see aria-labelledby." }, { "name": "defaultPageIndex", - "type": "string" + "type": "string", + "description": "Provide an optional index to specify the default selected page" }, { "name": "id", - "type": "string" + "type": "string", + "description": "Optionally provide an `id` that is placed on the navigation landmark\nrendered by this component" }, { "name": "onChange", - "type": "({ pageIndex }: { pageIndex: number }) => void" + "type": "({ pageIndex }: { pageIndex: number }) => void", + "description": "Optionally provide a handler that is called whenever the pagination state\nis updated" }, { "name": "pageSize", - "type": "number" + "type": "number", + "description": "Optionally specify the number of items within a page", + "defaultValue": "25" }, { "name": "totalCount", "type": "number", - "required": true + "required": true, + "description": "Specify the total number of items within the collection" + }, + { + "name": "showPages", + "type": "boolean | { narrow?: boolean; regular?: boolean; wide?: boolean; }", + "required": false, + "description": "Whether to show the page numbers", + "defaultValue": "{narrow: false}" } ] }, @@ -258,6 +339,31 @@ } ] }, + { + "name": "Table.SortHeader", + "props": [ + { + "name": "direction", + "type": "'ASC' | 'DESC' | 'NONE'", + "required": true, + "description": "Specify the sort direction for the TableHeader", + "defaultValue": "" + }, + { + "name": "onToggleSort", + "type": "() => void", + "required": true, + "description": "Provide a handler that is called when the sortable TableHeader is\ninteracted with via a click or keyboard interaction", + "defaultValue": "" + }, + { + "name": "align", + "type": "'end' | 'start'", + "description": "The horizontal alignment of the cell's content", + "defaultValue": "" + } + ] + }, { "name": "Column options", "props": [ diff --git a/packages/react/src/DataTable/Table.tsx b/packages/react/src/DataTable/Table.tsx index 35959563773..b4bf6796eb7 100644 --- a/packages/react/src/DataTable/Table.tsx +++ b/packages/react/src/DataTable/Table.tsx @@ -31,7 +31,7 @@ const StyledTable = styled.table>` display: grid; font-size: var(--table-font-size); grid-template-columns: var(--grid-template-columns); - line-height: calc(20 / var(--table-font-size)); + line-height: calc(20 / 12); width: 100%; /* Density modes: condensed, normal, spacious */ diff --git a/packages/react/src/Details/Details.docs.json b/packages/react/src/Details/Details.docs.json index 0dff5c8d6da..6b4ce4e945a 100644 --- a/packages/react/src/Details/Details.docs.json +++ b/packages/react/src/Details/Details.docs.json @@ -3,7 +3,11 @@ "name": "Details", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-details--default" + } + ], "importPath": "@primer/react", "props": [ { diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx index 927edb6091f..bc2a4c30909 100644 --- a/packages/react/src/Details/Details.tsx +++ b/packages/react/src/Details/Details.tsx @@ -8,7 +8,7 @@ import {clsx} from 'clsx' import classes from './Details.module.css' import {useMergedRefs} from '../internal/hooks/useMergedRefs' -const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga' const StyledDetails = toggleStyledComponent( CSS_MODULES_FEATURE_FLAG, diff --git a/packages/react/src/Dialog/Dialog.dev.stories.tsx b/packages/react/src/Dialog/Dialog.dev.stories.tsx new file mode 100644 index 00000000000..8f4d6bb26f4 --- /dev/null +++ b/packages/react/src/Dialog/Dialog.dev.stories.tsx @@ -0,0 +1,213 @@ +import React, {useState, useCallback} from 'react' +import {Text, Button} from '..' +import type {DialogProps, DialogWidth, DialogHeight} from './Dialog' +import {Dialog} from './Dialog' +import {FeatureFlags} from '../FeatureFlags' + +/* Dialog Version 2 */ + +export default { + title: 'Components/Dialog/Dev', +} + +const lipsum = ( + <> + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec + lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis + nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt. + Cras condimentum ante in accumsan ultricies. Morbi quis porta est, sit amet congue augue. Lorem ipsum dolor sit + amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris + fringilla tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus + luctus tempus posuere. + + + + Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis + lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis + sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim + sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus + sem. Mauris a est tellus. + + +) + +interface DialogStoryProps { + width: DialogWidth + height: DialogHeight + subtitle: boolean +} + +function CssHeader({title, subtitle, dialogLabelId}: React.PropsWithChildren) { + if (typeof title === 'string' && typeof subtitle === 'string') { + return ( + + {title.toUpperCase()} + + ) + } + return null +} +function CssBody({children}: React.PropsWithChildren) { + return {children} +} +function CssFooter({footerButtons}: React.PropsWithChildren) { + return ( + + {footerButtons ? : null} + + ) +} +export const WithCss = ({width, height, subtitle}: DialogStoryProps) => { + const [isOpen, setIsOpen] = useState(true) + const onDialogClose = useCallback(() => setIsOpen(false), []) + return ( + + setIsOpen(!isOpen)}>Show dialog + {isOpen && ( + + {lipsum} + + )} + + ) +} + +function SxHeader({title, subtitle, dialogLabelId}: React.PropsWithChildren) { + if (typeof title === 'string' && typeof subtitle === 'string') { + return ( + + {title.toUpperCase()} + + ) + } + return null +} +function SxBody({children}: React.PropsWithChildren) { + return {children} +} +function SxFooter({footerButtons}: React.PropsWithChildren) { + return ( + + {footerButtons ? : null} + + ) +} +export const WithSx = ({width, height, subtitle}: DialogStoryProps) => { + const [isOpen, setIsOpen] = useState(true) + const onDialogClose = useCallback(() => setIsOpen(false), []) + return ( + + setIsOpen(!isOpen)}>Show dialog + {isOpen && ( + + {lipsum} + + )} + + ) +} + +function SxAndCssHeader({ + title, + subtitle, + dialogLabelId, +}: React.PropsWithChildren) { + if (typeof title === 'string' && typeof subtitle === 'string') { + return ( + + {title.toUpperCase()} + + ) + } + return null +} +function SxAndCssBody({children}: React.PropsWithChildren) { + return ( + + {children} + + ) +} +function SxAndCssFooter({footerButtons}: React.PropsWithChildren) { + return ( + + {footerButtons ? : null} + + ) +} +export const WithSxAndCss = ({width, height, subtitle}: DialogStoryProps) => { + const [isOpen, setIsOpen] = useState(true) + const onDialogClose = useCallback(() => setIsOpen(false), []) + return ( + + setIsOpen(!isOpen)}>Show dialog + {isOpen && ( + + {lipsum} + + )} + + ) +} diff --git a/packages/react/src/Dialog/Dialog.docs.json b/packages/react/src/Dialog/Dialog.docs.json index 3a04fe82721..fe93cc281b1 100644 --- a/packages/react/src/Dialog/Dialog.docs.json +++ b/packages/react/src/Dialog/Dialog.docs.json @@ -4,7 +4,38 @@ "name": "Dialog", "status": "draft", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-dialog--default" + }, + { + "id": "components-dialog-features--with-custom-renderers" + }, + { + "id": "components-dialog-features--stress-test" + }, + { + "id": "components-dialog-features--repro-multistep-dialog-with-conditional-footer" + }, + { + "id": "components-dialog-features--bottom-sheet-narrow" + }, + { + "id": "components-dialog-features--full-screen-narrow" + }, + { + "id": "components-dialog-features--side-sheet" + }, + { + "id": "components-dialog-features--return-focus-ref" + }, + { + "id": "components-dialog-features--new-issues" + }, + { + "id": "components-dialog-features--retains-focus-trap-with-dynamic-content" + } + ], "importPath": "@primer/react/experimental", "props": [ { @@ -45,15 +76,17 @@ { "name": "role", "type": "'dialog' | 'alertdialog'", - "description": "The ARIA role to assign to this dialog." + "description": "The ARIA role to assign to this dialog. @see https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal\n@see https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog" }, { "name": "width", - "type": "'small' | 'medium' | 'large' | 'xlarge'" + "type": "'small' | 'medium' | 'large' | 'xlarge'", + "description": "The width of the dialog.\nsmall: 296px\nmedium: 320px\nlarge: 480px\nxlarge: 640px" }, { "name": "height", - "type": "'small' | 'large' | 'auto'" + "type": "'small' | 'large' | 'auto'", + "description": "The height of the dialog.\nsmall: 296x480\nlarge: 480x640\nauto: variable based on contents" }, { "name": "returnFocusRef", @@ -65,6 +98,13 @@ "type": "React.RefObject", "description": "Focus this element when the Dialog opens" }, + { + "name": "position", + "type": "'center' | 'left' | 'right' | { narrow: 'center' | 'left' | 'right' | 'bottom' | 'fullscreen', regular: 'center' | 'left' | 'right' | 'bottom' | 'fullscreen', wide: 'center' | 'left' | 'right' | 'bottom' | 'fullscreen' }", + "required": false, + "description": "The position of the dialog", + "defaultValue": "" + }, { "name": "className", "type": "string | undefined", @@ -72,5 +112,70 @@ "description": "CSS string" } ], - "subcomponents": [] + "subcomponents": [ + { + "name": "Dialog.Body", + "props": [] + }, + { + "name": "Dialog.Buttons", + "props": [ + { + "name": "buttons", + "type": "DialogButtonProps[] (see table below)", + "required": true + } + ] + }, + { + "name": "Dialog.CloseButton", + "props": [ + { + "name": "onClose", + "type": "() => void", + "required": true, + "description": "Callback for closing the Dialog", + "defaultValue": "" + } + ] + }, + { + "name": "Dialog.Footer", + "props": [] + }, + { + "name": "Dialog.Header", + "props": [] + }, + { + "name": "Dialog.Title", + "props": [] + }, + { + "name": "DialogButtonProps", + "props": [ + { + "name": "buttonType", + "type": "'default' | 'danger' | 'primary' | 'normal'", + "description": "The variant of Button to use" + }, + { + "name": "content", + "type": "React.ReactNode", + "required": true, + "description": "The Button's inner text" + }, + { + "name": "autoFocus", + "type": "boolean", + "description": "If true, and if this is the only button with autoFocus set to true, focus this button automatically when the dialog appears." + }, + { + "name": "ref", + "type": "React.RefObject", + "description": " A reference to the rendered Button’s DOM node, used together with `autoFocus` for `focusTrap`’s `initialFocus`." + } + ] + } + ] } diff --git a/packages/react/src/Dialog/Dialog.module.css b/packages/react/src/Dialog/Dialog.module.css new file mode 100644 index 00000000000..444df0b3510 --- /dev/null +++ b/packages/react/src/Dialog/Dialog.module.css @@ -0,0 +1,253 @@ +@keyframes dialog-backdrop-appear { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes Overlay--motion-scaleFade { + 0% { + opacity: 0; + transform: scale(0.5); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes Overlay--motion-slideUp { + from { + transform: translateY(100%); + } +} + +@keyframes Overlay--motion-slideInRight { + from { + transform: translateX(-100%); + } +} + +@keyframes Overlay--motion-slideInLeft { + from { + transform: translateX(100%); + } +} + +.Backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + background-color: var(--overlay-backdrop-bgColor); + animation: dialog-backdrop-appear 200ms cubic-bezier(0.33, 1, 0.68, 1); + align-items: center; + justify-content: center; + + &[data-position-regular='center'] { + align-items: center; + justify-content: center; + } + + &[data-position-regular='left'] { + align-items: center; + justify-content: flex-start; + } + + &[data-position-regular='right'] { + align-items: center; + justify-content: flex-end; + } + + .DialogOverflowWrapper { + flex-grow: 1; + } + + @media (max-width: 767px) { + &[data-position-narrow='center'] { + align-items: center; + justify-content: center; + } + + &[data-position-narrow='bottom'] { + align-items: end; + justify-content: center; + } + } +} + +.Dialog { + display: flex; + /* stylelint-disable-next-line primer/responsive-widths */ + width: 640px; + min-width: 296px; + max-width: calc(100dvw - 64px); + height: auto; + max-height: calc(100dvh - 64px); + flex-direction: column; + background-color: var(--overlay-bgColor); + border-radius: var(--borderRadius-large); + border-radius: var(--borderRadius-large, var(--borderRadius-large)); + box-shadow: var(--shadow-floating-small); + opacity: 1; + + &:where([data-width='small']) { + width: 296px; + } + + &:where([data-width='medium']) { + width: 320px; + } + + &:where([data-width='large']) { + /* stylelint-disable-next-line primer/responsive-widths */ + width: 480px; + } + + &:where([data-height='small']) { + height: 480px; + } + + &:where([data-height='large']) { + height: 640px; + } + + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + } + + &[data-position-regular='center'] { + border-radius: var(--borderRadius-large, var(--borderRadius-large)); + + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + } + } + + &[data-position-regular='left'] { + height: 100dvh; + max-height: unset; + border-radius: var(--borderRadius-large, var(--borderRadius-large)); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + } + } + + &[data-position-regular='right'] { + height: 100dvh; + max-height: unset; + border-radius: var(--borderRadius-large, var(--borderRadius-large)); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + } + } + + @media (max-width: 767px) { + &[data-position-narrow='center'] { + /* stylelint-disable-next-line primer/responsive-widths */ + width: 640px; + height: auto; + border-radius: var(--borderRadius-large, var(--borderRadius-large)); + + &:where([data-width='small']) { + width: 296px; + } + + &:where([data-width='medium']) { + width: 320px; + } + + &:where([data-width='large']) { + /* stylelint-disable-next-line primer/responsive-widths */ + width: 480px; + } + + &:where([data-height='small']) { + height: 480px; + } + + &:where([data-height='large']) { + height: 640px; + } + } + + &[data-position-narrow='bottom'] { + width: 100dvw; + max-width: 100dvw; + height: auto; + max-height: calc(100dvh - 64px); + border-radius: var(--borderRadius-large, var(--borderRadius-large)); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + } + } + + &[data-position-narrow='fullscreen'] { + width: 100%; + max-width: 100dvw; + height: 100%; + max-height: 100dvh; + border-radius: unset !important; + flex-grow: 1; + + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + } + } + } +} + +.Header { + z-index: 1; + padding: var(--base-size-8); + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 1px 0 var(--borderColor-default); + flex-shrink: 0; +} + +.Title { + margin: 0; /* override default margin */ + font-size: var(--text-body-size-medium); + font-weight: var(--text-title-weight-large); +} + +.Subtitle { + margin: 0; /* override default margin */ + margin-top: var(--base-size-4); + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-normal); + color: var(--fgColor-muted); +} + +.Body { + padding: var(--base-size-16); + overflow: auto; + flex-grow: 1; +} + +.Footer { + z-index: 1; + display: flex; + padding: var(--base-size-16); + /* stylelint-disable-next-line primer/box-shadow */ + box-shadow: 0 -1px 0 var(--borderColor-default); + flex-flow: wrap; + justify-content: flex-end; + gap: var(--base-size-8); + flex-shrink: 0; +} diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx index 85095fa0b20..1d707fd321f 100644 --- a/packages/react/src/Dialog/Dialog.test.tsx +++ b/packages/react/src/Dialog/Dialog.test.tsx @@ -6,6 +6,7 @@ import MatchMediaMock from 'jest-matchmedia-mock' import {behavesAsComponent, checkExports} from '../utils/testing' import axe from 'axe-core' import {Button} from '../Button' +import {FeatureFlags} from '../FeatureFlags' let matchMedia: MatchMediaMock @@ -226,6 +227,53 @@ describe('Dialog', () => { expect(getByRole('button', {name: 'return focus to (button 2)'})).toHaveFocus() }) + + it('should support `className` on the Dialog element', async () => { + const Fixture = () => { + const [isOpen, setIsOpen] = React.useState(true) + const triggerRef = React.useRef(null) + + return ( + <> + setIsOpen(true)}> + Show dialog + + {isOpen && ( + setIsOpen(false)} returnFocusRef={triggerRef} className="custom-class"> + body + + )} + + ) + } + + const FeatureFlagElement = () => { + return ( + + + + ) + } + + const user = userEvent.setup() + + let component = render() + let triggerButton = component.getByRole('button', {name: 'Show dialog'}) + await user.click(triggerButton) + expect(component.getByRole('dialog')).toHaveClass('custom-class') + component.unmount() + + component = render() + triggerButton = component.getByRole('button', {name: 'Show dialog'}) + await user.click(triggerButton) + expect(component.getByRole('dialog')).toHaveClass('custom-class') + }) }) it('automatically focuses the element that is specified as initialFocusRef', () => { diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx index 13d1b4fd752..0152906ada3 100644 --- a/packages/react/src/Dialog/Dialog.tsx +++ b/packages/react/src/Dialog/Dialog.tsx @@ -16,6 +16,12 @@ import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' import {useId} from '../hooks/useId' import {ScrollableRegion} from '../ScrollableRegion' import type {ResponsiveValue} from '../hooks/useResponsiveValue' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' + +import classes from './Dialog.module.css' +import {useFeatureFlag} from '../FeatureFlags' +import {clsx} from 'clsx' /* Dialog Version 2 */ @@ -25,7 +31,7 @@ import type {ResponsiveValue} from '../hooks/useResponsiveValue' */ export type DialogButtonProps = Omit & { /** - * The type of Button element to use + * The variant of Button to use */ buttonType?: 'default' | 'primary' | 'danger' | 'normal' @@ -166,58 +172,65 @@ export interface DialogHeaderProps extends DialogProps { dialogDescriptionId: string } -const Backdrop = styled('div')` - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - display: flex; - align-items: center; - justify-content: center; - background-color: ${get('colors.primer.canvas.backdrop')}; - animation: dialog-backdrop-appear 200ms ${get('animation.easeOutCubic')}; - - &[data-position-regular='center'] { +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff' + +const Backdrop = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: flex; align-items: center; justify-content: center; - } - - &[data-position-regular='left'] { - align-items: center; - justify-content: flex-start; - } + background-color: ${get('colors.primer.canvas.backdrop')}; + animation: dialog-backdrop-appear 200ms ${get('animation.easeOutCubic')}; - &[data-position-regular='right'] { - align-items: center; - justify-content: flex-end; - } + &[data-position-regular='center'] { + align-items: center; + justify-content: center; + } - .DialogOverflowWrapper { - flex-grow: 1; - } + &[data-position-regular='left'] { + align-items: center; + justify-content: flex-start; + } - @media (max-width: 767px) { - &[data-position-narrow='center'] { + &[data-position-regular='right'] { align-items: center; - justify-content: center; + justify-content: flex-end; } - &[data-position-narrow='bottom'] { - align-items: end; - justify-content: center; + .DialogOverflowWrapper { + flex-grow: 1; } - } - @keyframes dialog-backdrop-appear { - 0% { - opacity: 0; + @media (max-width: 767px) { + &[data-position-narrow='center'] { + align-items: center; + justify-content: center; + } + + &[data-position-narrow='bottom'] { + align-items: end; + justify-content: center; + } } - 100% { - opacity: 1; + + @keyframes dialog-backdrop-appear { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } - } -` + `, +) +Backdrop.displayName = 'Backdrop' const heightMap = { small: '480px', @@ -238,123 +251,128 @@ export type DialogHeight = keyof typeof heightMap type StyledDialogProps = { width?: DialogWidth height?: DialogHeight -} & SxProp - -const StyledDialog = styled.div` - display: flex; - flex-direction: column; - background-color: ${get('colors.canvas.overlay')}; - box-shadow: ${get('shadows.overlay.shadow')}; - width: ${props => widthMap[props.width ?? ('xlarge' as const)]}; - height: ${props => heightMap[props.height ?? ('auto' as const)]}; - min-width: 296px; - max-width: calc(100dvw - 64px); - max-height: calc(100dvh - 64px); - border-radius: 12px; - opacity: 1; - - @media screen and (prefers-reduced-motion: no-preference) { - animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; - } - - &[data-position-regular='center'] { - border-radius: var(--borderRadius-large, 0.75rem); +} & SxProp & + React.ComponentPropsWithRef<'div'> + +const StyledDialog = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + display: flex; + flex-direction: column; + background-color: ${get('colors.canvas.overlay')}; + box-shadow: ${get('shadows.overlay.shadow')}; + width: ${props => widthMap[props.width ?? ('xlarge' as const)]}; + height: ${props => heightMap[props.height ?? ('auto' as const)]}; + min-width: 296px; + max-width: calc(100dvw - 64px); + max-height: calc(100dvh - 64px); + border-radius: 12px; + opacity: 1; @media screen and (prefers-reduced-motion: no-preference) { animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; } - } - - &[data-position-regular='left'] { - height: 100dvh; - max-height: unset; - border-radius: var(--borderRadius-large, 0.75rem); - border-top-left-radius: 0; - border-bottom-left-radius: 0; - - @media screen and (prefers-reduced-motion: no-preference) { - animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; - } - } - &[data-position-regular='right'] { - height: 100dvh; - max-height: unset; - border-radius: var(--borderRadius-large, 0.75rem); - border-top-right-radius: 0; - border-bottom-right-radius: 0; + &[data-position-regular='center'] { + border-radius: var(--borderRadius-large, 0.75rem); - @media screen and (prefers-reduced-motion: no-preference) { - animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + } } - } - @media (max-width: 767px) { - &[data-position-narrow='center'] { + &[data-position-regular='left'] { + height: 100dvh; + max-height: unset; border-radius: var(--borderRadius-large, 0.75rem); - width: ${props => widthMap[props.width ?? ('xlarge' as const)]}; - height: ${props => heightMap[props.height ?? ('auto' as const)]}; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + } } - &[data-position-narrow='bottom'] { - width: 100dvw; - height: auto; - max-width: 100dvw; - max-height: calc(100dvh - 64px); + &[data-position-regular='right'] { + height: 100dvh; + max-height: unset; border-radius: var(--borderRadius-large, 0.75rem); + border-top-right-radius: 0; border-bottom-right-radius: 0; - border-bottom-left-radius: 0; @media screen and (prefers-reduced-motion: no-preference) { - animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; } } - &[data-position-narrow='fullscreen'] { - width: 100%; - max-width: 100dvw; - height: 100%; - max-height: 100dvh; - border-radius: unset !important; - flex-grow: 1; + @media (max-width: 767px) { + &[data-position-narrow='center'] { + border-radius: var(--borderRadius-large, 0.75rem); + width: ${props => widthMap[props.width ?? ('xlarge' as const)]}; + height: ${props => heightMap[props.height ?? ('auto' as const)]}; + } - @media screen and (prefers-reduced-motion: no-preference) { - animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + &[data-position-narrow='bottom'] { + width: 100dvw; + height: auto; + max-width: 100dvw; + max-height: calc(100dvh - 64px); + border-radius: var(--borderRadius-large, 0.75rem); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + } } - } - } - @keyframes Overlay--motion-scaleFade { - 0% { - opacity: 0; - transform: scale(0.5); + &[data-position-narrow='fullscreen'] { + width: 100%; + max-width: 100dvw; + height: 100%; + max-height: 100dvh; + border-radius: unset !important; + flex-grow: 1; + + @media screen and (prefers-reduced-motion: no-preference) { + animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running; + } + } } - 100% { - opacity: 1; - transform: scale(1); + + @keyframes Overlay--motion-scaleFade { + 0% { + opacity: 0; + transform: scale(0.5); + } + 100% { + opacity: 1; + transform: scale(1); + } } - } - @keyframes Overlay--motion-slideUp { - from { - transform: translateY(100%); + @keyframes Overlay--motion-slideUp { + from { + transform: translateY(100%); + } } - } - @keyframes Overlay--motion-slideInRight { - from { - transform: translateX(-100%); + @keyframes Overlay--motion-slideInRight { + from { + transform: translateX(-100%); + } } - } - @keyframes Overlay--motion-slideInLeft { - from { - transform: translateX(100%); + @keyframes Overlay--motion-slideInLeft { + from { + transform: translateX(100%); + } } - } - ${sx}; -` + ${sx}; + `, +) const DefaultHeader: React.FC> = ({ dialogLabelId, @@ -416,6 +434,8 @@ const _Dialog = React.forwardRef(null) @@ -481,29 +501,30 @@ const _Dialog = React.forwardRef { + onMouseDown={(e: React.MouseEvent) => { setLastMouseDownIsBackdrop(e.target === e.currentTarget) }} > {header} @@ -518,51 +539,109 @@ const _Dialog = React.forwardRef` - box-shadow: 0 1px 0 ${get('colors.border.default')}; - padding: ${get('space.2')}; - z-index: 1; - flex-shrink: 0; - ${sx}; -` - -const Title = styled.h1` - font-size: ${get('fontSizes.1')}; - font-weight: ${get('fontWeights.bold')}; - margin: 0; /* override default margin */ - ${sx}; -` - -const Subtitle = styled.h2` - font-size: ${get('fontSizes.0')}; - color: ${get('colors.fg.muted')}; - margin: 0; /* override default margin */ - margin-top: ${get('space.1')}; - font-weight: normal; - - ${sx}; -` - -const Body = styled.div` - flex-grow: 1; - overflow: auto; - padding: ${get('space.3')}; - - ${sx}; -` - -const Footer = styled.div` - box-shadow: 0 -1px 0 ${get('colors.border.default')}; - padding: ${get('space.3')}; - display: flex; - flex-flow: wrap; - justify-content: flex-end; - gap: ${get('space.2')}; - z-index: 1; - flex-shrink: 0; - - ${sx}; -` +const StyledHeader = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + box-shadow: 0 1px 0 ${get('colors.border.default')}; + padding: ${get('space.2')}; + z-index: 1; + flex-shrink: 0; + ${sx}; + `, +) +type StyledHeaderProps = React.ComponentProps<'div'> & SxProp + +const Header = React.forwardRef(function Header({className, ...rest}, forwardRef) { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return +}) +Header.displayName = 'Dialog.Header' + +const StyledTitle = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'h1', + styled.h1` + font-size: ${get('fontSizes.1')}; + font-weight: ${get('fontWeights.bold')}; + margin: 0; /* override default margin */ + ${sx}; + `, +) +type StyledTitleProps = React.ComponentProps<'h1'> & SxProp + +const Title = React.forwardRef(function Title({className, ...rest}, forwardRef) { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return +}) +Title.displayName = 'Dialog.Title' + +const StyledSubtitle = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'h2', + styled.h2` + font-size: ${get('fontSizes.0')}; + color: ${get('colors.fg.muted')}; + margin: 0; /* override default margin */ + margin-top: ${get('space.1')}; + font-weight: normal; + ${sx}; + `, +) +type StyledSubtitleProps = React.ComponentProps<'h2'> & SxProp + +const Subtitle = React.forwardRef(function Subtitle( + {className, ...rest}, + forwardRef, +) { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return +}) +Subtitle.displayName = 'Dialog.Subtitle' + +const StyledBody = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + flex-grow: 1; + overflow: auto; + padding: ${get('space.3')}; + + ${sx}; + `, +) +type StyledBodyProps = React.ComponentProps<'div'> & SxProp + +const Body = React.forwardRef(function Body({className, ...rest}, forwardRef) { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return +}) as PolymorphicForwardRefComponent<'div', StyledBodyProps> + +Body.displayName = 'Dialog.Body' + +const StyledFooter = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + box-shadow: 0 -1px 0 ${get('colors.border.default')}; + padding: ${get('space.3')}; + display: flex; + flex-flow: wrap; + justify-content: flex-end; + gap: ${get('space.2')}; + z-index: 1; + flex-shrink: 0; + + ${sx}; + `, +) +type StyledFooterProps = React.ComponentProps<'div'> & SxProp + +const Footer = React.forwardRef(function Footer({className, ...rest}, forwardRef) { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return +}) +Footer.displayName = 'Dialog.Footer' const Buttons: React.FC> = ({buttons}) => { const autoFocusRef = useProvidedRefOrCreate(buttons.find(button => button.autoFocus)?.ref) diff --git a/packages/react/src/DialogV1/Dialog.docs.json b/packages/react/src/DialogV1/Dialog.docs.json index 254859970d8..77b44d8279a 100644 --- a/packages/react/src/DialogV1/Dialog.docs.json +++ b/packages/react/src/DialogV1/Dialog.docs.json @@ -4,7 +4,11 @@ "name": "Dialog", "status": "deprecated", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-dialog--default" + } + ], "importPath": "@primer/react/deprecated", "props": [ { @@ -37,6 +41,14 @@ "type": "string", "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both." }, + { + "name": "narrow", + "type": "boolean" + }, + { + "name": "wide", + "type": "boolean" + }, { "name": "sx", "type": "SystemStyleObject" diff --git a/packages/react/src/DialogV1/Dialog.module.css b/packages/react/src/DialogV1/Dialog.module.css new file mode 100644 index 00000000000..dba07129c37 --- /dev/null +++ b/packages/react/src/DialogV1/Dialog.module.css @@ -0,0 +1,67 @@ +.Overlay { + &::before { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 99; + display: block; + cursor: default; + content: ' '; + background: var(--overlay-backdrop-bgColor); + } +} + +.CloseIcon { + position: absolute; + top: var(--base-size-8); + right: var(--base-size-16); +} + +.Dialog { + position: fixed; + top: 0; + left: 50%; + z-index: 999; + max-height: 80vh; + margin: 10vh auto; + background-color: var(--bgColor-default); + border-radius: var(--borderRadius-medium); + outline: none; + box-shadow: var(--shadow-floating-large); + transform: translateX(-50%); + + &:where([data-width='default']) { + /* stylelint-disable-next-line primer/responsive-widths */ + width: 440px; + } + + &:where([data-width='narrow']) { + width: 320px; + } + + &:where([data-width='wide']) { + /* stylelint-disable-next-line primer/responsive-widths */ + width: 640px; + } + + @media screen and (max-width: 750px) { + width: 100dvw; + height: 100dvh; + margin: 0; + border-radius: 0; + } +} + +.Header { + display: flex; + padding: var(--base-size-16); + background: var(--bgColor-muted); + border-bottom: var(--borderWidth-thin) solid var(--borderColor-default); + border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0; + + @media screen and (max-width: 750px) { + border-radius: 0; + } +} diff --git a/packages/react/src/DialogV1/Dialog.test.tsx b/packages/react/src/DialogV1/Dialog.test.tsx index 7df87bd2c75..d4023e6365c 100644 --- a/packages/react/src/DialogV1/Dialog.test.tsx +++ b/packages/react/src/DialogV1/Dialog.test.tsx @@ -4,6 +4,7 @@ import {Dialog} from '../DialogV1' import {render as HTMLRender, fireEvent} from '@testing-library/react' import axe from 'axe-core' import {behavesAsComponent} from '../utils/testing' +import {FeatureFlags} from '../FeatureFlags' /* Dialog Version 1*/ @@ -113,6 +114,25 @@ describe('Dialog', () => { behavesAsComponent({Component: Dialog.Header}) }) + it('should support `className` on the Dialog element', () => { + const Element = () => + const FeatureFlagElement = () => { + return ( + + + + ) + } + expect(HTMLRender().container.children[1]).toHaveClass('test-class-name') + expect(HTMLRender().container.children[1]).toHaveClass('test-class-name') + }) + it('should have no axe violations', async () => { const spy = jest.spyOn(console, 'warn').mockImplementation() const {container} = HTMLRender(comp) diff --git a/packages/react/src/DialogV1/Dialog.tsx b/packages/react/src/DialogV1/Dialog.tsx index 3e565ba8d3d..7361b223251 100644 --- a/packages/react/src/DialogV1/Dialog.tsx +++ b/packages/react/src/DialogV1/Dialog.tsx @@ -10,6 +10,12 @@ import Text from '../Text' import type {ComponentProps} from '../utils/types' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' import {XIcon} from '@primer/octicons-react' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' +import {clsx} from 'clsx' +import classes from './Dialog.module.css' + +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff' // Dialog v1 const noop = () => null @@ -19,41 +25,50 @@ type StyledDialogBaseProps = { wide?: boolean } & SxProp -const DialogBase = styled.div` - box-shadow: ${get('shadows.shadow.large')}; - border-radius: ${get('radii.2')}; - position: fixed; - top: 0; - left: 50%; - transform: translateX(-50%); - max-height: 80vh; - z-index: 999; - margin: 10vh auto; - background-color: ${get('colors.canvas.default')}; - width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')}; - outline: none; - - @media screen and (max-width: 750px) { - width: 100dvw; - margin: 0; - border-radius: 0; - height: 100dvh; - } +const DialogBase = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + box-shadow: ${get('shadows.shadow.large')}; + border-radius: ${get('radii.2')}; + position: fixed; + top: 0; + left: 50%; + transform: translateX(-50%); + max-height: 80vh; + z-index: 999; + margin: 10vh auto; + background-color: ${get('colors.canvas.default')}; + width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')}; + outline: none; + + @media screen and (max-width: 750px) { + width: 100dvw; + margin: 0; + border-radius: 0; + height: 100dvh; + } - ${sx}; -` + ${sx}; + `, +) -const DialogHeaderBase = styled(Box)` - border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px; - border-bottom: 1px solid ${get('colors.border.default')}; - display: flex; +const DialogHeaderBase = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled(Box)` + border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px; + border-bottom: 1px solid ${get('colors.border.default')}; + display: flex; - @media screen and (max-width: 750px) { - border-radius: 0px; - } + @media screen and (max-width: 750px) { + border-radius: 0px; + } + + ${sx}; + `, +) - ${sx}; -` export type DialogHeaderProps = ComponentProps function DialogHeader({theme, children, backgroundColor = 'canvas.subtle', ...rest}: DialogHeaderProps) { @@ -65,28 +80,40 @@ function DialogHeader({theme, children, backgroundColor = 'canvas.subtle', ...re ) } + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + return ( - + {children} ) } -const Overlay = styled.span` - &:before { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - cursor: default; - content: ' '; - background: transparent; - z-index: 99; - background: ${get('colors.primer.canvas.backdrop')}; - } -` +const Overlay = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'span', + styled.span` + &:before { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + cursor: default; + content: ' '; + background: transparent; + z-index: 99; + background: ${get('colors.primer.canvas.backdrop')}; + } + `, +) type InternalDialogProps = { isOpen?: boolean @@ -96,7 +123,7 @@ type InternalDialogProps = { } & ComponentProps const Dialog = forwardRef( - ({children, onDismiss = noop, isOpen, initialFocusRef, returnFocusRef, ...props}, forwardedRef) => { + ({children, onDismiss = noop, isOpen, initialFocusRef, returnFocusRef, className, ...props}, forwardedRef) => { const overlayRef = useRef(null) const modalRef = useRef(null) useRefObjectAsForwardedRef(forwardedRef, modalRef) @@ -118,17 +145,33 @@ const Dialog = forwardRef( returnFocusRef, overlayRef, }) + + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + + const iconStyles = enabled + ? {className: classes.CloseIcon} + : {sx: {position: 'absolute', top: '8px', right: '16px'}} + return isOpen ? ( <> - - + + {children} diff --git a/packages/react/src/DialogV1/Dialog.types.test.tsx b/packages/react/src/DialogV1/Dialog.types.test.tsx index 010f84f6fed..8c31a1a8768 100644 --- a/packages/react/src/DialogV1/Dialog.types.test.tsx +++ b/packages/react/src/DialogV1/Dialog.types.test.tsx @@ -4,8 +4,3 @@ import {Dialog} from '../DialogV1' export function shouldAcceptCallWithNoProps() { return } - -export function shouldNotAcceptSystemProps() { - // @ts-expect-error system props should not be accepted - return -} diff --git a/packages/react/src/FeatureFlags/FeatureFlags.docs.json b/packages/react/src/FeatureFlags/FeatureFlags.docs.json new file mode 100644 index 00000000000..a39f86ceea8 --- /dev/null +++ b/packages/react/src/FeatureFlags/FeatureFlags.docs.json @@ -0,0 +1,17 @@ +{ + "id": "feature_flags", + "name": "FeatureFlags", + "status": "draft", + "a11yReviewed": false, + "stories": [], + "importPath": "@primer/react/experimental", + "props": [ + { + "name": "flags", + "type": "FeatureFlags", + "required": true, + "description": "Object where keys are feature flag names and values are boolean" + } + ], + "subcomponents": [] +} diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx index 0152247f387..ef75656cabc 100644 --- a/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx +++ b/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx @@ -30,6 +30,7 @@ export interface FilteredActionListProps onFilterChange: (value: string, e: React.ChangeEvent) => void textInputProps?: Partial> inputRef?: React.RefObject + className?: string } const StyledHeader = styled.div` @@ -46,6 +47,7 @@ export function FilteredActionList({ textInputProps, inputRef: providedInputRef, sx, + className, ...listProps }: FilteredActionListProps): JSX.Element { const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '') @@ -110,7 +112,14 @@ export function FilteredActionList({ useScrollFlash(scrollContainerRef) return ( - + ) => void textInputProps?: Partial> inputRef?: React.RefObject + className?: string } const StyledHeader = styled.div` @@ -52,6 +53,7 @@ export function FilteredActionList({ sx, groupMetadata, showItemDividers, + className, ...listProps }: FilteredActionListProps): JSX.Element { const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '') @@ -129,7 +131,14 @@ export function FilteredActionList({ } return ( - + element by FormControl's React Context. \n When 'as' prop is 'legend' or 'span', it is used as the `id` for the element." + }, + { + "name": "className", + "type": "string", + "description": "Class name(s) for custom styling.", + "defaultValue": "" + }, { "name": "sx", "type": "SystemStyleObject" @@ -77,6 +161,12 @@ { "name": "FormControl.Caption", "props": [ + { + "name": "id", + "type": "string", + "description": "Custom ID to override the ID set by FormControl's React Context", + "defaultValue": "" + }, { "name": "children", "type": "React.ReactNode", @@ -105,6 +195,12 @@ "required": true, "description": "Changes the visual style to match the validation status" }, + { + "name": "id", + "type": "string", + "description": "May be used to override the ID assigned by FormControl's React Context", + "defaultValue": "" + }, { "name": "sx", "type": "SystemStyleObject" @@ -127,4 +223,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx index d1e7a284ef4..cdf06c1a6f7 100644 --- a/packages/react/src/FormControl/FormControl.features.stories.tsx +++ b/packages/react/src/FormControl/FormControl.features.stories.tsx @@ -21,6 +21,7 @@ import { } from '..' import {MarkGithubIcon, TriangleDownIcon} from '@primer/octicons-react' import type {ItemInput} from '../deprecated/ActionList/List' +import {Stack} from '../Stack' export default { title: 'Components/FormControl/Features', @@ -339,7 +340,7 @@ export const WithSelectPanel = () => { } export const WithLeadingVisual = () => ( - + Option one @@ -356,7 +357,24 @@ export const WithLeadingVisual = () => ( This one has a caption - + + + Option three + + + + + + + + Option four + + + + + This one has a caption + + ) export const DisabledInputs = () => ( diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx index f2eb061b594..69d4b9bf871 100644 --- a/packages/react/src/FormControl/FormControl.tsx +++ b/packages/react/src/FormControl/FormControl.tsx @@ -14,9 +14,9 @@ import {get} from '../constants' import {useSlots} from '../hooks/useSlots' import type {SxProp} from '../sx' import {useId} from '../hooks/useId' -import FormControlCaption from './_FormControlCaption' -import FormControlLabel from './_FormControlLabel' -import FormControlLeadingVisual from './_FormControlLeadingVisual' +import {FormControlCaption} from './FormControlCaption' +import FormControlLabel from './FormControlLabel' +import FormControlLeadingVisual from './FormControlLeadingVisual' import FormControlValidation from './_FormControlValidation' import {FormControlContextProvider} from './_FormControlContext' import {warning} from '../utils/warning' @@ -172,17 +172,15 @@ const FormControl = React.forwardRef( {slots.leadingVisual} )} - {!slots.label?.props.visuallyHidden || slots.caption ? ( - - {slots.label} - {slots.caption} - - ) : ( - <> - {slots.label} - {slots.caption} - - )} + *': {paddingLeft: 'var(--stack-gap-condensed)'}, + '> label': {fontWeight: 'var(--base-text-weight-normal)'}, + }} + > + {slots.label} + {slots.caption} + ) : ( + +function FormControlCaption({id, children, sx}: FormControlCaptionProps) { + const {captionId, disabled} = useFormControlContext() + return ( + + {children} + + ) +} + +export {FormControlCaption} diff --git a/packages/react/src/FormControl/_FormControlLabel.tsx b/packages/react/src/FormControl/FormControlLabel.tsx similarity index 95% rename from packages/react/src/FormControl/_FormControlLabel.tsx rename to packages/react/src/FormControl/FormControlLabel.tsx index 4d62b19e114..485894c18d4 100644 --- a/packages/react/src/FormControl/_FormControlLabel.tsx +++ b/packages/react/src/FormControl/FormControlLabel.tsx @@ -1,7 +1,7 @@ import React from 'react' -import InputLabel from '../internal/components/InputLabel' import type {SxProp} from '../sx' import {useFormControlContext} from './_FormControlContext' +import {InputLabel} from '../internal/components/InputLabel' export type Props = { /** @@ -49,6 +49,7 @@ const FormControlLabel: React.FC< sx, ...props, } + return {children} } diff --git a/packages/react/src/FormControl/FormControlLeadingVisual.tsx b/packages/react/src/FormControl/FormControlLeadingVisual.tsx new file mode 100644 index 00000000000..27c18d69aca --- /dev/null +++ b/packages/react/src/FormControl/FormControlLeadingVisual.tsx @@ -0,0 +1,44 @@ +import React from 'react' +import {get} from '../constants' +import type {SxProp} from '../sx' +import {useFormControlContext} from './_FormControlContext' +import styled from 'styled-components' +import sx from '../sx' + +const FormControlLeadingVisual: React.FC> = ({children, sx}) => { + const {disabled, captionId} = useFormControlContext() + return ( + + {children} + + ) +} + +const StyledLeadingVisual = styled.div` + --leadingVisual-size: ${get('fontSizes.2')}; + + color: var(--fgColor-default); + margin-inline-start: ${get('space.2')}; + + &:where([data-control-disabled]) { + color: var(--fgColor-muted); + } + + & > * { + min-width: var(--leadingVisual-size); + min-height: var(--leadingVisual-size); + fill: currentColor; + } + + &:where([data-has-caption]) { + --leadingVisual-size: ${get('fontSizes.4')}; + } + + ${sx} +` + +export default FormControlLeadingVisual diff --git a/packages/react/src/FormControl/_FormControlCaption.tsx b/packages/react/src/FormControl/_FormControlCaption.tsx deleted file mode 100644 index 4a3be2bdedb..00000000000 --- a/packages/react/src/FormControl/_FormControlCaption.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import InputCaption from '../internal/components/InputCaption' -import type {SxProp} from '../sx' -import {useFormControlContext} from './_FormControlContext' - -const FormControlCaption: React.FC> = ({children, sx, id}) => { - const {captionId, disabled} = useFormControlContext() - return ( - - {children} - - ) -} - -export default FormControlCaption diff --git a/packages/react/src/FormControl/_FormControlContext.tsx b/packages/react/src/FormControl/_FormControlContext.tsx index f27b321ec84..e7a4cb550e3 100644 --- a/packages/react/src/FormControl/_FormControlContext.tsx +++ b/packages/react/src/FormControl/_FormControlContext.tsx @@ -17,7 +17,7 @@ export function useFormControlContext(): FormControlContext { return useContext(FormControlContext) ?? {} } -interface FormControlForwardedProps extends Omit { +interface FormControlForwardedProps extends Pick { ['aria-describedby']?: string } @@ -29,22 +29,14 @@ interface FormControlForwardedProps extends Omit(externalProps: P): P & FormControlForwardedProps -/** - * Make any component compatible with `FormControl`'s automatic wiring up of accessibility attributes & validation by - * reading the props from this hook and handling them / assigning them to the underlying form control. If used outside - * of `FormControl`, this hook has no effect. - */ -export function useFormControlForwardedProps(): FormControlForwardedProps -export function useFormControlForwardedProps(externalProps: FormControlForwardedProps = {}) { +export function useFormControlForwardedProps(externalProps: P): P & FormControlForwardedProps { const context = useContext(FormControlContext) - if (!context) return externalProps + if (!context) return externalProps as P & FormControlForwardedProps return { disabled: context.disabled, id: context.id, required: context.required, - validationStatus: context.validationStatus, ['aria-describedby']: [context.validationMessageId, context.captionId].filter(Boolean).join(' ') || undefined, ...externalProps, } diff --git a/packages/react/src/FormControl/_FormControlLeadingVisual.tsx b/packages/react/src/FormControl/_FormControlLeadingVisual.tsx deleted file mode 100644 index 80551681704..00000000000 --- a/packages/react/src/FormControl/_FormControlLeadingVisual.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import Box from '../Box' -import {get} from '../constants' -import type {SxProp} from '../sx' -import {useFormControlContext} from './_FormControlContext' - -const FormControlLeadingVisual: React.FC> = ({children, sx}) => { - const {disabled, captionId} = useFormControlContext() - return ( - *': { - minWidth: captionId ? get('fontSizes.4') : get('fontSizes.2'), - minHeight: captionId ? get('fontSizes.4') : get('fontSizes.2'), - fill: 'currentColor', - }, - ...sx, - }} - ml={2} - > - {children} - - ) -} - -export default FormControlLeadingVisual diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx index 3c7c194ca43..e36b2d983b1 100644 --- a/packages/react/src/Header/Header.tsx +++ b/packages/react/src/Header/Header.tsx @@ -15,7 +15,7 @@ type StyledHeaderProps = React.ComponentProps<'header'> & SxProp type StyledHeaderItemProps = React.ComponentProps<'div'> & SxProp & {full?: boolean} type StyledHeaderLinkProps = React.ComponentProps<'a'> & SxProp & {to?: Location | Pathname} -const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff' const StyledHeader = toggleStyledComponent( CSS_MODULES_FEATURE_FLAG, diff --git a/packages/react/src/Hidden/Hidden.docs.json b/packages/react/src/Hidden/Hidden.docs.json index ab4ecf2edef..2820003d38c 100644 --- a/packages/react/src/Hidden/Hidden.docs.json +++ b/packages/react/src/Hidden/Hidden.docs.json @@ -1,9 +1,19 @@ { - "id": "drafts_hidden", + "id": "hidden", "name": "Hidden", "status": "draft", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "drafts-components-hidden--default" + }, + { + "id": "drafts-components-hidden-features--hide-content" + }, + { + "id": "drafts-components-hidden-features--render-content-responsively" + } + ], "importPath": "@primer/react/experimental", "props": [ { diff --git a/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx new file mode 100644 index 00000000000..95c6d281cac --- /dev/null +++ b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx @@ -0,0 +1,15 @@ +import type {Meta} from '@storybook/react' +import React from 'react' +import {InlineMessage} from '.' + +const meta = { + title: 'Experimental/Components/InlineMessage/Dev', + component: InlineMessage, +} satisfies Meta + +export default meta + +// Previous Styled version of the component didn't accept an sx prop so no need to test if that works. +export const DevDefault = () => { + return An example inline message +} diff --git a/packages/react/src/InlineMessage/InlineMessage.docs.json b/packages/react/src/InlineMessage/InlineMessage.docs.json index dbdbb463b70..4547cfe57d5 100644 --- a/packages/react/src/InlineMessage/InlineMessage.docs.json +++ b/packages/react/src/InlineMessage/InlineMessage.docs.json @@ -6,16 +6,22 @@ "importPath": "@primer/react/experimental", "stories": [ { - "id": "experimental-components-inlinemessage-features--critical" + "id": "components-inlinemessage--default" }, { - "id": "experimental-components-inlinemessage-features--success" + "id": "components-inlinemessage-features--critical" }, { - "id": "experimental-components-inlinemessage-features--unavailable" + "id": "components-inlinemessage-features--success" }, { - "id": "experimental-components-inlinemessage-features--warning" + "id": "components-inlinemessage-features--unavailable" + }, + { + "id": "components-inlinemessage-features--warning" + }, + { + "id": "components-inlinemessage-features--multiline" } ], "props": [ diff --git a/packages/react/src/InlineMessage/InlineMessage.module.css b/packages/react/src/InlineMessage/InlineMessage.module.css new file mode 100644 index 00000000000..0ddbea7498b --- /dev/null +++ b/packages/react/src/InlineMessage/InlineMessage.module.css @@ -0,0 +1,42 @@ +.InlineMessage { + display: grid; + /* stylelint-disable-next-line primer/typography */ + font-size: var(--inline-message-fontSize); + /* stylelint-disable-next-line primer/typography */ + line-height: var(--inline-message-lineHeight); + /* stylelint-disable-next-line primer/colors */ + color: var(--inline-message-fgColor); + column-gap: 0.5rem; + grid-template-columns: auto 1fr; + align-items: start; + + &[data-size='small'] { + --inline-message-fontSize: var(--text-body-size-small); + --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666); + } + + &[data-size='medium'] { + --inline-message-fontSize: var(--text-body-size-medium); + --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285); + } + + &[data-variant='warning'] { + --inline-message-fgColor: var(--fgColor-attention); + } + + &[data-variant='critical'] { + --inline-message-fgColor: var(--fgColor-danger); + } + + &[data-variant='success'] { + --inline-message-fgColor: var(--fgColor-success); + } + + &[data-variant='unavailable'] { + --inline-message-fgColor: var(--fgColor-muted); + } +} + +.InlineMessageIcon { + min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize)); +} diff --git a/packages/react/src/InlineMessage/InlineMessage.tsx b/packages/react/src/InlineMessage/InlineMessage.tsx index 55f2296a6fd..173c9502f1b 100644 --- a/packages/react/src/InlineMessage/InlineMessage.tsx +++ b/packages/react/src/InlineMessage/InlineMessage.tsx @@ -1,80 +1,105 @@ import {AlertFillIcon, AlertIcon, CheckCircleFillIcon, CheckCircleIcon} from '@primer/octicons-react' +import {clsx} from 'clsx' import React from 'react' import styled from 'styled-components' import {get} from '../constants' - +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' +import classes from './InlineMessage.module.css' +import type {SxProp} from '../sx' type MessageVariant = 'critical' | 'success' | 'unavailable' | 'warning' -export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & { - /** - * Specify the size of the InlineMessage - */ - size?: 'small' | 'medium' +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' - /** - * Specify the type of the InlineMessage - */ - variant: MessageVariant -} +export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & + SxProp & { + /** + * Specify the size of the InlineMessage + */ + size?: 'small' | 'medium' -const StyledMessage = styled.div` - display: grid; - column-gap: 0.5rem; - grid-template-columns: auto 1fr; - align-items: start; - color: var(--inline-message-fgColor, ${get('colors.fg.muted')}); - line-height: var(--inline-message-lineHeight); - font-size: var(--inline-message-fontSize, ${get('fontSizes.1')}); - - &[data-size='small'] { - --inline-message-fontSize: var(--text-body-size-small, ${get('fontSizes.0')}); - --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666); + /** + * Specify the type of the InlineMessage + */ + variant: MessageVariant } - &[data-size='medium'] { - --inline-message-fontSize: var(--text-body-size-medium, ${get('fontSizes.1')}); - --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285); - } +const StyledMessage = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + display: grid; + column-gap: 0.5rem; + grid-template-columns: auto 1fr; + align-items: start; + color: var(--inline-message-fgColor, ${get('colors.fg.muted')}); + line-height: var(--inline-message-lineHeight); + font-size: var(--inline-message-fontSize, ${get('fontSizes.1')}); - &[data-variant='warning'] { - --inline-message-fgColor: ${get('colors.attention.fg')}; - } + &[data-size='small'] { + --inline-message-fontSize: var(--text-body-size-small, ${get('fontSizes.0')}); + --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666); + } - &[data-variant='critical'] { - --inline-message-fgColor: ${get('colors.danger.fg')}; - } + &[data-size='medium'] { + --inline-message-fontSize: var(--text-body-size-medium, ${get('fontSizes.1')}); + --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285); + } - &[data-variant='success'] { - --inline-message-fgColor: ${get('colors.success.fg')}; - } + &[data-variant='warning'] { + --inline-message-fgColor: ${get('colors.attention.fg')}; + } - &[data-variant='unavailable'] { - --inline-message-fgColor: ${get('colors.fg.muted')}; - } + &[data-variant='critical'] { + --inline-message-fgColor: ${get('colors.danger.fg')}; + } + + &[data-variant='success'] { + --inline-message-fgColor: ${get('colors.success.fg')}; + } + + &[data-variant='unavailable'] { + --inline-message-fgColor: ${get('colors.fg.muted')}; + } - & .InlineMessageIcon { - min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize)); + & .InlineMessageIcon { + min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize)); + } + `, +) + +const variantToIcon = (enabled: boolean, variant: MessageVariant): React.ReactNode => { + const icons = { + warning: , + critical: , + success: , + unavailable: , } -` -const variantToIcon: Record = { - warning: , - critical: , - success: , - unavailable: , + return icons[variant] } -const variantToSmallIcon: Record = { - warning: , - critical: , - success: , - unavailable: , +const variantToSmallIcon = (enabled: boolean, variant: MessageVariant): React.ReactNode => { + const icons = { + warning: , + critical: , + success: , + unavailable: , + } + return icons[variant] } -export function InlineMessage({children, size = 'medium', variant, ...rest}: InlineMessageProps) { - const icon = size === 'small' ? variantToSmallIcon[variant] : variantToIcon[variant] +export function InlineMessage({children, className, size = 'medium', variant, ...rest}: InlineMessageProps) { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + + const icon = size === 'small' ? variantToSmallIcon(enabled, variant) : variantToIcon(enabled, variant) return ( - + {icon} {children} diff --git a/packages/react/src/KeybindingHint/KeybindingHint.docs.json b/packages/react/src/KeybindingHint/KeybindingHint.docs.json index 136c41954ef..46d1d975f44 100644 --- a/packages/react/src/KeybindingHint/KeybindingHint.docs.json +++ b/packages/react/src/KeybindingHint/KeybindingHint.docs.json @@ -22,6 +22,12 @@ "type": "'normal' | 'onEmphasis'", "defaultValue": "'normal'", "description": "Set to `onEmphasis` for display on 'emphasis' colors." + }, + { + "name": "size", + "type": "'small' | 'normal'", + "defaultValue": "'normal'", + "description": "Control the size of the hint." } ], "subcomponents": [] diff --git a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx index 37e92d203ce..a9a20a0ca21 100644 --- a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx +++ b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx @@ -28,3 +28,5 @@ export const OnEmphasis: StoryObj = { ), args: {keys: chord, variant: 'onEmphasis'}, } + +export const Small = {args: {keys: chord, size: 'small'}} diff --git a/packages/react/src/KeybindingHint/KeybindingHint.module.css b/packages/react/src/KeybindingHint/KeybindingHint.module.css new file mode 100644 index 00000000000..980830b0e8f --- /dev/null +++ b/packages/react/src/KeybindingHint/KeybindingHint.module.css @@ -0,0 +1,15 @@ +.KeybindingHint { + position: relative; + padding: 0; + overflow: visible; + font-family: inherit; + font-size: inherit; + /* stylelint-disable-next-line primer/typography */ + line-height: unset; + color: inherit; + white-space: nowrap; + vertical-align: baseline; + background: none; + border: none; + box-shadow: none; +} diff --git a/packages/react/src/KeybindingHint/KeybindingHint.tsx b/packages/react/src/KeybindingHint/KeybindingHint.tsx index 82338b748ca..4b7a820aada 100644 --- a/packages/react/src/KeybindingHint/KeybindingHint.tsx +++ b/packages/react/src/KeybindingHint/KeybindingHint.tsx @@ -3,34 +3,48 @@ import {memo} from 'react' import Text from '../Text' import type {KeybindingHintProps} from './props' import {accessibleSequenceString, Sequence} from './components/Sequence' +import {useFeatureFlag} from '../FeatureFlags' + +import classes from './KeybindingHint.module.css' +import {clsx} from 'clsx' /** `kbd` element with style resets. */ -const Kbd = ({children}: {children: ReactNode}) => ( - - {children} - -) +const Kbd = ({children, className}: {children: ReactNode; className?: string}) => { + const enabled = useFeatureFlag('primer_react_css_modules_team') + + return ( + + {children} + + ) +} /** Indicates the presence of an available keybinding. */ // KeybindingHint is a good candidate for memoizing since props will rarely change -export const KeybindingHint = memo((props: KeybindingHintProps) => ( - +export const KeybindingHint = memo(({className, ...props}: KeybindingHintProps) => ( + )) diff --git a/packages/react/src/KeybindingHint/components/Chord.tsx b/packages/react/src/KeybindingHint/components/Chord.tsx index d12ce8f44ff..280769db16d 100644 --- a/packages/react/src/KeybindingHint/components/Chord.tsx +++ b/packages/react/src/KeybindingHint/components/Chord.tsx @@ -29,24 +29,26 @@ const splitChord = (chord: string) => .map(k => k.toLowerCase()) .sort(compareLowercaseKeys) -export const Chord = ({keys, format = 'condensed', variant = 'normal'}: KeybindingHintProps) => ( +export const Chord = ({keys, format = 'condensed', variant = 'normal', size = 'normal'}: KeybindingHintProps) => ( {splitChord(keys).map((k, i) => ( diff --git a/packages/react/src/KeybindingHint/components/Sequence.tsx b/packages/react/src/KeybindingHint/components/Sequence.tsx index aaa4ba00f0f..d2b6ab5ce9f 100644 --- a/packages/react/src/KeybindingHint/components/Sequence.tsx +++ b/packages/react/src/KeybindingHint/components/Sequence.tsx @@ -5,7 +5,7 @@ import {accessibleChordString, Chord} from './Chord' const splitSequence = (sequence: string) => sequence.split(' ') -export const Sequence = ({keys, format = 'condensed', variant = 'normal'}: KeybindingHintProps) => +export const Sequence = ({keys, ...chordProps}: KeybindingHintProps) => splitSequence(keys).map((c, i) => ( { @@ -16,7 +16,7 @@ export const Sequence = ({keys, format = 'condensed', variant = 'normal'}: Keybi ) } - + )) diff --git a/packages/react/src/KeybindingHint/props.ts b/packages/react/src/KeybindingHint/props.ts index 72584086435..bc384fafd08 100644 --- a/packages/react/src/KeybindingHint/props.ts +++ b/packages/react/src/KeybindingHint/props.ts @@ -27,4 +27,12 @@ export interface KeybindingHintProps { * Set to `onEmphasis` for display on emphasis colors. */ variant?: KeybindingHintVariant + /** + * Control the size of the hint. + */ + size?: 'small' | 'normal' + /** + * Additional class name to apply to the hint. + */ + className?: string } diff --git a/packages/react/src/Label/Label.docs.json b/packages/react/src/Label/Label.docs.json index 078e03a9ff3..9abc9b394aa 100644 --- a/packages/react/src/Label/Label.docs.json +++ b/packages/react/src/Label/Label.docs.json @@ -3,7 +3,44 @@ "name": "Label", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-label--default" + }, + { + "id": "components-label-features--primary" + }, + { + "id": "components-label-features--secondary" + }, + { + "id": "components-label-features--accent" + }, + { + "id": "components-label-features--success" + }, + { + "id": "components-label-features--attention" + }, + { + "id": "components-label-features--severe" + }, + { + "id": "components-label-features--danger" + }, + { + "id": "components-label-features--done" + }, + { + "id": "components-label-features--sponsors" + }, + { + "id": "components-label-features--size-large" + }, + { + "id": "components-label-features--size-small" + } + ], "importPath": "@primer/react", "props": [ { diff --git a/packages/react/src/LabelGroup/LabelGroup.docs.json b/packages/react/src/LabelGroup/LabelGroup.docs.json index 51e64eef176..578d7fa40fe 100644 --- a/packages/react/src/LabelGroup/LabelGroup.docs.json +++ b/packages/react/src/LabelGroup/LabelGroup.docs.json @@ -3,7 +3,26 @@ "name": "LabelGroup", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-labelgroup--default" + }, + { + "id": "components-labelgroup-features--truncate-auto" + }, + { + "id": "components-labelgroup-features--truncate-auto-with-interactive-tokens" + }, + { + "id": "components-labelgroup-features--truncate-after-five" + }, + { + "id": "components-labelgroup-features--truncate-auto-expand-inline" + }, + { + "id": "components-labelgroup-features--truncate-auto-expand-inline-with-interactive-tokens" + } + ], "importPath": "@primer/react", "props": [ { diff --git a/packages/react/src/Link/Link.docs.json b/packages/react/src/Link/Link.docs.json index 40506efbdf9..49ffe0d6f77 100644 --- a/packages/react/src/Link/Link.docs.json +++ b/packages/react/src/Link/Link.docs.json @@ -3,7 +3,20 @@ "name": "Link", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-link--default" + }, + { + "id": "components-link-features--muted" + }, + { + "id": "components-link-features--underline" + }, + { + "id": "components-link-features--inline" + } + ], "importPath": "@primer/react", "props": [ { diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx index 9c27320a776..8e98db69c24 100644 --- a/packages/react/src/Link/Link.tsx +++ b/packages/react/src/Link/Link.tsx @@ -17,7 +17,7 @@ type StyledLinkProps = { inline?: boolean } & SxProp -const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...props}, forwardedRef) => { +const Link = forwardRef(({as: Component = 'a', className, inline, underline, hoverColor, ...props}, forwardedRef) => { const innerRef = React.useRef(null) useRefObjectAsForwardedRef(forwardedRef, innerRef) @@ -53,6 +53,7 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ... data-muted={props.muted} data-inline={inline} data-underline={underline} + data-hover-color={hoverColor} {...props} // @ts-ignore shh ref={innerRef} @@ -66,6 +67,7 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ... data-muted={props.muted} data-inline={inline} data-underline={underline} + data-hover-color={hoverColor} {...props} // @ts-ignore shh ref={innerRef} diff --git a/packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap b/packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap index 8b8d5ef784c..33636ed0777 100644 --- a/packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap +++ b/packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap @@ -16,7 +16,7 @@ exports[`Link passes href down to link element 1`] = ` exports[`Link respects hoverColor prop 1`] = ` `; diff --git a/packages/react/src/NavList/NavList.docs.json b/packages/react/src/NavList/NavList.docs.json index c6df5c21b99..6e2cfbd407a 100644 --- a/packages/react/src/NavList/NavList.docs.json +++ b/packages/react/src/NavList/NavList.docs.json @@ -53,6 +53,12 @@ "type": "boolean", "description": "The open state of the item when it is initially rendered if the item has a SubNav." }, + { + "name": "inactiveText", + "type": "string", + "description": "Text to explain why this item is currently inactive and cannot be activated.", + "defaultValue": "" + }, { "name": "ref", "type": "React.RefObject" @@ -114,6 +120,13 @@ { "name": "NavList.Group", "props": [ + { + "name": "children", + "type": "ReactNode", + "required": true, + "description": "A related set of NavList.Items", + "defaultValue": "" + }, { "name": "title", "type": "string", @@ -132,6 +145,27 @@ { "name": "NavList.GroupHeading", "props": [ + { + "name": "auxiliaryText", + "type": "string", + "required": false, + "description": "Secondary text which provides additional information about a `Group`.", + "defaultValue": "" + }, + { + "name": "variant", + "type": "'subtle' | 'filled'", + "required": false, + "description": "Style variations. Usage is discretionary.\n\n- `\"filled\"` - Superimposed on a background, offset from nearby content\n- `\"subtle\"` - Relatively less offset from nearby content", + "defaultValue": "" + }, + { + "name": "visuallyHidden", + "type": "boolean", + "required": false, + "description": "", + "defaultValue": "" + }, { "name": "sx", "type": "SystemStyleObject" diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap index 1d4bccc1f5a..0310e28f437 100644 --- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -46,6 +46,7 @@ exports[`NavList renders a simple list 1`] = ` flex-grow: 1; font-weight: 600; word-break: break-word; + line-height: 20px; } .c7 { @@ -55,6 +56,7 @@ exports[`NavList renders a simple list 1`] = ` flex-grow: 1; font-weight: 400; word-break: break-word; + line-height: 20px; } .c0 { @@ -114,6 +116,11 @@ exports[`NavList renders a simple list 1`] = ` border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c2[aria-disabled] [data-component="ActionList.Selection"], +.c2[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c2 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -222,6 +229,11 @@ exports[`NavList renders a simple list 1`] = ` border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c6[aria-disabled] [data-component="ActionList.Selection"], +.c6[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c6 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -420,6 +432,8 @@ exports[`NavList renders with groups 1`] = ` margin-top: calc(8px - 1px); margin-bottom: 8px; list-style: none; + margin-right: calc(-1 * var(--base-size-8)); + margin-left: calc(-1 * var(--base-size-8)); } .c1:first-child { @@ -511,6 +525,7 @@ exports[`NavList renders with groups 1`] = ` flex-grow: 1; font-weight: 600; word-break: break-word; + line-height: 20px; } .c11 { @@ -520,6 +535,7 @@ exports[`NavList renders with groups 1`] = ` flex-grow: 1; font-weight: 400; word-break: break-word; + line-height: 20px; } .c0 { @@ -579,6 +595,11 @@ exports[`NavList renders with groups 1`] = ` border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c6[aria-disabled] [data-component="ActionList.Selection"], +.c6[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c6 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -687,6 +708,11 @@ exports[`NavList renders with groups 1`] = ` border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c10[aria-disabled] [data-component="ActionList.Selection"], +.c10[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c10 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -943,6 +969,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav flex-grow: 1; font-weight: 400; word-break: break-word; + line-height: 20px; } .c8 { @@ -953,6 +980,10 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav color: var(--fgColor-muted,var(--color-fg-muted,#656d76)); margin-left: 8px; font-weight: initial; + display: grid; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; } [data-variant="danger"]:hover .c1, @@ -992,6 +1023,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav flex-grow: 1; font-weight: 600; word-break: break-word; + line-height: 20px; } .c10 { @@ -1066,6 +1098,11 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c11[aria-disabled] [data-component="ActionList.Selection"], +.c11[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c11 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -1174,6 +1211,11 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c4[aria-disabled] [data-component="ActionList.Selection"], +.c4[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c4 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -1428,6 +1470,10 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t color: var(--fgColor-muted,var(--color-fg-muted,#656d76)); margin-left: 8px; font-weight: initial; + display: grid; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; } [data-variant="danger"]:hover .c1, @@ -1473,6 +1519,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t flex-grow: 1; font-weight: 600; word-break: break-word; + line-height: 20px; } .c0 { @@ -1541,6 +1588,11 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c11[aria-disabled] [data-component="ActionList.Selection"], +.c11[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c11 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -1659,6 +1711,11 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c4[aria-disabled] [data-component="ActionList.Selection"], +.c4[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c4 [data-component="ActionList.Item--DividerContainer"] { position: relative; } diff --git a/packages/react/src/Overlay/Overlay.dev.stories.tsx b/packages/react/src/Overlay/Overlay.dev.stories.tsx new file mode 100644 index 00000000000..1f848d4d6c2 --- /dev/null +++ b/packages/react/src/Overlay/Overlay.dev.stories.tsx @@ -0,0 +1,91 @@ +import React, {useRef, useState} from 'react' +import type {Args, Meta} from '@storybook/react' +import Text from '../Text' +import {Button, IconButton} from '../Button' +import Overlay from './Overlay' +import {useFocusTrap} from '../hooks/useFocusTrap' +import Box from '../Box' +import {XIcon} from '@primer/octicons-react' + +export default { + title: 'Private/Components/Overlay/Dev', + component: Overlay, + args: { + open: false, + }, + argTypes: { + open: { + control: false, + visible: false, + }, + }, +} as Meta + +export const SxProps = (args: Args) => { + const [isOpen, setIsOpen] = useState(false) + const buttonRef = useRef(null) + const confirmButtonRef = useRef(null) + const anchorRef = useRef(null) + const closeOverlay = () => setIsOpen(false) + const containerRef = useRef(null) + useFocusTrap({ + containerRef, + disabled: !isOpen, + }) + return ( + + { + setIsOpen(!isOpen) + }} + > + Open overlay + + {isOpen || args.open ? ( + + + + Look! an overlay + + + ) : null} + + ) +} diff --git a/packages/react/src/Overlay/Overlay.docs.json b/packages/react/src/Overlay/Overlay.docs.json index 8187889934b..6091b66b5c7 100644 --- a/packages/react/src/Overlay/Overlay.docs.json +++ b/packages/react/src/Overlay/Overlay.docs.json @@ -4,6 +4,7 @@ "status": "alpha", "a11yReviewed": false, "stories": [ + {"id": "private-components-overlay--default"}, {"id": "private-components-overlay-features--dialog-overlay"}, {"id": "private-components-overlay-features--positioned-overlays"} ], @@ -112,12 +113,33 @@ "defaultValue": "", "description": "If defined, Overlays will be rendered in the named portal. See also `Portal`." }, + { + "name": "overflow", + "type": "'hidden' | 'scroll' | 'auto' | 'visible'", + "required": false, + "description": "", + "defaultValue": "" + }, { "name": "preventOverflow", "type": "boolean", "defaultValue": "true", "description": "Determines if the Overlay width should be adjusted responsively if `width` is set to either `auto`, `medium` or lower and there is not enough space to display the Overlay. If `preventOverflow` is set to `false`, the Overlay will be displayed at the maximum width that fits within the viewport." }, + { + "name": "role", + "type": "ARIA role - will most often be 'dialog' or 'menu'", + "required": false, + "description": "ARIA role to use for the overlay", + "defaultValue": "" + }, + { + "name": "data-test-id", + "type": "unknown", + "required": false, + "description": "", + "defaultValue": "" + }, { "name": "sx", "type": "SystemStyleObject" diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx index 6b31bdbb7ca..af4c93bc5e3 100644 --- a/packages/react/src/Overlay/Overlay.features.stories.tsx +++ b/packages/react/src/Overlay/Overlay.features.stories.tsx @@ -1,5 +1,5 @@ import React, {useState, useRef, useCallback} from 'react' -import type {Meta} from '@storybook/react' +import type {Args, Meta} from '@storybook/react' import {TriangleDownIcon, PlusIcon, IssueDraftIcon, XIcon} from '@primer/octicons-react' import { Overlay, @@ -18,8 +18,6 @@ import { ActionMenu, useFocusTrap, } from '..' -import type {AnchorSide} from '@primer/behaviors' -import type {AriaRole} from '../utils/types' import {Tooltip} from '../TooltipV2' export default { @@ -28,6 +26,7 @@ export default { args: { anchorSide: 'inside-top', role: 'dialog', + open: false, }, argTypes: { anchorSide: { @@ -49,16 +48,14 @@ export default { role: { type: 'string', }, + open: { + control: false, + visible: false, + }, }, } as Meta -interface OverlayProps { - anchorSide?: AnchorSide - role?: AriaRole - right?: boolean -} - -export const DropdownOverlay = ({anchorSide}: OverlayProps) => { +export const DropdownOverlay = ({anchorSide, open}: Args) => { const [isOpen, setIsOpen] = useState(false) const buttonRef = useRef(null) @@ -67,7 +64,7 @@ export const DropdownOverlay = ({anchorSide}: OverlayProps) => { setIsOpen(!isOpen)}> open overlay - {isOpen ? ( + {isOpen || open ? ( { role="none" > - Copy link - Quote reply - Reference in new issue - Edit + Copy link + Quote reply + Reference in new issue + Edit - Delete + + Delete + ) : null} @@ -92,7 +91,7 @@ export const DropdownOverlay = ({anchorSide}: OverlayProps) => { ) } -export const DialogOverlay = ({anchorSide, role}: OverlayProps) => { +export const DialogOverlay = ({anchorSide, role, open}: Args) => { const [isOpen, setIsOpen] = useState(false) const buttonRef = useRef(null) const containerRef = useRef(null) @@ -106,7 +105,7 @@ export const DialogOverlay = ({anchorSide, role}: OverlayProps) => { setIsOpen(!isOpen)}> open overlay - {isOpen ? ( + {isOpen || open ? ( { anchorSide={anchorSide} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'dialog' ? 'Confirmation screen' : undefined} ref={containerRef} > @@ -134,7 +134,7 @@ export const DialogOverlay = ({anchorSide, role}: OverlayProps) => { ) } -export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => { +export const OverlayOnTopOfOverlay = ({anchorSide, role, open}: Args) => { const [isOpen, setIsOpen] = useState(false) const [isSecondaryOpen, setIsSecondaryOpen] = useState(false) const buttonRef = useRef(null) @@ -161,7 +161,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => { setIsOpen(!isOpen)}> open overlay - {isOpen ? ( + {isOpen || open ? ( { anchorSide={anchorSide} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'dialog' ? 'Open overlay' : undefined} ref={primaryContainer} preventOverflow={false} > @@ -188,6 +189,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => { anchorSide={anchorSide} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'dialog' ? 'Options' : undefined} ref={secondaryContainer} preventOverflow={false} > @@ -218,7 +220,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => { ) } -export const MemexNestedOverlays = ({role}: OverlayProps) => { +export const MemexNestedOverlays = ({role, open}: Args) => { const [overlayOpen, setOverlayOpen] = React.useState(false) const buttonRef = useRef(null) const containerRef = useRef(null) @@ -238,7 +240,7 @@ export const MemexNestedOverlays = ({role}: OverlayProps) => { icon={TriangleDownIcon} /> - {overlayOpen && ( + {(overlayOpen || open) && ( setOverlayOpen(false)} @@ -249,15 +251,21 @@ export const MemexNestedOverlays = ({role}: OverlayProps) => { left={16} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'dialog' ? 'Add iteration' : undefined} ref={containerRef} preventOverflow={false} > - setOverlayOpen(false)} sx={{display: 'flex', flexDirection: 'column', py: 2}}> + setOverlayOpen(false)} + sx={{display: 'flex', flexDirection: 'column', py: 2}} + aria-label="Set Duration Form" + >
(externalProps: P): P & FormControlForwardedProps { const context = useContext(FormControlContext) - if (!context) return externalProps + if (!context) return externalProps as P & FormControlForwardedProps return { disabled: context.disabled, id: context.id, required: context.required, - validationStatus: context.validationStatus, ['aria-describedby']: [context.validationMessageId, context.captionId].filter(Boolean).join(' ') || undefined, ...externalProps, } diff --git a/packages/react/src/FormControl/_FormControlLeadingVisual.tsx b/packages/react/src/FormControl/_FormControlLeadingVisual.tsx deleted file mode 100644 index 80551681704..00000000000 --- a/packages/react/src/FormControl/_FormControlLeadingVisual.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import Box from '../Box' -import {get} from '../constants' -import type {SxProp} from '../sx' -import {useFormControlContext} from './_FormControlContext' - -const FormControlLeadingVisual: React.FC> = ({children, sx}) => { - const {disabled, captionId} = useFormControlContext() - return ( - *': { - minWidth: captionId ? get('fontSizes.4') : get('fontSizes.2'), - minHeight: captionId ? get('fontSizes.4') : get('fontSizes.2'), - fill: 'currentColor', - }, - ...sx, - }} - ml={2} - > - {children} - - ) -} - -export default FormControlLeadingVisual diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx index 3c7c194ca43..e36b2d983b1 100644 --- a/packages/react/src/Header/Header.tsx +++ b/packages/react/src/Header/Header.tsx @@ -15,7 +15,7 @@ type StyledHeaderProps = React.ComponentProps<'header'> & SxProp type StyledHeaderItemProps = React.ComponentProps<'div'> & SxProp & {full?: boolean} type StyledHeaderLinkProps = React.ComponentProps<'a'> & SxProp & {to?: Location | Pathname} -const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff' const StyledHeader = toggleStyledComponent( CSS_MODULES_FEATURE_FLAG, diff --git a/packages/react/src/Hidden/Hidden.docs.json b/packages/react/src/Hidden/Hidden.docs.json index ab4ecf2edef..2820003d38c 100644 --- a/packages/react/src/Hidden/Hidden.docs.json +++ b/packages/react/src/Hidden/Hidden.docs.json @@ -1,9 +1,19 @@ { - "id": "drafts_hidden", + "id": "hidden", "name": "Hidden", "status": "draft", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "drafts-components-hidden--default" + }, + { + "id": "drafts-components-hidden-features--hide-content" + }, + { + "id": "drafts-components-hidden-features--render-content-responsively" + } + ], "importPath": "@primer/react/experimental", "props": [ { diff --git a/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx new file mode 100644 index 00000000000..95c6d281cac --- /dev/null +++ b/packages/react/src/InlineMessage/InlineMessage.dev.stories.tsx @@ -0,0 +1,15 @@ +import type {Meta} from '@storybook/react' +import React from 'react' +import {InlineMessage} from '.' + +const meta = { + title: 'Experimental/Components/InlineMessage/Dev', + component: InlineMessage, +} satisfies Meta + +export default meta + +// Previous Styled version of the component didn't accept an sx prop so no need to test if that works. +export const DevDefault = () => { + return An example inline message +} diff --git a/packages/react/src/InlineMessage/InlineMessage.docs.json b/packages/react/src/InlineMessage/InlineMessage.docs.json index dbdbb463b70..4547cfe57d5 100644 --- a/packages/react/src/InlineMessage/InlineMessage.docs.json +++ b/packages/react/src/InlineMessage/InlineMessage.docs.json @@ -6,16 +6,22 @@ "importPath": "@primer/react/experimental", "stories": [ { - "id": "experimental-components-inlinemessage-features--critical" + "id": "components-inlinemessage--default" }, { - "id": "experimental-components-inlinemessage-features--success" + "id": "components-inlinemessage-features--critical" }, { - "id": "experimental-components-inlinemessage-features--unavailable" + "id": "components-inlinemessage-features--success" }, { - "id": "experimental-components-inlinemessage-features--warning" + "id": "components-inlinemessage-features--unavailable" + }, + { + "id": "components-inlinemessage-features--warning" + }, + { + "id": "components-inlinemessage-features--multiline" } ], "props": [ diff --git a/packages/react/src/InlineMessage/InlineMessage.module.css b/packages/react/src/InlineMessage/InlineMessage.module.css new file mode 100644 index 00000000000..0ddbea7498b --- /dev/null +++ b/packages/react/src/InlineMessage/InlineMessage.module.css @@ -0,0 +1,42 @@ +.InlineMessage { + display: grid; + /* stylelint-disable-next-line primer/typography */ + font-size: var(--inline-message-fontSize); + /* stylelint-disable-next-line primer/typography */ + line-height: var(--inline-message-lineHeight); + /* stylelint-disable-next-line primer/colors */ + color: var(--inline-message-fgColor); + column-gap: 0.5rem; + grid-template-columns: auto 1fr; + align-items: start; + + &[data-size='small'] { + --inline-message-fontSize: var(--text-body-size-small); + --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666); + } + + &[data-size='medium'] { + --inline-message-fontSize: var(--text-body-size-medium); + --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285); + } + + &[data-variant='warning'] { + --inline-message-fgColor: var(--fgColor-attention); + } + + &[data-variant='critical'] { + --inline-message-fgColor: var(--fgColor-danger); + } + + &[data-variant='success'] { + --inline-message-fgColor: var(--fgColor-success); + } + + &[data-variant='unavailable'] { + --inline-message-fgColor: var(--fgColor-muted); + } +} + +.InlineMessageIcon { + min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize)); +} diff --git a/packages/react/src/InlineMessage/InlineMessage.tsx b/packages/react/src/InlineMessage/InlineMessage.tsx index 55f2296a6fd..173c9502f1b 100644 --- a/packages/react/src/InlineMessage/InlineMessage.tsx +++ b/packages/react/src/InlineMessage/InlineMessage.tsx @@ -1,80 +1,105 @@ import {AlertFillIcon, AlertIcon, CheckCircleFillIcon, CheckCircleIcon} from '@primer/octicons-react' +import {clsx} from 'clsx' import React from 'react' import styled from 'styled-components' import {get} from '../constants' - +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' +import classes from './InlineMessage.module.css' +import type {SxProp} from '../sx' type MessageVariant = 'critical' | 'success' | 'unavailable' | 'warning' -export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & { - /** - * Specify the size of the InlineMessage - */ - size?: 'small' | 'medium' +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' - /** - * Specify the type of the InlineMessage - */ - variant: MessageVariant -} +export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & + SxProp & { + /** + * Specify the size of the InlineMessage + */ + size?: 'small' | 'medium' -const StyledMessage = styled.div` - display: grid; - column-gap: 0.5rem; - grid-template-columns: auto 1fr; - align-items: start; - color: var(--inline-message-fgColor, ${get('colors.fg.muted')}); - line-height: var(--inline-message-lineHeight); - font-size: var(--inline-message-fontSize, ${get('fontSizes.1')}); - - &[data-size='small'] { - --inline-message-fontSize: var(--text-body-size-small, ${get('fontSizes.0')}); - --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666); + /** + * Specify the type of the InlineMessage + */ + variant: MessageVariant } - &[data-size='medium'] { - --inline-message-fontSize: var(--text-body-size-medium, ${get('fontSizes.1')}); - --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285); - } +const StyledMessage = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + display: grid; + column-gap: 0.5rem; + grid-template-columns: auto 1fr; + align-items: start; + color: var(--inline-message-fgColor, ${get('colors.fg.muted')}); + line-height: var(--inline-message-lineHeight); + font-size: var(--inline-message-fontSize, ${get('fontSizes.1')}); - &[data-variant='warning'] { - --inline-message-fgColor: ${get('colors.attention.fg')}; - } + &[data-size='small'] { + --inline-message-fontSize: var(--text-body-size-small, ${get('fontSizes.0')}); + --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666); + } - &[data-variant='critical'] { - --inline-message-fgColor: ${get('colors.danger.fg')}; - } + &[data-size='medium'] { + --inline-message-fontSize: var(--text-body-size-medium, ${get('fontSizes.1')}); + --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285); + } - &[data-variant='success'] { - --inline-message-fgColor: ${get('colors.success.fg')}; - } + &[data-variant='warning'] { + --inline-message-fgColor: ${get('colors.attention.fg')}; + } - &[data-variant='unavailable'] { - --inline-message-fgColor: ${get('colors.fg.muted')}; - } + &[data-variant='critical'] { + --inline-message-fgColor: ${get('colors.danger.fg')}; + } + + &[data-variant='success'] { + --inline-message-fgColor: ${get('colors.success.fg')}; + } + + &[data-variant='unavailable'] { + --inline-message-fgColor: ${get('colors.fg.muted')}; + } - & .InlineMessageIcon { - min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize)); + & .InlineMessageIcon { + min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize)); + } + `, +) + +const variantToIcon = (enabled: boolean, variant: MessageVariant): React.ReactNode => { + const icons = { + warning: , + critical: , + success: , + unavailable: , } -` -const variantToIcon: Record = { - warning: , - critical: , - success: , - unavailable: , + return icons[variant] } -const variantToSmallIcon: Record = { - warning: , - critical: , - success: , - unavailable: , +const variantToSmallIcon = (enabled: boolean, variant: MessageVariant): React.ReactNode => { + const icons = { + warning: , + critical: , + success: , + unavailable: , + } + return icons[variant] } -export function InlineMessage({children, size = 'medium', variant, ...rest}: InlineMessageProps) { - const icon = size === 'small' ? variantToSmallIcon[variant] : variantToIcon[variant] +export function InlineMessage({children, className, size = 'medium', variant, ...rest}: InlineMessageProps) { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + + const icon = size === 'small' ? variantToSmallIcon(enabled, variant) : variantToIcon(enabled, variant) return ( - + {icon} {children} diff --git a/packages/react/src/KeybindingHint/KeybindingHint.docs.json b/packages/react/src/KeybindingHint/KeybindingHint.docs.json index 136c41954ef..46d1d975f44 100644 --- a/packages/react/src/KeybindingHint/KeybindingHint.docs.json +++ b/packages/react/src/KeybindingHint/KeybindingHint.docs.json @@ -22,6 +22,12 @@ "type": "'normal' | 'onEmphasis'", "defaultValue": "'normal'", "description": "Set to `onEmphasis` for display on 'emphasis' colors." + }, + { + "name": "size", + "type": "'small' | 'normal'", + "defaultValue": "'normal'", + "description": "Control the size of the hint." } ], "subcomponents": [] diff --git a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx index 37e92d203ce..a9a20a0ca21 100644 --- a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx +++ b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx @@ -28,3 +28,5 @@ export const OnEmphasis: StoryObj = { ), args: {keys: chord, variant: 'onEmphasis'}, } + +export const Small = {args: {keys: chord, size: 'small'}} diff --git a/packages/react/src/KeybindingHint/KeybindingHint.module.css b/packages/react/src/KeybindingHint/KeybindingHint.module.css new file mode 100644 index 00000000000..980830b0e8f --- /dev/null +++ b/packages/react/src/KeybindingHint/KeybindingHint.module.css @@ -0,0 +1,15 @@ +.KeybindingHint { + position: relative; + padding: 0; + overflow: visible; + font-family: inherit; + font-size: inherit; + /* stylelint-disable-next-line primer/typography */ + line-height: unset; + color: inherit; + white-space: nowrap; + vertical-align: baseline; + background: none; + border: none; + box-shadow: none; +} diff --git a/packages/react/src/KeybindingHint/KeybindingHint.tsx b/packages/react/src/KeybindingHint/KeybindingHint.tsx index 82338b748ca..4b7a820aada 100644 --- a/packages/react/src/KeybindingHint/KeybindingHint.tsx +++ b/packages/react/src/KeybindingHint/KeybindingHint.tsx @@ -3,34 +3,48 @@ import {memo} from 'react' import Text from '../Text' import type {KeybindingHintProps} from './props' import {accessibleSequenceString, Sequence} from './components/Sequence' +import {useFeatureFlag} from '../FeatureFlags' + +import classes from './KeybindingHint.module.css' +import {clsx} from 'clsx' /** `kbd` element with style resets. */ -const Kbd = ({children}: {children: ReactNode}) => ( - - {children} - -) +const Kbd = ({children, className}: {children: ReactNode; className?: string}) => { + const enabled = useFeatureFlag('primer_react_css_modules_team') + + return ( + + {children} + + ) +} /** Indicates the presence of an available keybinding. */ // KeybindingHint is a good candidate for memoizing since props will rarely change -export const KeybindingHint = memo((props: KeybindingHintProps) => ( - +export const KeybindingHint = memo(({className, ...props}: KeybindingHintProps) => ( + )) diff --git a/packages/react/src/KeybindingHint/components/Chord.tsx b/packages/react/src/KeybindingHint/components/Chord.tsx index d12ce8f44ff..280769db16d 100644 --- a/packages/react/src/KeybindingHint/components/Chord.tsx +++ b/packages/react/src/KeybindingHint/components/Chord.tsx @@ -29,24 +29,26 @@ const splitChord = (chord: string) => .map(k => k.toLowerCase()) .sort(compareLowercaseKeys) -export const Chord = ({keys, format = 'condensed', variant = 'normal'}: KeybindingHintProps) => ( +export const Chord = ({keys, format = 'condensed', variant = 'normal', size = 'normal'}: KeybindingHintProps) => ( {splitChord(keys).map((k, i) => ( diff --git a/packages/react/src/KeybindingHint/components/Sequence.tsx b/packages/react/src/KeybindingHint/components/Sequence.tsx index aaa4ba00f0f..d2b6ab5ce9f 100644 --- a/packages/react/src/KeybindingHint/components/Sequence.tsx +++ b/packages/react/src/KeybindingHint/components/Sequence.tsx @@ -5,7 +5,7 @@ import {accessibleChordString, Chord} from './Chord' const splitSequence = (sequence: string) => sequence.split(' ') -export const Sequence = ({keys, format = 'condensed', variant = 'normal'}: KeybindingHintProps) => +export const Sequence = ({keys, ...chordProps}: KeybindingHintProps) => splitSequence(keys).map((c, i) => ( { @@ -16,7 +16,7 @@ export const Sequence = ({keys, format = 'condensed', variant = 'normal'}: Keybi ) } - + )) diff --git a/packages/react/src/KeybindingHint/props.ts b/packages/react/src/KeybindingHint/props.ts index 72584086435..bc384fafd08 100644 --- a/packages/react/src/KeybindingHint/props.ts +++ b/packages/react/src/KeybindingHint/props.ts @@ -27,4 +27,12 @@ export interface KeybindingHintProps { * Set to `onEmphasis` for display on emphasis colors. */ variant?: KeybindingHintVariant + /** + * Control the size of the hint. + */ + size?: 'small' | 'normal' + /** + * Additional class name to apply to the hint. + */ + className?: string } diff --git a/packages/react/src/Label/Label.docs.json b/packages/react/src/Label/Label.docs.json index 078e03a9ff3..9abc9b394aa 100644 --- a/packages/react/src/Label/Label.docs.json +++ b/packages/react/src/Label/Label.docs.json @@ -3,7 +3,44 @@ "name": "Label", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-label--default" + }, + { + "id": "components-label-features--primary" + }, + { + "id": "components-label-features--secondary" + }, + { + "id": "components-label-features--accent" + }, + { + "id": "components-label-features--success" + }, + { + "id": "components-label-features--attention" + }, + { + "id": "components-label-features--severe" + }, + { + "id": "components-label-features--danger" + }, + { + "id": "components-label-features--done" + }, + { + "id": "components-label-features--sponsors" + }, + { + "id": "components-label-features--size-large" + }, + { + "id": "components-label-features--size-small" + } + ], "importPath": "@primer/react", "props": [ { diff --git a/packages/react/src/LabelGroup/LabelGroup.docs.json b/packages/react/src/LabelGroup/LabelGroup.docs.json index 51e64eef176..578d7fa40fe 100644 --- a/packages/react/src/LabelGroup/LabelGroup.docs.json +++ b/packages/react/src/LabelGroup/LabelGroup.docs.json @@ -3,7 +3,26 @@ "name": "LabelGroup", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-labelgroup--default" + }, + { + "id": "components-labelgroup-features--truncate-auto" + }, + { + "id": "components-labelgroup-features--truncate-auto-with-interactive-tokens" + }, + { + "id": "components-labelgroup-features--truncate-after-five" + }, + { + "id": "components-labelgroup-features--truncate-auto-expand-inline" + }, + { + "id": "components-labelgroup-features--truncate-auto-expand-inline-with-interactive-tokens" + } + ], "importPath": "@primer/react", "props": [ { diff --git a/packages/react/src/Link/Link.docs.json b/packages/react/src/Link/Link.docs.json index 40506efbdf9..49ffe0d6f77 100644 --- a/packages/react/src/Link/Link.docs.json +++ b/packages/react/src/Link/Link.docs.json @@ -3,7 +3,20 @@ "name": "Link", "status": "alpha", "a11yReviewed": false, - "stories": [], + "stories": [ + { + "id": "components-link--default" + }, + { + "id": "components-link-features--muted" + }, + { + "id": "components-link-features--underline" + }, + { + "id": "components-link-features--inline" + } + ], "importPath": "@primer/react", "props": [ { diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx index 9c27320a776..8e98db69c24 100644 --- a/packages/react/src/Link/Link.tsx +++ b/packages/react/src/Link/Link.tsx @@ -17,7 +17,7 @@ type StyledLinkProps = { inline?: boolean } & SxProp -const Link = forwardRef(({as: Component = 'a', className, inline, underline, ...props}, forwardedRef) => { +const Link = forwardRef(({as: Component = 'a', className, inline, underline, hoverColor, ...props}, forwardedRef) => { const innerRef = React.useRef(null) useRefObjectAsForwardedRef(forwardedRef, innerRef) @@ -53,6 +53,7 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ... data-muted={props.muted} data-inline={inline} data-underline={underline} + data-hover-color={hoverColor} {...props} // @ts-ignore shh ref={innerRef} @@ -66,6 +67,7 @@ const Link = forwardRef(({as: Component = 'a', className, inline, underline, ... data-muted={props.muted} data-inline={inline} data-underline={underline} + data-hover-color={hoverColor} {...props} // @ts-ignore shh ref={innerRef} diff --git a/packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap b/packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap index 8b8d5ef784c..33636ed0777 100644 --- a/packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap +++ b/packages/react/src/Link/__tests__/__snapshots__/Link.test.tsx.snap @@ -16,7 +16,7 @@ exports[`Link passes href down to link element 1`] = ` exports[`Link respects hoverColor prop 1`] = ` `; diff --git a/packages/react/src/NavList/NavList.docs.json b/packages/react/src/NavList/NavList.docs.json index c6df5c21b99..6e2cfbd407a 100644 --- a/packages/react/src/NavList/NavList.docs.json +++ b/packages/react/src/NavList/NavList.docs.json @@ -53,6 +53,12 @@ "type": "boolean", "description": "The open state of the item when it is initially rendered if the item has a SubNav." }, + { + "name": "inactiveText", + "type": "string", + "description": "Text to explain why this item is currently inactive and cannot be activated.", + "defaultValue": "" + }, { "name": "ref", "type": "React.RefObject" @@ -114,6 +120,13 @@ { "name": "NavList.Group", "props": [ + { + "name": "children", + "type": "ReactNode", + "required": true, + "description": "A related set of NavList.Items", + "defaultValue": "" + }, { "name": "title", "type": "string", @@ -132,6 +145,27 @@ { "name": "NavList.GroupHeading", "props": [ + { + "name": "auxiliaryText", + "type": "string", + "required": false, + "description": "Secondary text which provides additional information about a `Group`.", + "defaultValue": "" + }, + { + "name": "variant", + "type": "'subtle' | 'filled'", + "required": false, + "description": "Style variations. Usage is discretionary.\n\n- `\"filled\"` - Superimposed on a background, offset from nearby content\n- `\"subtle\"` - Relatively less offset from nearby content", + "defaultValue": "" + }, + { + "name": "visuallyHidden", + "type": "boolean", + "required": false, + "description": "", + "defaultValue": "" + }, { "name": "sx", "type": "SystemStyleObject" diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap index 1d4bccc1f5a..0310e28f437 100644 --- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -46,6 +46,7 @@ exports[`NavList renders a simple list 1`] = ` flex-grow: 1; font-weight: 600; word-break: break-word; + line-height: 20px; } .c7 { @@ -55,6 +56,7 @@ exports[`NavList renders a simple list 1`] = ` flex-grow: 1; font-weight: 400; word-break: break-word; + line-height: 20px; } .c0 { @@ -114,6 +116,11 @@ exports[`NavList renders a simple list 1`] = ` border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c2[aria-disabled] [data-component="ActionList.Selection"], +.c2[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c2 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -222,6 +229,11 @@ exports[`NavList renders a simple list 1`] = ` border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c6[aria-disabled] [data-component="ActionList.Selection"], +.c6[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c6 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -420,6 +432,8 @@ exports[`NavList renders with groups 1`] = ` margin-top: calc(8px - 1px); margin-bottom: 8px; list-style: none; + margin-right: calc(-1 * var(--base-size-8)); + margin-left: calc(-1 * var(--base-size-8)); } .c1:first-child { @@ -511,6 +525,7 @@ exports[`NavList renders with groups 1`] = ` flex-grow: 1; font-weight: 600; word-break: break-word; + line-height: 20px; } .c11 { @@ -520,6 +535,7 @@ exports[`NavList renders with groups 1`] = ` flex-grow: 1; font-weight: 400; word-break: break-word; + line-height: 20px; } .c0 { @@ -579,6 +595,11 @@ exports[`NavList renders with groups 1`] = ` border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c6[aria-disabled] [data-component="ActionList.Selection"], +.c6[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c6 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -687,6 +708,11 @@ exports[`NavList renders with groups 1`] = ` border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c10[aria-disabled] [data-component="ActionList.Selection"], +.c10[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c10 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -943,6 +969,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav flex-grow: 1; font-weight: 400; word-break: break-word; + line-height: 20px; } .c8 { @@ -953,6 +980,10 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav color: var(--fgColor-muted,var(--color-fg-muted,#656d76)); margin-left: 8px; font-weight: initial; + display: grid; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; } [data-variant="danger"]:hover .c1, @@ -992,6 +1023,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav flex-grow: 1; font-weight: 600; word-break: break-word; + line-height: 20px; } .c10 { @@ -1066,6 +1098,11 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c11[aria-disabled] [data-component="ActionList.Selection"], +.c11[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c11 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -1174,6 +1211,11 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c4[aria-disabled] [data-component="ActionList.Selection"], +.c4[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c4 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -1428,6 +1470,10 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t color: var(--fgColor-muted,var(--color-fg-muted,#656d76)); margin-left: 8px; font-weight: initial; + display: grid; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; } [data-variant="danger"]:hover .c1, @@ -1473,6 +1519,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t flex-grow: 1; font-weight: 600; word-break: break-word; + line-height: 20px; } .c0 { @@ -1541,6 +1588,11 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c11[aria-disabled] [data-component="ActionList.Selection"], +.c11[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c11 [data-component="ActionList.Item--DividerContainer"] { position: relative; } @@ -1659,6 +1711,11 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2)); } +.c4[aria-disabled] [data-component="ActionList.Selection"], +.c4[data-inactive] [data-component="ActionList.Selection"] { + color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f)); +} + .c4 [data-component="ActionList.Item--DividerContainer"] { position: relative; } diff --git a/packages/react/src/Overlay/Overlay.dev.stories.tsx b/packages/react/src/Overlay/Overlay.dev.stories.tsx new file mode 100644 index 00000000000..1f848d4d6c2 --- /dev/null +++ b/packages/react/src/Overlay/Overlay.dev.stories.tsx @@ -0,0 +1,91 @@ +import React, {useRef, useState} from 'react' +import type {Args, Meta} from '@storybook/react' +import Text from '../Text' +import {Button, IconButton} from '../Button' +import Overlay from './Overlay' +import {useFocusTrap} from '../hooks/useFocusTrap' +import Box from '../Box' +import {XIcon} from '@primer/octicons-react' + +export default { + title: 'Private/Components/Overlay/Dev', + component: Overlay, + args: { + open: false, + }, + argTypes: { + open: { + control: false, + visible: false, + }, + }, +} as Meta + +export const SxProps = (args: Args) => { + const [isOpen, setIsOpen] = useState(false) + const buttonRef = useRef(null) + const confirmButtonRef = useRef(null) + const anchorRef = useRef(null) + const closeOverlay = () => setIsOpen(false) + const containerRef = useRef(null) + useFocusTrap({ + containerRef, + disabled: !isOpen, + }) + return ( + + { + setIsOpen(!isOpen) + }} + > + Open overlay + + {isOpen || args.open ? ( + + + + Look! an overlay + + + ) : null} + + ) +} diff --git a/packages/react/src/Overlay/Overlay.docs.json b/packages/react/src/Overlay/Overlay.docs.json index 8187889934b..6091b66b5c7 100644 --- a/packages/react/src/Overlay/Overlay.docs.json +++ b/packages/react/src/Overlay/Overlay.docs.json @@ -4,6 +4,7 @@ "status": "alpha", "a11yReviewed": false, "stories": [ + {"id": "private-components-overlay--default"}, {"id": "private-components-overlay-features--dialog-overlay"}, {"id": "private-components-overlay-features--positioned-overlays"} ], @@ -112,12 +113,33 @@ "defaultValue": "", "description": "If defined, Overlays will be rendered in the named portal. See also `Portal`." }, + { + "name": "overflow", + "type": "'hidden' | 'scroll' | 'auto' | 'visible'", + "required": false, + "description": "", + "defaultValue": "" + }, { "name": "preventOverflow", "type": "boolean", "defaultValue": "true", "description": "Determines if the Overlay width should be adjusted responsively if `width` is set to either `auto`, `medium` or lower and there is not enough space to display the Overlay. If `preventOverflow` is set to `false`, the Overlay will be displayed at the maximum width that fits within the viewport." }, + { + "name": "role", + "type": "ARIA role - will most often be 'dialog' or 'menu'", + "required": false, + "description": "ARIA role to use for the overlay", + "defaultValue": "" + }, + { + "name": "data-test-id", + "type": "unknown", + "required": false, + "description": "", + "defaultValue": "" + }, { "name": "sx", "type": "SystemStyleObject" diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx index 6b31bdbb7ca..af4c93bc5e3 100644 --- a/packages/react/src/Overlay/Overlay.features.stories.tsx +++ b/packages/react/src/Overlay/Overlay.features.stories.tsx @@ -1,5 +1,5 @@ import React, {useState, useRef, useCallback} from 'react' -import type {Meta} from '@storybook/react' +import type {Args, Meta} from '@storybook/react' import {TriangleDownIcon, PlusIcon, IssueDraftIcon, XIcon} from '@primer/octicons-react' import { Overlay, @@ -18,8 +18,6 @@ import { ActionMenu, useFocusTrap, } from '..' -import type {AnchorSide} from '@primer/behaviors' -import type {AriaRole} from '../utils/types' import {Tooltip} from '../TooltipV2' export default { @@ -28,6 +26,7 @@ export default { args: { anchorSide: 'inside-top', role: 'dialog', + open: false, }, argTypes: { anchorSide: { @@ -49,16 +48,14 @@ export default { role: { type: 'string', }, + open: { + control: false, + visible: false, + }, }, } as Meta -interface OverlayProps { - anchorSide?: AnchorSide - role?: AriaRole - right?: boolean -} - -export const DropdownOverlay = ({anchorSide}: OverlayProps) => { +export const DropdownOverlay = ({anchorSide, open}: Args) => { const [isOpen, setIsOpen] = useState(false) const buttonRef = useRef(null) @@ -67,7 +64,7 @@ export const DropdownOverlay = ({anchorSide}: OverlayProps) => { setIsOpen(!isOpen)}> open overlay - {isOpen ? ( + {isOpen || open ? ( { role="none" > - Copy link - Quote reply - Reference in new issue - Edit + Copy link + Quote reply + Reference in new issue + Edit - Delete + + Delete + ) : null} @@ -92,7 +91,7 @@ export const DropdownOverlay = ({anchorSide}: OverlayProps) => { ) } -export const DialogOverlay = ({anchorSide, role}: OverlayProps) => { +export const DialogOverlay = ({anchorSide, role, open}: Args) => { const [isOpen, setIsOpen] = useState(false) const buttonRef = useRef(null) const containerRef = useRef(null) @@ -106,7 +105,7 @@ export const DialogOverlay = ({anchorSide, role}: OverlayProps) => { setIsOpen(!isOpen)}> open overlay - {isOpen ? ( + {isOpen || open ? ( { anchorSide={anchorSide} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'dialog' ? 'Confirmation screen' : undefined} ref={containerRef} > @@ -134,7 +134,7 @@ export const DialogOverlay = ({anchorSide, role}: OverlayProps) => { ) } -export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => { +export const OverlayOnTopOfOverlay = ({anchorSide, role, open}: Args) => { const [isOpen, setIsOpen] = useState(false) const [isSecondaryOpen, setIsSecondaryOpen] = useState(false) const buttonRef = useRef(null) @@ -161,7 +161,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => { setIsOpen(!isOpen)}> open overlay - {isOpen ? ( + {isOpen || open ? ( { anchorSide={anchorSide} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'dialog' ? 'Open overlay' : undefined} ref={primaryContainer} preventOverflow={false} > @@ -188,6 +189,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => { anchorSide={anchorSide} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'dialog' ? 'Options' : undefined} ref={secondaryContainer} preventOverflow={false} > @@ -218,7 +220,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => { ) } -export const MemexNestedOverlays = ({role}: OverlayProps) => { +export const MemexNestedOverlays = ({role, open}: Args) => { const [overlayOpen, setOverlayOpen] = React.useState(false) const buttonRef = useRef(null) const containerRef = useRef(null) @@ -238,7 +240,7 @@ export const MemexNestedOverlays = ({role}: OverlayProps) => { icon={TriangleDownIcon} /> - {overlayOpen && ( + {(overlayOpen || open) && ( setOverlayOpen(false)} @@ -249,15 +251,21 @@ export const MemexNestedOverlays = ({role}: OverlayProps) => { left={16} role={role} aria-modal={role === 'dialog' ? 'true' : undefined} + aria-label={role === 'dialog' ? 'Add iteration' : undefined} ref={containerRef} preventOverflow={false} > - setOverlayOpen(false)} sx={{display: 'flex', flexDirection: 'column', py: 2}}> + setOverlayOpen(false)} + sx={{display: 'flex', flexDirection: 'column', py: 2}} + aria-label="Set Duration Form" + >