Skip to content

Commit

Permalink
feat(UX-1352): Use dart enhanced enums
Browse files Browse the repository at this point in the history
  • Loading branch information
@thelukewalton
thelukewalton committed Dec 20, 2024
1 parent 392c3b8 commit 57f4ec3
Show file tree
Hide file tree
Showing 8 changed files with 227 additions and 194 deletions.
116 changes: 55 additions & 61 deletions lib/src/components/avatars/avatar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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].
Expand Down Expand Up @@ -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
Expand Down
30 changes: 14 additions & 16 deletions lib/src/components/badges/priority_pill.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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:
Expand All @@ -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}
///
Expand Down Expand Up @@ -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();
Expand Down
27 changes: 10 additions & 17 deletions lib/src/components/buttons/button_style.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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
Expand All @@ -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)),
Expand Down Expand Up @@ -165,14 +158,14 @@ ButtonStyle buttonStyle(
return null;
}),
side: WidgetStateProperty.resolveWith((Set<WidgetState> 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,
);
Expand Down
Loading

0 comments on commit 57f4ec3

Please sign in to comment.