Skip to content

Commit a3b8064

Browse files
cizil-keyvaluecizil-keyvalue
authored
feat: Add custom style for tabs
1 parent 82056c2 commit a3b8064

File tree

8 files changed

+56
-12
lines changed

8 files changed

+56
-12
lines changed

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,8 @@ type ThemeProps = {
136136
activeTabTextColor?: string,
137137
inactiveTabTextColor?: string,
138138
indicatorColor?: string,
139+
borderColor?: string;
140+
inactiveTabBackgroundColor?: string
139141
};
140142
};
141143
```
@@ -205,6 +207,11 @@ Please note that the badgeStyle, window shadow and border props are only applica
205207
activeTabTextWeight?: TextStyle['fontWeight'],
206208
inactiveTabTextWeight?: TextStyle['fontWeight'],
207209
indicatorHeight?: number,
210+
headingGap?: number;
211+
borderWidth?: number;
212+
borderRadius?: number;
213+
paddingY?: number;
214+
paddingX?: number;
208215
};
209216
}
210217
```

‎src/styles/tab.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@
1818
display: flex;
1919
align-items: center;
2020
justify-content: center;
21-
height: 100%;
22-
padding: 0 16px;
2321
cursor: pointer;
2422
transition: color 0.3s ease-in-out;
2523
}

‎src/types.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,8 @@ export type ThemeProps = {
161161
activeTabTextColor?: string;
162162
inactiveTabTextColor?: string;
163163
indicatorColor?: string;
164+
borderColor?: string;
165+
inactiveTabBackgroundColor?: string
164166
};
165167
};
166168

@@ -222,6 +224,11 @@ export type CustomStyle = {
222224
activeTabTextWeight?: TextStyle['fontWeight'];
223225
inactiveTabTextWeight?: TextStyle['fontWeight'];
224226
indicatorHeight?: number;
227+
headingGap?: number;
228+
borderWidth?: number;
229+
borderRadius?: number;
230+
paddingY?: number;
231+
paddingX?: number;
225232
};
226233
};
227234

‎src/utils/commonUtils.ts‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -344,24 +344,50 @@ export const applyTheme = (
344344
theme.customCard?.borderColor ||
345345
theme.colors?.borderColor ||
346346
DefaultTheme[mode].customCard.borderColor,
347-
padding: `0 ${customStyle.tabs?.tabPadding || DefaultStyle.tabs.tabPadding}px`
347+
padding: `0 ${customStyle.tabs?.tabPadding || DefaultStyle.tabs.tabPadding}px`,
348+
gap: customStyle.tabs?.headingGap || DefaultStyle.tabs.headingGap
348349

349350
},
350351
activeTabStyle:{
351352
backgroundColor: theme.tabs?.activeTabBackgroundColor || DefaultTheme[mode].tabs.activeTabBackgroundColor,
352353
color: theme.tabs?.activeTabTextColor || DefaultTheme[mode].tabs.activeTabTextColor,
353354
fontSize: customStyle.tabs?.activeTabTextSize || DefaultStyle.tabs.activeTabTextSize,
354355
fontWeight: customStyle.tabs?.activeTabTextWeight || DefaultStyle.tabs.activeTabTextWeight,
356+
border: `${
357+
customStyle.tabs?.borderWidth ||
358+
DefaultStyle.tabs.borderWidth
359+
}px solid`,
360+
borderColor:
361+
theme.tabs?.borderColor ||
362+
theme.colors?.borderColor ||
363+
DefaultTheme[mode].tabs?.borderColor,
364+
borderRadius: customStyle.tabs?.borderRadius ||
365+
DefaultStyle.tabs.borderRadius,
366+
padding: `${customStyle.tabs?.paddingY || DefaultStyle.tabs.paddingY}px
367+
${customStyle.tabs?.paddingX || DefaultStyle.tabs.paddingX}px`,
355368
},
356369
inactiveTabStyle:{
357-
backgroundColor: 'transparent',
370+
backgroundColor: theme.tabs?.inactiveTabBackgroundColor || DefaultTheme[mode].tabs.inactiveTabBackgroundColor,
358371
color: theme.tabs?.inactiveTabTextColor || DefaultTheme[mode].tabs.inactiveTabTextColor,
359372
fontSize: customStyle.tabs?.inactiveTabTextSize || DefaultStyle.tabs.inactiveTabTextSize,
360373
fontWeight: customStyle.tabs?.inactiveTabTextWeight || DefaultStyle.tabs.inactiveTabTextWeight,
374+
border: `${
375+
customStyle.tabs?.borderWidth ||
376+
DefaultStyle.tabs.borderWidth
377+
}px solid`,
378+
borderColor:
379+
theme.tabs?.borderColor ||
380+
theme.colors?.borderColor ||
381+
DefaultTheme[mode].tabs?.borderColor,
382+
borderRadius: customStyle.tabs?.borderRadius ||
383+
DefaultStyle.tabs.borderRadius,
384+
padding: `${customStyle.tabs?.paddingY || DefaultStyle.tabs.paddingY}px
385+
${customStyle.tabs?.paddingX || DefaultStyle.tabs.paddingX}px`,
361386
},
362387
activeTabIndicator:{
363388
backgroundColor: theme.tabs?.indicatorColor || DefaultTheme[mode].tabs.indicatorColor,
364-
height: customStyle.tabs?.indicatorHeight || DefaultStyle.tabs.indicatorHeight,
389+
height: (customStyle.tabs?.indicatorHeight === undefined || customStyle.tabs?.indicatorHeight === null) ?
390+
DefaultStyle.tabs.indicatorHeight : customStyle.tabs?.indicatorHeight,
365391
}
366392
};
367393
};

