Skip to content

Commit 242d6cc

Browse files
lukewalczaklukewalczak
committed
refactor: rename styles to default names
1 parent 60ab7a3 commit 242d6cc

25 files changed

+106
-126
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: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -607,7 +607,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
607607
: 0,
608608
};
609609

610-
const isLegacyOrV3Shifting = shifting && labeled;
610+
const shiftingAndLabeled = shifting && labeled;
611611

612612
return renderTouchable({
613613
key: route.key,
@@ -627,14 +627,14 @@ const BottomNavigationBar = <Route extends BaseRoute>({
627627
pointerEvents="none"
628628
style={
629629
labeled
630-
? styles.v3TouchableContainer
631-
: styles.v3NoLabelContainer
630+
? styles.touchableContainer
631+
: styles.noLabelContainer
632632
}
633633
>
634634
<Animated.View
635635
style={[
636636
styles.iconContainer,
637-
isLegacyOrV3Shifting && {
637+
shiftingAndLabeled && {
638638
transform: [{ translateY }],
639639
},
640640
]}
@@ -659,7 +659,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
659659
style={[
660660
styles.iconWrapper,
661661
{
662-
opacity: isLegacyOrV3Shifting
662+
opacity: shiftingAndLabeled
663663
? activeOpacity
664664
: v3ActiveOpacity,
665665
},
@@ -683,7 +683,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
683683
style={[
684684
styles.iconWrapper,
685685
{
686-
opacity: isLegacyOrV3Shifting
686+
opacity: shiftingAndLabeled
687687
? inactiveOpacity
688688
: v3InactiveOpacity,
689689
},
@@ -723,7 +723,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
723723
style={[
724724
styles.labelWrapper,
725725
{
726-
opacity: isLegacyOrV3Shifting
726+
opacity: shiftingAndLabeled
727727
? activeOpacity
728728
: v3ActiveOpacity,
729729
},
@@ -756,7 +756,7 @@ const BottomNavigationBar = <Route extends BaseRoute>({
756756
style={[
757757
styles.labelWrapper,
758758
{
759-
opacity: isLegacyOrV3Shifting
759+
opacity: shiftingAndLabeled
760760
? inactiveOpacity
761761
: v3InactiveOpacity,
762762
},
@@ -862,11 +862,11 @@ const styles = StyleSheet.create({
862862
position: 'absolute',
863863
left: 0,
864864
},
865-
v3TouchableContainer: {
865+
touchableContainer: {
866866
paddingTop: 12,
867867
paddingBottom: 16,
868868
},
869-
v3NoLabelContainer: {
869+
noLabelContainer: {
870870
height: 80,
871871
justifyContent: 'center',
872872
alignItems: 'center',

‎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

‎src/components/Dialog/DialogActions.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const DialogActions = (props: Props) => {
4949
const actionsLength = React.Children.toArray(props.children).length;
5050

5151
return (
52-
<View {...props} style={[styles.v3Container, props.style]}>
52+
<View {...props} style={[styles.conainer, props.style]}>
5353
{React.Children.map(props.children, (child, i) =>
5454
React.isValidElement<DialogActionChildProps>(child)
5555
? React.cloneElement(child, {
@@ -71,7 +71,7 @@ const DialogActions = (props: Props) => {
7171
DialogActions.displayName = 'Dialog.Actions';
7272

7373
const styles = StyleSheet.create({
74-
v3Container: {
74+
conainer: {
7575
flexDirection: 'row',
7676
flexGrow: 1,
7777
alignItems: 'center',

‎src/components/Divider.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const Divider = ({
6868
height: StyleSheet.hairlineWidth,
6969
backgroundColor: outlineVariant,
7070
},
71-
leftInset && styles.v3LeftInset,
71+
leftInset && styles.leftInset,
7272
horizontalInset && styles.horizontalInset,
7373
bold && styles.bold,
7474
style,
@@ -78,7 +78,7 @@ const Divider = ({
7878
};
7979

8080
const styles = StyleSheet.create({
81-
v3LeftInset: {
81+
leftInset: {
8282
marginLeft: 16,
8383
},
8484
horizontalInset: {

‎src/components/FAB/AnimatedFAB.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -370,12 +370,11 @@ const AnimatedFAB = ({
370370
...labelLarge,
371371
};
372372

373-
const md3Elevation = disabled || !isIOS ? 0 : 3;
373+
const elevation = disabled || !isIOS ? 0 : 3;
374374

375-
const shadowStyle = styles.v3Shadow;
376375
const baseStyle = [
377376
StyleSheet.absoluteFill,
378-
disabled ? styles.disabled : shadowStyle,
377+
disabled ? styles.disabled : styles.shadow,
379378
];
380379

381380
const newAccessibilityState = { ...accessibilityState, disabled };
@@ -397,7 +396,7 @@ const AnimatedFAB = ({
397396
styles.container,
398397
restStyle,
399398
]}
400-
elevation={md3Elevation}
399+
elevation={elevation}
401400
theme={theme}
402401
>
403402
<Animated.View style={[styles.standard, { borderRadius }]}>
@@ -579,7 +578,7 @@ const styles = StyleSheet.create({
579578
shadowWrapper: {
580579
elevation: 0,
581580
},
582-
v3Shadow: {
581+
shadow: {
583582
elevation: 3,
584583
},
585584
iconWrapper: {

0 commit comments

Comments
 (0)