Update arrow btn styles

primer · Oct 14, 2022 · ae778b8 · ae778b8
1 parent 0f802ff
commit ae778b8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git a/src/UnderlineNav2/UnderlineNavArrowButton.tsx b/src/UnderlineNav2/UnderlineNavArrowButton.tsx
@@ -56,7 +56,7 @@ const ArrowButton = ({
         aria-label={`Scroll ${ariaLabel} navigation ${type}`}
         onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => onScrollWithButton(e, direction)}
         icon={type === 'left' ? ChevronLeftIcon : ChevronRightIcon}
-        sx={getArrowBtnStyles(theme, type)}
+        sx={getArrowBtnStyles(theme)}
         aria-disabled={!show}
       />
     </Box>

diff --git a/src/UnderlineNav2/styles.ts b/src/UnderlineNav2/styles.ts
@@ -32,7 +32,6 @@ export const counterStyles = {
 
 export const getNavStyles = (theme?: Theme, props?: Partial<Pick<UnderlineNavProps, 'align'>>) => ({
   display: 'flex',
-  paddingX: 2,
   justifyContent: props?.align === 'right' ? 'flex-end' : 'flex-start',
   borderBottom: '1px solid',
   borderBottomColor: `${theme?.colors.border.muted}`,
@@ -44,10 +43,12 @@ export const getNavStyles = (theme?: Theme, props?: Partial<Pick<UnderlineNavPro
 export const ulStyles = {
   display: 'flex',
   listStyle: 'none',
-  padding: '0',
+  paddingY: 0,
+  paddingX: 3,
   margin: '0',
   marginBottom: '-1px',
-  alignItems: 'center'
+  alignItems: 'center',
+  gap: 2
 }
 
 export const getDividerStyle = (theme?: Theme) => ({
@@ -82,6 +83,8 @@ export const btnWrapperStyles = (
   bottom: 0,
   left: direction === 'left' ? 0 : 'auto',
   right: direction === 'right' ? 0 : 'auto',
+  // Min touch target size
+  width: '44px',
   alignItems: 'center',
   background: show
     ? `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)`
@@ -90,33 +93,28 @@ export const btnWrapperStyles = (
   display: `${display}`
 })
 
-export const getArrowBtnStyles = (theme?: Theme, direction = 'left') => ({
-  fontWeight: 'normal',
+export const getArrowBtnStyles = (theme?: Theme) => ({
   boxShadow: 'none',
-  margin: 0,
   border: 0,
-  borderRadius: 2,
-  paddingX: '14px',
-  paddingY: 0,
   background: 'transparent',
-  height: '60%',
-
+  width: '100%',
+  height: '100%',
+  // to reset the hover styles of the button
   '&:hover:not([disabled]), &:focus-visible': {
-    background: theme?.colors.canvas.default
+    background: 'transparent'
   },
+  // To reset global focus styles because it doesn't support safari right now.
   '&:focus:not(:disabled)': {
     outline: 0,
-    boxShadow: `inset 0 0 0 2px ${theme?.colors.accent.fg}`,
-    background: `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)`
+    boxShadow: `inset 0 0 0 2px ${theme?.colors.accent.fg}`
   },
   // where focus-visible is supported, remove the focus box-shadow
   '&:not(:focus-visible)': {
-    boxShadow: 'none',
-    background: `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)`
+    boxShadow: 'none'
   },
   '&:focus-visible:not(:disabled)': {
-    boxShadow: `inset 0 0 0 2px ${theme?.colors.accent.fg}`,
-    background: `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)`
+    outline: 0,
+    boxShadow: `inset 0 0 0 2px ${theme?.colors.accent.fg}`
   }
 })
 
@@ -131,7 +129,6 @@ export const getLinkStyles = (
   color: 'fg.default',
   textAlign: 'center',
   textDecoration: 'none',
-  paddingX: 1,
   ...(props?.variant === 'small' ? smallVariantLinkStyles : defaultVariantLinkStyles),
   '@media (hover:hover)': {
     '&:hover > div[data-component="wrapper"] ': {
@@ -166,7 +163,7 @@ export const getLinkStyles = (
     position: 'absolute',
     right: '50%',
     bottom: 0,
-    width: `calc(100% - 8px)`,
+    width: '100%',
     height: 2,
     content: '""',
     bg: selectedLink === ref ? theme?.colors.primer.border.active : 'transparent',