From c451f8b7e2de41393c82ab6d0f21ef2df808767c Mon Sep 17 00:00:00 2001 From: adrianoct42 Date: Thu, 4 Jan 2024 16:54:28 -0300 Subject: [PATCH 1/3] feat: add HeadlineExtraLargeText --- lib/blip_ds.dart | 4 ++ ...headline_extra_large_text_style.theme.dart | 20 +++++++ .../ds_headline_extra_large_text.widget.dart | 55 +++++++++++++++++++ lib/src/widgets/utils/ds_card.widget.dart | 1 + .../widgets/utils/ds_user_avatar.widget.dart | 19 ++++--- sample/lib/main.dart | 2 + .../showcase/sample_user_avatar.showcas.dart | 46 ++++++++++++++++ 7 files changed, 140 insertions(+), 7 deletions(-) create mode 100644 lib/src/themes/texts/styles/ds_headline_extra_large_text_style.theme.dart create mode 100644 lib/src/widgets/texts/ds_headline_extra_large_text.widget.dart create mode 100644 sample/lib/widgets/showcase/sample_user_avatar.showcas.dart diff --git a/lib/blip_ds.dart b/lib/blip_ds.dart index d783b8cf..51f6e21c 100644 --- a/lib/blip_ds.dart +++ b/lib/blip_ds.dart @@ -75,6 +75,8 @@ export 'src/themes/texts/styles/ds_caption_small_text_style.theme.dart' show DSCaptionSmallTextStyle; export 'src/themes/texts/styles/ds_caption_text_style.theme.dart' show DSCaptionTextStyle; +export 'src/themes/texts/styles/ds_headline_extra_large_text_style.theme.dart' + show DSHeadlineExtraLargeTextStyle; export 'src/themes/texts/styles/ds_headline_large_text_style.theme.dart' show DSHeadlineLargeTextStyle; export 'src/themes/texts/styles/ds_headline_small_text_style.theme.dart' @@ -179,6 +181,8 @@ export 'src/widgets/texts/ds_button_text.widget.dart' show DSButtonText; export 'src/widgets/texts/ds_caption_small_text.widget.dart' show DSCaptionSmallText; export 'src/widgets/texts/ds_caption_text.widget.dart' show DSCaptionText; +export 'src/widgets/texts/ds_headline_extra_large_text.widget.dart' + show DSHeadlineExtraLargeText; export 'src/widgets/texts/ds_headline_large_text.widget.dart' show DSHeadlineLargeText; export 'src/widgets/texts/ds_headline_small_text.widget.dart' diff --git a/lib/src/themes/texts/styles/ds_headline_extra_large_text_style.theme.dart b/lib/src/themes/texts/styles/ds_headline_extra_large_text_style.theme.dart new file mode 100644 index 00000000..886bdcf4 --- /dev/null +++ b/lib/src/themes/texts/styles/ds_headline_extra_large_text_style.theme.dart @@ -0,0 +1,20 @@ +import 'package:flutter/material.dart'; + +import '../utils/ds_font_weights.theme.dart'; +import 'ds_text_style.theme.dart'; + +/// A Design System's [TextStyle] primarily used by large titles. +/// +/// This style's font variant is $fs-32-h2. +class DSHeadlineExtraLargeTextStyle extends DSTextStyle { + /// Creates a Design System's [TextStyle] with $fs-32-h2 font variant. + const DSHeadlineExtraLargeTextStyle({ + super.color, + super.overflow, + super.fontWeight = DSFontWeights.semiBold, + super.fontStyle, + super.height = 1.25, + }) : super( + fontSize: 32.0, + ); +} diff --git a/lib/src/widgets/texts/ds_headline_extra_large_text.widget.dart b/lib/src/widgets/texts/ds_headline_extra_large_text.widget.dart new file mode 100644 index 00000000..7e0eac63 --- /dev/null +++ b/lib/src/widgets/texts/ds_headline_extra_large_text.widget.dart @@ -0,0 +1,55 @@ +import '../../themes/texts/styles/ds_headline_extra_large_text_style.theme.dart'; +import '../../themes/texts/utils/ds_font_weights.theme.dart'; +import 'ds_text.widget.dart'; + +/// A Design System's [Text] primarily used by large titles. +/// +/// Sets [DSHeadlineExtraLargeTextStyle] as [style] default value. This style's font variant is $fs-32-h2. +class DSHeadlineExtraLargeText extends DSText { + /// Creates a Design System's [Text] with $fs-32-h2 font variant. + DSHeadlineExtraLargeText( + super.text, { + super.key, + super.color, + super.linkColor, + super.overflow, + super.textAlign, + super.maxLines, + super.fontWeight = DSFontWeights.semiBold, + super.fontStyle, + super.shouldLinkify, + super.isSelectable, + super.height = 1.4, + }) : super( + style: DSHeadlineExtraLargeTextStyle( + color: color, + overflow: overflow, + fontWeight: fontWeight, + fontStyle: fontStyle, + height: height, + ), + ); + + DSHeadlineExtraLargeText.rich( + super.textSpan, { + super.key, + super.color, + super.linkColor, + super.overflow, + super.textAlign, + super.maxLines, + super.fontWeight = DSFontWeights.semiBold, + super.fontStyle, + super.shouldLinkify, + super.isSelectable, + super.height = 1.4, + }) : super.rich( + style: DSHeadlineExtraLargeTextStyle( + color: color, + overflow: overflow, + fontWeight: fontWeight, + fontStyle: fontStyle, + height: height, + ), + ); +} diff --git a/lib/src/widgets/utils/ds_card.widget.dart b/lib/src/widgets/utils/ds_card.widget.dart index 56729ed2..1f610841 100644 --- a/lib/src/widgets/utils/ds_card.widget.dart +++ b/lib/src/widgets/utils/ds_card.widget.dart @@ -331,6 +331,7 @@ class DSCard extends StatelessWidget { style: style, shouldAuthenticate: shouldAuthenticate, isUploading: isUploading, + // Devo criar um parametro novo no DSFileMessageBubble que será o texto da mensagem? Só depois instanciá-lo aqui no caso. ); } } diff --git a/lib/src/widgets/utils/ds_user_avatar.widget.dart b/lib/src/widgets/utils/ds_user_avatar.widget.dart index 5eee73dc..93ce8efa 100644 --- a/lib/src/widgets/utils/ds_user_avatar.widget.dart +++ b/lib/src/widgets/utils/ds_user_avatar.widget.dart @@ -3,8 +3,9 @@ import 'package:flutter/material.dart'; import '../../themes/colors/ds_colors.theme.dart'; import '../../themes/icons/ds_icons.dart'; +import '../../themes/texts/styles/ds_body_text_style.theme.dart'; import '../../utils/ds_utils.util.dart'; -import '../texts/ds_body_text.widget.dart'; +import '../texts/ds_text.widget.dart'; class DSUserAvatar extends StatelessWidget { final String? text; @@ -12,15 +13,20 @@ class DSUserAvatar extends StatelessWidget { final double radius; final Color backgroundColor; final Color textColor; + final TextStyle textStyle; - const DSUserAvatar({ + DSUserAvatar({ super.key, this.text, this.uri, this.radius = 25.0, this.backgroundColor = DSColors.primaryGreensTrue, - this.textColor = Colors.black, - }); + this.textColor = DSColors.neutralDarkCity, + TextStyle textStyle = const DSBodyTextStyle(), + }) : textStyle = textStyle.apply( + color: textColor, + overflow: TextOverflow.clip, + ); @override Widget build(BuildContext context) => uri != null @@ -72,10 +78,9 @@ class DSUserAvatar extends StatelessWidget { child: Padding( padding: const EdgeInsets.all(2.0), child: _initials.isNotEmpty - ? DSBodyText( + ? DSText( _initials, - color: textColor, - overflow: TextOverflow.clip, + style: textStyle, maxLines: 1, textAlign: TextAlign.center, ) diff --git a/sample/lib/main.dart b/sample/lib/main.dart index b5532a88..bfb921e2 100644 --- a/sample/lib/main.dart +++ b/sample/lib/main.dart @@ -1,6 +1,7 @@ import 'package:blip_ds/blip_ds.dart'; import 'package:flutter/material.dart'; import 'package:get/route_manager.dart'; +import 'package:sample/widgets/showcase/sample_user_avatar.showcas.dart'; import 'widgets/showcase/sample_bottom_sheet.showcase.dart'; import 'widgets/showcase/sample_button.showcase.dart'; @@ -55,6 +56,7 @@ class HomePage extends StatelessWidget { padding: const EdgeInsets.all(8.0), child: ListView( children: [ + const SampleUserAvatarShowcase(), SampleMessageBubbleShowcase(), const Divider(color: DSColors.neutralDarkCity), const SampleTextStyleShowcase(), diff --git a/sample/lib/widgets/showcase/sample_user_avatar.showcas.dart b/sample/lib/widgets/showcase/sample_user_avatar.showcas.dart new file mode 100644 index 00000000..e6cd2c46 --- /dev/null +++ b/sample/lib/widgets/showcase/sample_user_avatar.showcas.dart @@ -0,0 +1,46 @@ +import 'package:blip_ds/blip_ds.dart'; +import 'package:flutter/material.dart'; + +class SampleUserAvatarShowcase extends StatelessWidget { + const SampleUserAvatarShowcase({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Column( + children: [ + DSHeadlineLargeText( + 'Headline Large Text', + ), + const SizedBox( + height: 15, + ), + DSHeadlineExtraLargeText( + 'Headline EXTRA LARGE Text', + ), + const SizedBox( + height: 15, + ), + DSUserAvatar( + text: "Adriano Chamon Tavares", + ), + const SizedBox( + height: 15, + ), + DSUserAvatar( + text: "Adriano Chamon Tavares", + textStyle: const DSHeadlineLargeTextStyle(), + ), + const SizedBox( + height: 15, + ), + DSUserAvatar( + text: "Adriano Chamon Tavares", + textStyle: const DSHeadlineExtraLargeTextStyle(), + ), + const SizedBox( + height: 15, + ), + ], + ); + } +} From 5bd3fb9b28681e7045b936ef14c2753d1f91fada Mon Sep 17 00:00:00 2001 From: adrianoct42 Date: Fri, 5 Jan 2024 12:36:57 -0300 Subject: [PATCH 2/3] fix: better organized code and good practices applied --- .../ds_headline_extra_large_text_style.theme.dart | 2 +- .../texts/ds_headline_extra_large_text.widget.dart | 4 ++-- lib/src/widgets/utils/ds_card.widget.dart | 1 - lib/src/widgets/utils/ds_header.widget.dart | 9 ++++++--- lib/src/widgets/utils/ds_user_avatar.widget.dart | 12 ++++++------ .../widgets/showcase/sample_text_style.showcase.dart | 3 +++ .../widgets/showcase/sample_user_avatar.showcas.dart | 12 ------------ 7 files changed, 18 insertions(+), 25 deletions(-) diff --git a/lib/src/themes/texts/styles/ds_headline_extra_large_text_style.theme.dart b/lib/src/themes/texts/styles/ds_headline_extra_large_text_style.theme.dart index 886bdcf4..d9327de4 100644 --- a/lib/src/themes/texts/styles/ds_headline_extra_large_text_style.theme.dart +++ b/lib/src/themes/texts/styles/ds_headline_extra_large_text_style.theme.dart @@ -3,7 +3,7 @@ import 'package:flutter/material.dart'; import '../utils/ds_font_weights.theme.dart'; import 'ds_text_style.theme.dart'; -/// A Design System's [TextStyle] primarily used by large titles. +/// A Design System's [TextStyle] primarily used by extra large titles. /// /// This style's font variant is $fs-32-h2. class DSHeadlineExtraLargeTextStyle extends DSTextStyle { diff --git a/lib/src/widgets/texts/ds_headline_extra_large_text.widget.dart b/lib/src/widgets/texts/ds_headline_extra_large_text.widget.dart index 7e0eac63..44062af0 100644 --- a/lib/src/widgets/texts/ds_headline_extra_large_text.widget.dart +++ b/lib/src/widgets/texts/ds_headline_extra_large_text.widget.dart @@ -19,7 +19,7 @@ class DSHeadlineExtraLargeText extends DSText { super.fontStyle, super.shouldLinkify, super.isSelectable, - super.height = 1.4, + super.height = 1.25, }) : super( style: DSHeadlineExtraLargeTextStyle( color: color, @@ -42,7 +42,7 @@ class DSHeadlineExtraLargeText extends DSText { super.fontStyle, super.shouldLinkify, super.isSelectable, - super.height = 1.4, + super.height = 1.25, }) : super.rich( style: DSHeadlineExtraLargeTextStyle( color: color, diff --git a/lib/src/widgets/utils/ds_card.widget.dart b/lib/src/widgets/utils/ds_card.widget.dart index 1f610841..56729ed2 100644 --- a/lib/src/widgets/utils/ds_card.widget.dart +++ b/lib/src/widgets/utils/ds_card.widget.dart @@ -331,7 +331,6 @@ class DSCard extends StatelessWidget { style: style, shouldAuthenticate: shouldAuthenticate, isUploading: isUploading, - // Devo criar um parametro novo no DSFileMessageBubble que será o texto da mensagem? Só depois instanciá-lo aqui no caso. ); } } diff --git a/lib/src/widgets/utils/ds_header.widget.dart b/lib/src/widgets/utils/ds_header.widget.dart index f7baa050..678c94cf 100644 --- a/lib/src/widgets/utils/ds_header.widget.dart +++ b/lib/src/widgets/utils/ds_header.widget.dart @@ -4,6 +4,7 @@ import 'package:flutter/services.dart'; import '../../themes/colors/ds_colors.theme.dart'; import '../../themes/icons/ds_icons.dart'; import '../../themes/system_overlay/ds_system_overlay.style.dart'; +import '../../themes/texts/styles/ds_body_text_style.theme.dart'; import '../../themes/texts/styles/ds_headline_small_text_style.theme.dart'; import '../../themes/texts/styles/ds_text_style.theme.dart'; import '../../utils/ds_utils.util.dart'; @@ -112,9 +113,11 @@ class DSHeader extends StatelessWidget implements PreferredSizeWidget { text: customerName, uri: customerUri, radius: 20.0, - textColor: isBackgroundLight - ? DSColors.neutralLightSnow - : DSColors.neutralDarkCity, + textStyle: DSBodyTextStyle( + color: isBackgroundLight + ? DSColors.neutralLightSnow + : DSColors.neutralDarkCity, + ), ) : null, title: DSText( diff --git a/lib/src/widgets/utils/ds_user_avatar.widget.dart b/lib/src/widgets/utils/ds_user_avatar.widget.dart index 93ce8efa..16bac8d4 100644 --- a/lib/src/widgets/utils/ds_user_avatar.widget.dart +++ b/lib/src/widgets/utils/ds_user_avatar.widget.dart @@ -12,21 +12,21 @@ class DSUserAvatar extends StatelessWidget { final Uri? uri; final double radius; final Color backgroundColor; - final Color textColor; final TextStyle textStyle; + static const _defaultTextStyle = TextStyle( + color: DSColors.neutralDarkCity, + overflow: TextOverflow.clip, + ); + DSUserAvatar({ super.key, this.text, this.uri, this.radius = 25.0, this.backgroundColor = DSColors.primaryGreensTrue, - this.textColor = DSColors.neutralDarkCity, TextStyle textStyle = const DSBodyTextStyle(), - }) : textStyle = textStyle.apply( - color: textColor, - overflow: TextOverflow.clip, - ); + }) : textStyle = _defaultTextStyle.merge(textStyle); @override Widget build(BuildContext context) => uri != null diff --git a/sample/lib/widgets/showcase/sample_text_style.showcase.dart b/sample/lib/widgets/showcase/sample_text_style.showcase.dart index 2562e4e5..0110f5f3 100644 --- a/sample/lib/widgets/showcase/sample_text_style.showcase.dart +++ b/sample/lib/widgets/showcase/sample_text_style.showcase.dart @@ -8,6 +8,9 @@ class SampleTextStyleShowcase extends StatelessWidget { Widget build(BuildContext context) { return Column( children: [ + DSHeadlineExtraLargeText( + 'Headline EXTRA LARGE Text', + ), DSHeadlineLargeText( 'Headline Large Text', ), diff --git a/sample/lib/widgets/showcase/sample_user_avatar.showcas.dart b/sample/lib/widgets/showcase/sample_user_avatar.showcas.dart index e6cd2c46..19385818 100644 --- a/sample/lib/widgets/showcase/sample_user_avatar.showcas.dart +++ b/sample/lib/widgets/showcase/sample_user_avatar.showcas.dart @@ -8,18 +8,6 @@ class SampleUserAvatarShowcase extends StatelessWidget { Widget build(BuildContext context) { return Column( children: [ - DSHeadlineLargeText( - 'Headline Large Text', - ), - const SizedBox( - height: 15, - ), - DSHeadlineExtraLargeText( - 'Headline EXTRA LARGE Text', - ), - const SizedBox( - height: 15, - ), DSUserAvatar( text: "Adriano Chamon Tavares", ), From a2c4f9630718c19b5194a2268aeb7a939cee6a87 Mon Sep 17 00:00:00 2001 From: Marcelo Amaro Date: Fri, 5 Jan 2024 14:21:15 -0300 Subject: [PATCH 3/3] chore: Upgrade package version to 0.0.96 --- CHANGELOG.md | 6 ++++++ pubspec.yaml | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c137e1a4..836b684e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 0.0.96 + +- [DSHeadlineExtraLargeTextStyle] Created text style primarily used by extra large titles. +- [DSHeadlineExtraLargeText] Created text that uses ```DSHeadlineExtraLargeTextStyle``` as style. +- [DSUserAvatar] Added ```textStyle``` property to allow customizing the style of font used by name initials. + ## 0.0.95 - [DSFileService] Fixed ```getExtensionFromMimeType``` method to get mime type based on RegEx. diff --git a/pubspec.yaml b/pubspec.yaml index 1c25b011..c10589b4 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: blip_ds description: Blip Design System for Flutter. -version: 0.0.95 +version: 0.0.96 homepage: https://github.com/takenet/blip-ds-flutter#readme repository: https://github.com/takenet/blip-ds-flutter