Skip to content

Commit 5ee6366

Browse files
lukewalczaklukewalczak
committed
refactor: rename styles (#4736)
1 parent f79addc commit 5ee6366

28 files changed

+183
-211
lines changed

‎example/src/Examples/IconButtonExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import ScreenWrapper from '../ScreenWrapper';
77

88
const ButtonExample = () => {
99
return (
10-
<ScreenWrapper contentContainerStyle={styles.v3Container}>
10+
<ScreenWrapper contentContainerStyle={styles.container}>
1111
<List.Section title="Default">
1212
<View style={styles.row}>
1313
<IconButton icon="camera" size={24} onPress={() => {}} />
@@ -175,7 +175,7 @@ const ButtonExample = () => {
175175
ButtonExample.title = 'Icon Button';
176176

177177
const styles = StyleSheet.create({
178-
v3Container: {
178+
container: {
179179
flexDirection: 'column',
180180
},
181181
row: {

‎example/src/Examples/MenuExample.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const MenuExample = ({ navigation }: Props) => {
6969
>
7070
<Menu.Item onPress={() => {}} title="Undo" />
7171
<Menu.Item onPress={() => {}} title="Redo" />
72-
<Divider style={styles.md3Divider} />
72+
<Divider style={styles.divider} />
7373
<Menu.Item onPress={() => {}} title="Cut" disabled />
7474
<Menu.Item onPress={() => {}} title="Copy" disabled />
7575
<Menu.Item onPress={() => {}} title="Paste" />
@@ -93,7 +93,7 @@ const MenuExample = ({ navigation }: Props) => {
9393
<Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
9494
<Menu.Item leadingIcon="redo" onPress={() => {}} title="Redo" />
9595

96-
<Divider style={styles.md3Divider} />
96+
<Divider style={styles.divider} />
9797

9898
<Menu.Item
9999
leadingIcon="content-cut"
@@ -126,7 +126,7 @@ const MenuExample = ({ navigation }: Props) => {
126126
>
127127
<Menu.Item onPress={() => {}} title="Item 1" />
128128
<Menu.Item onPress={() => {}} title="Item 2" />
129-
<Divider style={styles.md3Divider} />
129+
<Divider style={styles.divider} />
130130
<Menu.Item onPress={() => {}} title="Item 3" disabled />
131131
</Menu>
132132
<List.Section style={styles.list} title="Contextual menu">
@@ -190,7 +190,7 @@ const styles = StyleSheet.create({
190190
alignCenter: {
191191
alignItems: 'center',
192192
},
193-
md3Divider: {
193+
divider: {
194194
marginVertical: 8,
195195
},
196196
bottomMenu: { width: '40%' },

‎src/components/Appbar/Appbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ const Appbar = ({
217217
shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0;
218218
}
219219

220-
const spacingStyle = styles.v3Spacing;
220+
const spacingStyle = styles.spacing;
221221

222222
const insets = {
223223
paddingBottom: safeAreaInsets?.bottom,
@@ -322,7 +322,7 @@ const styles = StyleSheet.create({
322322
alignItems: 'center',
323323
paddingHorizontal: 4,
324324
},
325-
v3Spacing: {
325+
spacing: {
326326
width: 52,
327327
},
328328
controlsRow: {

‎src/components/Appbar/AppbarContent.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -119,10 +119,10 @@ const AppbarContent = ({
119119
const titleTextColor = titleColor ? titleColor : onSurface;
120120

121121
const modeContainerStyles = {
122-
small: styles.v3DefaultContainer,
123-
medium: styles.v3MediumContainer,
124-
large: styles.v3LargeContainer,
125-
'center-aligned': styles.v3DefaultContainer,
122+
small: styles.defaultContainer,
123+
medium: styles.mediumContainer,
124+
large: styles.largeContainer,
125+
'center-aligned': styles.defaultContainer,
126126
};
127127

128128
const variant = modeTextVariant[mode] as TypescaleKey;
@@ -197,15 +197,15 @@ const styles = StyleSheet.create({
197197
flex: 1,
198198
paddingHorizontal: 12,
199199
},
200-
v3DefaultContainer: {
200+
defaultContainer: {
201201
paddingHorizontal: 0,
202202
},
203-
v3MediumContainer: {
203+
mediumContainer: {
204204
paddingHorizontal: 0,
205205
justifyContent: 'flex-end',
206206
paddingBottom: 24,
207207
},
208-
v3LargeContainer: {
208+
largeContainer: {
209209
paddingHorizontal: 0,
210210
paddingTop: 36,
211211
justifyContent: 'flex-end',

‎src/components/Appbar/utils.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ export const renderAppbarContent = ({
161161
if (child.type.displayName === 'Appbar.Content') {
162162
props.mode = mode;
163163
props.style = [
164-
i === 0 && !shouldCenterContent && styles.v3Spacing,
164+
i === 0 && !shouldCenterContent && styles.spacing,
165165
shouldCenterContent && styles.centerAlignedContent,
166166
child.props.style,
167167
];
@@ -175,10 +175,7 @@ const styles = StyleSheet.create({
175175
centerAlignedContent: {
176176
alignItems: 'center',
177177
},
178-
v2Spacing: {
179-
marginLeft: 8,
180-
},
181-
v3Spacing: {
178+
spacing: {
182179
marginLeft: 12,
183180
},
184181
});

‎src/components/BottomNavigation/BottomNavigationBar.tsx‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -569,12 +569,15 @@ const BottomNavigationBar = <Route extends BaseRoute>({
569569
outputRange: [1, 0],
570570
});
571571

572-
const v3ActiveOpacity = focused ? 1 : 0;
573-
const v3InactiveOpacity = shifting
574-
? inactiveOpacity
575-
: focused
576-
? 0
577-
: 1;
572+
const getActiveOpacity = () => {
573+
if (shiftingAndLabeled) return activeOpacity;
574+
return focused ? 1 : 0;
575+
};
576+
577+
const getInactiveOpacity = () => {
578+
if (shiftingAndLabeled) return inactiveOpacity;
579+
return focused ? 0 : 1;
580+
};
578581

579582
// Scale horizontally the outline pill
580583
const outlineScale = focused
@@ -608,7 +611,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
608611
: 0,
609612
};
610613

611-
const isLegacyOrV3Shifting = shifting && labeled;
614+
const shiftingAndLabeled = shifting && labeled;
612615

613616
return renderTouchable({
614617
key: route.key,
@@ -628,14 +631,14 @@ const BottomNavigationBar = <Route extends BaseRoute>({
628631
pointerEvents="none"
629632
style={
630633
labeled
631-
? styles.v3TouchableContainer
632-
: styles.v3NoLabelContainer
634+
? styles.touchableContainer
635+
: styles.noLabelContainer
633636
}
634637
>
635638
<Animated.View
636639
style={[
637640
styles.iconContainer,
638-
isLegacyOrV3Shifting && {
641+
shiftingAndLabeled && {
639642
transform: [{ translateY }],
640643
},
641644
]}
@@ -660,9 +663,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
660663
style={[
661664
styles.iconWrapper,
662665
{
663-
opacity: isLegacyOrV3Shifting
664-
? activeOpacity
665-
: v3ActiveOpacity,
666+
opacity: getActiveOpacity(),
666667
},
667668
]}
668669
>
@@ -684,9 +685,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
684685
style={[
685686
styles.iconWrapper,
686687
{
687-
opacity: isLegacyOrV3Shifting
688-
? inactiveOpacity
689-
: v3InactiveOpacity,
688+
opacity: getInactiveOpacity(),
690689
},
691690
]}
692691
>
@@ -724,9 +723,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
724723
style={[
725724
styles.labelWrapper,
726725
{
727-
opacity: isLegacyOrV3Shifting
728-
? activeOpacity
729-
: v3ActiveOpacity,
726+
opacity: getActiveOpacity(),
730727
},
731728
]}
732729
>
@@ -757,9 +754,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
757754
style={[
758755
styles.labelWrapper,
759756
{
760-
opacity: isLegacyOrV3Shifting
761-
? inactiveOpacity
762-
: v3InactiveOpacity,
757+
opacity: getInactiveOpacity(),
763758
},
764759
]}
765760
>
@@ -863,11 +858,11 @@ const styles = StyleSheet.create({
863858
position: 'absolute',
864859
left: 0,
865860
},
866-
v3TouchableContainer: {
861+
touchableContainer: {
867862
paddingTop: 12,
868863
paddingBottom: 16,
869864
},
870-
v3NoLabelContainer: {
865+
noLabelContainer: {
871866
height: 80,
872867
justifyContent: 'center',
873868
alignItems: 'center',

‎src/components/Button/Button.tsx‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -322,16 +322,15 @@ const Button = (
322322
const iconStyle =
323323
StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse'
324324
? [
325-
styles.iconReverse,
326-
styles[`md3IconReverse${compact ? 'Compact' : ''}`],
325+
styles.iconReverseBase,
326+
styles[`iconReverse${compact ? 'Compact' : ''}`],
327327
isMode('text') &&
328-
styles[`md3IconReverseTextMode${compact ? 'Compact' : ''}`],
328+
styles[`iconReverseTextMode${compact ? 'Compact' : ''}`],
329329
]
330330
: [
331-
styles.icon,
332-
styles[`md3Icon${compact ? 'Compact' : ''}`],
333-
isMode('text') &&
334-
styles[`md3IconTextMode${compact ? 'Compact' : ''}`],
331+
styles.iconBase,
332+
styles[`icon${compact ? 'Compact' : ''}`],
333+
isMode('text') && styles[`iconTextMode${compact ? 'Compact' : ''}`],
335334
];
336335

337336
return (
@@ -406,12 +405,12 @@ const Button = (
406405
numberOfLines={1}
407406
testID={`${testID}-text`}
408407
style={[
409-
styles.label,
408+
styles.labelBase,
410409
isMode('text')
411410
? icon || loading
412-
? styles.md3LabelTextAddons
413-
: styles.md3LabelText
414-
: styles.md3Label,
411+
? styles.labelTextAddons
412+
: styles.labelText
413+
: styles.label,
415414
compact && styles.compactLabel,
416415
uppercase && styles.uppercaseLabel,
417416
textStyle,
@@ -440,49 +439,49 @@ const styles = StyleSheet.create({
440439
alignItems: 'center',
441440
justifyContent: 'center',
442441
},
443-
icon: {
442+
iconBase: {
444443
marginLeft: 12,
445444
marginRight: -4,
446445
},
447-
iconReverse: {
446+
iconReverseBase: {
448447
marginRight: 12,
449448
marginLeft: -4,
450449
},
451450
/* eslint-disable react-native/no-unused-styles */
452-
md3Icon: {
451+
icon: {
453452
marginLeft: 16,
454453
marginRight: -16,
455454
},
456-
md3IconCompact: {
455+
iconCompact: {
457456
marginLeft: 8,
458457
marginRight: 0,
459458
},
460-
md3IconReverse: {
459+
iconReverse: {
461460
marginLeft: -16,
462461
marginRight: 16,
463462
},
464-
md3IconReverseCompact: {
463+
iconReverseCompact: {
465464
marginLeft: 0,
466465
marginRight: 8,
467466
},
468-
md3IconTextMode: {
467+
iconTextMode: {
469468
marginLeft: 12,
470469
marginRight: -8,
471470
},
472-
md3IconTextModeCompact: {
471+
iconTextModeCompact: {
473472
marginLeft: 6,
474473
marginRight: 0,
475474
},
476-
md3IconReverseTextMode: {
475+
iconReverseTextMode: {
477476
marginLeft: -8,
478477
marginRight: 12,
479478
},
480-
md3IconReverseTextModeCompact: {
479+
iconReverseTextModeCompact: {
481480
marginLeft: 0,
482481
marginRight: 6,
483482
},
484483
/* eslint-enable react-native/no-unused-styles */
485-
label: {
484+
labelBase: {
486485
textAlign: 'center',
487486
marginVertical: 9,
488487
marginHorizontal: 16,
@@ -493,14 +492,14 @@ const styles = StyleSheet.create({
493492
uppercaseLabel: {
494493
textTransform: 'uppercase',
495494
},
496-
md3Label: {
495+
label: {
497496
marginVertical: 10,
498497
marginHorizontal: 24,
499498
},
500-
md3LabelText: {
499+
labelText: {
501500
marginHorizontal: 12,
502501
},
503-
md3LabelTextAddons: {
502+
labelTextAddons: {
504503
marginHorizontal: 16,
505504
},
506505
});

‎src/components/Chip/Chip.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,7 @@ const Chip = ({
353353
? [
354354
styles.avatar,
355355
styles.avatarSelected,
356-
selected && styles.md3SelectedIcon,
356+
selected && styles.selectedIcon,
357357
]
358358
: null,
359359
]}
@@ -381,12 +381,7 @@ const Chip = ({
381381
variant="labelLarge"
382382
selectable={false}
383383
numberOfLines={1}
384-
style={[
385-
styles.md3LabelText,
386-
labelTextStyle,
387-
labelSpacings,
388-
textStyle,
389-
]}
384+
style={[styles.labelText, labelTextStyle, labelSpacings, textStyle]}
390385
ellipsizeMode={ellipsizeMode}
391386
maxFontSizeMultiplier={maxFontSizeMultiplier}
392387
>
@@ -443,7 +438,7 @@ const styles = StyleSheet.create({
443438
marginRight: 8,
444439
padding: 0,
445440
},
446-
md3LabelText: {
441+
labelText: {
447442
textAlignVertical: 'center',
448443
marginVertical: 6,
449444
},
@@ -456,7 +451,7 @@ const styles = StyleSheet.create({
456451
marginLeft: 4,
457452
marginRight: 0,
458453
},
459-
md3SelectedIcon: {
454+
selectedIcon: {
460455
paddingLeft: 4,
461456
},
462457
// eslint-disable-next-line react-native/no-color-literals

0 commit comments

Comments
 (0)