Merge pull request #777 from gympass/DS-809

[DS-809] Add v3theme to Dropdown component
gympass · Mar 22, 2024 · 0b3c3eb · 0b3c3eb
2 parents 6783f61 + ac73e57
commit 0b3c3eb
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 56 deletions.
diff --git a/packages/yoga/src/Dropdown/Dropdown.theme.js b/packages/yoga/src/Dropdown/Dropdown.theme.js
@@ -175,7 +175,7 @@ const Dropdown = ({
       font: {
         color: colors.text.primary,
         weight: fontWeights.medium,
-        size: fontSizes.medium,
+        size: fontSizes.small,
       },
     },
   },

diff --git a/packages/yoga/src/Dropdown/native/Dropdown.jsx b/packages/yoga/src/Dropdown/native/Dropdown.jsx
@@ -62,7 +62,7 @@ const Selector = styled.View`
   `}
 `;
 
-const Label = styled(Text)`
+const Label = styled(Text.Body2)`
   ${({
     disabled,
     selected,

diff --git a/packages/yoga/src/Dropdown/native/Options.android.jsx b/packages/yoga/src/Dropdown/native/Options.android.jsx
@@ -27,7 +27,7 @@ const Option = styled(List.Item)`
   `}
 `;
 
-const OptionText = styled.Text`
+const OptionText = styled(Text.Body2)`
   ${({
     isSelected,
     theme: {
@@ -59,11 +59,7 @@ const Options = ({ options, selectedOption, onSelect }) => (
         >
           <OptionText
             isSelected={selectedOption && selectedOption.value === item.value}
-            as={
-              selectedOption && selectedOption.value === item.value
-                ? Text.Bold
-                : Text.Regular
-            }
+            bold={selectedOption && selectedOption.value === item.value}
           >
             {item.label}
           </OptionText>

diff --git a/packages/yoga/src/Dropdown/native/__snapshots__/Dropdown.test.jsx.snap b/packages/yoga/src/Dropdown/native/__snapshots__/Dropdown.test.jsx.snap
@@ -47,22 +47,15 @@ exports[`<Dropdown /> Snapshots should match snapshot 1`] = `
     }
   >
     <Text
-      bold={false}
       disabled={false}
-      fontSize="medium"
-      inverted={false}
-      light={false}
       style={
         [
           {
-            "color": "#231B22",
+            "color": "#6B6B78",
             "fontFamily": "Rubik",
-            "fontSize": 16,
+            "fontSize": 14,
             "fontWeight": "400",
-            "lineHeight": 24,
-          },
-          {
-            "color": "#6B6B78",
+            "lineHeight": 20,
           },
         ]
       }
@@ -191,22 +184,15 @@ exports[`<Dropdown /> Snapshots should match snapshot when disabled 1`] = `
     }
   >
     <Text
-      bold={false}
       disabled={true}
-      fontSize="medium"
-      inverted={false}
-      light={false}
       style={
         [
           {
-            "color": "#231B22",
+            "color": "#D7D7E0",
             "fontFamily": "Rubik",
-            "fontSize": 16,
+            "fontSize": 14,
             "fontWeight": "400",
-            "lineHeight": 24,
-          },
-          {
-            "color": "#D7D7E0",
+            "lineHeight": 20,
           },
         ]
       }
@@ -335,22 +321,15 @@ exports[`<Dropdown /> Snapshots should match snapshot when full 1`] = `
     }
   >
     <Text
-      bold={false}
       disabled={false}
-      fontSize="medium"
-      inverted={false}
-      light={false}
       style={
         [
           {
-            "color": "#231B22",
+            "color": "#6B6B78",
             "fontFamily": "Rubik",
-            "fontSize": 16,
+            "fontSize": 14,
             "fontWeight": "400",
-            "lineHeight": 24,
-          },
-          {
-            "color": "#6B6B78",
+            "lineHeight": 20,
           },
         ]
       }
@@ -486,11 +465,7 @@ exports[`<Dropdown /> Snapshots should match snapshot when has a selected value
     }
   >
     <Text
-      bold={false}
       disabled={true}
-      fontSize="medium"
-      inverted={false}
-      light={false}
       selected={
         {
           "label": "Swimming",
@@ -503,12 +478,9 @@ exports[`<Dropdown /> Snapshots should match snapshot when has a selected value
           {
             "color": "#231B22",
             "fontFamily": "Rubik",
-            "fontSize": 16,
+            "fontSize": 14,
             "fontWeight": "400",
-            "lineHeight": 24,
-          },
-          {
-            "color": "#231B22",
+            "lineHeight": 20,
           },
         ]
       }
@@ -645,11 +617,7 @@ exports[`<Dropdown /> Snapshots should match snapshot with error 1`] = `
     }
   >
     <Text
-      bold={false}
       disabled={false}
-      fontSize="medium"
-      inverted={false}
-      light={false}
       selected={
         {
           "label": "Swimming",
@@ -662,12 +630,9 @@ exports[`<Dropdown /> Snapshots should match snapshot with error 1`] = `
           {
             "color": "#231B22",
             "fontFamily": "Rubik",
-            "fontSize": 16,
+            "fontSize": 14,
             "fontWeight": "400",
-            "lineHeight": 24,
-          },
-          {
-            "color": "#231B22",
+            "lineHeight": 20,
           },
         ]
       }

diff --git a/packages/yoga/src/Theme/theme/v3theme.ts b/packages/yoga/src/Theme/theme/v3theme.ts
@@ -237,5 +237,38 @@ export const v3theme = createTheme(tokens => ({
         },
       },
     },
+    dropdown: {
+      input: {
+        font: {
+          size: tokens.fontSizes.small,
+          lineHeight: tokens.lineHeights.small,
+        },
+      },
+      option: {
+        font: {
+          size: tokens.fontSizes.small,
+          lineHeight: tokens.lineHeights.small,
+          weight: tokens.fontWeights.medium,
+        }
+      },
+      backdrop: {
+        content: {
+          title: {
+            font: {
+              weight: tokens.fontWeights.bold,
+              size: tokens.fontSizes.medium,
+             },
+          }
+        }
+      },
+      selected: {
+        option: {
+          font: {
+            weight: tokens.fontWeights.bold,
+            size: tokens.fontSizes.small,
+          },
+        },
+      },
+    }
   },
 }));