Skip to content

Commit a06aab0

Browse files
lukewalczaklukewalczak
authored
refactor: rename styles (#4736)
1 parent 936e8f7 commit a06aab0

28 files changed

+183
-207
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,
@@ -321,7 +321,7 @@ const styles = StyleSheet.create({
321321
alignItems: 'center',
322322
paddingHorizontal: 4,
323323
},
324-
v3Spacing: {
324+
spacing: {
325325
width: 52,
326326
},
327327
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
@@ -568,12 +568,15 @@ const BottomNavigationBar = <Route extends BaseRoute>({
568568
outputRange: [1, 0],
569569
});
570570

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

578581
// Scale horizontally the outline pill
579582
const outlineScale = focused
@@ -607,7 +610,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
607610
: 0,
608611
};
609612

610-
const isLegacyOrV3Shifting = shifting && labeled;
613+
const shiftingAndLabeled = shifting && labeled;
611614

612615
return renderTouchable({
613616
key: route.key,
@@ -627,14 +630,14 @@ const BottomNavigationBar = <Route extends BaseRoute>({
627630
pointerEvents="none"
628631
style={
629632
labeled
630-
? styles.v3TouchableContainer
631-
: styles.v3NoLabelContainer
633+
? styles.touchableContainer
634+
: styles.noLabelContainer
632635
}
633636
>
634637
<Animated.View
635638
style={[
636639
styles.iconContainer,
637-
isLegacyOrV3Shifting && {
640+
shiftingAndLabeled && {
638641
transform: [{ translateY }],
639642
},
640643
]}
@@ -659,9 +662,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
659662
style={[
660663
styles.iconWrapper,
661664
{
662-
opacity: isLegacyOrV3Shifting
663-
? activeOpacity
664-
: v3ActiveOpacity,
665+
opacity: getActiveOpacity(),
665666
},
666667
]}
667668
>
@@ -683,9 +684,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
683684
style={[
684685
styles.iconWrapper,
685686
{
686-
opacity: isLegacyOrV3Shifting
687-
? inactiveOpacity
688-
: v3InactiveOpacity,
687+
opacity: getInactiveOpacity(),
689688
},
690689
]}
691690
>
@@ -723,9 +722,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
723722
style={[
724723
styles.labelWrapper,
725724
{
726-
opacity: isLegacyOrV3Shifting
727-
? activeOpacity
728-
: v3ActiveOpacity,
725+
opacity: getActiveOpacity(),
729726
},
730727
]}
731728
>
@@ -756,9 +753,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
756753
style={[
757754
styles.labelWrapper,
758755
{
759-
opacity: isLegacyOrV3Shifting
760-
? inactiveOpacity
761-
: v3InactiveOpacity,
756+
opacity: getInactiveOpacity(),
762757
},
763758
]}
764759
>
@@ -862,11 +857,11 @@ const styles = StyleSheet.create({
862857
position: 'absolute',
863858
left: 0,
864859
},
865-
v3TouchableContainer: {
860+
touchableContainer: {
866861
paddingTop: 12,
867862
paddingBottom: 16,
868863
},
869-
v3NoLabelContainer: {
864+
noLabelContainer: {
870865
height: 80,
871866
justifyContent: 'center',
872867
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 (
@@ -401,12 +400,12 @@ const Button = (
401400
numberOfLines={1}
402401
testID={`${testID}-text`}
403402
style={[
404-
styles.label,
403+
styles.labelBase,
405404
isMode('text')
406405
? icon || loading
407-
? styles.md3LabelTextAddons
408-
: styles.md3LabelText
409-
: styles.md3Label,
406+
? styles.labelTextAddons
407+
: styles.labelText
408+
: styles.label,
410409
compact && styles.compactLabel,
411410
uppercase && styles.uppercaseLabel,
412411
textStyle,
@@ -435,49 +434,49 @@ const styles = StyleSheet.create({
435434
alignItems: 'center',
436435
justifyContent: 'center',
437436
},
438-
icon: {
437+
iconBase: {
439438
marginLeft: 12,
440439
marginRight: -4,
441440
},
442-
iconReverse: {
441+
iconReverseBase: {
443442
marginRight: 12,
444443
marginLeft: -4,
445444
},
446445
/* eslint-disable react-native/no-unused-styles */
447-
md3Icon: {
446+
icon: {
448447
marginLeft: 16,
449448
marginRight: -16,
450449
},
451-
md3IconCompact: {
450+
iconCompact: {
452451
marginLeft: 8,
453452
marginRight: 0,
454453
},
455-
md3IconReverse: {
454+
iconReverse: {
456455
marginLeft: -16,
457456
marginRight: 16,
458457
},
459-
md3IconReverseCompact: {
458+
iconReverseCompact: {
460459
marginLeft: 0,
461460
marginRight: 8,
462461
},
463-
md3IconTextMode: {
462+
iconTextMode: {
464463
marginLeft: 12,
465464
marginRight: -8,
466465
},
467-
md3IconTextModeCompact: {
466+
iconTextModeCompact: {
468467
marginLeft: 6,
469468
marginRight: 0,
470469
},
471-
md3IconReverseTextMode: {
470+
iconReverseTextMode: {
472471
marginLeft: -8,
473472
marginRight: 12,
474473
},
475-
md3IconReverseTextModeCompact: {
474+
iconReverseTextModeCompact: {
476475
marginLeft: 0,
477476
marginRight: 6,
478477
},
479478
/* eslint-enable react-native/no-unused-styles */
480-
label: {
479+
labelBase: {
481480
textAlign: 'center',
482481
marginVertical: 9,
483482
marginHorizontal: 16,
@@ -488,14 +487,14 @@ const styles = StyleSheet.create({
488487
uppercaseLabel: {
489488
textTransform: 'uppercase',
490489
},
491-
md3Label: {
490+
label: {
492491
marginVertical: 10,
493492
marginHorizontal: 24,
494493
},
495-
md3LabelText: {
494+
labelText: {
496495
marginHorizontal: 12,
497496
},
498-
md3LabelTextAddons: {
497+
labelTextAddons: {
499498
marginHorizontal: 16,
500499
},
501500
});

‎src/components/Chip/Chip.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ const Chip = ({
352352
? [
353353
styles.avatar,
354354
styles.avatarSelected,
355-
selected && styles.md3SelectedIcon,
355+
selected && styles.selectedIcon,
356356
]
357357
: null,
358358
]}
@@ -380,12 +380,7 @@ const Chip = ({
380380
variant="labelLarge"
381381
selectable={false}
382382
numberOfLines={1}
383-
style={[
384-
styles.md3LabelText,
385-
labelTextStyle,
386-
labelSpacings,
387-
textStyle,
388-
]}
383+
style={[styles.labelText, labelTextStyle, labelSpacings, textStyle]}
389384
ellipsizeMode={ellipsizeMode}
390385
maxFontSizeMultiplier={maxFontSizeMultiplier}
391386
>
@@ -442,7 +437,7 @@ const styles = StyleSheet.create({
442437
marginRight: 8,
443438
padding: 0,
444439
},
445-
md3LabelText: {
440+
labelText: {
446441
textAlignVertical: 'center',
447442
marginVertical: 6,
448443
},
@@ -455,7 +450,7 @@ const styles = StyleSheet.create({
455450
marginLeft: 4,
456451
marginRight: 0,
457452
},
458-
md3SelectedIcon: {
453+
selectedIcon: {
459454
paddingLeft: 4,
460455
},
461456
// eslint-disable-next-line react-native/no-color-literals

0 commit comments

Comments
 (0)