Merge pull request #29 from BouyguesTelecom/remove/Form

💅 Fix some subtility ( Range web && Tabs Native )
BouyguesTelecom · Apr 29, 2024 · a0806fa · a0806fa
2 parents 23460aa + eac679d
commit a0806fa
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 294 deletions.
diff --git a/examples/react-template/screens/Form.tsx b/examples/react-template/screens/Form.tsx
diff --git a/examples/react-template/screens/Tab.tsx b/examples/react-template/screens/Tab.tsx
@@ -42,16 +42,42 @@ export const TabScreen = (): JSX.Element => {
         </TabsItem>
       </Tabs>
 
-      <Tabs activeIndex={activeIndexEventTab} inverted>
+      <Tabs activeIndex={activeIndexEventTab} centered>
         <TabsItem
           disabled
+          iconName={IconName.BELL}
+          active={activeIndexEventTab === 0}
+          onClick={() => setActivateIndexEventTab(0)}
+        >
+          Centered
+        </TabsItem>
+        <TabsItem
+          iconName={IconName.BELL}
+          active={activeIndexEventTab === 1}
+          onClick={() => setActivateIndexEventTab(1)}
+        >
+          Two
+        </TabsItem>
+        <TabsItem
+          iconName={IconName.BELL}
+          active={activeIndexEventTab === 2}
+          onClick={() => setActivateIndexEventTab(2)}
+        >
+          Three
+        </TabsItem>
+      </Tabs>
+
+      <Tabs activeIndex={activeIndexEventTab} inverted>
+        <TabsItem
+
           iconName={IconName.BELL}
           active={activeIndexEventTab === 0}
           onClick={() => setActivateIndexEventTab(0)}
         >
           One
         </TabsItem>
         <TabsItem
+          disabled
           iconName={IconName.EYE_SLASH}
           active={activeIndexEventTab === 1}
           onClick={() => setActivateIndexEventTab(1)}

diff --git a/examples/react-template/screens/index.ts b/examples/react-template/screens/index.ts
@@ -15,7 +15,6 @@ export * from "./CountDown";
 export * from "./Divider";
 export * from "./Dropdown";
 export * from "./Fab";
-export * from "./Form";
 export * from "./Hero";
 export * from "./Image";
 export * from "./Icon";

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/assets/package.json b/packages/assets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/assets",
-  "version": "0.0.1-beta.12",
+  "version": "0.0.1-beta.13",
   "description": "Trilogy assets include all Open Source Fonts & Icons",
   "author": "Bouygues Telecom",
   "type": "module",

diff --git a/packages/react/components/range/Range.tsx b/packages/react/components/range/Range.tsx
@@ -53,7 +53,7 @@ const Range = ({
     if (refTrack.current) {
       const track = refTrack.current as HTMLElement
       track.style.background = `linear-gradient(to right, ${getColorStyle(
-        TrilogyColor.NEUTRAL_DARK,
+        TrilogyColor.NEUTRAL_LIGHT,
         1
       )} ${(cursorMin / max) * 100}% , ${getColorStyle(TrilogyColor.MAIN, 1)} ${
         (cursorMin / max) * 100

diff --git a/packages/react/components/tabs/Tabs.native.tsx b/packages/react/components/tabs/Tabs.native.tsx
@@ -13,8 +13,9 @@ import { ComponentName } from '../enumsComponentsName'
  * @param activeIndex {number} default active tab index
  * @param disabled {boolean} Disabled tabs
  * @param inverted {boolean} dark mode
+ * @param centered {boolean} Is centered
  */
-const Tabs = ({ children, onClick, activeIndex, disabled, inverted, ...others }: TabsProps): JSX.Element => {
+const Tabs = ({ children, onClick, activeIndex, disabled, centered, inverted, ...others }: TabsProps): JSX.Element => {
   const [activateIndex, setActivateIndex] = useState(activeIndex)
   const [isIcons, setIsIcons] = React.useState(false)
 
@@ -41,13 +42,13 @@ const Tabs = ({ children, onClick, activeIndex, disabled, inverted, ...others }:
     tabs: {
       height: isIcons ? 64 : 48,
       flexDirection: 'row',
-      backgroundColor: inverted ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.WHITE),
-      overflow: 'visible',
+      backgroundColor: inverted ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.WHITE)
     },
   })
 
   return (
-    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.tabs} {...others}>
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.tabs} {...others}
+    contentContainerStyle={centered && { justifyContent: "center", flexGrow: 1 }}>
       {children &&
         Array.isArray(children) &&
         // eslint-disable-next-line @typescript-eslint/no-explicit-any