Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(UX-1310): Added more customization options to ZetaListItem #205

Merged
merged 4 commits into from
Nov 11, 2024
Merged

feat(UX-1310): Added more customization options to ZetaListItem #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
acd6c2c
feat: Added more customization options to ZetaListItem
mikecoomber Nov 11, 2024
35ae61d
chore(automated): Lint commit and format
invalid-email-address Nov 11, 2024
a043fc3
fixed avatar initials text scaling
mikecoomber Nov 11, 2024
a891ff1
chore(automated): Lint commit and format
invalid-email-address Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions example/lib/pages/components/avatar_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,25 @@ class AvatarExample extends StatelessWidget {
);

return ExampleScaffold(
actions: [
ZetaAvatar.initials(
initials: 'W W',
size: ZetaAvatarSize.xxs,
backgroundColor: Zeta.of(context).colors.green,
),
],
name: AvatarExample.name,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SingleChildScrollView(
padding: EdgeInsets.all(Zeta.of(context).spacing.medium),
child: Column(
children: [
ZetaAvatar.initials(
initials: 'WW',
size: ZetaAvatarSize.xxs,
backgroundColor: Zeta.of(context).colors.green,
),
Column(
children: [
Text(
Expand Down
8 changes: 8 additions & 0 deletions example/lib/pages/components/list_item_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,14 @@ class _ListItemExampleState extends State<ListItemExample> {
primaryText: 'List Item',
secondaryText: 'Descriptor',
)),
_buildListItem(
'Custom Title',
ZetaListItem(
title: ZetaButton(
label: 'Custom Title Button',
onPressed: () {},
),
)),
_buildListItem(
'Icon Left',
ZetaListItem(primaryText: 'List Item', leading: ZetaIcon(ZetaIcons.star)),
Expand Down
30 changes: 13 additions & 17 deletions lib/src/components/avatars/avatar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,15 +228,17 @@ class ZetaAvatar extends ZetaStatelessWidget {
final innerChild = image ??
(initials != null
? Center(
child: Text(
initials!,
style: initialTextStyle ??
TextStyle(
fontSize: size.fontSize(context),
letterSpacing: Zeta.of(context).spacing.none,
color: backgroundColor?.onColor,
fontWeight: FontWeight.w500,
),
child: FittedBox(
child: Text(
initials!,
style: initialTextStyle ??
TextStyle(
fontSize: size.fontSize(context),
letterSpacing: Zeta.of(context).spacing.none,
color: backgroundColor?.onColor,
fontWeight: FontWeight.w500,
),
),
),
)
: null);
Expand Down Expand Up @@ -280,20 +282,14 @@ class ZetaAvatar extends ZetaStatelessWidget {
border: Border.all(color: borderColor!, width: borderSize(context)),
borderRadius: Zeta.of(context).radius.full,
),
child: ClipRRect(
borderRadius: Zeta.of(context).radius.full,
child: innerContent,
),
child: innerContent,
)
: DecoratedBox(
decoration: BoxDecoration(
borderRadius: Zeta.of(context).radius.full,
color: backgroundColor ?? zetaColors.surfaceHover,
),
child: ClipRRect(
borderRadius: Zeta.of(context).radius.full,
child: innerContent,
),
child: innerContent,
),
),
),
Expand Down
31 changes: 26 additions & 5 deletions lib/src/components/list_item/dropdown_list_item.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,40 @@ class ZetaDropdownListItem extends ZetaStatefulWidget {
const ZetaDropdownListItem({
super.key,
super.rounded,
required this.primaryText,
required this.items,
this.title,
this.primaryText,
this.secondaryText,
this.primaryTextStyle,
this.secondaryTextStyle,
this.expanded = false,
this.leading,
this.showDivider,
this.semanticLabel,
});
}) : assert(
(title != null && primaryText == null && secondaryText == null) ||
(title == null && (primaryText != null || secondaryText != null)),
'Provide one of either title or primaryText/secondaryText',
);

/// The list of [ZetaListItem]s contained within the dropdown.
final List<ZetaListItem> items;

/// {@macro list-item-title}
final Widget? title;

/// {@macro list-item-primary-text}
final String primaryText;
final String? primaryText;

/// {@macro list-item-primary-text-style}
final TextStyle? primaryTextStyle;

/// {@macro list-item-secondary-text}
final String? secondaryText;

/// {@macro list-item-secondary-text-style}
final TextStyle? secondaryTextStyle;

/// {@macro list-item-leading}
final Widget? leading;

Expand Down Expand Up @@ -61,7 +77,9 @@ class ZetaDropdownListItem extends ZetaStatefulWidget {
..add(DiagnosticsProperty<bool>('expanded', expanded))
..add(DiagnosticsProperty<bool>('rounded', rounded))
..add(DiagnosticsProperty<bool?>('showDivider', showDivider))
..add(StringProperty('semanticLabel', semanticLabel));
..add(StringProperty('semanticLabel', semanticLabel))
..add(DiagnosticsProperty<TextStyle?>('primaryTextStyle', primaryTextStyle))
..add(DiagnosticsProperty<TextStyle?>('secondaryTextStyle', secondaryTextStyle));
}
}

Expand Down Expand Up @@ -125,7 +143,7 @@ class _ZetaDropdownListItemState extends State<ZetaDropdownListItem> with Single
child: Semantics(
button: true,
selected: _expanded,
label: widget.semanticLabel ?? (widget.primaryText + (widget.secondaryText ?? '')),
label: widget.semanticLabel ?? ((widget.primaryText ?? '') + (widget.secondaryText ?? '')),
// DecoratedBox does not correctly animated the border when the widget expands.
// ignore: use_decorated_box
child: Container(
Expand All @@ -140,8 +158,11 @@ class _ZetaDropdownListItemState extends State<ZetaDropdownListItem> with Single
children: [
ExcludeSemantics(
child: ZetaListItem(
title: widget.title,
primaryText: widget.primaryText,
primaryTextStyle: widget.primaryTextStyle,
secondaryText: widget.secondaryText,
secondaryTextStyle: widget.secondaryTextStyle,
leading: widget.leading,
onTap: _onTap,
showDivider: false,
Expand Down
106 changes: 80 additions & 26 deletions lib/src/components/list_item/list_item.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,22 +61,32 @@ class ZetaList extends ZetaStatelessWidget {
class ZetaListItem extends ZetaStatelessWidget {
/// Creates a [ZetaListItem].
const ZetaListItem({
required this.primaryText,
this.title,
this.primaryText,
this.secondaryText,
this.primaryTextStyle,
this.secondaryTextStyle,
this.leading,
this.onTap,
this.showDivider,
this.trailing,
super.key,
super.rounded,
});
}) : assert(
(title != null && primaryText == null && secondaryText == null) ||
(title == null && primaryText != null || secondaryText != null),
'Provide one of either title or primaryText/secondaryText',
);

/// Creates a [ZetaListItem] with a [ZetaSwitch] in the trailing widget space.
ZetaListItem.toggle({
super.key,
super.rounded,
required this.primaryText,
this.title,
this.primaryText,
this.secondaryText,
this.primaryTextStyle,
this.secondaryTextStyle,
this.showDivider,
this.leading,
bool value = false,
Expand All @@ -86,14 +96,22 @@ class ZetaListItem extends ZetaStatelessWidget {
onChanged: onChanged,
variant: ZetaSwitchType.android,
),
onTap = (() => onChanged?.call(!value));
onTap = (() => onChanged?.call(!value)),
assert(
(title != null && primaryText == null && secondaryText == null) ||
(title == null && (primaryText != null || secondaryText != null)),
'Provide one of either title or primaryText/secondaryText',
);

/// Creates a [ZetaListItem] with a [ZetaCheckbox] in the trailing widget space.
ZetaListItem.checkbox({
super.key,
super.rounded,
required this.primaryText,
this.title,
this.primaryText,
this.secondaryText,
this.primaryTextStyle,
this.secondaryTextStyle,
this.leading,
this.showDivider,
bool value = false,
Expand All @@ -105,13 +123,21 @@ class ZetaListItem extends ZetaStatelessWidget {
useIndeterminate: useIndeterminate,
rounded: rounded,
),
onTap = (() => onChanged?.call(!value));
onTap = (() => onChanged?.call(!value)),
assert(
(title != null && primaryText == null && secondaryText == null) ||
(title == null && (primaryText != null || secondaryText != null)),
'Provide one of either title or primaryText/secondaryText',
);

/// Creates a [ZetaListItem] with a [ZetaRadio] in the trailing widget space.
ZetaListItem.radio({
required this.primaryText,
required dynamic value,
this.title,
this.primaryText,
this.secondaryText,
this.primaryTextStyle,
this.secondaryTextStyle,
this.leading,
this.showDivider,
dynamic groupValue,
Expand All @@ -123,7 +149,12 @@ class ZetaListItem extends ZetaStatelessWidget {
groupValue: groupValue,
onChanged: onChanged,
),
onTap = (() => onChanged?.call(value));
onTap = (() => onChanged?.call(value)),
assert(
(title != null && primaryText == null && secondaryText == null) ||
(title == null && (primaryText != null || secondaryText != null)),
'Provide one of either title or primaryText/secondaryText',
);

/// {@template list-item-leading}
/// A widget to display before the title;
Expand All @@ -133,16 +164,34 @@ class ZetaListItem extends ZetaStatelessWidget {
/// Called when user taps on the [ZetaListItem].
final VoidCallback? onTap;

/// {@template list-item-title}
/// The primary content of the list item.
/// Cannot be provided with [primaryText] or [secondaryText].
/// {@endtemplate}
final Widget? title;

/// {@template list-item-primary-text}
/// The primary text of the [ZetaListItem].
/// Cannot be provided with [title].
/// {@endtemplate}
final String? primaryText;

/// {@template list-item-primary-text-style}
/// The text style applied to [primaryText].
/// {@endtemplate}
final String primaryText;
final TextStyle? primaryTextStyle;

/// {@template list-item-secondary-text}
/// The secondary text of the [ZetaListItem].
/// Cannot be provided with [title].
/// {@endtemplate}
final String? secondaryText;

/// {@template list-item-secondary-text-style}
/// The text style applied to [secondaryText].
/// {@endtemplate}
final TextStyle? secondaryTextStyle;

/// A widget to display after the primary text.
/// If this is a checkbox, radio button, or switch, use the relevant named constructor.
final Widget? trailing;
Expand All @@ -162,7 +211,9 @@ class ZetaListItem extends ZetaStatelessWidget {
..add(DiagnosticsProperty<Widget>('trailing', trailing))
..add(StringProperty('label', primaryText))
..add(StringProperty('secondaryText', secondaryText))
..add(DiagnosticsProperty<bool?>('showDivider', showDivider));
..add(DiagnosticsProperty<bool?>('showDivider', showDivider))
..add(DiagnosticsProperty<TextStyle?>('secondaryTextStyle', secondaryTextStyle))
..add(DiagnosticsProperty<TextStyle?>('primaryTextStyle', primaryTextStyle));
}

@override
Expand Down Expand Up @@ -209,23 +260,26 @@ class ZetaListItem extends ZetaStatelessWidget {
child: leadingWidget,
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
primaryText,
maxLines: 1,
overflow: TextOverflow.ellipsis,
child: title ??
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (primaryText != null && primaryText!.isNotEmpty)
Text(
primaryText!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: primaryTextStyle,
),
if (secondaryText != null && secondaryText!.isNotEmpty)
Text(
secondaryText!,
style: secondaryTextStyle ?? ZetaTextStyles.bodySmall,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
if (secondaryText != null && secondaryText!.isNotEmpty)
Text(
secondaryText!,
style: ZetaTextStyles.bodySmall,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
Expand Down