From 107b4fce7e4d6c52a82f57e294b0b0f396191fad Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Fri, 13 Oct 2023 14:19:01 +1100 Subject: [PATCH 1/4] Update hover styles for ActionList item --- src/ActionList/Item.tsx | 1 + src/NavList/__snapshots__/NavList.test.tsx.snap | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 64343735987..8dfe4f53103 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -125,6 +125,7 @@ export const Item = React.forwardRef( ':hover:not([aria-disabled])': { backgroundColor: `actionListItem.${variant}.hoverBg`, color: getVariantStyles(variant, disabled).hoverColor, + boxShadow: `inset 0 0 0 max(1px, 0.0625rem) ${theme?.colors.border.muted}` , }, '&:focus-visible, > a:focus-visible': { outline: 'none', diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index fb4e2779519..df0ea4904a2 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -248,6 +248,7 @@ exports[`NavList renders a simple list 1`] = ` .c2:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; + box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); } .c2:focus-visible, @@ -273,6 +274,7 @@ exports[`NavList renders a simple list 1`] = ` .c6:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; + box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); } .c6:focus-visible, @@ -658,6 +660,7 @@ exports[`NavList renders with groups 1`] = ` .c6:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; + box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); } .c6:focus-visible, @@ -683,6 +686,7 @@ exports[`NavList renders with groups 1`] = ` .c10:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; + box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); } .c10:focus-visible, @@ -1145,6 +1149,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav .c10:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; + box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); } .c10:focus-visible, @@ -1170,6 +1175,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav .c3:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; + box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); } .c3:focus-visible, @@ -1627,6 +1633,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t .c10:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; + box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); } .c10:focus-visible, @@ -1652,6 +1659,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t .c3:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; + box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); } .c3:focus-visible, From e54b0afb132f7828385e9a75de1ed4e4d26dbdd3 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Fri, 13 Oct 2023 14:57:14 +1100 Subject: [PATCH 2/4] Fix formatting --- src/ActionList/Item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 8dfe4f53103..dbdc3bbfcdc 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -125,7 +125,7 @@ export const Item = React.forwardRef( ':hover:not([aria-disabled])': { backgroundColor: `actionListItem.${variant}.hoverBg`, color: getVariantStyles(variant, disabled).hoverColor, - boxShadow: `inset 0 0 0 max(1px, 0.0625rem) ${theme?.colors.border.muted}` , + boxShadow: `inset 0 0 0 max(1px, 0.0625rem) ${theme?.colors.border.muted}`, }, '&:focus-visible, > a:focus-visible': { outline: 'none', From 30f9691e2aa81ddfcb9d3219800bf736a8fff3e7 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Mon, 16 Oct 2023 09:31:05 +1100 Subject: [PATCH 3/4] Change the color --- src/ActionList/Item.tsx | 2 +- src/NavList/__snapshots__/NavList.test.tsx.snap | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index dbdc3bbfcdc..37a87ad1afc 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -125,7 +125,7 @@ export const Item = React.forwardRef( ':hover:not([aria-disabled])': { backgroundColor: `actionListItem.${variant}.hoverBg`, color: getVariantStyles(variant, disabled).hoverColor, - boxShadow: `inset 0 0 0 max(1px, 0.0625rem) ${theme?.colors.border.muted}`, + boxShadow: `inset 0 0 0 max(1px, 0.0625rem) ${theme?.colors.actionListItem.default.activeBorder}`, }, '&:focus-visible, > a:focus-visible': { outline: 'none', diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index df0ea4904a2..cc1f8de9391 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -248,7 +248,7 @@ exports[`NavList renders a simple list 1`] = ` .c2:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; - box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); + box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0); } .c2:focus-visible, @@ -274,7 +274,7 @@ exports[`NavList renders a simple list 1`] = ` .c6:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; - box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); + box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0); } .c6:focus-visible, @@ -660,7 +660,7 @@ exports[`NavList renders with groups 1`] = ` .c6:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; - box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); + box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0); } .c6:focus-visible, @@ -686,7 +686,7 @@ exports[`NavList renders with groups 1`] = ` .c10:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; - box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); + box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0); } .c10:focus-visible, @@ -1149,7 +1149,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav .c10:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; - box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); + box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0); } .c10:focus-visible, @@ -1175,7 +1175,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav .c3:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; - box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); + box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0); } .c3:focus-visible, @@ -1633,7 +1633,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t .c10:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; - box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); + box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0); } .c10:focus-visible, @@ -1659,7 +1659,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t .c3:hover:not([aria-disabled]) { background-color: rgba(208,215,222,0.32); color: #1F2328; - box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1); + box-shadow: inset 0 0 0 max(1px,0.0625rem) rgba(0,0,0,0); } .c3:focus-visible, From 1bee44a6987c00d7dfc112b2add13ad8ef080a10 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Mon, 16 Oct 2023 09:35:21 +1100 Subject: [PATCH 4/4] Create dry-zoos-love.md --- .changeset/dry-zoos-love.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dry-zoos-love.md diff --git a/.changeset/dry-zoos-love.md b/.changeset/dry-zoos-love.md new file mode 100644 index 00000000000..b0e6aeb0ba3 --- /dev/null +++ b/.changeset/dry-zoos-love.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Update hover styles for ActionList item