Skip to content

Commit

Permalink
fix(UX-1141): Update Spacing tokens (#159)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thelukewalton
thelukewalton authored Aug 27, 2024
1 parent 2733a48 commit d22898f
Show file tree
Hide file tree
Showing 120 changed files with 1,045 additions and 860 deletions.
11 changes: 6 additions & 5 deletions example/lib/pages/assets/icons_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,13 @@ class _IconsExampleState extends State<IconsExample> {
child: Center(
child: Column(
children: [
Text('Zeta Icons v' + zetaIconsVersion, style: ZetaTextStyles.displayMedium).paddingAll(ZetaSpacing.xl_4),
Text('Zeta Icons v' + zetaIconsVersion, style: ZetaTextStyles.displayMedium)
.paddingAll(Zeta.of(context).spacing.xl_4),
Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium)
.paddingAll(ZetaSpacing.xl_4),
.paddingAll(Zeta.of(context).spacing.xl_4),
Wrap(
spacing: ZetaSpacing.xl_4,
runSpacing: ZetaSpacing.xl_4,
spacing: Zeta.of(context).spacing.xl_4,
runSpacing: Zeta.of(context).spacing.xl_4,
children: icons.entries.map(
(e) {
final nameArr = (e.key.split('_')).join(' ').capitalize();
Expand All @@ -57,7 +58,7 @@ class _IconsExampleState extends State<IconsExample> {
fontFamily: context.rounded ? ZetaIcons.familyRound : ZetaIcons.familySharp,
fontPackage: ZetaIcons.package,
),
size: ZetaSpacing.xl_6,
size: Zeta.of(context).spacing.xl_6,
),
Text(
nameArr,
Expand Down
2 changes: 1 addition & 1 deletion example/lib/pages/components/accordion_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ class AccordionExample extends StatelessWidget {
return ExampleScaffold(
name: AccordionExample.name,
child: SingleChildScrollView(
padding: EdgeInsets.all(ZetaSpacing.medium),
padding: EdgeInsets.all(Zeta.of(context).spacing.medium),
child: Column(
children: [
Text('Divider'),
Expand Down
38 changes: 19 additions & 19 deletions example/lib/pages/components/avatar_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class AvatarExample extends StatelessWidget {
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SingleChildScrollView(
padding: EdgeInsets.all(ZetaSpacing.medium),
padding: EdgeInsets.all(Zeta.of(context).spacing.medium),
child: Column(
children: [
Column(
Expand All @@ -36,7 +36,7 @@ class AvatarExample extends StatelessWidget {
children: [
Column(
children: ZetaAvatarSize.values.map((size) {
final height = size.pixelSize;
final height = size.pixelSize(context);
final padding = (height - 14) / 2;
return Column(
children: [
Expand Down Expand Up @@ -121,7 +121,7 @@ class AvatarExample extends StatelessWidget {
children: [
Column(
children: ZetaAvatarSize.values.map((size) {
final height = size.pixelSize;
final height = size.pixelSize(context);
final padding = (height - 14) / 2;
return Column(
children: [
Expand Down Expand Up @@ -181,7 +181,7 @@ class AvatarExample extends StatelessWidget {
children: [
Column(
children: ZetaAvatarSize.values.map((size) {
final height = size.pixelSize;
final height = size.pixelSize(context);
final padding = (height - 14) / 2;
return Column(
children: [
Expand Down Expand Up @@ -272,7 +272,7 @@ class AvatarExample extends StatelessWidget {
children: [
Column(
children: ZetaAvatarSize.values.map((size) {
final height = size.pixelSize;
final height = size.pixelSize(context);
final padding = (height - 14) / 2;
return Column(
children: [
Expand Down Expand Up @@ -334,7 +334,7 @@ class AvatarExample extends StatelessWidget {
children: [
Column(
children: ZetaAvatarSize.values.map((size) {
final height = size.pixelSize;
final height = size.pixelSize(context);
final padding = (height - 14) / 2;
return Column(
children: [
Expand Down Expand Up @@ -425,7 +425,7 @@ class AvatarExample extends StatelessWidget {
children: [
Column(
children: ZetaAvatarSize.values.map((size) {
final height = size.pixelSize;
final height = size.pixelSize(context);
final padding = (height - 14) / 2;
return Column(
children: [
Expand Down Expand Up @@ -487,7 +487,7 @@ class AvatarExample extends StatelessWidget {
children: [
Column(
children: ZetaAvatarSize.values.map((size) {
final height = size.pixelSize;
final height = size.pixelSize(context);
final padding = (height - 14) / 2;
return Column(
children: [
Expand Down Expand Up @@ -572,7 +572,7 @@ class AvatarExample extends StatelessWidget {
),
],
),
].divide(const SizedBox(height: ZetaSpacing.xl_2)).toList(),
].divide(SizedBox(height: Zeta.of(context).spacing.xl_2)).toList(),
),
),
),
Expand All @@ -581,26 +581,26 @@ class AvatarExample extends StatelessWidget {
}

extension on ZetaAvatarSize {
double get pixelSize {
double pixelSize(BuildContext context) {
switch (this) {
case ZetaAvatarSize.xxxl:
return ZetaSpacingBase.x50;
return Zeta.of(context).spacing.minimum * 50;
case ZetaAvatarSize.xxl:
return ZetaSpacingBase.x30;
return Zeta.of(context).spacing.minimum * 30;
case ZetaAvatarSize.xl:
return ZetaSpacing.xl_10;
return Zeta.of(context).spacing.xl_10;
case ZetaAvatarSize.l:
return ZetaSpacing.xl_9;
return Zeta.of(context).spacing.xl_9;
case ZetaAvatarSize.m:
return ZetaSpacing.xl_8;
return Zeta.of(context).spacing.xl_8;
case ZetaAvatarSize.s:
return ZetaSpacing.xl_6;
return Zeta.of(context).spacing.xl_6;
case ZetaAvatarSize.xs:
return ZetaSpacing.xl_5;
return Zeta.of(context).spacing.xl_5;
case ZetaAvatarSize.xxs:
return ZetaSpacing.xl_4;
return Zeta.of(context).spacing.xl_4;
case ZetaAvatarSize.xxxs:
return ZetaSpacing.xl_2;
return Zeta.of(context).spacing.xl_2;
}
}
}
30 changes: 15 additions & 15 deletions example/lib/pages/components/badges_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ class BadgesExample extends StatelessWidget {
_StatusLabel(),
_DividingText('Priority Pill'),
_PriorityPill(ZetaPriorityPillSize.large),
const SizedBox(height: ZetaSpacing.xl_4),
SizedBox(height: Zeta.of(context).spacing.xl_4),
_PriorityPill(ZetaPriorityPillSize.small),
_DividingText('Label'),
_Label(),
_DividingText('Indicators'),
_Indicators(),
_DividingText('Tags'),
_Tags(),
const SizedBox(height: ZetaSpacing.xl_4),
SizedBox(height: Zeta.of(context).spacing.xl_4),
],
),
),
Expand All @@ -45,7 +45,7 @@ class _DividingText extends StatelessWidget {
return Text(
text,
style: ZetaTextStyles.displayMedium,
).paddingVertical(ZetaSpacing.xl_4);
).paddingVertical(Zeta.of(context).spacing.xl_4);
}
}

Expand All @@ -72,7 +72,7 @@ class _StatusLabel extends StatelessWidget {
statusLabelExampleRow(ZetaWidgetStatus.positive),
statusLabelExampleRow(ZetaWidgetStatus.warning),
statusLabelExampleRow(ZetaWidgetStatus.negative),
].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(),
].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(),
);
}
}
Expand All @@ -94,7 +94,7 @@ class _PriorityPill extends StatelessWidget {
ZetaPriorityPill(size: size, isBadge: true, type: ZetaPriorityPillType.high),
ZetaPriorityPill(size: size, isBadge: true, type: ZetaPriorityPillType.medium),
ZetaPriorityPill(size: size, isBadge: true, type: ZetaPriorityPillType.low),
].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(),
].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
Expand All @@ -103,7 +103,7 @@ class _PriorityPill extends StatelessWidget {
ZetaPriorityPill(size: size, type: ZetaPriorityPillType.high),
ZetaPriorityPill(size: size, type: ZetaPriorityPillType.medium),
ZetaPriorityPill(size: size, type: ZetaPriorityPillType.low),
].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(),
].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(),
),
],
);
Expand Down Expand Up @@ -132,7 +132,7 @@ class _Label extends StatelessWidget {
badgeExampleRow(ZetaWidgetStatus.warning),
badgeExampleRow(ZetaWidgetStatus.negative),
badgeExampleRow(ZetaWidgetStatus.neutral),
].divide(const SizedBox(height: ZetaSpacing.xl_2)).toList(),
].divide(SizedBox(height: Zeta.of(context).spacing.xl_2)).toList(),
);
}
}
Expand Down Expand Up @@ -164,23 +164,23 @@ class _Indicators extends StatelessWidget {
ZetaIndicator.icon(),
ZetaIndicator.icon(size: ZetaWidgetSize.medium),
ZetaIndicator.icon(size: ZetaWidgetSize.small),
].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(),
].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(),
),
Row(
children: [
ZetaIndicator.icon(inverse: true),
ZetaIndicator.icon(size: ZetaWidgetSize.medium, inverse: true),
ZetaIndicator.icon(size: ZetaWidgetSize.small, inverse: true),
].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(),
].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(),
),
].divide(const SizedBox.square(dimension: ZetaSpacing.small)).toList(),
].divide(SizedBox.square(dimension: Zeta.of(context).spacing.small)).toList(),
),
const SizedBox(width: 50),
],
),
],
),
const SizedBox.square(dimension: ZetaSpacing.xl_9),
SizedBox.square(dimension: Zeta.of(context).spacing.xl_9),
Column(
children: [
Text(
Expand All @@ -200,16 +200,16 @@ class _Indicators extends StatelessWidget {
ZetaIndicator.notification(value: 3),
ZetaIndicator.notification(size: ZetaWidgetSize.medium, value: 3),
ZetaIndicator.notification(size: ZetaWidgetSize.small),
].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(),
].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(),
),
Row(
children: [
ZetaIndicator.notification(value: 3, inverse: true),
ZetaIndicator.notification(size: ZetaWidgetSize.medium, value: 3, inverse: true),
ZetaIndicator.notification(size: ZetaWidgetSize.small, inverse: true),
].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(),
].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(),
),
].divide(const SizedBox.square(dimension: ZetaSpacing.medium)).toList(),
].divide(SizedBox.square(dimension: Zeta.of(context).spacing.medium)).toList(),
),
],
),
Expand All @@ -232,7 +232,7 @@ class _Tags extends StatelessWidget {
children: [
ZetaTag.left(label: 'Left'),
ZetaTag.right(label: 'Right'),
].divide(SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(),
].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(),
),
);
}
Expand Down
2 changes: 1 addition & 1 deletion example/lib/pages/components/bottom_sheet_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ class _BottomSheetExampleState extends State<BottomSheetExample> {
return ExampleScaffold(
name: BottomSheetExample.name,
child: SingleChildScrollView(
padding: EdgeInsets.all(ZetaSpacing.medium),
padding: EdgeInsets.all(Zeta.of(context).spacing.medium),
child: Column(
children: [
ZetaMenuItem.horizontal(
Expand Down
12 changes: 6 additions & 6 deletions example/lib/pages/components/button_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ class _ButtonExampleState extends State<ButtonExample> {
Text('Floating Action Buttons', style: ZetaTextStyles.displayMedium),
Text('Tap buttons to change current FAB: ', style: ZetaTextStyles.bodyMedium),
Wrap(children: fabs.divide(SizedBox.square(dimension: 10)).toList()),
].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(),
].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(),
),
),
],
Expand All @@ -151,10 +151,10 @@ class _ButtonExampleState extends State<ButtonExample> {
size: ZetaWidgetSize.values[index == 0 ? 0 : index - 1],
borderType: borderType,
),
).divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(),
).divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(),
),
),
).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList();
).reversed.divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList();
}

List<Widget> iconButtons(ZetaWidgetBorder? borderType) {
Expand All @@ -175,10 +175,10 @@ class _ButtonExampleState extends State<ButtonExample> {
? ZetaIcons.delete
: ZetaIcons.more_horizontal,
),
).divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList(),
).divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList(),
),
),
).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList();
).reversed.divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList();
}

List<Widget> groupButtons(ZetaWidgetBorder? ZetaWidgetBorder) {
Expand Down Expand Up @@ -256,6 +256,6 @@ class _ButtonExampleState extends State<ButtonExample> {
),
],
),
].divide(const SizedBox.square(dimension: ZetaSpacing.xl_2)).toList();
].divide(SizedBox.square(dimension: Zeta.of(context).spacing.xl_2)).toList();
}
}
2 changes: 1 addition & 1 deletion example/lib/pages/components/chat_item_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ class ChatItemExample extends StatelessWidget {
"Dummy text to represent the first lines of most recent message",
),
),
].gap(ZetaSpacing.large),
].gap(Zeta.of(context).spacing.large),
),
),
);
Expand Down
6 changes: 3 additions & 3 deletions example/lib/pages/components/chip_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class _ChipExampleState extends State<ChipExample> {
const SizedBox(height: 10),
ZetaInputChip(
label: 'Label',
leading: const ZetaIcon(ZetaIcons.user),
leading: ZetaIcon(ZetaIcons.user),
trailing: IconButton(icon: Icon(ZetaIcons.close), onPressed: () {}),
),
]);
Expand Down Expand Up @@ -67,7 +67,7 @@ class _ChipExampleState extends State<ChipExample> {
return ExampleScaffold(
name: ChipExample.name,
child: SingleChildScrollView(
padding: EdgeInsets.all(ZetaSpacing.medium),
padding: EdgeInsets.all(Zeta.of(context).spacing.medium),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expand All @@ -79,7 +79,7 @@ class _ChipExampleState extends State<ChipExample> {
onAcceptWithDetails: (details) => setState(() => chipType = details.data),
builder: (context, _, __) {
return Container(
padding: EdgeInsets.all(ZetaSpacing.medium),
padding: EdgeInsets.all(Zeta.of(context).spacing.medium),
color: colors.surfaceSelectedHover,
height: 100,
width: 200,
Expand Down
2 changes: 1 addition & 1 deletion example/lib/pages/components/dialpad_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ class _DialPadExampleState extends State<DialPadExample> {
borderType: ZetaWidgetBorder.full,
onPressed: () => setState(() => number = text = ''),
)
].divide(const SizedBox(height: ZetaSpacing.xl_2)).toList(),
].divide(SizedBox(height: Zeta.of(context).spacing.xl_2)).toList(),
),
),
),
Expand Down
2 changes: 1 addition & 1 deletion example/lib/pages/components/filter_selection_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class _FilterSelectionExampleState extends State<FilterSelectionExample> {
name: FilterSelectionExample.name,
child: Column(
children: [
const SizedBox(height: ZetaSpacing.large),
SizedBox(height: Zeta.of(context).spacing.large),
ZetaFilterSelection(
buttonSemanticLabel: 'Filter',
items: [
Expand Down
2 changes: 1 addition & 1 deletion example/lib/pages/components/global_header_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ class _GroupHeaderExampleState extends State<GroupHeaderExample> {
],
avatar: const ZetaAvatar(initials: 'PS'),
),
const SizedBox(height: ZetaSpacing.xl_1),
SizedBox(height: Zeta.of(context).spacing.xl),
ZetaGlobalHeader(title: "Title", tabItems: childrenTwo),
]),
),
Expand Down
2 changes: 1 addition & 1 deletion example/lib/pages/components/navigation_rail_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ class _NavigationRailExampleState extends State<NavigationRailExample> {
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(ZetaSpacing.xl_1),
padding: EdgeInsets.all(Zeta.of(context).spacing.xl),
child: _selectedIndex == null
? const Nothing()
: Text(
Expand Down
Loading

0 comments on commit d22898f

Please sign in to comment.