fix(UX-922): FAB-redesign (#181)

* fix: added label to non-expanded fab docs: added expanded knob to widgetbook * tests: changes label find nothing to finds one as non-expanded fab now has a label * fix: added space between button and label fix: constrained the width of the label to 100 so it wraps if it's too long. Let me know if you have a better solution that mine * chore(automated): Lint commit and format --------- Co-authored-by: github-actions <[email protected]>
ZebraDevs · Oct 8, 2024 · 11f266b · 11f266b
1 parent af95815
commit 11f266b
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 53 deletions.
diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart
@@ -139,7 +139,7 @@ class _FabWidgetState extends State<FabWidget> {
           itemBuilder: (context, index) => Text("$index"),
         ),
         floatingActionButton: ZetaFAB(
-          expanded: true,
+          expanded: widget.c.knobs.boolean(label: 'Expanded'),
           scrollController: _scrollController,
           label: widget.c.knobs.string(label: 'Label', initialValue: 'Floating Action Button'),
           onPressed: widget.c.knobs.boolean(label: 'Disabled') ? null : () {},

diff --git a/lib/src/components/fabs/fab.dart b/lib/src/components/fabs/fab.dart
@@ -117,58 +117,79 @@ class _ZetaFABState extends State<ZetaFAB> {
     final colors = widget.type.colors(context);
     final backgroundColor = widget.type == ZetaFabType.inverse ? colors.shade80 : colors.shade60;
 
-    return FilledButton(
-      onPressed: widget.onPressed,
-      focusNode: widget.focusNode,
-      style: ButtonStyle(
-        padding: const WidgetStatePropertyAll(EdgeInsets.zero),
-        shape: WidgetStatePropertyAll(
-          widget.shape.buttonShape(isExpanded: widget.expanded, size: widget.size, context: context),
-        ),
-        backgroundColor: WidgetStateProperty.resolveWith((states) {
-          if (states.contains(WidgetState.disabled)) {
-            return Zeta.of(context).colors.surfaceDisabled;
-          }
-          if (states.contains(WidgetState.pressed)) {
-            return colors.selected;
-          }
-          if (states.contains(WidgetState.hovered)) {
-            return colors.hover;
-          }
-          return backgroundColor;
-        }),
-        side: WidgetStateProperty.resolveWith(
-          (Set<WidgetState> states) {
-            if (states.contains(WidgetState.focused)) {
-              // TODO(UX-1134): This removes a defualt border when focused, rather than adding a second border when focused.
-              return BorderSide(color: Zeta.of(context).colors.blue.shade50, width: ZetaBorders.medium);
-            }
-            return null;
-          },
-        ),
-      ),
-      child: AnimatedContainer(
-        duration: ZetaAnimationLength.normal,
-        child: Padding(
-          padding: widget.expanded
-              ? EdgeInsets.symmetric(
-                  horizontal: Zeta.of(context).spacing.large,
-                  vertical: Zeta.of(context).spacing.medium,
-                )
-              : EdgeInsets.all(widget.size.padding(context)),
-          child: Row(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              ZetaIcon(widget.icon, size: widget.size.iconSize(context)),
-              if (widget.expanded && widget.label != null)
-                Row(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [Text(widget.label!, style: ZetaTextStyles.labelLarge)],
-                ),
-            ].divide(SizedBox(width: Zeta.of(context).spacing.small)).toList(),
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        FilledButton(
+          onPressed: widget.onPressed,
+          focusNode: widget.focusNode,
+          style: ButtonStyle(
+            padding: const WidgetStatePropertyAll(EdgeInsets.zero),
+            shape: WidgetStatePropertyAll(
+              widget.shape.buttonShape(isExpanded: widget.expanded, size: widget.size, context: context),
+            ),
+            backgroundColor: WidgetStateProperty.resolveWith((states) {
+              if (states.contains(WidgetState.disabled)) {
+                return Zeta.of(context).colors.surfaceDisabled;
+              }
+              if (states.contains(WidgetState.pressed)) {
+                return colors.selected;
+              }
+              if (states.contains(WidgetState.hovered)) {
+                return colors.hover;
+              }
+              return backgroundColor;
+            }),
+            side: WidgetStateProperty.resolveWith(
+              (Set<WidgetState> states) {
+                if (states.contains(WidgetState.focused)) {
+                  // TODO(UX-1134): This removes a defualt border when focused, rather than adding a second border when focused.
+                  return BorderSide(color: Zeta.of(context).colors.blue.shade50, width: ZetaBorders.medium);
+                }
+                return null;
+              },
+            ),
+          ),
+          child: AnimatedContainer(
+            duration: ZetaAnimationLength.normal,
+            child: Padding(
+              padding: widget.expanded
+                  ? EdgeInsets.symmetric(
+                      horizontal: Zeta.of(context).spacing.large,
+                      vertical: Zeta.of(context).spacing.medium,
+                    )
+                  : EdgeInsets.all(widget.size.padding(context)),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  ZetaIcon(widget.icon, size: widget.size.iconSize(context)),
+                  if (widget.expanded && widget.label != null)
+                    Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Text(
+                          widget.label!,
+                          style: ZetaTextStyles.labelLarge,
+                        ),
+                      ],
+                    ),
+                ].divide(SizedBox(width: Zeta.of(context).spacing.small)).toList(),
+              ),
+            ),
           ),
         ),
-      ),
+        if (!widget.expanded && widget.label != null)
+          Container(
+            margin: EdgeInsets.only(top: Zeta.of(context).spacing.minimum),
+            width: 100, // TODODE: Is there a better way to do this?
+            alignment: Alignment.center,
+            child: Text(
+              widget.label!,
+              style: ZetaTextStyles.bodyMedium,
+              textAlign: TextAlign.center,
+            ),
+          ),
+      ],
     );
   }
 }

diff --git a/test/src/components/fabs/fab_test.dart b/test/src/components/fabs/fab_test.dart
@@ -186,7 +186,7 @@ void main() {
     expect(diagnostics.finder('focusNode'), 'null');
   });
 
-  testWidgets('Expanded changes when label is null', (WidgetTester tester) async {
+  testWidgets('Label is correct', (WidgetTester tester) async {
     final scrollController = ScrollController();
     StateSetter? setState;
     bool expanded = false;
@@ -209,7 +209,7 @@ void main() {
 
     final labelFinder = find.text('Label');
 
-    expect(labelFinder, findsNothing);
+    expect(labelFinder, findsOne);
 
     setState?.call(() => expanded = true);