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/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..d9327de4 --- /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 extra 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..44062af0 --- /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.25, + }) : 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.25, + }) : super.rich( + style: DSHeadlineExtraLargeTextStyle( + color: color, + overflow: overflow, + fontWeight: fontWeight, + fontStyle: fontStyle, + height: height, + ), + ); +} 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 5eee73dc..16bac8d4 100644 --- a/lib/src/widgets/utils/ds_user_avatar.widget.dart +++ b/lib/src/widgets/utils/ds_user_avatar.widget.dart @@ -3,24 +3,30 @@ 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; final Uri? uri; final double radius; final Color backgroundColor; - final Color textColor; + final TextStyle textStyle; - const DSUserAvatar({ + 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 = Colors.black, - }); + TextStyle textStyle = const DSBodyTextStyle(), + }) : textStyle = _defaultTextStyle.merge(textStyle); @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/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 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_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 new file mode 100644 index 00000000..19385818 --- /dev/null +++ b/sample/lib/widgets/showcase/sample_user_avatar.showcas.dart @@ -0,0 +1,34 @@ +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: [ + 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, + ), + ], + ); + } +}