Skip to content

Commit 72859b5

Browse files
author
Hector Arce De Las Heras
committed
Implemented responsive design for tabs and actionBottomSheet
This commit resolves a design issue by rendering tabs for Desktop views and a button with actionBottomSheet for mobile and tablet views. This ensures a seamless user experience across different device types by providing an interface that is tailored to the screen size and capabilities of the device.
1 parent 6053c05 commit 72859b5

File tree

4 files changed

+52
-91
lines changed

4 files changed

+52
-91
lines changed

‎src/components/functionalitiesModule/functionalitiesModuleStandAlone.tsx

Lines changed: 46 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -85,48 +85,53 @@ const FunctionalitiesModuleStandAloneComponent = (
8585

8686
return (
8787
<div ref={ref}>
88-
<TabsContainerStyled
89-
ref={ref}
90-
aria-label={props.tabsContainerAriaLabel}
91-
data-testid={`${props.dataTestId}Tabs`}
92-
styles={props.styles}
93-
>
94-
<Tabs
95-
allowFocusTabPanel={false}
96-
content={content}
97-
tabs={props.sections?.map(({ tab }) => tab)}
98-
variant={props.styles.tabsVariant}
99-
{...props.tabsConfig}
100-
/>
101-
</TabsContainerStyled>
102-
{props.trigger?.content && (
103-
<ButtonContainerStyled styles={props.styles}>
104-
<Button dataTestId={`${props.dataTestId}Button`} {...props.trigger}>
105-
{props.trigger?.content}
106-
</Button>
107-
</ButtonContainerStyled>
88+
{props.device === DeviceBreakpointsType.DESKTOP ? (
89+
<TabsContainerStyled
90+
ref={ref}
91+
aria-label={props.tabsContainerAriaLabel}
92+
data-testid={`${props.dataTestId}Tabs`}
93+
styles={props.styles}
94+
>
95+
<Tabs
96+
allowFocusTabPanel={false}
97+
content={content}
98+
tabs={props.sections?.map(({ tab }) => tab)}
99+
variant={props.styles.tabsVariant}
100+
{...props.tabsConfig}
101+
/>
102+
</TabsContainerStyled>
103+
) : (
104+
<>
105+
{props.trigger?.content && (
106+
<ButtonContainerStyled styles={props.styles}>
107+
<Button dataTestId={`${props.dataTestId}Button`} {...props.trigger}>
108+
{props.trigger?.content}
109+
</Button>
110+
</ButtonContainerStyled>
111+
)}
112+
<ActionBottomSheetContainerStyled styles={props.styles}>
113+
{props.styles.actionBottomSheet?.variant && (
114+
<ActionBottomSheet
115+
open={props.open ?? false}
116+
popover={{
117+
preventScrollOnCloseFocus: true,
118+
blockBack: true,
119+
...actionBottomSheetPopover,
120+
}}
121+
title={{
122+
align: props.styles.actionBottomSheet.alignTitle ?? POSITIONS.CENTER,
123+
component: TextComponentType.H5,
124+
...actionBottomSheetTitle,
125+
}}
126+
variant={props.styles.actionBottomSheet.variant}
127+
{...actionBottomSheet}
128+
>
129+
{content}
130+
</ActionBottomSheet>
131+
)}
132+
</ActionBottomSheetContainerStyled>
133+
</>
108134
)}
109-
<ActionBottomSheetContainerStyled styles={props.styles}>
110-
{props.styles.actionBottomSheet?.variant && (
111-
<ActionBottomSheet
112-
open={props.open ?? false}
113-
popover={{
114-
preventScrollOnCloseFocus: true,
115-
blockBack: true,
116-
...actionBottomSheetPopover,
117-
}}
118-
title={{
119-
align: props.styles.actionBottomSheet.alignTitle ?? POSITIONS.CENTER,
120-
component: TextComponentType.H5,
121-
...actionBottomSheetTitle,
122-
}}
123-
variant={props.styles.actionBottomSheet.variant}
124-
{...actionBottomSheet}
125-
>
126-
{content}
127-
</ActionBottomSheet>
128-
)}
129-
</ActionBottomSheetContainerStyled>
130135
</div>
131136
);
132137
};

‎src/components/option/option.styled.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styled from 'styled-components';
22

3-
import { getStyles } from '@/utils/getStyles/getStyles';
3+
import { getStyles, getTypographyStyles } from '@/utils/getStyles/getStyles';
44

55
import { OptionPropsStateStylesType, OptionPropsStylesType } from './types';
66

@@ -13,6 +13,7 @@ export const OptionStyled = styled.div.withConfig({
1313
$stateStyles?: OptionPropsStateStylesType;
1414
}>`
1515
${props => getStyles(props.$stateStyles?.container)}
16+
${props => getTypographyStyles(props.$stateStyles?.container)}
1617
&:before {
1718
content: '';
1819
${props => getStyles(props.$stateStyles?.containerBefore)}

‎src/designSystem/kubit/components/functionalitiesModule/styles.ts

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,12 @@ export const FUNCTIONALITIES_MODULE_STYLES: FunctionalitiesModuleStylesType<Func
1616
tabsContainer: {
1717
display: 'block',
1818
border_radius: RADIUS.radius_25,
19-
[DeviceBreakpointsType.TABLET]: {
20-
display: 'none',
21-
},
22-
[DeviceBreakpointsType.MOBILE]: {
23-
display: 'none',
24-
},
2519
},
2620
buttonContainer: {
2721
display: 'inline-block',
28-
[DeviceBreakpointsType.DESKTOP]: {
29-
display: 'none',
30-
},
3122
},
3223
actionBottomSheetContainer: {
33-
display: 'none',
34-
[DeviceBreakpointsType.TABLET]: {
35-
display: 'block',
36-
},
37-
[DeviceBreakpointsType.MOBILE]: {
38-
display: 'block',
39-
},
24+
display: 'block',
4025
},
4126
contentContainer: {
4227
[DeviceBreakpointsType.DESKTOP]: {
@@ -65,27 +50,12 @@ export const FUNCTIONALITIES_MODULE_STYLES: FunctionalitiesModuleStylesType<Func
6550
tabsContainer: {
6651
display: 'block',
6752
border_radius: RADIUS.radius_25,
68-
[DeviceBreakpointsType.TABLET]: {
69-
display: 'none',
70-
},
71-
[DeviceBreakpointsType.MOBILE]: {
72-
display: 'none',
73-
},
7453
},
7554
buttonContainer: {
7655
display: 'inline-block',
77-
[DeviceBreakpointsType.DESKTOP]: {
78-
display: 'none',
79-
},
8056
},
8157
actionBottomSheetContainer: {
82-
display: 'none',
83-
[DeviceBreakpointsType.TABLET]: {
84-
display: 'block',
85-
},
86-
[DeviceBreakpointsType.MOBILE]: {
87-
display: 'block',
88-
},
58+
display: 'block',
8959
},
9060
contentContainer: {
9161
[DeviceBreakpointsType.DESKTOP]: {

‎src/designSystem/kubitWireframe/commons/components/functionalitiesModule/styles.ts

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FunctionalitiesModuleStylesType } from '@/components/functionalitiesModule/types';
2-
import { DeviceBreakpointsType, POSITIONS } from '@/types';
2+
import { POSITIONS } from '@/types';
33

44
import { RADIUS } from '../../foundations';
55
import {
@@ -18,27 +18,12 @@ export const getFunctionalitiesModuleStyles = (COLORS: {
1818
tabsContainer: {
1919
display: 'block',
2020
border_radius: RADIUS.radius_25,
21-
[DeviceBreakpointsType.TABLET]: {
22-
display: 'none',
23-
},
24-
[DeviceBreakpointsType.MOBILE]: {
25-
display: 'none',
26-
},
2721
},
2822
buttonContainer: {
2923
display: 'inline-block',
30-
[DeviceBreakpointsType.DESKTOP]: {
31-
display: 'none',
32-
},
3324
},
3425
actionBottomSheetContainer: {
35-
display: 'none',
36-
[DeviceBreakpointsType.TABLET]: {
37-
display: 'block',
38-
},
39-
[DeviceBreakpointsType.MOBILE]: {
40-
display: 'block',
41-
},
26+
display: 'block',
4227
},
4328
listOptions: {
4429
variant: ListOptionsVariantType.FUNCTIONALITIES_MODULE,

0 commit comments

Comments
 (0)