From fe558a066a806054fc45799a2d6f7f0f7446e37c Mon Sep 17 00:00:00 2001 From: Ashita Prasad Date: Mon, 16 Dec 2024 03:24:57 +0530 Subject: [PATCH] Migrate to ADFilledButton & ADTextButton --- lib/widgets/button_copy.dart | 13 ++-- lib/widgets/button_discord.dart | 13 ++-- lib/widgets/button_repo.dart | 24 ++----- lib/widgets/button_save_download.dart | 22 +++---- lib/widgets/button_send.dart | 51 +++++++-------- .../lib/tokens/measurements.dart | 4 ++ .../lib/widgets/button_filled.dart | 65 +++++++++++++++++++ .../lib/widgets/button_icon.dart | 3 +- .../lib/widgets/button_text.dart | 38 +++++++++++ .../lib/widgets/widgets.dart | 2 + 10 files changed, 158 insertions(+), 77 deletions(-) create mode 100644 packages/apidash_design_system/lib/widgets/button_filled.dart create mode 100644 packages/apidash_design_system/lib/widgets/button_text.dart diff --git a/lib/widgets/button_copy.dart b/lib/widgets/button_copy.dart index b875d220..7c401d73 100644 --- a/lib/widgets/button_copy.dart +++ b/lib/widgets/button_copy.dart @@ -16,10 +16,6 @@ class CopyButton extends StatelessWidget { @override Widget build(BuildContext context) { var sm = ScaffoldMessenger.of(context); - const icon = Icon( - Icons.content_copy, - size: 18, - ); onPressed() async { await Clipboard.setData(ClipboardData(text: toCopy)); sm.hideCurrentSnackBar(); @@ -27,14 +23,15 @@ class CopyButton extends StatelessWidget { } return showLabel - ? TextButton.icon( + ? ADTextButton( + icon: Icons.content_copy, + iconSize: kButtonIconSizeLarge, + label: kLabelCopy, onPressed: onPressed, - icon: icon, - label: const Text(kLabelCopy), ) : ADIconButton( icon: Icons.content_copy, - iconSize: 18, + iconSize: kButtonIconSizeLarge, tooltip: kLabelCopy, color: Theme.of(context).colorScheme.primary, visualDensity: VisualDensity.compact, diff --git a/lib/widgets/button_discord.dart b/lib/widgets/button_discord.dart index 54af85fe..8c8a6a1b 100644 --- a/lib/widgets/button_discord.dart +++ b/lib/widgets/button_discord.dart @@ -14,18 +14,13 @@ class DiscordButton extends StatelessWidget { @override Widget build(BuildContext context) { var label = text ?? 'Discord Server'; - return FilledButton.icon( + return ADFilledButton( + icon: Icons.discord, + iconSize: kButtonIconSizeLarge, + label: label, onPressed: () { launchUrl(Uri.parse(kDiscordUrl)); }, - icon: const Icon( - Icons.discord, - size: 20.0, - ), - label: Text( - label, - style: kTextStyleButton, - ), ); } } diff --git a/lib/widgets/button_repo.dart b/lib/widgets/button_repo.dart index 15bfb99b..ee46f4f0 100644 --- a/lib/widgets/button_repo.dart +++ b/lib/widgets/button_repo.dart @@ -16,29 +16,13 @@ class RepoButton extends StatelessWidget { @override Widget build(BuildContext context) { var label = text ?? "GitHub"; - if (icon == null) { - return FilledButton( - onPressed: () { - launchUrl(Uri.parse(kGitUrl)); - }, - child: Text( - label, - style: kTextStyleButton, - ), - ); - } - return FilledButton.icon( + return ADFilledButton( + icon: icon, + iconSize: kButtonIconSizeLarge, + label: label, onPressed: () { launchUrl(Uri.parse(kGitUrl)); }, - icon: Icon( - icon, - size: 20.0, - ), - label: Text( - label, - style: kTextStyleButton, - ), ); } } diff --git a/lib/widgets/button_save_download.dart b/lib/widgets/button_save_download.dart index f481e7b1..277a2050 100644 --- a/lib/widgets/button_save_download.dart +++ b/lib/widgets/button_save_download.dart @@ -1,3 +1,4 @@ +import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:apidash/utils/utils.dart'; @@ -22,11 +23,6 @@ class SaveInDownloadsButton extends StatelessWidget { @override Widget build(BuildContext context) { var sm = ScaffoldMessenger.of(context); - const icon = Icon( - Icons.download, - size: 18, - ); - const label = kLabelDownload; final onPressed = (content != null) ? () => saveToDownloads( sm, @@ -38,17 +34,19 @@ class SaveInDownloadsButton extends StatelessWidget { : null; return showLabel - ? TextButton.icon( + ? ADTextButton( + icon: Icons.download, + iconSize: kButtonIconSizeLarge, + label: kLabelDownload, onPressed: onPressed, - icon: icon, - label: const Text(label), ) - : IconButton( - tooltip: label, + : ADIconButton( + icon: Icons.download, + iconSize: kButtonIconSizeLarge, + onPressed: onPressed, + tooltip: kLabelDownload, color: Theme.of(context).colorScheme.primary, visualDensity: VisualDensity.compact, - onPressed: onPressed, - icon: icon, ); } } diff --git a/lib/widgets/button_send.dart b/lib/widgets/button_send.dart index bb5b5c1c..9434e949 100644 --- a/lib/widgets/button_send.dart +++ b/lib/widgets/button_send.dart @@ -16,34 +16,31 @@ class SendButton extends StatelessWidget { @override Widget build(BuildContext context) { - return FilledButton( + return ADFilledButton( onPressed: isWorking ? onCancel : onTap, - child: Row( - mainAxisSize: MainAxisSize.min, - children: isWorking - ? const [ - Text( - kLabelCancel, - style: kTextStyleButton, - ), - kHSpacer10, - Icon( - size: 16, - Icons.cancel, - ) - ] - : const [ - Text( - kLabelSend, - style: kTextStyleButton, - ), - kHSpacer10, - Icon( - size: 16, - Icons.send, - ), - ], - ), + items: isWorking + ? const [ + Text( + kLabelCancel, + style: kTextStyleButton, + ), + kHSpacer10, + Icon( + size: 16, + Icons.cancel, + ) + ] + : const [ + Text( + kLabelSend, + style: kTextStyleButton, + ), + kHSpacer10, + Icon( + size: 16, + Icons.send, + ), + ], ); } } diff --git a/packages/apidash_design_system/lib/tokens/measurements.dart b/packages/apidash_design_system/lib/tokens/measurements.dart index 7a535cab..bbcb1da8 100644 --- a/packages/apidash_design_system/lib/tokens/measurements.dart +++ b/packages/apidash_design_system/lib/tokens/measurements.dart @@ -10,6 +10,10 @@ enum WindowWidth { final double value; } +const kButtonIconSizeSmall = 14.0; +const kButtonIconSizeMedium = 16.0; +const kButtonIconSizeLarge = 18.0; + const kBorderRadius4 = BorderRadius.all(Radius.circular(4)); const kBorderRadius6 = BorderRadius.all(Radius.circular(6)); const kBorderRadius8 = BorderRadius.all(Radius.circular(8)); diff --git a/packages/apidash_design_system/lib/widgets/button_filled.dart b/packages/apidash_design_system/lib/widgets/button_filled.dart new file mode 100644 index 00000000..2c2792e2 --- /dev/null +++ b/packages/apidash_design_system/lib/widgets/button_filled.dart @@ -0,0 +1,65 @@ +import 'package:flutter/material.dart'; +import '../tokens/tokens.dart'; + +class ADFilledButton extends StatelessWidget { + const ADFilledButton({ + super.key, + this.icon, + this.iconSize, + this.label, + this.items, + this.isTonal = false, + this.visualDensity, + this.onPressed, + }); + + final IconData? icon; + final double? iconSize; + final String? label; + final List? items; + final bool isTonal; + final VisualDensity? visualDensity; + final VoidCallback? onPressed; + + @override + Widget build(BuildContext context) { + Widget child = Text( + label ?? "", + style: kTextStyleButton, + ); + if (items != null) { + child = Row( + mainAxisSize: MainAxisSize.min, + children: items ?? [], + ); + } + + return (icon != null && items == null) + ? (isTonal + ? FilledButton.tonalIcon( + icon: Icon( + icon, + size: iconSize ?? kButtonIconSizeMedium, + ), + label: child, + onPressed: onPressed, + ) + : FilledButton.icon( + icon: Icon( + icon, + size: iconSize ?? kButtonIconSizeMedium, + ), + label: child, + onPressed: onPressed, + )) + : (isTonal + ? FilledButton.tonal( + onPressed: onPressed, + child: child, + ) + : FilledButton( + onPressed: onPressed, + child: child, + )); + } +} diff --git a/packages/apidash_design_system/lib/widgets/button_icon.dart b/packages/apidash_design_system/lib/widgets/button_icon.dart index a2c5ea1c..7b14587c 100644 --- a/packages/apidash_design_system/lib/widgets/button_icon.dart +++ b/packages/apidash_design_system/lib/widgets/button_icon.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import '../tokens/tokens.dart'; class ADIconButton extends StatelessWidget { const ADIconButton({ @@ -24,7 +25,7 @@ class ADIconButton extends StatelessWidget { tooltip: tooltip, icon: Icon( icon, - size: iconSize ?? 16, + size: iconSize ?? kButtonIconSizeMedium, ), color: color, visualDensity: visualDensity, diff --git a/packages/apidash_design_system/lib/widgets/button_text.dart b/packages/apidash_design_system/lib/widgets/button_text.dart new file mode 100644 index 00000000..4762e6d4 --- /dev/null +++ b/packages/apidash_design_system/lib/widgets/button_text.dart @@ -0,0 +1,38 @@ +import 'package:flutter/material.dart'; +import '../tokens/tokens.dart'; + +class ADTextButton extends StatelessWidget { + const ADTextButton({ + super.key, + this.icon, + this.iconSize, + this.label, + this.onPressed, + }); + + final IconData? icon; + final double? iconSize; + final String? label; + final VoidCallback? onPressed; + + @override + Widget build(BuildContext context) { + var child = Text( + label ?? "", + style: kTextStyleButton, + ); + return icon != null + ? TextButton.icon( + icon: Icon( + icon, + size: iconSize ?? kButtonIconSizeMedium, + ), + label: child, + onPressed: onPressed, + ) + : TextButton( + onPressed: onPressed, + child: child, + ); + } +} diff --git a/packages/apidash_design_system/lib/widgets/widgets.dart b/packages/apidash_design_system/lib/widgets/widgets.dart index 7b1f06a3..955babce 100644 --- a/packages/apidash_design_system/lib/widgets/widgets.dart +++ b/packages/apidash_design_system/lib/widgets/widgets.dart @@ -1,4 +1,6 @@ +export 'button_filled.dart'; export 'button_icon.dart'; +export 'button_text.dart'; export 'checkbox.dart'; export 'dropdown.dart'; export 'popup_menu.dart';