fix(#182): scaling handling (#183)

carbon-design-system · May 2, 2024 · 807a975 · 807a975
1 parent ec638d0
commit 807a975
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 6 deletions.
diff --git a/example/android/build.gradle b/example/android/build.gradle
@@ -3,7 +3,7 @@
 buildscript {
     ext {
         buildToolsVersion = "33.0.0"
-        minSdkVersion = 21
+        minSdkVersion = 23
         compileSdkVersion = 33
         targetSdkVersion = 33
 

diff --git a/example/android/gradle/wrapper/gradle-wrapper.properties b/example/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,7 @@
+#Thu May 02 14:24:51 PDT 2024
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.2-bin.zip
 networkTimeout=10000
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/src/components/BottomNavigationBar/index.tsx b/src/components/BottomNavigationBar/index.tsx
@@ -4,7 +4,7 @@ import { getColor } from '../../styles/colors';
 import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
 import type { NavigationButton } from '../../types/navigation';
 import { Text } from '../Text';
-import { SemiBoldFont } from '../../styles/typography';
+import { SemiBoldFont, fontScalingActive } from '../../styles/typography';
 
 /** Props for BottomNavigationBar component */
 export type BottomNavigationBarProps = {
@@ -54,6 +54,7 @@ export class BottomNavigationBar extends React.Component<BottomNavigationBarProp
 
   private get items(): React.ReactNode {
     const { items } = this.props;
+    const fontScaling = fontScalingActive();
 
     return items.map((item, index) => {
       const finalStyles = styleReferenceBreaker(this.styles.itemStyle, item.style);
@@ -80,7 +81,7 @@ export class BottomNavigationBar extends React.Component<BottomNavigationBarProp
       return (
         <Pressable key={index} style={(state) => pressableFeedbackStyle(state, finalStyles, getStateStyle)} disabled={item.disabled} onPress={item.onPress} onLongPress={item.onLongPress} accessibilityLabel={item.text} accessibilityRole="tab" {...(item.componentProps || {})}>
           <View style={this.styles.icon}>{createIcon(item.icon, 20, 20, finalColor)}</View>
-          <Text style={styleReferenceBreaker(useActiveText ? this.styles.textActive : {}, { color: finalColor, textAlign: 'center' })} text={item.text} type="label-01" breakMode="tail" />
+          {!fontScaling && <Text style={styleReferenceBreaker(useActiveText ? this.styles.textActive : {}, { color: finalColor, textAlign: 'center' })} text={item.text} type="label-01" breakMode="tail" />}
         </Pressable>
       );
     });

diff --git a/src/components/TopNavigationBar/index.tsx b/src/components/TopNavigationBar/index.tsx
@@ -85,8 +85,7 @@ export class TopNavigationBar extends React.Component<TopNavigationBarProps> {
         borderBottomWidth: 1,
       },
       headerWrapper: {
-        height: 48,
-        maxHeight: 48,
+        minHeight: 48,
         width: '100%',
         flexDirection: 'row',
         justifyContent: 'space-evenly',

diff --git a/src/styles/typography.ts b/src/styles/typography.ts
@@ -5,6 +5,8 @@
  * If you want to use other fonts you can download them and store them in your app and follow same directions on README.
  */
 
+import { Dimensions } from 'react-native';
+
 /** Font weights supported */
 export type FontWeights = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | undefined;
 
@@ -41,6 +43,14 @@ export const overrideFonts = (overrides: FontDefinitionOverrides): void => {
   }
 };
 
+/**
+ * Indicate if font scaling is on
+ * @returns boolean indicating if font scaling is in use
+ */
+export const fontScalingActive = (): boolean => {
+  return Dimensions.get('screen').fontScale > 1;
+};
+
 /** Font light styling */
 export const LightFont = (): FontDefinition => {
   return (