From 57f4ec3c49193e32c33bfd4503542ba86158cf4f Mon Sep 17 00:00:00 2001 From: thelukewalton Date: Fri, 20 Dec 2024 16:19:13 +0000 Subject: [PATCH] feat(UX-1352): Use dart enhanced enums --- lib/src/components/avatars/avatar.dart | 116 +++++++------- lib/src/components/badges/priority_pill.dart | 30 ++-- lib/src/components/buttons/button_style.dart | 27 ++-- lib/src/components/chat_item/chat_item.dart | 86 ++++++++-- lib/src/components/fabs/fab.dart | 148 +++++++++--------- .../in_page_banner/in_page_banner.dart | 6 +- lib/src/theme/contrast.dart | 6 +- lib/src/utils/zeta.dart | 2 +- 8 files changed, 227 insertions(+), 194 deletions(-) diff --git a/lib/src/components/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart index 2f54449d..bf13baa5 100644 --- a/lib/src/components/avatars/avatar.dart +++ b/lib/src/components/avatars/avatar.dart @@ -31,7 +31,55 @@ enum ZetaAvatarSize { xxs, /// [xxxs] 24 pixels - xxxs, + xxxs; + + double _pixelSize(BuildContext context) => ZetaAvatar.pixelSize(context, this); + + double _borderSize(BuildContext context) { + // TODO(UX-1304): Awaiting updated design specs for border size + switch (this) { + case ZetaAvatarSize.xxxl: + return 11.12; + case ZetaAvatarSize.xxl: + return 6.67; + case ZetaAvatarSize.xl: + return 4.45; + case ZetaAvatarSize.l: + return 3.56; + case ZetaAvatarSize.m: + return 2.66; + case ZetaAvatarSize.s: + return 2.22; + case ZetaAvatarSize.xs: + return 2; + case ZetaAvatarSize.xxs: + return 1.78; + case ZetaAvatarSize.xxxs: + return 1.33; + } + } + + double _fontSize(BuildContext context) => ZetaAvatar.fontSize(context, this); + + TextStyle _labelStyle(BuildContext context) { + switch (this) { + case ZetaAvatarSize.xxxl: + return ZetaTextStyles.displaySmall; + case ZetaAvatarSize.xxl: + case ZetaAvatarSize.xl: + return ZetaTextStyles.bodyLarge; + case ZetaAvatarSize.l: + return ZetaTextStyles.bodyMedium; + case ZetaAvatarSize.m: + return ZetaTextStyles.bodySmall; + case ZetaAvatarSize.s: + case ZetaAvatarSize.xs: + case ZetaAvatarSize.xxs: + return ZetaTextStyles.bodyXSmall; + case ZetaAvatarSize.xxxs: + return ZetaTextStyles.bodyXSmall; + } + } } /// An avatar is a visual representation of a user or entity. @@ -223,7 +271,7 @@ class ZetaAvatar extends ZetaStatelessWidget { Widget build(BuildContext context) { final zetaColors = Zeta.of(context).colors; - final borderSize = size.borderSize; + final borderSize = size._borderSize; final innerChild = image ?? (initials != null @@ -233,7 +281,7 @@ class ZetaAvatar extends ZetaStatelessWidget { initials!, style: initialTextStyle ?? TextStyle( - fontSize: size.fontSize(context), + fontSize: size._fontSize(context), letterSpacing: Zeta.of(context).spacing.none, color: backgroundColor?.onColor, fontWeight: FontWeight.w500, @@ -248,7 +296,7 @@ class ZetaAvatar extends ZetaStatelessWidget { child: innerChild, ); - final pSize = size.pixelSize(context); + final pSize = size._pixelSize(context); return ZetaRoundedScope( rounded: context.rounded, @@ -327,7 +375,7 @@ class ZetaAvatar extends ZetaStatelessWidget { child: Text( label!, style: labelTextStyle ?? - size.labelStyle(context).copyWith( + size._labelStyle(context).copyWith( color: zetaColors.mainSubtle, ), maxLines: labelMaxLines, @@ -394,60 +442,6 @@ class ZetaAvatar extends ZetaStatelessWidget { } } -extension on ZetaAvatarSize { - double pixelSize(BuildContext context) { - return ZetaAvatar.pixelSize(context, this); - } - - double borderSize(BuildContext context) { - // TODO(UX-1304): Awaiting updated design specs for border size - switch (this) { - case ZetaAvatarSize.xxxl: - return 11.12; - case ZetaAvatarSize.xxl: - return 6.67; - case ZetaAvatarSize.xl: - return 4.45; - case ZetaAvatarSize.l: - return 3.56; - case ZetaAvatarSize.m: - return 2.66; - case ZetaAvatarSize.s: - return 2.22; - case ZetaAvatarSize.xs: - return 2; - case ZetaAvatarSize.xxs: - return 1.78; - case ZetaAvatarSize.xxxs: - return 1.33; - } - } - - double fontSize(BuildContext context) { - return ZetaAvatar.fontSize(context, this); - } - - TextStyle labelStyle(BuildContext context) { - switch (this) { - case ZetaAvatarSize.xxxl: - return ZetaTextStyles.displaySmall; - case ZetaAvatarSize.xxl: - case ZetaAvatarSize.xl: - return ZetaTextStyles.bodyLarge; - case ZetaAvatarSize.l: - return ZetaTextStyles.bodyMedium; - case ZetaAvatarSize.m: - return ZetaTextStyles.bodySmall; - case ZetaAvatarSize.s: - case ZetaAvatarSize.xs: - case ZetaAvatarSize.xxs: - return ZetaTextStyles.bodyXSmall; - case ZetaAvatarSize.xxxs: - return ZetaTextStyles.bodyXSmall; - } - } -} - /// Enum of types for [ZetaAvatarBadge] enum ZetaAvatarBadgeType { /// Shows an icon on [ZetaAvatarBadge]. Defaults to [ZetaIcons.star]. @@ -594,11 +588,11 @@ class ZetaAvatarBadge extends StatelessWidget { } double _getContainerSize(BuildContext context) { - return size.pixelSize(context) / 3; + return size._pixelSize(context) / 3; } double _getBorderSize(BuildContext context) { - return size.pixelSize(context) / 48; + return size._pixelSize(context) / 48; } @override diff --git a/lib/src/components/badges/priority_pill.dart b/lib/src/components/badges/priority_pill.dart index 6e107e42..1b92d041 100644 --- a/lib/src/components/badges/priority_pill.dart +++ b/lib/src/components/badges/priority_pill.dart @@ -17,20 +17,9 @@ enum ZetaPriorityPillType { medium, /// Sets the default color to `ZetaColors.green` and index to '3'. - low, -} - -/// The size of [ZetaPriorityPill]. -enum ZetaPriorityPillSize { - /// Large size contains both badge and lozenge. - large, - - /// Small size contains badge only. - small, -} + low; -extension on ZetaPriorityPillType { - Color badgeColor(BuildContext context) { + Color _badgeColor(BuildContext context) { final colors = Zeta.of(context).colors; switch (this) { case ZetaPriorityPillType.urgent: @@ -44,7 +33,7 @@ extension on ZetaPriorityPillType { } } - Color lozengeColor(BuildContext context) { + Color _lozengeColor(BuildContext context) { final colors = Zeta.of(context).colors; switch (this) { case ZetaPriorityPillType.urgent: @@ -59,6 +48,15 @@ extension on ZetaPriorityPillType { } } +/// The size of [ZetaPriorityPill]. +enum ZetaPriorityPillSize { + /// Large size contains both badge and lozenge. + large, + + /// Small size contains badge only. + small, +} + /// This badge is used to indicate the order of importance. /// {@category Components} /// @@ -123,8 +121,8 @@ class ZetaPriorityPill extends ZetaStatelessWidget { @override Widget build(BuildContext context) { - final Color badgeColor = customColor?.shade60 ?? type.badgeColor(context); - final Color lozengeColor = customColor?.shade10 ?? type.lozengeColor(context); + final Color badgeColor = customColor?.shade60 ?? type._badgeColor(context); + final Color lozengeColor = customColor?.shade10 ?? type._lozengeColor(context); final size = this.size == ZetaPriorityPillSize.small ? Zeta.of(context).spacing.xl : Zeta.of(context).spacing.xl_3; final label = (this.label ?? priority) ?? type.name.capitalize(); diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart index 029d3193..8c3d18e4 100644 --- a/lib/src/components/buttons/button_style.dart +++ b/lib/src/components/buttons/button_style.dart @@ -31,13 +31,9 @@ enum ZetaButtonType { /// Background: None. /// Border: None. /// Foreground color: Primary; defaults to blue. - text, -} + text; -/// Button utility functions for styling -extension ButtonFunctions on ZetaButtonType { - /// Returns background color based on [ZetaButtonType] - Color backgroundColor(ZetaColors colors) { + Color _backgroundColor(ZetaColors colors) { switch (this) { case ZetaButtonType.primary: return colors.statePrimaryEnabled; @@ -55,7 +51,7 @@ extension ButtonFunctions on ZetaButtonType { } /// Returns hover color based on [ZetaButtonType] - Color hoverColor(ZetaColors colors) { + Color _hoverColor(ZetaColors colors) { switch (this) { case ZetaButtonType.primary: return colors.statePrimaryHover; @@ -73,7 +69,7 @@ extension ButtonFunctions on ZetaButtonType { } /// Returns pressed color based on [ZetaButtonType] - Color pressedColor(ZetaColors colors) { + Color _pressedColor(ZetaColors colors) { switch (this) { case ZetaButtonType.primary: return colors.statePrimarySelected; @@ -91,10 +87,7 @@ extension ButtonFunctions on ZetaButtonType { } /// Returns if button has border - bool get border => this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle; - - ///Returns if button is solid - bool get solid => index < 4; + bool get _border => this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle; } ///Border utility functions @@ -119,9 +112,9 @@ ButtonStyle buttonStyle( ZetaButtonType type, ) { final ZetaColors colors = Zeta.of(context).colors; - final Color backgroundColor = type.backgroundColor(colors); - final Color backgroundColorHover = type.hoverColor(colors); - final Color backgroundColorPressed = type.pressedColor(colors); + final Color backgroundColor = type._backgroundColor(colors); + final Color backgroundColorHover = type._hoverColor(colors); + final Color backgroundColorPressed = type._pressedColor(colors); return ButtonStyle( minimumSize: WidgetStateProperty.all(Size.square(Zeta.of(context).spacing.xl_4)), @@ -165,14 +158,14 @@ ButtonStyle buttonStyle( return null; }), side: WidgetStateProperty.resolveWith((Set states) { - if (type.border && states.contains(WidgetState.disabled)) { + if (type._border && states.contains(WidgetState.disabled)) { return BorderSide(color: colors.borderDisabled); } // TODO(UX-1134): This removes a defualt border when focused, rather than adding a second border when focused. if (states.contains(WidgetState.focused)) { return BorderSide(color: colors.borderPrimary, width: ZetaBorders.medium); } - if (type.border) { + if (type._border) { return BorderSide( color: type == ZetaButtonType.outline ? colors.borderPrimaryMain : colors.borderSubtle, ); diff --git a/lib/src/components/chat_item/chat_item.dart b/lib/src/components/chat_item/chat_item.dart index 391ca631..b5cb93fa 100644 --- a/lib/src/components/chat_item/chat_item.dart +++ b/lib/src/components/chat_item/chat_item.dart @@ -176,7 +176,7 @@ class ZetaChatItem extends ZetaStatelessWidget { : actions, ), child: ColoredBox( - color: highlighted ? colors.primitives.blue.shade10 : colors.surfaceDefault, + color: highlighted ? colors.surfaceSelected : colors.surfaceDefault, child: Material( color: Colors.transparent, child: InkWell( @@ -219,7 +219,7 @@ class ZetaChatItem extends ZetaStatelessWidget { style: (highlighted ? ZetaTextStyles.labelLarge : ZetaTextStyles.bodyMedium) - .copyWith(color: colors.textDefault), + .copyWith(color: colors.mainDefault), child: title, ), ), @@ -244,7 +244,7 @@ class ZetaChatItem extends ZetaStatelessWidget { ), child: ZetaIcon( ZetaIcons.error, - color: colors.primitives.cool.shade70, + color: colors.mainSubtle, ), ), if (enabledWarningIcon) @@ -308,7 +308,7 @@ class ZetaChatItem extends ZetaStatelessWidget { ), child: ZetaIcon( starred! ? ZetaIcons.star : ZetaIcons.star_outline, - color: starred! ? colors.primitives.yellow.shade60 : null, + color: starred! ? colors.mainSecondary : null, ), ), ], @@ -353,22 +353,66 @@ class ZetaChatItem extends ZetaStatelessWidget { } } -enum _ZetaSlidableActionType { menuMore, call, ptt, delete, custom } +enum _ZetaSlidableActionType { + menuMore, + call, + ptt, + delete, + custom; -extension on _ZetaSlidableActionType { - ZetaColorSwatch getColor(BuildContext context) { + Color getMainColor(BuildContext context) { final colors = Zeta.of(context).colors; switch (this) { case _ZetaSlidableActionType.menuMore: - return colors.primitives.purple; + return colors.surfaceInfo; case _ZetaSlidableActionType.call: - return colors.primitives.green; + return colors.surfacePositive; case _ZetaSlidableActionType.ptt: - return colors.primitives.blue; + return colors.surfacePrimary; case _ZetaSlidableActionType.delete: - return colors.primitives.red; + return colors.surfaceNegative; case _ZetaSlidableActionType.custom: - return colors.primitives.primary; + return colors.surfacePrimary; + } + } + + Color getBackgroundColor(BuildContext context, {bool pale = false}) { + final colors = Zeta.of(context).colors; + if (pale) { + switch (this) { + case _ZetaSlidableActionType.menuMore: + return colors.surfaceInfoSubtle; + case _ZetaSlidableActionType.call: + return colors.surfacePositiveSubtle; + case _ZetaSlidableActionType.ptt: + return colors.surfacePrimarySubtle; + case _ZetaSlidableActionType.delete: + return colors.surfaceNegativeSubtle; + case _ZetaSlidableActionType.custom: + return colors.surfacePrimarySubtle; + } + } else { + return getMainColor(context); + } + } + + Color getForegroundColor(BuildContext context, {bool pale = false}) { + final colors = Zeta.of(context).colors; + if (pale) { + switch (this) { + case _ZetaSlidableActionType.menuMore: + return colors.surfaceInfo; + case _ZetaSlidableActionType.call: + return colors.surfacePositive; + case _ZetaSlidableActionType.ptt: + return colors.surfacePrimary; + case _ZetaSlidableActionType.delete: + return colors.surfaceNegative; + case _ZetaSlidableActionType.custom: + return colors.surfacePrimary; + } + } else { + return colors.surfaceDefault; } } } @@ -491,6 +535,19 @@ class ZetaSlidableAction extends StatelessWidget { @override Widget build(BuildContext context) { + final Color backgroundColor = customBackgroundColor ?? + (color != null + ? paleColor + ? color!.shade10 + : color!.shade60 + : _type.getBackgroundColor(context, pale: paleColor)); + final Color foregroundColor = customForegroundColor ?? + (color != null + ? paleColor + ? Zeta.of(context).colors.surfaceDefault + : color!.shade10 + : _type.getForegroundColor(context, pale: paleColor)); + return Expanded( child: SizedBox.expand( child: Padding( @@ -503,9 +560,8 @@ class ZetaSlidableAction extends StatelessWidget { child: IconButton( onPressed: () => onPressed?.call(), style: IconButton.styleFrom( - backgroundColor: customBackgroundColor ?? (color ?? _type.getColor(context)).shade(paleColor ? 10 : 60), - foregroundColor: customForegroundColor ?? - (paleColor ? (color ?? _type.getColor(context)).shade60 : Zeta.of(context).colors.surfaceDefault), + backgroundColor: backgroundColor, + foregroundColor: foregroundColor, shape: RoundedRectangleBorder(borderRadius: Zeta.of(context).radius.minimal), side: BorderSide.none, ), diff --git a/lib/src/components/fabs/fab.dart b/lib/src/components/fabs/fab.dart index 2fb14fb4..2e731ef1 100644 --- a/lib/src/components/fabs/fab.dart +++ b/lib/src/components/fabs/fab.dart @@ -13,7 +13,61 @@ enum ZetaFabType { secondary, /// Inverse color scheme. Defaults to dark grey. - inverse + inverse; + + Color _backgroundColor(ZetaColors colors) { + switch (this) { + case ZetaFabType.primary: + return colors.statePrimaryEnabled; + case ZetaFabType.secondary: + return colors.stateSecondaryEnabled; + case ZetaFabType.inverse: + return colors.stateInverseEnabled; + } + } + + Color _foregroundColor(ZetaColors colors) { + switch (this) { + case ZetaFabType.secondary: + return colors.mainDefault; + case ZetaFabType.primary: + case ZetaFabType.inverse: + return colors.mainInverse; + } + } + + Color _hoverColor(ZetaColors colors) { + switch (this) { + case ZetaFabType.primary: + return colors.statePrimaryHover; + case ZetaFabType.secondary: + return colors.stateSecondaryHover; + case ZetaFabType.inverse: + return colors.stateInverseHover; + } + } + + Color _selectedColor(ZetaColors colors) { + switch (this) { + case ZetaFabType.primary: + return colors.statePrimarySelected; + case ZetaFabType.secondary: + return colors.stateSecondarySelected; + case ZetaFabType.inverse: + return colors.stateInverseSelected; + } + } + + Color _iconColors(BuildContext context) { + final zetaColors = Zeta.of(context).colors; + switch (this) { + case ZetaFabType.primary: + case ZetaFabType.inverse: + return zetaColors.mainInverse; + case ZetaFabType.secondary: + return zetaColors.mainDefault; + } + } } ///Defines the size of the floating action button @@ -22,7 +76,19 @@ enum ZetaFabSize { small, /// [large] 96 pixels - large, + large; + + /// Size of icon based on Fab size + double iconSize(BuildContext context) => { + ZetaFabSize.small: Zeta.of(context).spacing.xl_2, + ZetaFabSize.large: Zeta.of(context).spacing.xl_5, + }[this]!; + + /// Padding based on Fab size + double padding(BuildContext context) => { + ZetaFabSize.small: Zeta.of(context).spacing.large, + ZetaFabSize.large: Zeta.of(context).spacing.minimum * 7.5, // TODO(UX-1202): ZetaSpacingBase + }[this]!; } /// Zeta Floating Action Button Component. @@ -115,10 +181,10 @@ class _ZetaFABState extends State { @override Widget build(BuildContext context) { final colors = Zeta.of(context).colors; - final Color backgroundColor = widget.type.backgroundColor(colors); - final Color foregroundColor = widget.type.foregroundColor(colors); - final Color backgroundColorHover = widget.type.hoverColor(colors); - final Color backgroundColorSelected = widget.type.selectedColor(colors); + final Color backgroundColor = widget.type._backgroundColor(colors); + final Color foregroundColor = widget.type._foregroundColor(colors); + final Color backgroundColorHover = widget.type._hoverColor(colors); + final Color backgroundColorSelected = widget.type._selectedColor(colors); return Column( mainAxisSize: MainAxisSize.min, @@ -169,7 +235,7 @@ class _ZetaFABState extends State { widget.icon, size: widget.size.iconSize(context), color: widget.onPressed != null - ? widget.type.iconColors(context) + ? widget.type._iconColors(context) : Zeta.of(context).colors.mainDisabled, ), if (widget.expanded && widget.label != null) @@ -203,62 +269,6 @@ class _ZetaFABState extends State { } } -extension on ZetaFabType { - Color backgroundColor(ZetaColors colors) { - switch (this) { - case ZetaFabType.primary: - return colors.statePrimaryEnabled; - case ZetaFabType.secondary: - return colors.stateSecondaryEnabled; - case ZetaFabType.inverse: - return colors.stateInverseEnabled; - } - } - - Color foregroundColor(ZetaColors colors) { - switch (this) { - case ZetaFabType.secondary: - return colors.mainDefault; - case ZetaFabType.primary: - case ZetaFabType.inverse: - return colors.mainInverse; - } - } - - Color hoverColor(ZetaColors colors) { - switch (this) { - case ZetaFabType.primary: - return colors.statePrimaryHover; - case ZetaFabType.secondary: - return colors.stateSecondaryHover; - case ZetaFabType.inverse: - return colors.stateInverseHover; - } - } - - Color selectedColor(ZetaColors colors) { - switch (this) { - case ZetaFabType.primary: - return colors.statePrimarySelected; - case ZetaFabType.secondary: - return colors.stateSecondarySelected; - case ZetaFabType.inverse: - return colors.stateInverseSelected; - } - } - - Color iconColors(BuildContext context) { - final zetaColors = Zeta.of(context).colors; - switch (this) { - case ZetaFabType.primary: - case ZetaFabType.inverse: - return zetaColors.mainInverse; - case ZetaFabType.secondary: - return zetaColors.mainDefault; - } - } -} - extension on ZetaWidgetBorder { OutlinedBorder buttonShape({required bool isExpanded, required ZetaFabSize size, required BuildContext context}) { if (this == ZetaWidgetBorder.full && !isExpanded) { @@ -282,15 +292,3 @@ extension on ZetaWidgetBorder { ); } } - -extension on ZetaFabSize { - double iconSize(BuildContext context) { - return this == ZetaFabSize.small ? Zeta.of(context).spacing.xl_2 : Zeta.of(context).spacing.xl_5; - } - - double padding(BuildContext context) { - return this == ZetaFabSize.small - ? Zeta.of(context).spacing.large - : Zeta.of(context).spacing.minimum * 7.5; // TODO(UX-1202): ZetaSpacingBase - } -} diff --git a/lib/src/components/in_page_banner/in_page_banner.dart b/lib/src/components/in_page_banner/in_page_banner.dart index 6993ad7d..1b6096d3 100644 --- a/lib/src/components/in_page_banner/in_page_banner.dart +++ b/lib/src/components/in_page_banner/in_page_banner.dart @@ -136,6 +136,7 @@ class ZetaInPageBanner extends ZetaStatelessWidget { } } +/// Extensions on [ZetaWidgetStatus]. extension on ZetaWidgetStatus { IconData get icon { switch (this) { @@ -150,11 +151,8 @@ extension on ZetaWidgetStatus { return ZetaIcons.info; } } -} -/// Extensions on [ZetaWidgetStatus]. -extension on ZetaWidgetStatus { - /// Gets background color from [ZetaWidgetStatus]. + /// Gets background color from [ZetaWidgetStatus] Color backgroundColor(ZetaColors colors) { switch (this) { case ZetaWidgetStatus.info: diff --git a/lib/src/theme/contrast.dart b/lib/src/theme/contrast.dart index 69b2e2ae..d82de289 100644 --- a/lib/src/theme/contrast.dart +++ b/lib/src/theme/contrast.dart @@ -5,12 +5,8 @@ enum ZetaContrast { aa, /// AAA: The contrast ratio should be at least 8.33:1 - aaa, -} + aaa; -/// Extension on [ZetaContrast] to provide color indices -/// for certain accessibility scenarios -extension AccessibilityIndices on ZetaContrast { /// Returns the color index value for a primary depending on the ZetaContrast value. /// /// For [ZetaContrast.aa], it returns 60. diff --git a/lib/src/utils/zeta.dart b/lib/src/utils/zeta.dart index 79138ef4..010970e0 100644 --- a/lib/src/utils/zeta.dart +++ b/lib/src/utils/zeta.dart @@ -20,7 +20,7 @@ class Zeta extends InheritedWidget { this.customThemeId, ZetaPrimitives? customPrimitives, ZetaSemantics? customSemantics, - // String? fontFamily, + // String? fontFamily, TODO(tokens): Add support for custom fonts }) : _customPrimitives = customPrimitives, _customSemantics = customSemantics;