chore: loreinas fixes

twilio-labs · Mar 14, 2023 · 6c6ee9a · 6c6ee9a
1 parent cd3d613
commit 6c6ee9a
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 13 deletions.
diff --git a/packages/paste-core/components/file-picker/src/FilePicker.tsx b/packages/paste-core/components/file-picker/src/FilePicker.tsx
@@ -88,7 +88,7 @@ const FilePicker = React.forwardRef<HTMLInputElement, FilePickerProps>(
             boxShadow="shadowBorder"
             backgroundColor="colorBackgroundBody"
             _focusSibling={{
-              borderRadius: 'borderRadius10',
+              borderRadius: 'borderRadius30',
               padding: 'space20',
               boxShadow: 'shadowFocus',
               backgroundColor: 'colorBackgroundBody',
@@ -102,8 +102,7 @@ const FilePicker = React.forwardRef<HTMLInputElement, FilePickerProps>(
             <Text
               id={textId}
               as="span"
-              marginRight="space40"
-              paddingLeft="space30"
+              paddingX="space30"
               color={getTextColor(disabled, fileDescription, i18nNoSelectionText)}
               fontWeight={fileDescription === i18nNoSelectionText ? 'fontWeightNormal' : 'fontWeightMedium'}
               fontStyle={fileDescription === i18nNoSelectionText ? 'italic' : 'none'}

diff --git a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowButton.tsx b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowButton.tsx
@@ -14,8 +14,8 @@ const PaginationArrowButton = React.forwardRef<HTMLButtonElement, PaginationArro
         aria-hidden={disabled}
         alignItems="center"
         appearance="none"
-        background="none"
         border="none"
+        backgroundColor="colorBackgroundBody"
         borderColor="colorBorder"
         borderRadius={visibleLabel ? 'borderRadius10' : 'borderRadiusCircle'}
         color="colorText"
@@ -27,7 +27,14 @@ const PaginationArrowButton = React.forwardRef<HTMLButtonElement, PaginationArro
         margin="space0"
         outline="none"
         opacity={disabled ? '0' : '1'}
-        padding="space0"
+        /*
+         * make a loom tomorrow
+         * issue: the current focus state uses 2 box shadows, one on the icon wrapper and one on the arrow button
+         * on button focus, the inner gray box shadow is too close to the outer blue box shadow and it doesn't accurately resemble the shadowFocusShadowBorder token
+         * adding 1px padding to the button fixes it... but is janky
+         * semi-related: having enough padding on the button on background colors
+         */
+        padding="1px"
         position="relative"
         textDecoration="none"
         transition="border-color 100ms ease-in, box-shadow 100ms ease-in, color 100ms ease-in, opacity 150ms ease-in, visibility 150ms ease-in"

diff --git a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx
@@ -14,8 +14,8 @@ const PaginationArrowIconWrapper: React.FC<React.PropsWithChildren<PaginationArr
     <Box
       element={element}
       alignItems="center"
-      backgroundColor={isHovered || isFocused ? 'colorBackgroundPrimaryWeakest' : 'none'}
-      boxShadow="shadowBorderWeak"
+      backgroundColor="colorBackgroundBody"
+      boxShadow={isHovered && !isFocused ? 'shadowBorderPrimary' : 'shadowBorderWeak'}
       borderRadius="borderRadiusCircle"
       display="flex"
       height="sizeSquare80"

diff --git a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationBackArrow.tsx b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationBackArrow.tsx
@@ -22,7 +22,13 @@ const PaginationBackArrow = React.forwardRef<HTMLButtonElement, PaginationArrowP
         element={`${element}_BUTTON`}
       >
         <PaginationArrowIconWrapper isFocused={isFocused} isHovered={isHovered} element={`${element}_ICON_WRAPPER`}>
-          <ArrowBackIcon decorative={false} display="block" title={label} element={`${element}_ICON`} />
+          <ArrowBackIcon
+            decorative={false}
+            color={isHovered ? 'colorTextPrimary' : 'colorText'}
+            display="block"
+            title={label}
+            element={`${element}_ICON`}
+          />
         </PaginationArrowIconWrapper>
         {visibleLabel ? (
           <Text

diff --git a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationForwardArrow.tsx b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationForwardArrow.tsx
@@ -34,7 +34,13 @@ const PaginationForwardArrow = React.forwardRef<HTMLButtonElement, PaginationArr
           </Text>
         ) : null}
         <PaginationArrowIconWrapper isFocused={isFocused} isHovered={isHovered} element={`${element}_ICON_WRAPPER`}>
-          <ArrowForwardIcon decorative={false} display="block" title={label} element={`${element}_ICON`} />
+          <ArrowForwardIcon
+            decorative={false}
+            color={isHovered ? 'colorTextPrimary' : 'colorText'}
+            display="block"
+            title={label}
+            element={`${element}_ICON`}
+          />
         </PaginationArrowIconWrapper>
       </PaginationArrowButton>
     );

diff --git a/packages/paste-core/components/pagination/src/PaginationLabel.tsx b/packages/paste-core/components/pagination/src/PaginationLabel.tsx
@@ -13,8 +13,6 @@ const PaginationLabel = React.forwardRef<HTMLDivElement, PaginationLabelProps>(
         element={element}
         as="div"
         color="colorTextWeak"
-        paddingBottom="space20"
-        paddingTop="space20"
         textAlign="center"
         fontWeight="fontWeightNormal"
       >

diff --git a/packages/paste-core/components/pagination/src/PaginationNumber.tsx b/packages/paste-core/components/pagination/src/PaginationNumber.tsx
@@ -45,14 +45,15 @@ const PaginationNumber = React.forwardRef<HTMLButtonElement, PaginationNumberPro
           backgroundColor: 'colorBackgroundPrimaryWeakest',
           borderColor: isCurrent ? 'colorBorderPrimaryStronger' : 'transparent',
           boxShadow: isCurrent ? 'none' : 'shadowBorderPrimaryStronger',
-          color: isCurrent ? 'colorTextLinkStronger' : 'colorTextLink',
+          color: 'colorTextLinkStronger',
           cursor: 'pointer',
           textDecoration: 'none',
         }}
         _focus={{
           boxShadow: 'shadowFocus',
           borderColor: 'transparent',
           textDecoration: 'none',
+          color: 'colorTextLink',
         }}
         _active={{textDecoration: 'none'}}
       >

diff --git a/packages/paste-core/components/pagination/src/PaginationNumbers.tsx b/packages/paste-core/components/pagination/src/PaginationNumbers.tsx
@@ -26,6 +26,7 @@ const PaginationNumbers = React.forwardRef<HTMLUListElement, PaginationNumbersPr
           justifyContent="center"
           paddingLeft="space40"
           paddingRight="space40"
+          paddingBottom="space30"
           width="100%"
         >
           {validChildren.map((child, index) => {

diff --git a/packages/paste-core/components/pagination/stories/index.stories.tsx b/packages/paste-core/components/pagination/stories/index.stories.tsx
@@ -284,7 +284,7 @@ export const ArrowAsAnchorLabels = (): React.ReactNode => {
   return <ArrowAsAnchorLabelsExample />;
 };
 
-ArrowAsAnchorLabels.storyName = 'Arrows as anchors with visbile labels';
+ArrowAsAnchorLabels.storyName = 'Arrows as anchors with visible labels';
 
 export const ArrowsPageLabel = (): React.ReactNode => {
   return <ArrowsPageLabelExample />;