fix(UX-1161): banner title alignment when centered (#200)

fix: Banner title alignment when centered
ZebraDevs · Nov 5, 2024 · 044ed2e · 044ed2e
1 parent 37b0f8e
commit 044ed2e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 24 deletions.
diff --git a/example/lib/pages/components/banner_example.dart b/example/lib/pages/components/banner_example.dart
@@ -23,7 +23,7 @@ class BannerExample extends StatelessWidget {
                 type: ZetaBannerStatus.primary,
                 title: 'Centered',
                 context: context,
-                titleStart: true,
+                titleCenter: true,
                 leadingIcon: ZetaIcons.info,
               ),
               ZetaBanner(
@@ -35,21 +35,21 @@ class BannerExample extends StatelessWidget {
                 type: ZetaBannerStatus.primary,
                 context: context,
                 title: 'Title left with arrow',
-                titleStart: true,
+                titleCenter: true,
                 trailing: ZetaIcon(ZetaIcons.chevron_right),
               ),
               ZetaBanner(
                 type: ZetaBannerStatus.primary,
                 title: 'Title left + Icon',
-                titleStart: true,
+                titleCenter: true,
                 context: context,
                 leadingIcon: ZetaIcons.info,
               ),
               ZetaBanner(
                 type: ZetaBannerStatus.primary,
                 context: context,
                 title: 'Title left + Icon with Arrow',
-                titleStart: true,
+                titleCenter: true,
                 leadingIcon: ZetaIcons.info,
                 trailing: IconButton(
                   icon: ZetaIcon(ZetaIcons.chevron_right),
@@ -71,7 +71,7 @@ class BannerExample extends StatelessWidget {
                 type: ZetaBannerStatus.positive,
                 context: context,
                 title: 'Centered',
-                titleStart: true,
+                titleCenter: true,
                 leadingIcon: ZetaIcons.info,
                 trailing: IconButton(
                   icon: ZetaIcon(ZetaIcons.chevron_right),
@@ -92,7 +92,7 @@ class BannerExample extends StatelessWidget {
                 type: ZetaBannerStatus.warning,
                 title: 'Centered',
                 context: context,
-                titleStart: true,
+                titleCenter: true,
                 leadingIcon: ZetaIcons.info,
                 trailing: IconButton(
                   icon: ZetaIcon(ZetaIcons.chevron_right),
@@ -113,7 +113,7 @@ class BannerExample extends StatelessWidget {
                 type: ZetaBannerStatus.negative,
                 title: 'Centered',
                 context: context,
-                titleStart: true,
+                titleCenter: true,
                 leadingIcon: ZetaIcons.info,
                 trailing: IconButton(
                   icon: ZetaIcon(ZetaIcons.chevron_right),

diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart
@@ -15,7 +15,7 @@ Widget bannerUseCase(BuildContext context) {
       labelBuilder: enumLabelBuilder,
     ),
     leadingIcon: iconKnob(context, nullable: true),
-    titleStart: context.knobs.boolean(label: 'Center title'),
+    titleCenter: context.knobs.boolean(label: 'Center title'),
     trailing: ZetaIcon(iconKnob(
       context,
       nullable: true,

diff --git a/lib/src/components/banner/banner.dart b/lib/src/components/banner/banner.dart
@@ -49,7 +49,10 @@ class ZetaBanner extends MaterialBanner {
     ZetaBannerStatus type = ZetaBannerStatus.primary,
 
     /// Whether the title should be centered.
-    bool titleStart = false,
+    bool titleCenter = false,
+
+    /// Whether the title should be centered.
+    @Deprecated('Use titleCenter instead. ' 'This attribute has been renamed as of 0.18.0') bool? titleStart,
 
     /// The trailing widget for the banner.
     Widget? trailing,
@@ -80,6 +83,8 @@ class ZetaBanner extends MaterialBanner {
                 }
               }
 
+              // ignore: no_leading_underscores_for_local_identifiers
+              final _titleCenter = titleStart ?? titleCenter;
               return ZetaRoundedScope(
                 rounded: rounded ?? context.rounded,
                 child: Semantics(
@@ -89,26 +94,39 @@ class ZetaBanner extends MaterialBanner {
                       color: foregroundColor,
                       overflow: TextOverflow.ellipsis,
                     ),
-                    child: Row(
-                      mainAxisAlignment: titleStart ? MainAxisAlignment.center : MainAxisAlignment.start,
+                    child: Stack(
+                      alignment: _titleCenter ? Alignment.center : Alignment.centerLeft,
                       children: [
                         if (leadingIcon != null)
-                          Padding(
-                            padding: EdgeInsets.only(right: Zeta.of(context).spacing.small),
-                            child: Icon(
-                              leadingIcon,
-                              color: foregroundColor,
-                              size: Zeta.of(context).spacing.xl_2,
+                          Positioned(
+                            left: 0,
+                            child: Padding(
+                              padding: EdgeInsets.only(right: Zeta.of(context).spacing.small),
+                              child: Icon(
+                                leadingIcon,
+                                color: foregroundColor,
+                                size: Zeta.of(context).spacing.xl_2,
+                              ),
                             ),
                           ),
-                        Flexible(
+                        Padding(
+                          padding:
+                              !_titleCenter && leadingIcon != null ? const EdgeInsets.only(left: 40) : EdgeInsets.zero,
                           child: Text(
                             title,
                             style: ZetaTextStyles.labelLarge.copyWith(
                               color: Zeta.of(context).colors.textInverse,
                             ),
                           ),
                         ),
+                        if (trailing != null)
+                          Positioned(
+                            right: 0,
+                            child: IconTheme(
+                              data: IconThemeData(color: _backgroundColorFromType(context, type).onColor),
+                              child: trailing,
+                            ),
+                          ),
                       ],
                     ),
                   ),
@@ -117,12 +135,7 @@ class ZetaBanner extends MaterialBanner {
             },
           ),
           backgroundColor: _backgroundColorFromType(context, type),
-          actions: [
-            IconTheme(
-              data: IconThemeData(color: _backgroundColorFromType(context, type).onColor),
-              child: trailing ?? const Nothing(),
-            ),
-          ],
+          actions: [const Nothing()],
         );
 
   static ZetaColorSwatch _backgroundColorFromType(BuildContext context, ZetaBannerStatus type) {