fix: base text line height (#93)

lenra-io · Mar 30, 2022 · 8aabab6 · 8aabab6
1 parent e2d7e20
commit 8aabab6
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 54 deletions.
diff --git a/examples/flutter_playground/pubspec.lock b/examples/flutter_playground/pubspec.lock
@@ -7,7 +7,7 @@ packages:
  name: async
  url: "https://pub.dartlang.org"
  source: hosted
- version: "2.8.1"
+ version: "2.8.2"
  boolean_selector:
  dependency: transitive
  description:
@@ -21,7 +21,7 @@ packages:
  name: characters
  url: "https://pub.dartlang.org"
  source: hosted
- version: "1.1.0"
+ version: "1.2.0"
  charcode:
  dependency: transitive
  description:
@@ -87,7 +87,14 @@ packages:
  name: matcher
  url: "https://pub.dartlang.org"
  source: hosted
- version: "0.12.10"
+ version: "0.12.11"
+ material_color_utilities:
+ dependency: transitive
+ description:
+ name: material_color_utilities
+ url: "https://pub.dartlang.org"
+ source: hosted
+ version: "0.1.3"
  meta:
  dependency: transitive
  description:
@@ -148,7 +155,7 @@ packages:
  name: test_api
  url: "https://pub.dartlang.org"
  source: hosted
- version: "0.4.2"
+ version: "0.4.8"
  typed_data:
  dependency: transitive
  description:
@@ -162,7 +169,7 @@ packages:
  name: vector_math
  url: "https://pub.dartlang.org"
  source: hosted
- version: "2.1.0"
+ version: "2.1.1"
 sdks:
- dart: ">=2.12.0 <3.0.0"
+ dart: ">=2.14.0 <3.0.0"
  flutter: ">=1.17.0"
diff --git a/lib/component/lenra_text_field.dart b/lib/component/lenra_text_field.dart
@@ -111,9 +111,6 @@ class LenraTextField extends StatelessWidget {
  style: lenraTextFieldThemeData.getLabelStyle(),
  minLines: minLines,
  maxLines: maxLines,
- strutStyle: const StrutStyle(
- leading: 0.15,
- ),
  controller: controller,
  focusNode: focusNode,
  decoration: lenraTextFieldThemeData.getInputdecoration(

diff --git a/lib/theme/lenra_text_theme_data.dart b/lib/theme/lenra_text_theme_data.dart
@@ -1,8 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:lenra_components/lenra_components.dart';
+import 'package:lenra_components/theme/lenra_theme_data.dart';
 import 'package:lenra_components/theme/lenra_color_theme_data.dart';
 
 class LenraTextThemeData {
+ static const double defaultBaseFontSize = 15;
+ static const double baseLineHeight = 20;
  late TextStyle headline1;
  late TextStyle headline2;
  late TextStyle headline3;
@@ -20,7 +23,7 @@ class LenraTextThemeData {
  final double? lineHeight;
 
  LenraTextThemeData({
- this.lineHeight = 14 / 15,
+ this.lineHeight = baseLineHeight / defaultBaseFontSize,
  TextStyle? headline1,
  TextStyle? headline2,
  TextStyle? headline3,
@@ -34,67 +37,74 @@ class LenraTextThemeData {
  TextStyle? errorText,
  }) {
  this.headline1 = headline1 ??
- const TextStyle(
- fontSize: 24.0,
+ TextStyle(
+ fontSize: defaultBaseFontSize * 5 / 3,
  fontWeight: FontWeight.w700,
+ height: lineHeight,
  );
  this.headline2 = headline2 ??
- const TextStyle(
- fontSize: 20.0,
+ TextStyle(
+ fontSize: defaultBaseFontSize * 4 / 3,
  fontWeight: FontWeight.w700,
+ height: lineHeight,
  );
  this.headline3 = headline3 ??
- const TextStyle(
- fontSize: 16.0,
+ TextStyle(
+ fontSize: defaultBaseFontSize * 6 / 5,
  fontWeight: FontWeight.w700,
+ height: lineHeight,
  );
  this.headline4 = headline4 ??
- const TextStyle(
- fontSize: 15.0,
+ TextStyle(
+ fontSize: defaultBaseFontSize,
  fontWeight: FontWeight.w700,
+ height: lineHeight,
  );
  this.headlineBody = headlineBody ??
- const TextStyle(
- fontSize: 15.0,
+ TextStyle(
+ fontSize: defaultBaseFontSize,
  fontWeight: FontWeight.w600,
+ height: lineHeight,
  );
  this.bodyText = bodyText ??
  TextStyle(
  fontFamily: "Source Sans Pro",
- fontSize: 15.0,
+ fontSize: defaultBaseFontSize,
  fontWeight: FontWeight.w400,
  color: LenraColorThemeData.lenraBlack,
  height: lineHeight,
  );
  this.blueBodyText = bodyText ??
  TextStyle(
  fontFamily: "Source Sans Pro",
- fontSize: 15.0,
+ fontSize: defaultBaseFontSize,
  fontWeight: FontWeight.w400,
  color: LenraColorThemeData.lenraBlue,
  height: lineHeight,
  );
  this.subtext = subtext ??
- const TextStyle(
- fontSize: 12.0,
+ TextStyle(
+ fontSize: defaultBaseFontSize * 4 / 5,
+ height: lineHeight,
  );
  this.disabledBodyText = disabledBodyText ??
- const TextStyle(
+ TextStyle(
  color: LenraColorThemeData.lenraDisabledGray,
+ height: lineHeight,
  );
 
  this.underDescriptionText = underDescriptionText ??
  TextStyle(
  fontFamily: "Source Sans Pro",
- fontSize: 12.0,
+ fontSize: defaultBaseFontSize * 4 / 5,
  fontWeight: FontWeight.w400,
  color: LenraColorThemeData.lenraGreyText,
  height: lineHeight,
  );
  this.errorText = disabledBodyText ??
  TextStyle(
  fontFamily: "Source Sans Pro",
- fontSize: 15.0,
+ fontSize: defaultBaseFontSize,
  fontWeight: FontWeight.w400,
  color: Colors.red,
  height: lineHeight,

diff --git a/lib/theme/lenra_theme_data.dart b/lib/theme/lenra_theme_data.dart
@@ -36,6 +36,7 @@ enum LenraTextStyle {
 }
 
 class LenraThemeData {
+ static const double defaultBaseSize = 8;
  final double baseSize;
  late Map<LenraComponentSize, EdgeInsets> paddingMap;
  late LenraColorThemeData lenraColorThemeData;
@@ -49,7 +50,7 @@ class LenraThemeData {
  late LenraMenuThemeData lenraMenuThemeData;
 
  LenraThemeData({
- this.baseSize = 8,
+ this.baseSize = defaultBaseSize,
  Map<LenraComponentSize, EdgeInsets>? paddingMap,
  LenraColorThemeData? lenraColorThemeData,
  LenraTextThemeData? lenraTextThemeData,
@@ -68,8 +69,8 @@ class LenraThemeData {
  LenraComponentSize.large: EdgeInsets.symmetric(vertical: 1.5 * baseSize, horizontal: 2 * baseSize),
  };
  this.lenraColorThemeData = lenraColorThemeData ?? LenraColorThemeData();
- this.lenraTextThemeData = lenraTextThemeData ?? LenraTextThemeData();
  this.lenraBorderThemeData = lenraBorderThemeData ?? LenraBorderThemeData();
+ this.lenraTextThemeData = lenraTextThemeData ?? LenraTextThemeData();
  this.lenraTableThemeData = LenraTableThemeData(
  lenraThemeData: this,
  );

diff --git a/pubspec.lock b/pubspec.lock
@@ -7,7 +7,7 @@ packages:
  name: async
  url: "https://pub.dartlang.org"
  source: hosted
- version: "2.8.1"
+ version: "2.8.2"
  boolean_selector:
  dependency: transitive
  description:
@@ -21,7 +21,7 @@ packages:
  name: characters
  url: "https://pub.dartlang.org"
  source: hosted
- version: "1.1.0"
+ version: "1.2.0"
  charcode:
  dependency: transitive
  description:
@@ -73,7 +73,14 @@ packages:
  name: matcher
  url: "https://pub.dartlang.org"
  source: hosted
- version: "0.12.10"
+ version: "0.12.11"
+ material_color_utilities:
+ dependency: transitive
+ description:
+ name: material_color_utilities
+ url: "https://pub.dartlang.org"
+ source: hosted
+ version: "0.1.3"
  meta:
  dependency: transitive
  description:
@@ -134,7 +141,7 @@ packages:
  name: test_api
  url: "https://pub.dartlang.org"
  source: hosted
- version: "0.4.2"
+ version: "0.4.8"
  typed_data:
  dependency: transitive
  description:
@@ -148,7 +155,7 @@ packages:
  name: vector_math
  url: "https://pub.dartlang.org"
  source: hosted
- version: "2.1.0"
+ version: "2.1.1"
 sdks:
- dart: ">=2.12.0 <3.0.0"
+ dart: ">=2.14.0 <3.0.0"
  flutter: ">=1.17.0"
diff --git a/test/component/lenra_button_test.dart b/test/component/lenra_button_test.dart
@@ -35,7 +35,7 @@ void main() {
  ),
  ));
 
- expect(tester.getSize(find.byType(LenraButton)).height, equals(24.0));
+ expect(tester.getSize(find.byType(LenraButton)).height, equals(20 + 8));
  });
 
  testWidgets('Test LenraButton Medium size', (WidgetTester tester) async {
@@ -47,7 +47,7 @@ void main() {
  ),
  ));
 
- expect(tester.getSize(find.byType(LenraButton)).height, equals(32.0));
+ expect(tester.getSize(find.byType(LenraButton)).height, equals(20 + 16));
  });
 
  testWidgets('Test LenraButton Large size', (WidgetTester tester) async {
@@ -59,7 +59,7 @@ void main() {
  ),
  ));
 
- expect(tester.getSize(find.byType(LenraButton)).height, equals(40.0));
+ expect(tester.getSize(find.byType(LenraButton)).height, equals(20 + 24));
  });
 
  testWidgets('LenraButton test rightIcon and leftIcon in LenraRow should not crash', (WidgetTester tester) async {

diff --git a/test/component/lenra_menu_test.dart b/test/component/lenra_menu_test.dart
@@ -48,7 +48,7 @@ void main() {
  testWidgets('LenraMenu check size', (WidgetTester tester) async {
  await tester.pumpWidget(createComponentTestWidgets(basicMenu));
 
- double lenraMenuExpectedHeight = 24.0 * basicMenu.items.length + 8 * 2;
+ double lenraMenuExpectedHeight = 28.0 * basicMenu.items.length + 8 * 2;
 
  expect(tester.getSize((find.byType(LenraMenu).first)).width, lessThan(800.0));
  expect(tester.getSize((find.byType(LenraMenu).first)).height, equals(lenraMenuExpectedHeight));
@@ -59,6 +59,6 @@ void main() {
 
  // Width should be same as screen if not constrained
  expect(tester.getSize((find.byType(LenraMenuItem).first)).width, lessThan(800.0));
- expect(tester.getSize((find.byType(LenraMenuItem).first)).height, equals(24.0));
+ expect(tester.getSize((find.byType(LenraMenuItem).first)).height, equals(28.0));
  });
 }
diff --git a/test/component/lenra_text_field_test.dart b/test/component/lenra_text_field_test.dart
@@ -1,5 +1,8 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:lenra_components/component/lenra_text_field.dart';
+import 'package:lenra_components/lenra_components.dart';
 import 'package:lenra_components/theme/lenra_theme_data.dart';
 
 import '../utils/lenra_page_test_help.dart';
@@ -25,7 +28,7 @@ void main() {
  ),
  ));
 
- expect(tester.getSize(find.byType(LenraTextField)).height, equals(24.0));
+ expect(tester.getSize(find.byType(LenraTextField)).height, equals(20 + 8));
  });
  testWidgets('Test LenraTextField Medium size', (WidgetTester tester) async {
  await tester.pumpWidget(createComponentTestWidgets(
@@ -35,7 +38,7 @@ void main() {
  ),
  ));
 
- expect(tester.getSize(find.byType(LenraTextField)).height, equals(32.0));
+ expect(tester.getSize(find.byType(LenraTextField)).height, equals(20 + 16));
  });
 
  testWidgets('Test LenraTextField Large size', (WidgetTester tester) async {
@@ -46,7 +49,26 @@ void main() {
  ),
  ));
 
- expect(tester.getSize(find.byType(LenraTextField)).height, equals(40.0));
+ expect(tester.getSize(find.byType(LenraTextField)).height, equals(20 + 24));
+ });
+
+ testWidgets('Test LenraTextField without border', (WidgetTester tester) async {
+ await tester.pumpWidget(createComponentTestWidgets(
+ LenraTheme(
+ themeData: LenraThemeData(
+ lenraBorderThemeData: LenraBorderThemeData(
+ primaryBorder: const BorderSide(width: 0),
+ ),
+ ),
+ child: LenraTextField(
+ onChanged: (String test) {},
+ ),
+ ),
+ ));
+
+ expect(tester.getSize(find.byType(EditableText)).height, equals(20.0));
+ expect(tester.getSize(find.byType(TextField)).height, equals(20 + 16));
+ expect(tester.getSize(find.byType(LenraTextField)).height, equals(20 + 16));
  });
 
  testWidgets('Test LenraTextField error minLines greater than maxLines', (WidgetTester tester) async {
@@ -63,7 +85,7 @@ void main() {
  ),
  ));
 
- expect(tester.getSize(find.byType(LenraTextField)).height, equals(48.0));
+ expect(tester.getSize(find.byType(LenraTextField)).height, equals(2 * 20 + 16));
  });
 
  testWidgets('Test LenraTextField minLines size with text doesnt expand', (WidgetTester tester) async {
@@ -76,7 +98,7 @@ void main() {
 
  await tester.enterText(find.byType(LenraTextField), fourLines);
 
- expect(tester.getSize(find.byType(LenraTextField)).height, equals(32.0));
+ expect(tester.getSize(find.byType(LenraTextField)).height, equals(20 + 16));
  });
 
  testWidgets('Test LenraTextField maxLines size', (WidgetTester tester) async {
@@ -86,7 +108,7 @@ void main() {
  ),
  ));
 
- expect(tester.getSize(find.byType(LenraTextField)).height, equals(80.0));
+ expect(tester.getSize(find.byType(LenraTextField)).height, equals(4 * 20 + 16));
  });
 
  testWidgets('Test LenraTextField maxLines size with text expands', (WidgetTester tester) async {
@@ -97,11 +119,11 @@ void main() {
  ),
  ));
 
- expect(tester.getSize(find.byType(LenraTextField)).height, equals(48.0));
+ expect(tester.getSize(find.byType(LenraTextField)).height, equals(2 * 20 + 16));
 
  await tester.enterText(find.byType(LenraTextField), fourLines);
  await tester.pump();
 
- expect(tester.getSize(find.byType(LenraTextField)).height, equals(80.0));
+ expect(tester.getSize(find.byType(LenraTextField)).height, equals(4 * 20 + 16));
  });
 }