‎src/utils/defaultStyles.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,11 @@ const defaultStyles = {
5757
indicatorHeight: 3,
5858
activeTabTextSize: 14,
5959
inactiveTabTextSize: 14,
60-
60+
headingGap: 0,
61+
borderWidth: 0,
62+
borderRadius: 0,
63+
paddingX: 10,
64+
paddingY: 5
6165
}
6266
}
6367

‎src/utils/defaultTheme.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const defaultTheme = {
5757
activeTabTextColor: COLORS[ThemeMode.LIGHT].primaryColor,
5858
inactiveTabTextColor: COLORS[ThemeMode.LIGHT].textColor,
5959
indicatorColor: COLORS[ThemeMode.LIGHT].primaryColor,
60+
borderColor: COLORS[ThemeMode.LIGHT].neutralColor
6061
}
6162
},
6263
dark: {
@@ -114,6 +115,7 @@ const defaultTheme = {
114115
activeTabTextColor: COLORS[ThemeMode.DARK].primaryColor,
115116
inactiveTabTextColor: COLORS[ThemeMode.DARK].textColor,
116117
indicatorColor: COLORS[ThemeMode.DARK].primaryColor,
118+
borderColor: COLORS[ThemeMode.DARK].neutralColor
117119
}
118120
},
119121
};

‎tests/components/__snapshots__/sirenPanel.spec.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,19 +57,19 @@ exports[`matches snapshot 1`] = `
5757
>
5858
<div
5959
class="siren-sdk-tab-header-container"
60-
style="height: 50px; background-color: rgb(35, 35, 38); border-bottom: 0.5px solid; border-color: #344054; padding: 0px 5px;"
60+
style="height: 50px; background-color: rgb(35, 35, 38); border-bottom: 0.5px solid; border-color: #344054; padding: 0px 5px; gap: 0;"
6161
>
6262
<div
6363
class="siren-sdk-tab-header active"
6464
role="button"
65-
style="background-color: rgb(35, 35, 38); color: rgb(250, 152, 116); font-size: 14px; font-weight: 600;"
65+
style="background-color: rgb(35, 35, 38); color: rgb(250, 152, 116); font-size: 14px; font-weight: 600; border: 0px solid; border-color: #232326; border-radius: 0; padding: 5px 10px;"
6666
>
6767
All
6868
</div>
6969
<div
7070
class="siren-sdk-tab-header "
7171
role="button"
72-
style="background-color: transparent; color: rgb(255, 255, 255); font-size: 14px; font-weight: 600;"
72+
style="background-color: rgb(35, 35, 38); color: rgb(255, 255, 255); font-size: 14px; font-weight: 600; border: 0px solid; border-color: #232326; border-radius: 0; padding: 5px 10px;"
7373
>
7474
Unread
7575
</div>

‎tests/components/__snapshots__/tab.spec.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@ exports[`Tab Component renders correctly and matches snapshot 1`] = `
77
>
88
<div
99
class="siren-sdk-tab-header-container"
10-
style="height: 50px; background-color: rgb(35, 35, 38); border-bottom: 0.5px solid; border-color: #344054; padding: 0px 5px;"
10+
style="height: 50px; background-color: rgb(35, 35, 38); border-bottom: 0.5px solid; border-color: #344054; padding: 0px 5px; gap: 0;"
1111
>
1212
<div
1313
class="siren-sdk-tab-header active"
1414
role="button"
15-
style="background-color: rgb(35, 35, 38); color: rgb(250, 152, 116); font-size: 14px; font-weight: 600;"
15+
style="background-color: rgb(35, 35, 38); color: rgb(250, 152, 116); font-size: 14px; font-weight: 600; border: 0px solid; border-color: #232326; border-radius: 0; padding: 5px 10px;"
1616
>
1717
All
1818
</div>
1919
<div
2020
class="siren-sdk-tab-header "
2121
role="button"
22-
style="background-color: transparent; color: rgb(255, 255, 255); font-size: 14px; font-weight: 600;"
22+
style="background-color: rgb(35, 35, 38); color: rgb(255, 255, 255); font-size: 14px; font-weight: 600; border: 0px solid; border-color: #232326; border-radius: 0; padding: 5px 10px;"
2323
>
2424
Unread
2525
</div>

0 commit comments

Comments
 (0)