Skip to content

Commit 168bdd4

Browse files
author
Kubit
committed
Improve designs for components
1 parent 2e27db3 commit 168bdd4

File tree

7 files changed

+44
-40
lines changed

7 files changed

+44
-40
lines changed

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

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { COLORS } from '../../foundations/colors';
1111
import { SIZES } from '../../foundations/sizes';
1212
import { SPACINGS } from '../../foundations/spacings';
1313
import { FONT_WEIGHT, TEXT_ALIGN } from '../../foundations/typography';
14-
import { Z_INDEX } from '../../foundations/zIndex';
1514
import { TextVariantType } from '../text/variants';
1615
import { FooterVariants } from '../variants';
1716
import { DrawerVariantType } from './variants';
@@ -42,8 +41,6 @@ const containerCommonProps: {
4241
},
4342
};
4443
const commonIconContainerProps: CommonStyleType = {
45-
position: 'sticky',
46-
z_index: Z_INDEX.STICKY,
4744
background_color: COLORS.NEUTRAL.color_neutral_bg_250,
4845
};
4946
const commonTitleProps: TypographyTypes = {
@@ -59,8 +56,6 @@ const commonIconProps: IconTypes = {
5956
const commonFooterProps: CommonStyleType & {
6057
variant?: string;
6158
} = {
62-
position: 'sticky',
63-
z_index: Z_INDEX.STICKY,
6459
border_top: `${BORDERS.border_50} solid ${COLORS.NEUTRAL.color_neutral_border_200}`,
6560
variant: FooterVariants.DEFAULT,
6661
};
@@ -102,8 +97,6 @@ export const DRAWER_STYLES: DrawerStylesType<DrawerVariantType> = {
10297
titleContainer: {
10398
margin_bottom: SPACINGS.spacing_400,
10499
text_align: TEXT_ALIGN.left,
105-
position: 'sticky',
106-
z_index: Z_INDEX.STICKY,
107100
background_color: COLORS.NEUTRAL.color_neutral_bg_250,
108101
},
109102
title: {
@@ -152,8 +145,6 @@ export const DRAWER_STYLES: DrawerStylesType<DrawerVariantType> = {
152145
titleContainer: {
153146
margin_bottom: SPACINGS.spacing_400,
154147
text_align: TEXT_ALIGN.center,
155-
position: 'sticky',
156-
z_index: Z_INDEX.STICKY,
157148
background_color: COLORS.NEUTRAL.color_neutral_bg_250,
158149
},
159150
title: {
@@ -202,8 +193,6 @@ export const DRAWER_STYLES: DrawerStylesType<DrawerVariantType> = {
202193
titleContainer: {
203194
margin_bottom: SPACINGS.spacing_400,
204195
text_align: TEXT_ALIGN.center,
205-
position: 'sticky',
206-
z_index: Z_INDEX.STICKY,
207196
background_color: COLORS.NEUTRAL.color_neutral_bg_250,
208197
},
209198
title: {
@@ -265,8 +254,6 @@ export const DRAWER_STYLES: DrawerStylesType<DrawerVariantType> = {
265254
titleContainer: {
266255
margin_bottom: SPACINGS.spacing_400,
267256
text_align: TEXT_ALIGN.left,
268-
position: 'sticky',
269-
z_index: Z_INDEX.STICKY,
270257
background_color: COLORS.NEUTRAL.color_neutral_bg_250,
271258
},
272259
title: {
@@ -318,8 +305,6 @@ export const DRAWER_STYLES: DrawerStylesType<DrawerVariantType> = {
318305
titleContainer: {
319306
margin_bottom: SPACINGS.spacing_400,
320307
text_align: TEXT_ALIGN.center,
321-
position: 'sticky',
322-
z_index: Z_INDEX.STICKY,
323308
background_color: COLORS.NEUTRAL.color_neutral_bg_250,
324309
},
325310
title: {
@@ -360,8 +345,6 @@ export const DRAWER_STYLES: DrawerStylesType<DrawerVariantType> = {
360345
titleContainer: {
361346
margin_bottom: SPACINGS.spacing_400,
362347
text_align: TEXT_ALIGN.center,
363-
position: 'sticky',
364-
z_index: Z_INDEX.STICKY,
365348
background_color: COLORS.NEUTRAL.color_neutral_bg_250,
366349
},
367350
title: {

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

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,31 +26,45 @@ const commonTokens = {
2626
width: SPACINGS.spacing_100_percent,
2727
display: 'flex',
2828
flex_direction: 'column',
29-
justify_content: 'space-between',
30-
align_items: 'center',
3129
gap: SPACINGS.spacing_150,
3230
},
31+
headerContentContainer: {
32+
display: 'flex',
33+
flex_direction: 'row-reverse',
34+
align_items: 'center',
35+
},
36+
dragIconContainer: {
37+
display: 'flex',
38+
align_items: 'center',
39+
justify_content: 'center',
40+
},
3341
title: {
3442
font_weight: FONT_WEIGHT.font_weight_600,
3543
color: COLORS.NEUTRAL.color_neutral_font_50,
3644
text_align: TEXT_ALIGN.center,
3745
font_variant: TextVariantType.HEADING_H4_EXPANDED,
3846
},
39-
content: {
40-
margin_top: SPACINGS.spacing_0,
41-
width: SPACINGS.spacing_100_percent,
42-
flex: 'auto',
43-
overflow_y: 'auto',
47+
titleContainer: {
48+
// styles for centering the title in the header
49+
position: 'absolute',
50+
left: '50%',
51+
transform: 'translateX(-50%)',
52+
},
53+
closeButtonIcon: {
54+
color: COLORS.NEUTRAL.color_neutral_icon_50,
55+
width: SIZES.size_250,
56+
height: SIZES.size_250,
4457
},
4558
closeButtonContainer: {
4659
display: 'flex',
4760
justify_content: 'end',
4861
width: '100%',
4962
},
50-
closeButtonIcon: {
51-
color: COLORS.NEUTRAL.color_neutral_icon_50,
52-
width: SIZES.size_250,
53-
height: SIZES.size_250,
63+
content: {
64+
margin_top: SPACINGS.spacing_0,
65+
width: SPACINGS.spacing_100_percent,
66+
flex: 'auto',
67+
overflow_y: 'auto',
5468
},
5569
};
5670

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@ export * from './tableCaption/styles';
9090
export * from './tableDivider/styles';
9191
export * from './tableV2/styles';
9292
export * from './dataTable/styles';
93-
9493
export * from './video/styles';
9594
export * from './virtualKeyboard/styles';
9695
export * from './progressBar/styles';

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,20 +28,30 @@ const commonArrowIconContainer = {
2828
},
2929
};
3030

31+
const commonIconProps = {
32+
width: SIZES.size_250,
33+
height: SIZES.size_250,
34+
color: COLORS.NEUTRAL.color_neutral_icon_250,
35+
};
36+
3137
export const PRIMARY_TABS_STYLES: TabsStylesType<TabsVariantType> = {
3238
[TabsVariantType.DEFAULT]: {
3339
arrowLeftIconContainer: {
3440
...commonArrowIconContainer,
3541
},
3642
leftIcon: {
37-
width: SIZES.size_250,
38-
height: SIZES.size_250,
39-
color: COLORS.NEUTRAL.color_neutral_icon_250,
43+
...commonIconProps,
44+
disabled: {
45+
...commonIconProps,
46+
color: COLORS.DISABLED.color_accentDisabled_icon_100,
47+
},
4048
},
4149
rightIcon: {
42-
width: SIZES.size_250,
43-
height: SIZES.size_250,
44-
color: COLORS.NEUTRAL.color_neutral_icon_250,
50+
...commonIconProps,
51+
disabled: {
52+
...commonIconProps,
53+
color: COLORS.DISABLED.color_accentDisabled_icon_100,
54+
},
4555
},
4656
arrowRightIconContainer: {
4757
...commonArrowIconContainer,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export const TOGGLE_WITH_LABEL_STYLES: ToggleWithLabelStylesType<ToggleWithLabel
1919
},
2020
legendContainer: {
2121
margin_bottom: SPACINGS.spacing_200,
22+
cursor: 'pointer',
2223
},
2324
rowLegendContainer: {
2425
display: 'contents',

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { BORDERS, RADIUS } from '@/designSystem/kubitWireframe/commons/foundatio
55
import { SIZES } from '@/designSystem/kubitWireframe/commons/foundations/sizes';
66
import { SPACINGS } from '@/designSystem/kubitWireframe/commons/foundations/spacings';
77
import { FONT_WEIGHT } from '@/designSystem/kubitWireframe/commons/foundations/typography';
8-
import { Z_INDEX } from '@/designSystem/kubitWireframe/commons/foundations/zIndex';
98
import { DeviceBreakpointsType } from '@/types/breakpoints/breakpoints';
109

1110
import { shadowAfterStyles, transformShadow } from '../../../utils/wireframe';
@@ -24,8 +23,6 @@ const drawerContainerTokens = (COLORS): object => {
2423
};
2524
const iconContainerTokens = (COLORS): object => {
2625
return {
27-
position: 'sticky',
28-
z_index: Z_INDEX.STICKY,
2926
background_color: COLORS.NEUTRAL.color_neutral_bg_250,
3027
padding_top: SPACINGS.spacing_400,
3128
padding_left: SPACINGS.spacing_400,
@@ -73,8 +70,6 @@ const contentTokens = {
7370
const footerTokens = (COLORS): object => {
7471
return {
7572
background_color: COLORS.NEUTRAL.color_neutral_bg_250,
76-
position: 'sticky',
77-
bottom: SPACINGS.spacing_0,
7873
border_top: `${BORDERS.border_50} solid ${COLORS.NEUTRAL.color_neutral_border_50}`,
7974
variant: FooterVariants.EMPTY,
8075
padding: `${SPACINGS.spacing_400} ${SPACINGS.spacing_450}`,

‎src/designSystem/variants/variants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ export type Variants = {
1010
BackToTopVariantsType?: object;
1111
BadgeVariant?: object;
1212
BadgeSize?: object;
13+
BadgeVariantV2?: object;
14+
BadgeSizeV2?: object;
1315
BannerStateVariantType?: object;
1416
BannerAlignType?: object;
1517
BreadcrumbsVariantType?: object;

0 commit comments

Comments
 (0)