brahma-ui - npm Package Compare versions

Comparing version 1.0.22 to 1.0.23

lib/components/Tabs/styles.d.ts

@@ -6,2 +6,4 @@ import { Typography } from 'components/Typography';
     active: boolean;
+    fullWidth: boolean;
+    tabsLength: number;
 };
@@ -11,2 +13,4 @@ declare type TitlesWrapperProps = {
     color: TColors;
+    fullWidth: boolean;
+    tabsLength: number;
 };
@@ -13,0 +17,0 @@ export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

lib/components/Tabs/Tabs.d.ts

@@ -10,4 +10,5 @@ import React from 'react';
     color?: TColors;
+    fullWidth?: boolean;
 };
-export default function Tabs({ tabs, color }: TabsProps): JSX.Element;
+export default function Tabs({ tabs, color, fullWidth }: TabsProps): JSX.Element;
 export {};

lib/index.d.ts

@@ -100,4 +100,5 @@ /// <reference types="react" />
     color?: TColors$1;
+    fullWidth?: boolean;
 };
-declare function Tabs({ tabs, color }: TabsProps): JSX.Element;
+declare function Tabs({ tabs, color, fullWidth }: TabsProps): JSX.Element;
 
@@ -104,0 +105,0 @@ declare type Tab = {

package.json

 {
   "name": "brahma-ui",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "Brahma ui package contained shared components",
@@ -5,0 +5,0 @@ "scripts": {

src/components/Tabs/styles.ts

@@ -9,2 +9,4 @@ import { Typography } from 'components/Typography'
   active: boolean
+  fullWidth: boolean
+  tabsLength: number
 }
@@ -15,2 +17,4 @@
   color: TColors
+  fullWidth: boolean
+  tabsLength: number
 }
@@ -24,3 +28,3 @@
 export const TitlesWrapper = styled.div<TitlesWrapperProps>`
-  ${({ theme, color, activeTab }) => css`
+  ${({ theme, color, activeTab, fullWidth, tabsLength }) => css`
     position: relative;
@@ -35,7 +39,9 @@ display: flex;
       height: 100%;
-      width: 22rem;
+      width: ${fullWidth ? `calc(100% / ${tabsLength})` : '22rem'};
       z-index: 0;
       background: transparent;
       border-bottom: 2px solid ${theme.colors[color!]};
-      transform: translateX(calc(${activeTab} * 22rem));
+      transform: translateX(
+        calc(${activeTab} * ${fullWidth ? '100%' : '22rem'})
+      );
       transition: transform 0.5s;
@@ -46,4 +52,6 @@ }
       &::before {
-        width: 10rem;
-        transform: translateX(calc(${activeTab} * 10rem));
+        width: ${fullWidth ? `calc(100% / ${tabsLength})` : '10rem'};
+        transform: translateX(
+        calc(${activeTab} * ${fullWidth ? '100%' : '10rem'})
+      );
       }
@@ -55,6 +63,6 @@ `}
 export const Title = styled.div<TitleStyleProps>`
-  ${({ theme, active }) => css`
+  ${({ theme, active, fullWidth, tabsLength }) => css`
     cursor: pointer;
     display: flex;
-    width: 22rem;
+    width: ${fullWidth ? `calc(100% / ${tabsLength})` : '22rem'};
     justify-content: center;
@@ -67,3 +75,3 @@ align-items: center;
     ${media.lessThan('medium')`
-      width: 10rem;
+      width: ${fullWidth ? `calc(100% / ${tabsLength})` : '10rem'};
     `}
@@ -70,0 +78,0 @@ `}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

833440

increased by0.4%

Lines of code

5621

increased by1.37%

No dependency changes