From 9d344363bb701cba00f12b19e5a0bba1ff902997 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 22 Jun 2023 14:48:02 -0400 Subject: [PATCH 01/20] fixes styling issues --- src/Dialog/Dialog.tsx | 94 ++++++++++++---------------------- src/stories/Dialog.stories.tsx | 3 +- 2 files changed, 36 insertions(+), 61 deletions(-) diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx index 1db909aac6e..6d6eba064e8 100644 --- a/src/Dialog/Dialog.tsx +++ b/src/Dialog/Dialog.tsx @@ -1,16 +1,13 @@ import React, {useCallback, useEffect, useRef, useState} from 'react' import styled from 'styled-components' -import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../deprecated/Button' -import Box from '../Box' +import {Box, Button, ButtonProps, IconButton, Portal, Text} from '../' import {get} from '../constants' import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks' import {useFocusTrap} from '../hooks/useFocusTrap' import sx, {SxProp} from '../sx' -import Octicon from '../Octicon' import {XIcon} from '@primer/octicons-react' import {useFocusZone} from '../hooks/useFocusZone' import {FocusKeys} from '@primer/behaviors' -import Portal from '../Portal' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' import {useId} from '../hooks/useId' @@ -20,7 +17,7 @@ const ANIMATION_DURATION = '200ms' * Props that characterize a button to be rendered into the footer of * a Dialog. */ -export type DialogButtonProps = ButtonProps & { +export type DialogButtonProps = Omit & { /** * The type of Button element to use */ @@ -292,26 +289,24 @@ const _Dialog = React.forwardRef - - - - {header} - {body} - {footer} - - - - + + + + {header} + {body} + {footer} + + + ) }) _Dialog.displayName = 'Dialog' @@ -323,21 +318,15 @@ const Header = styled.div` flex-shrink: 0; ` -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')}; +// TODO: check if this is an appropriate use of `h1` +const Title: React.FC & SxProp>> = ({sx, ...props}) => ( + +) - ${sx}; -` +// TODO: check if this is an appropriate use of `h2` +const Subtitle: React.FC & SxProp>> = ({sx, ...props}) => ( + +) const Body = styled.div` flex-grow: 1; @@ -368,8 +357,8 @@ const Footer = styled.div` const buttonTypes = { normal: Button, - primary: ButtonPrimary, - danger: ButtonDanger, + primary: (props: ButtonProps) => } items={[{text: 'Show dialog', onAction: onButtonClick}]} - /> + /> */} @@ -92,25 +101,31 @@ describe('ConfirmationDialog', () => { expect(results).toHaveNoViolations() }) - it('focuses the primary action when opened and the confirmButtonType is not set', async () => { + it('focuses the primary action when opened and the confirmButtonType is not set', () => { const {getByText} = HTMLRender() fireEvent.click(getByText('Show dialog')) - expect(getByText('Primary')).toEqual(document.activeElement) - expect(getByText('Secondary')).not.toEqual(document.activeElement) + + // comparing `textContent` instead of the element itself because the comparison fails in @react/testing-library + expect(document.activeElement?.textContent).toEqual('Primary') + expect(document.activeElement?.textContent).not.toEqual('Secondary') }) it('focuses the primary action when opened and the confirmButtonType is not danger', async () => { const {getByText} = HTMLRender() fireEvent.click(getByText('Show dialog')) - expect(getByText('Primary')).toEqual(document.activeElement) - expect(getByText('Secondary')).not.toEqual(document.activeElement) + + // comparing `textContent` instead of the element itself because the comparison fails in @react/testing-library + expect(document.activeElement?.textContent).toEqual('Primary') + expect(document.activeElement?.textContent).not.toEqual('Secondary') }) it('focuses the secondary action when opened and the confirmButtonType is danger', async () => { const {getByText} = HTMLRender() fireEvent.click(getByText('Show dialog')) - expect(getByText('Primary')).not.toEqual(document.activeElement) - expect(getByText('Secondary')).toEqual(document.activeElement) + + // comparing `textContent` instead of the element itself because the comparison fails in @react/testing-library + expect(document.activeElement?.textContent).not.toEqual('Primary') + expect(document.activeElement?.textContent).toEqual('Secondary') }) it('supports nested `focusTrap`s', async () => { @@ -119,7 +134,8 @@ describe('ConfirmationDialog', () => { fireEvent.click(getByText('Show menu')) fireEvent.click(getByText('Show dialog')) - expect(getByText('Primary')).toEqual(document.activeElement) - expect(getByText('Secondary')).not.toEqual(document.activeElement) + // comparing `textContent` instead of the element itself because the comparison fails in @react/testing-library + expect(document.activeElement?.textContent).toEqual('Primary') + expect(document.activeElement?.textContent).not.toEqual('Secondary') }) }) diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap index 1d33d06ccb4..158b2d7dab2 100644 --- a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap +++ b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap @@ -7,68 +7,218 @@ exports[`ConfirmationDialog renders consistently 1`] = ` color: #1F2328; } +.c2 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c1 { - position: relative; - display: inline-block; - padding: 6px 16px; + border-radius: 6px; + border: 1px solid; + border-color: rgba(31,35,40,0.15); font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: 500; + 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; - border-radius: 6px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -webkit-text-decoration: none; text-decoration: none; text-align: center; - font-size: 14px; + 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: #24292f; background-color: #f6f8fa; - border: 1px solid rgba(31,35,40,0.15); box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25); } -.c1:hover { +.c1:focus:not(:disabled) { + box-shadow: none; + outline: 2px solid #0969da; + outline-offset: -2px; +} + +.c1:focus:not(:disabled):not(:focus-visible) { + outline: solid 1px transparent; +} + +.c1:focus-visible:not(:disabled) { + box-shadow: none; + outline: 2px solid #0969da; + outline-offset: -2px; +} + +.c1[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c1[href]:hover { -webkit-text-decoration: none; text-decoration: none; } -.c1:focus { - outline: none; +.c1:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c1:active { + -webkit-transition: none; + transition: none; } .c1:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; + color: #8c959f; } -.c1:disabled svg { - opacity: 0.6; +.c1:disabled [data-component=ButtonCounter] { + color: inherit; } -.c1:hover { +.c1 [data-component=ButtonCounter] { + font-size: 14px; +} + +.c1[data-component=IconButton] { + display: inline-grid; + padding: unset; + place-content: center; + width: 32px; + min-width: unset; +} + +.c1[data-size="small"] { + padding: 0 8px; + height: 28px; + gap: 4px; + font-size: 12px; +} + +.c1[data-size="small"] [data-component="text"] { + line-height: calc(20 / 12); +} + +.c1[data-size="small"] [data-component=ButtonCounter] { + font-size: 12px; +} + +.c1[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: 4px; +} + +.c1[data-size="small"][data-component=IconButton] { + width: 28px; + padding: unset; +} + +.c1[data-size="large"] { + padding: 0 16px; + height: 40px; + gap: 8px; +} + +.c1[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: 8px; +} + +.c1[data-size="large"][data-component=IconButton] { + width: 40px; + padding: unset; +} + +.c1[data-block="block"] { + width: 100%; +} + +.c1 [data-component="leadingVisual"] { + grid-area: leadingVisual; +} + +.c1 [data-component="text"] { + grid-area: text; + line-height: calc(20/14); + white-space: nowrap; +} + +.c1 [data-component="trailingVisual"] { + grid-area: trailingVisual; +} + +.c1 [data-component="trailingAction"] { + margin-right: -4px; +} + +.c1 [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; +} + +.c1 [data-component="buttonContent"] > :not(:last-child) { + margin-right: 8px; +} + +.c1:hover:not([disabled]) { background-color: #f3f4f6; border-color: rgba(31,35,40,0.15); } -.c1:focus { - outline: solid 2px #0969da; +.c1:active:not([disabled]) { + background-color: hsla(220,14%,93%,1); + border-color: rgba(31,35,40,0.15); } -.c1:active { - background-color: hsla(220,14%,94%,1); +.c1[aria-expanded=true] { + background-color: hsla(220,14%,93%,1); + border-color: rgba(31,35,40,0.15); } -.c1:disabled { - color: #8c959f; - background-color: #f6f8fa; - border-color: rgba(31,35,40,0.15); +@media (forced-colors:active) { + .c1:focus { + outline: solid 1px transparent; + } }
`; diff --git a/src/drafts/Dialog/Dialog.tsx b/src/drafts/Dialog/Dialog.tsx index d85e93f508f..21641eeb30f 100644 --- a/src/drafts/Dialog/Dialog.tsx +++ b/src/drafts/Dialog/Dialog.tsx @@ -355,11 +355,6 @@ const Footer = styled.div` ${sx}; ` -const buttonTypes = { - normal: Button, - primary: (props: ButtonProps) => ) })} ) } - const CloseButton: React.FC void}>> = ({onClose}) => ( ) From 802a352f903c6831cb3dbdadf98393cb47e5013b Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 13 Jul 2023 18:13:56 -0400 Subject: [PATCH 12/20] NavList snapshot updates for some reason? --- .../__snapshots__/NavList.test.tsx.snap | 457 ++++++++++-------- 1 file changed, 248 insertions(+), 209 deletions(-) diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index 1038cb86950..947b5e11074 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -88,11 +88,12 @@ exports[`NavList renders a simple list 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c1 { +[data-component="ActionList.Divider"] + .c2 { --divider-color: transparent !important; } -.c2:hover:not([aria-disabled]),.c2:focus:not([aria-disabled]), +.c2:hover:not([aria-disabled]), +.c2:focus:not([aria-disabled]), .c2[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -168,11 +169,12 @@ exports[`NavList renders a simple list 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c1 { +[data-component="ActionList.Divider"] + .c6 { --divider-color: transparent !important; } -.c6:hover:not([aria-disabled]),.c6:focus:not([aria-disabled]), +.c6:hover:not([aria-disabled]), +.c6:focus:not([aria-disabled]), .c6[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -360,6 +362,29 @@ exports[`NavList renders a simple list 1`] = ` `; exports[`NavList renders with groups 1`] = ` +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; +} + +.c9 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + font-weight: 400; +} + .c1 { height: 1px; background-color: rgba(208,215,222,0.48); @@ -394,29 +419,6 @@ exports[`NavList renders with groups 1`] = ` padding-inline-start: 0; } -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - min-width: 0; -} - -.c9 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - font-weight: 400; -} - .c0 { margin: 0; padding-inline-start: 0; @@ -481,11 +483,12 @@ exports[`NavList renders with groups 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c5 { +[data-component="ActionList.Divider"] + .c6 { --divider-color: transparent !important; } -.c6:hover:not([aria-disabled]),.c6:focus:not([aria-disabled]), +.c6:hover:not([aria-disabled]), +.c6:focus:not([aria-disabled]), .c6[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -561,11 +564,12 @@ exports[`NavList renders with groups 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c5 { +[data-component="ActionList.Divider"] + .c10 { --divider-color: transparent !important; } -.c10:hover:not([aria-disabled]),.c10:focus:not([aria-disabled]), +.c10:hover:not([aria-disabled]), +.c10:focus:not([aria-disabled]), .c10[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -781,11 +785,7 @@ exports[`NavList renders with groups 1`] = ` `; exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav contains the current item and is open 1`] = ` -.c2 { - list-style: none; -} - -.c5 { +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -801,25 +801,35 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav } .c6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; + font-weight: 400; } -.c7 { +.c1 { + list-style: none; +} + +.c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; - font-weight: 400; } -.c8 { +.c9 { + padding: 0; + margin: 0; + display: block; +} + +.c7 { height: 20px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -829,16 +839,11 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: initial; } -[data-variant="danger"]:hover .c1,[data-variant="danger"]:active .c8 { +[data-variant="danger"]:hover .c7, +[data-variant="danger"]:active .c7 { color: #1F2328; } -.c10 { - padding: 0; - margin: 0; - display: block; -} - .c0 { margin: 0; padding-inline-start: 0; @@ -846,16 +851,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav padding-bottom: 8px; } -[data-component="ActionList.Divider"] + .c3 { - --divider-color: transparent !important; -} - -.c13:hover:not([aria-disabled]) + .c3, -.c13[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c11 { +.c10 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -889,15 +885,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav background-color: rgba(208,215,222,0.24); } -.c11[aria-disabled] { +.c10[aria-disabled] { cursor: not-allowed; } -.c11 [data-component="ActionList.Item--DividerContainer"] { +.c10 [data-component="ActionList.Item--DividerContainer"] { position: relative; } -.c11 [data-component="ActionList.Item--DividerContainer"]::before { +.c10 [data-component="ActionList.Item--DividerContainer"]::before { content: " "; display: block; position: absolute; @@ -908,25 +904,26 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-color: var(--divider-color,transparent); } -.c11:not(:first-of-type) { +.c10:not(:first-of-type) { --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c3 { +[data-component="ActionList.Divider"] + .c10 { --divider-color: transparent !important; } -.c11:hover:not([aria-disabled]),.c11:focus:not([aria-disabled]), -.c11[data-focus-visible-added]:not([aria-disabled]) { +.c10:hover:not([aria-disabled]), +.c10:focus:not([aria-disabled]), +.c10[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } -.c11:hover:not([aria-disabled]) + .c3, -.c11[data-focus-visible-added] + li { +.c10:hover:not([aria-disabled]) + .c2, +.c10[data-focus-visible-added] + li { --divider-color: transparent; } -.c11::after { +.c10::after { position: absolute; top: calc(50% - 12px); left: -8px; @@ -937,7 +934,42 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-radius: 6px; } -.c4 { +.c12:hover:not([aria-disabled]) + .c2, +.c12[data-focus-visible-added] + li { + --divider-color: transparent; +} + +.c13:hover:not([aria-disabled]) + .c2, +.c13[data-focus-visible-added] + li { + --divider-color: transparent; +} + +.c14:hover:not([aria-disabled]) + .c2, +.c14[data-focus-visible-added] + li { + --divider-color: transparent; +} + +.c15:hover:not([aria-disabled]) + .c2, +.c15[data-focus-visible-added] + li { + --divider-color: transparent; +} + +.c16:hover:not([aria-disabled]) + .c2, +.c16[data-focus-visible-added] + li { + --divider-color: transparent; +} + +.c17:hover:not([aria-disabled]) + .c2, +.c17[data-focus-visible-added] + li { + --divider-color: transparent; +} + +.c18:hover:not([aria-disabled]) + .c2, +.c18[data-focus-visible-added] + li { + --divider-color: transparent; +} + +.c3 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -969,15 +1001,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: 600; } -.c4[aria-disabled] { +.c3[aria-disabled] { cursor: not-allowed; } -.c4 [data-component="ActionList.Item--DividerContainer"] { +.c3 [data-component="ActionList.Item--DividerContainer"] { position: relative; } -.c4 [data-component="ActionList.Item--DividerContainer"]::before { +.c3 [data-component="ActionList.Item--DividerContainer"]::before { content: " "; display: block; position: absolute; @@ -988,7 +1020,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-color: var(--divider-color,transparent); } -.c4:not(:first-of-type) { +.c3:not(:first-of-type) { --divider-color: rgba(208,215,222,0.48); } @@ -996,17 +1028,23 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav --divider-color: transparent !important; } -.c4:hover:not([aria-disabled]),.c4:focus:not([aria-disabled]), -.c4[data-focus-visible-added]:not([aria-disabled]) { +.c3:hover:not([aria-disabled]), +.c3:focus:not([aria-disabled]), +.c3[data-focus-visible-added]:not([aria-disabled]) { + --divider-color: transparent; +} + +.c3:hover:not([aria-disabled]) + .c2, +.c3[data-focus-visible-added] + li { --divider-color: transparent; } -.c4:hover:not([aria-disabled]) + .c3, -.c4[data-focus-visible-added] + li { +.c19:hover:not([aria-disabled]) + .c2, +.c19[data-focus-visible-added] + li { --divider-color: transparent; } -.c12 { +.c11 { color: #0969da; -webkit-text-decoration: none; text-decoration: none; @@ -1028,12 +1066,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: 400; } -.c12:hover { +.c11:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.c12:is(button) { +.c11:is(button) { display: inline-block; padding: 0; font-size: inherit; @@ -1050,72 +1088,64 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav appearance: none; } -.c12:hover { +.c11:hover { color: inherit; -webkit-text-decoration: none; text-decoration: none; } -.c9 { +.c8 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @media (hover:hover) and (pointer:fine) { - -} - -@media (forced-colors:active) { - -} - -@media (hover:hover) and (pointer:fine) { - .c11:hover:not([aria-disabled]) { + .c10:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; } - .c11:focus-visible, - .c11 > a:focus-visible { + .c10:focus-visible, + .c10 > a:focus-visible { outline: none; border: 2 solid; box-shadow: 0 0 0 2px #0969da; } - .c11:active:not([aria-disabled]) { + .c10:active:not([aria-disabled]) { background-color: rgba(208,215,222,0.48); color: #1F2328; } } @media (forced-colors:active) { - .c11:focus { + .c10:focus { outline: solid 1px transparent !important; } } @media (hover:hover) and (pointer:fine) { - .c4:hover:not([aria-disabled]) { + .c3:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; } - .c4:focus-visible, - .c4 > a:focus-visible { + .c3:focus-visible, + .c3 > a:focus-visible { outline: none; border: 2 solid; box-shadow: 0 0 0 2px #0969da; } - .c4:active:not([aria-disabled]) { + .c3:active:not([aria-disabled]) { background-color: rgba(208,215,222,0.48); color: #1F2328; } } @media (forced-colors:active) { - .c4:focus { + .c3:focus { outline: solid 1px transparent !important; } } @@ -1129,34 +1159,34 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav >
  • Some content diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index 947b5e11074..1038cb86950 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -88,12 +88,11 @@ exports[`NavList renders a simple list 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c2 { +[data-component="ActionList.Divider"] + .c1 { --divider-color: transparent !important; } -.c2:hover:not([aria-disabled]), -.c2:focus:not([aria-disabled]), +.c2:hover:not([aria-disabled]),.c2:focus:not([aria-disabled]), .c2[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -169,12 +168,11 @@ exports[`NavList renders a simple list 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c6 { +[data-component="ActionList.Divider"] + .c1 { --divider-color: transparent !important; } -.c6:hover:not([aria-disabled]), -.c6:focus:not([aria-disabled]), +.c6:hover:not([aria-disabled]),.c6:focus:not([aria-disabled]), .c6[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -362,29 +360,6 @@ exports[`NavList renders a simple list 1`] = ` `; exports[`NavList renders with groups 1`] = ` -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - min-width: 0; -} - -.c9 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - font-weight: 400; -} - .c1 { height: 1px; background-color: rgba(208,215,222,0.48); @@ -419,6 +394,29 @@ exports[`NavList renders with groups 1`] = ` padding-inline-start: 0; } +.c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; +} + +.c9 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + font-weight: 400; +} + .c0 { margin: 0; padding-inline-start: 0; @@ -483,12 +481,11 @@ exports[`NavList renders with groups 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c6 { +[data-component="ActionList.Divider"] + .c5 { --divider-color: transparent !important; } -.c6:hover:not([aria-disabled]), -.c6:focus:not([aria-disabled]), +.c6:hover:not([aria-disabled]),.c6:focus:not([aria-disabled]), .c6[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -564,12 +561,11 @@ exports[`NavList renders with groups 1`] = ` --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c10 { +[data-component="ActionList.Divider"] + .c5 { --divider-color: transparent !important; } -.c10:hover:not([aria-disabled]), -.c10:focus:not([aria-disabled]), +.c10:hover:not([aria-disabled]),.c10:focus:not([aria-disabled]), .c10[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } @@ -785,7 +781,11 @@ exports[`NavList renders with groups 1`] = ` `; exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav contains the current item and is open 1`] = ` -.c4 { +.c2 { + list-style: none; +} + +.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -801,18 +801,6 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav } .c6 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - font-weight: 400; -} - -.c1 { - list-style: none; -} - -.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -823,13 +811,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav flex-grow: 1; } -.c9 { - padding: 0; - margin: 0; - display: block; +.c7 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + font-weight: 400; } -.c7 { +.c8 { height: 20px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -839,11 +829,16 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: initial; } -[data-variant="danger"]:hover .c7, -[data-variant="danger"]:active .c7 { +[data-variant="danger"]:hover .c1,[data-variant="danger"]:active .c8 { color: #1F2328; } +.c10 { + padding: 0; + margin: 0; + display: block; +} + .c0 { margin: 0; padding-inline-start: 0; @@ -851,7 +846,16 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav padding-bottom: 8px; } -.c10 { +[data-component="ActionList.Divider"] + .c3 { + --divider-color: transparent !important; +} + +.c13:hover:not([aria-disabled]) + .c3, +.c13[data-focus-visible-added] + li { + --divider-color: transparent; +} + +.c11 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -885,15 +889,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav background-color: rgba(208,215,222,0.24); } -.c10[aria-disabled] { +.c11[aria-disabled] { cursor: not-allowed; } -.c10 [data-component="ActionList.Item--DividerContainer"] { +.c11 [data-component="ActionList.Item--DividerContainer"] { position: relative; } -.c10 [data-component="ActionList.Item--DividerContainer"]::before { +.c11 [data-component="ActionList.Item--DividerContainer"]::before { content: " "; display: block; position: absolute; @@ -904,26 +908,25 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-color: var(--divider-color,transparent); } -.c10:not(:first-of-type) { +.c11:not(:first-of-type) { --divider-color: rgba(208,215,222,0.48); } -[data-component="ActionList.Divider"] + .c10 { +[data-component="ActionList.Divider"] + .c3 { --divider-color: transparent !important; } -.c10:hover:not([aria-disabled]), -.c10:focus:not([aria-disabled]), -.c10[data-focus-visible-added]:not([aria-disabled]) { +.c11:hover:not([aria-disabled]),.c11:focus:not([aria-disabled]), +.c11[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } -.c10:hover:not([aria-disabled]) + .c2, -.c10[data-focus-visible-added] + li { +.c11:hover:not([aria-disabled]) + .c3, +.c11[data-focus-visible-added] + li { --divider-color: transparent; } -.c10::after { +.c11::after { position: absolute; top: calc(50% - 12px); left: -8px; @@ -934,42 +937,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-radius: 6px; } -.c12:hover:not([aria-disabled]) + .c2, -.c12[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c13:hover:not([aria-disabled]) + .c2, -.c13[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c14:hover:not([aria-disabled]) + .c2, -.c14[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c15:hover:not([aria-disabled]) + .c2, -.c15[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c16:hover:not([aria-disabled]) + .c2, -.c16[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c17:hover:not([aria-disabled]) + .c2, -.c17[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c18:hover:not([aria-disabled]) + .c2, -.c18[data-focus-visible-added] + li { - --divider-color: transparent; -} - -.c3 { +.c4 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -1001,15 +969,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: 600; } -.c3[aria-disabled] { +.c4[aria-disabled] { cursor: not-allowed; } -.c3 [data-component="ActionList.Item--DividerContainer"] { +.c4 [data-component="ActionList.Item--DividerContainer"] { position: relative; } -.c3 [data-component="ActionList.Item--DividerContainer"]::before { +.c4 [data-component="ActionList.Item--DividerContainer"]::before { content: " "; display: block; position: absolute; @@ -1020,7 +988,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav border-color: var(--divider-color,transparent); } -.c3:not(:first-of-type) { +.c4:not(:first-of-type) { --divider-color: rgba(208,215,222,0.48); } @@ -1028,23 +996,17 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav --divider-color: transparent !important; } -.c3:hover:not([aria-disabled]), -.c3:focus:not([aria-disabled]), -.c3[data-focus-visible-added]:not([aria-disabled]) { - --divider-color: transparent; -} - -.c3:hover:not([aria-disabled]) + .c2, -.c3[data-focus-visible-added] + li { +.c4:hover:not([aria-disabled]),.c4:focus:not([aria-disabled]), +.c4[data-focus-visible-added]:not([aria-disabled]) { --divider-color: transparent; } -.c19:hover:not([aria-disabled]) + .c2, -.c19[data-focus-visible-added] + li { +.c4:hover:not([aria-disabled]) + .c3, +.c4[data-focus-visible-added] + li { --divider-color: transparent; } -.c11 { +.c12 { color: #0969da; -webkit-text-decoration: none; text-decoration: none; @@ -1066,12 +1028,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: 400; } -.c11:hover { +.c12:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.c11:is(button) { +.c12:is(button) { display: inline-block; padding: 0; font-size: inherit; @@ -1088,64 +1050,72 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav appearance: none; } -.c11:hover { +.c12:hover { color: inherit; -webkit-text-decoration: none; text-decoration: none; } -.c8 { +.c9 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @media (hover:hover) and (pointer:fine) { - .c10:hover:not([aria-disabled]) { + +} + +@media (forced-colors:active) { + +} + +@media (hover:hover) and (pointer:fine) { + .c11:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; } - .c10:focus-visible, - .c10 > a:focus-visible { + .c11:focus-visible, + .c11 > a:focus-visible { outline: none; border: 2 solid; box-shadow: 0 0 0 2px #0969da; } - .c10:active:not([aria-disabled]) { + .c11:active:not([aria-disabled]) { background-color: rgba(208,215,222,0.48); color: #1F2328; } } @media (forced-colors:active) { - .c10:focus { + .c11:focus { outline: solid 1px transparent !important; } } @media (hover:hover) and (pointer:fine) { - .c3:hover:not([aria-disabled]) { + .c4:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; } - .c3:focus-visible, - .c3 > a:focus-visible { + .c4:focus-visible, + .c4 > a:focus-visible { outline: none; border: 2 solid; box-shadow: 0 0 0 2px #0969da; } - .c3:active:not([aria-disabled]) { + .c4:active:not([aria-disabled]) { background-color: rgba(208,215,222,0.48); color: #1F2328; } } @media (forced-colors:active) { - .c3:focus { + .c4:focus { outline: solid 1px transparent !important; } } @@ -1159,34 +1129,34 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav >
  • `; From 1c218541267635bf4782d8fe97c6cf143dfaaaa6 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 1 Aug 2023 18:20:31 -0400 Subject: [PATCH 20/20] updates ConfirmationDialog tests for the newer Button --- .../Dialog2/ConfirmationDialog.test.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/drafts/Dialog2/ConfirmationDialog.test.tsx b/src/drafts/Dialog2/ConfirmationDialog.test.tsx index 5829297d94f..4bdb777fbee 100644 --- a/src/drafts/Dialog2/ConfirmationDialog.test.tsx +++ b/src/drafts/Dialog2/ConfirmationDialog.test.tsx @@ -98,33 +98,33 @@ describe('ConfirmationDialog', () => { }) it('focuses the primary action when opened and the confirmButtonType is not set', async () => { - const {getByText} = HTMLRender() + const {getByText, getByRole} = HTMLRender() fireEvent.click(getByText('Show dialog')) - expect(getByText('Primary')).toEqual(document.activeElement) - expect(getByText('Secondary')).not.toEqual(document.activeElement) + expect(getByRole('button', {name: 'Primary'})).toHaveFocus() + expect(getByRole('button', {name: 'Secondary'})).not.toHaveFocus() }) it('focuses the primary action when opened and the confirmButtonType is not danger', async () => { - const {getByText} = HTMLRender() + const {getByText, getByRole} = HTMLRender() fireEvent.click(getByText('Show dialog')) - expect(getByText('Primary')).toEqual(document.activeElement) - expect(getByText('Secondary')).not.toEqual(document.activeElement) + expect(getByRole('button', {name: 'Primary'})).toHaveFocus() + expect(getByRole('button', {name: 'Secondary'})).not.toHaveFocus() }) it('focuses the secondary action when opened and the confirmButtonType is danger', async () => { - const {getByText} = HTMLRender() + const {getByText, getByRole} = HTMLRender() fireEvent.click(getByText('Show dialog')) - expect(getByText('Primary')).not.toEqual(document.activeElement) - expect(getByText('Secondary')).toEqual(document.activeElement) + expect(getByRole('button', {name: 'Primary'})).not.toHaveFocus() + expect(getByRole('button', {name: 'Secondary'})).toHaveFocus() }) it('supports nested `focusTrap`s', async () => { - const {getByText} = HTMLRender() + const {getByText, getByRole} = HTMLRender() fireEvent.click(getByText('Show menu')) fireEvent.click(getByText('Show dialog')) - expect(getByText('Primary')).toEqual(document.activeElement) - expect(getByText('Secondary')).not.toEqual(document.activeElement) + expect(getByRole('button', {name: 'Primary'})).toHaveFocus() + expect(getByRole('button', {name: 'Secondary'})).not.toHaveFocus() }) })