Merge pull request #773 from gympass/DS-814

[DS-814] Change Slider texts
gympass · Mar 21, 2024 · c7e0a3b · c7e0a3b
2 parents d5b7c3d + 8150d69
commit c7e0a3b
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 30 deletions.
diff --git a/packages/labnative/core/CenteredView.jsx b/packages/labnative/core/CenteredView.jsx
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import { View, Text, Switch } from 'react-native';
-import { ThemeProvider } from '@gympass/yoga';
+import { ThemeProvider, v3theme } from '@gympass/yoga';
 import { ThemeConsumer } from 'styled-components';
 
 const CenteredView = props => {
   const [darkMode, setDarkMode] = useState('#FFF');
+  const [useV3Theme, setUseV3Theme] = useState(false);
 
   return (
-    <ThemeProvider>
+    <ThemeProvider theme={useV3Theme ? v3theme : null}>
       <>
         <View
           style={{
@@ -21,29 +22,55 @@ const CenteredView = props => {
         >
           <ThemeConsumer>
             {theme => (
-              <View
-                style={{
-                  alignItems: 'center',
-                  flexDirection: 'row',
-                }}
-              >
-                <Text
+              <>
+                <View
                   style={{
-                    color: darkMode === '#FFF' ? '#41414A' : '#FFF',
-                    marginRight: 8,
+                    alignItems: 'center',
+                    flexDirection: 'row',
                   }}
                 >
-                  Dark Mode
-                </Text>
+                  <Text
+                    style={{
+                      color: darkMode === '#FFF' ? '#41414A' : '#FFF',
+                      marginRight: 8,
+                    }}
+                  >
+                    Dark Mode
+                  </Text>
 
-                <Switch
-                  onChange={() => {
-                    setDarkMode(darkMode === '#FFF' ? '#41414A' : '#FFF');
+                  <Switch
+                    onChange={() => {
+                      setDarkMode(darkMode === '#FFF' ? '#41414A' : '#FFF');
+                    }}
+                    value={darkMode === '#41414A'}
+                    trackColor={{ true: theme.yoga.colors.primary }}
+                  />
+                </View>
+
+                <View
+                  style={{
+                    alignItems: 'center',
+                    flexDirection: 'row',
                   }}
-                  value={darkMode === '#41414A'}
-                  trackColor={{ true: theme.yoga.colors.primary }}
-                />
-              </View>
+                >
+                  <Text
+                    style={{
+                      color: darkMode === '#FFF' ? '#41414A' : '#FFF',
+                      marginRight: 8,
+                    }}
+                  >
+                    v3theme
+                  </Text>
+
+                  <Switch
+                    onChange={() => {
+                      setUseV3Theme(c => !c);
+                    }}
+                    value={useV3Theme}
+                    trackColor={{ true: theme.yoga.colors.primary }}
+                  />
+                </View>
+              </>
             )}
           </ThemeConsumer>
         </View>

diff --git a/packages/yoga/src/Slider/native/Tooltip.jsx b/packages/yoga/src/Slider/native/Tooltip.jsx
@@ -38,7 +38,7 @@ const Tip = styled.View(
   `,
 );
 
-const Title = styled(Text.Small)(
+const Title = styled(Text.Body2)(
   ({
     theme: {
       yoga: {
@@ -52,7 +52,7 @@ const Title = styled(Text.Small)(
   `,
 );
 
-const Description = styled(Text.Small)(
+const Description = styled(Text.Body2)(
   ({
     theme: {
       yoga: {
@@ -104,7 +104,9 @@ const RibbonWrapper = styled.View(
   `,
 );
 
-const RibbonText = styled(Text.Bold)(
+const RibbonText = styled(Text.Body2).attrs(() => ({
+  bold: true,
+}))(
   ({
     theme: {
       yoga: {
@@ -115,6 +117,7 @@ const RibbonText = styled(Text.Bold)(
     color: ${slider.tooltip.ribbon.font.color};
 
     font-size: ${slider.tooltip.ribbon.font.size}px;
+    line-height: undefined;
 
     text-align: center;
   `,

diff --git a/packages/yoga/src/Slider/native/__snapshots__/Slider.test.jsx.snap b/packages/yoga/src/Slider/native/__snapshots__/Slider.test.jsx.snap
@@ -1917,13 +1917,15 @@ exports[`<Slider /> Tooltip should render tooltip 1`] = `
                 }
               >
                 <Text
+                  bold={true}
                   style={
                     [
                       {
                         "color": "#FFFFFF",
                         "fontFamily": "Rubik",
                         "fontSize": 12,
-                        "fontWeight": "700",
+                        "fontWeight": "500",
+                        "lineHeight": undefined,
                         "textAlign": "center",
                       },
                     ]
@@ -2269,13 +2271,15 @@ exports[`<Slider /> Tooltip should render tooltip on a specific step 1`] = `
                 }
               >
                 <Text
+                  bold={true}
                   style={
                     [
                       {
                         "color": "#FFFFFF",
                         "fontFamily": "Rubik",
                         "fontSize": 12,
-                        "fontWeight": "700",
+                        "fontWeight": "500",
+                        "lineHeight": undefined,
                         "textAlign": "center",
                       },
                     ]

diff --git a/packages/yoga/src/Slider/web/Tooltip.jsx b/packages/yoga/src/Slider/web/Tooltip.jsx
@@ -84,9 +84,12 @@ const Arrow = styled.div`
   `}
 `;
 
-const Ribbon = styled(Text.Bold)`
+const Ribbon = styled(Text.Body2).attrs(() => ({
+  bold: true,
+}))`
   position: relative;
   text-align: center;
+  line-height: normal;
   display: block;
 
   ${({
@@ -106,7 +109,7 @@ const Ribbon = styled(Text.Bold)`
   `}
 `;
 
-const Title = styled(Text.Small)`
+const Title = styled(Text.Body2)`
   display: block;
   text-align: center;
   ${({
@@ -121,7 +124,7 @@ const Title = styled(Text.Small)`
   `}
 `;
 
-const Description = styled(Text.Small)`
+const Description = styled(Text.Body2)`
   display: block;
   text-align: center;
   ${({

diff --git a/packages/yoga/src/Slider/web/__snapshots__/Slider.test.jsx.snap b/packages/yoga/src/Slider/web/__snapshots__/Slider.test.jsx.snap
@@ -485,12 +485,14 @@ exports[`<Slider /> Tooltip should render tooltips 1`] = `
 .c3 {
   margin: 0;
   padding: 0;
-  font-size: 16px;
+  font-size: 14px;
+  line-height: 20px;
   color: #231B22;
   font-family: Rubik;
-  font-weight: 700;
+  font-weight: 500;
   position: relative;
   text-align: center;
+  line-height: normal;
   display: block;
   padding: 4px 8px 4px 8px;
   border-top-left-radius: 8px;