chore: button, file picker, combobox, pagination fixes (#3148)

twilio-labs · Apr 19, 2023 · f267a9f · f267a9f
1 parent 0c38618
commit f267a9f
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 7 deletions.
diff --git a/.changeset/brave-crabs-sort.md b/.changeset/brave-crabs-sort.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/pagination': patch
+'@twilio-paste/core': patch
+---
+
+[Pagination] specify label line height to fix alignment issue
diff --git a/.changeset/cold-parrots-admire.md b/.changeset/cold-parrots-admire.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/button': patch
+'@twilio-paste/core': patch
+---
+
+[Button] Fix secondary destructive toggle button hover styles
diff --git a/.changeset/mean-monkeys-dance.md b/.changeset/mean-monkeys-dance.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/file-picker': patch
+'@twilio-paste/core': patch
+---
+
+[File picker] set width to 100% to match other input components
diff --git a/packages/paste-core/components/button/src/styles.ts b/packages/paste-core/components/button/src/styles.ts
@@ -163,8 +163,8 @@ export const DestructiveSecondaryToggleStyles: BoxStyleProps = {
   },
   _pressed_hover: {
     backgroundColor: 'colorBackgroundErrorWeakest',
-    boxShadow: 'shadowBorderError',
-    color: 'colorTextError',
+    boxShadow: 'shadowBorderErrorStronger',
+    color: 'colorTextErrorStronger',
   },
   _pressed_active: {
     backgroundColor: 'colorBackgroundErrorWeakest',

diff --git a/packages/paste-core/components/file-picker/src/FilePicker.tsx b/packages/paste-core/components/file-picker/src/FilePicker.tsx
@@ -81,6 +81,9 @@ const FilePicker = React.forwardRef<HTMLInputElement, FilePickerProps>(
         <label htmlFor={id}>
           <SiblingBox
             element={element}
+            width="100%"
+            display="flex"
+            justifyContent="start"
             as="span"
             type="file"
             borderRadius="borderRadius30"

diff --git a/packages/paste-core/components/pagination/src/PaginationLabel.tsx b/packages/paste-core/components/pagination/src/PaginationLabel.tsx
@@ -15,6 +15,7 @@ const PaginationLabel = React.forwardRef<HTMLDivElement, PaginationLabelProps>(
         color="colorTextWeak"
         textAlign="center"
         fontWeight="fontWeightNormal"
+        lineHeight="lineHeight50"
       >
         {children}
       </Text>

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

diff --git a/packages/paste-website/src/component-examples/ComboboxExamples.ts b/packages/paste-website/src/component-examples/ComboboxExamples.ts
@@ -472,7 +472,7 @@ const authors = ['James Baldwin', 'Adrienne Maree Brown', 'Octavia Butler', 'Ta-
 
 const SampleEmptyState = () => (
   <Box paddingY="space40" paddingX="space50">
-    <Text as="span" fontStyle="italic">
+    <Text as="span" fontStyle="italic" color="colorTextWeak">
       No results found
     </Text>
   </Box>

diff --git a/packages/paste-website/src/component-examples/MultiselectComboboxExamples.ts b/packages/paste-website/src/component-examples/MultiselectComboboxExamples.ts
@@ -22,7 +22,7 @@ function getFilteredItems(inputValue) {
 
 const SampleEmptyState = () => (
   <Box paddingY="space40" paddingX="space50">
-    <Text as="span" fontStyle="italic">
+    <Text as="span" fontStyle="italic" color="colorTextWeak">
       No results found
     </Text>
   </Box>
@@ -456,7 +456,7 @@ function getFilteredItems(inputValue) {
 
 const SampleEmptyState = () => (
   <Box paddingY="space40" paddingX="space50">
-    <Text as="span" fontStyle="italic">
+    <Text as="span" fontStyle="italic" color="colorTextWeak">
       No results found
     </Text>
   </Box>
@@ -501,7 +501,7 @@ function getFilteredItems(inputValue) {
 
 const SampleEmptyState = () => (
   <Box paddingY="space40" paddingX="space50">
-    <Text as="span" fontStyle="italic">
+    <Text as="span" fontStyle="italic" color="colorTextWeak">
       No results found
     </Text>
   </Box>