Skip to content

Commit

Permalink
Merge branch 'master' into DX-1203
Browse files Browse the repository at this point in the history
  • Loading branch information
@witwash
witwash committed Aug 13, 2024
2 parents cc6f0ab + 0e41778 commit 9b03011
Show file tree
Hide file tree
Showing 8 changed files with 298 additions and 147 deletions.
133 changes: 80 additions & 53 deletions optimus/lib/src/card.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ enum OptimusCardSpacing {

enum OptimusCardAttachment { none, top, right, bottom, left }

enum OptimusCardCornerRadius { small, medium }

/// A card is a container that groups related pieces of information.
/// It is intended as a short, linked representation of a conceptual unit.
///
Expand All @@ -48,6 +50,8 @@ class OptimusCard extends StatelessWidget {
this.padding = OptimusCardSpacing.spacing200,
this.attachment = OptimusCardAttachment.none,
this.variant = OptimusBasicCardVariant.normal,
this.outline = true,
this.radius = OptimusCardCornerRadius.medium,
});

final Widget child;
Expand All @@ -66,6 +70,29 @@ class OptimusCard extends StatelessWidget {
/// Controls card variant.
final OptimusBasicCardVariant variant;

/// Whether card should be outlined;
final bool outline;

/// Controls the radius of the card.
final OptimusCardCornerRadius radius;

Border? _border(BuildContext context) => outline
? Border.all(
width: context.tokens.borderWidth150,
color: context.tokens.borderStaticPrimary,
)
: null;

List<BoxShadow> _getShadows(OptimusTokens tokens) => switch (variant) {
OptimusBasicCardVariant.normal => tokens.shadow100,
OptimusBasicCardVariant.overlay => tokens.shadow300,
};

Radius _radius(BuildContext context) => switch (radius) {
OptimusCardCornerRadius.small => context.tokens.borderRadius100,
OptimusCardCornerRadius.medium => context.tokens.borderRadius200,
};

@override
Widget build(BuildContext context) {
final theme = OptimusTheme.of(context);
Expand All @@ -74,21 +101,14 @@ class OptimusCard extends StatelessWidget {
return _Card(
spacing: padding,
attachment: attachment,
border: _border(context),
shadows: _getShadows(tokens),
contentWrapperBuilder: contentWrapperBuilder,
color: _color(theme),
color: tokens.backgroundStaticFlat,
radius: _radius(context),
child: child,
);
}

List<BoxShadow> _getShadows(OptimusTokens tokens) => switch (variant) {
OptimusBasicCardVariant.normal => tokens.shadow100,
OptimusBasicCardVariant.overlay => tokens.shadow300,
};

// TODO(VG): can be changed when final dark theme design is ready.
Color _color(OptimusThemeData theme) =>
theme.isDark ? theme.colors.neutral500 : theme.colors.neutral0;
}

/// A card is a container that groups related pieces of information.
Expand All @@ -104,6 +124,8 @@ class OptimusNestedCard extends StatelessWidget {
this.padding = OptimusCardSpacing.spacing200,
this.attachment = OptimusCardAttachment.none,
this.variant = OptimusNestedCardVariant.normal,
this.outline = false,
this.radius = OptimusCardCornerRadius.medium,
});

final Widget child;
Expand All @@ -122,32 +144,39 @@ class OptimusNestedCard extends StatelessWidget {
/// Controls card variant.
final OptimusNestedCardVariant variant;

Border? _border(BuildContext context) =>
variant == OptimusNestedCardVariant.normal
? Border.all(
width: context.tokens.borderWidth100,
// TODO(VG): can be changed when final dark theme design is ready.
color: context.theme.isDark
? context.theme.colors.neutral0t32
: context.theme.colors.neutral500t16,
)
: null;

// TODO(VG): can be changed when final dark theme design is ready.
Color _color(OptimusThemeData theme) => switch (variant) {
/// Whether card should be outlined.
final bool outline;

/// The radius of the card.
final OptimusCardCornerRadius radius;

Radius _radius(BuildContext context) => switch (radius) {
OptimusCardCornerRadius.small => context.tokens.borderRadius100,
OptimusCardCornerRadius.medium => context.tokens.borderRadius200,
};

Border? _border(BuildContext context) => outline
? Border.all(
width: context.tokens.borderWidth150,
color: context.tokens.borderStaticPrimary,
)
: null;

Color _color(BuildContext context) => switch (variant) {
OptimusNestedCardVariant.emphasized =>
theme.isDark ? theme.colors.neutral400t24 : theme.colors.neutral500t8,
OptimusNestedCardVariant.highlighted => theme.colors.primary500t8,
OptimusNestedCardVariant.normal =>
theme.isDark ? theme.colors.neutral500 : theme.colors.neutral0,
context.tokens.backgroundInteractiveNeutralDefault,
OptimusNestedCardVariant.highlighted =>
context.tokens.backgroundInteractiveSecondaryDefault,
OptimusNestedCardVariant.normal => context.tokens.backgroundStaticFlat,
};

@override
Widget build(BuildContext context) => _Card(
spacing: padding,
attachment: attachment,
border: _border(context),
color: _color(context.theme),
color: _color(context),
radius: _radius(context),
contentWrapperBuilder: contentWrapperBuilder,
child: child,
);
Expand All @@ -159,6 +188,7 @@ class _Card extends StatelessWidget {
this.contentWrapperBuilder,
required this.spacing,
required this.attachment,
required this.radius,
this.shadows = const [],
this.border,
this.color,
Expand All @@ -171,30 +201,27 @@ class _Card extends StatelessWidget {
final List<BoxShadow> shadows;
final Border? border;
final Color? color;

BorderRadius _getBorderRadius(OptimusTokens tokens) {
final radius = tokens.borderRadius200;

return switch (attachment) {
OptimusCardAttachment.none => BorderRadius.all(radius),
OptimusCardAttachment.left => BorderRadius.only(
topRight: radius,
bottomRight: radius,
),
OptimusCardAttachment.right => BorderRadius.only(
topLeft: radius,
bottomLeft: radius,
),
OptimusCardAttachment.top => BorderRadius.only(
bottomLeft: radius,
bottomRight: radius,
),
OptimusCardAttachment.bottom => BorderRadius.only(
topLeft: radius,
topRight: radius,
),
};
}
final Radius radius;

BorderRadius get _borderRadius => switch (attachment) {
OptimusCardAttachment.none => BorderRadius.all(radius),
OptimusCardAttachment.left => BorderRadius.only(
topRight: radius,
bottomRight: radius,
),
OptimusCardAttachment.right => BorderRadius.only(
topLeft: radius,
bottomLeft: radius,
),
OptimusCardAttachment.top => BorderRadius.only(
bottomLeft: radius,
bottomRight: radius,
),
OptimusCardAttachment.bottom => BorderRadius.only(
topLeft: radius,
topRight: radius,
),
};

@override
Widget build(BuildContext context) {
Expand All @@ -206,7 +233,7 @@ class _Card extends StatelessWidget {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: _getBorderRadius(context.tokens),
borderRadius: _borderRadius,
border: border,
color: color,
boxShadow: shadows,
Expand Down
100 changes: 62 additions & 38 deletions optimus/lib/src/lists/list_tile.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,44 +82,60 @@ class OptimusListTile extends StatelessWidget {
onTap: onTap,
content: Padding(
padding: _getContentPadding(tokens),
child: Row(
children: <Widget>[
if (prefix case final prefix?) _Prefix(prefix: prefix),
Expanded(
child: Padding(
padding: EdgeInsets.only(right: tokens.spacing100),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
child: Stack(
children: [
if (prefix case final prefix?)
Padding(
padding: EdgeInsetsDirectional.only(
top: subtitle != null ? tokens.spacing100 : tokens.spacing25,
),
child: _Prefix(prefix: prefix),
),
Row(
children: <Widget>[
if (prefix != null) SizedBox(width: context.prefixWidth),
Expanded(
child: Padding(
padding: EdgeInsets.only(right: tokens.spacing100),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: _Title(
title: title,
fontVariant: fontVariant,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
flex: 8,
child: _Title(
title: title,
fontVariant: fontVariant,
),
),
if (info != null)
Flexible(flex: 2, child: _Info(info: info)),
],
),
if (info != null) _Info(info: info),
],
),
Row(
children: <Widget>[
Expanded(
child: subtitle != null
? _Subtitle(
subtitle: subtitle,
fontVariant: fontVariant,
)
: const SizedBox.shrink(),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: subtitle != null
? _Subtitle(
subtitle: subtitle,
fontVariant: fontVariant,
)
: const SizedBox.shrink(),
),
if (infoWidget case final infoWidget?) infoWidget,
],
),
if (infoWidget case final infoWidget?) infoWidget,
],
),
],
),
),
),
if (suffix case final suffix?) _Suffix(suffix: suffix),
],
),
if (suffix case final suffix?) _Suffix(suffix: suffix),
],
),
),
Expand All @@ -136,12 +152,15 @@ class _Prefix extends StatelessWidget {
Widget build(BuildContext context) {
final tokens = context.tokens;

return Padding(
padding: EdgeInsets.only(right: tokens.spacing100),
child: OptimusTypography(
color: OptimusTypographyColor.secondary,
resolveStyle: (_) => tokens.bodyMediumStrong,
child: prefix,
return SizedBox(
width: context.prefixWidth,
child: Padding(
padding: EdgeInsets.only(right: tokens.spacing100),
child: OptimusTypography(
color: OptimusTypographyColor.secondary,
resolveStyle: (_) => tokens.bodyMediumStrong,
child: prefix,
),
),
);
}
Expand Down Expand Up @@ -183,7 +202,8 @@ class _Info extends StatelessWidget {

@override
Widget build(BuildContext context) => OptimusTypography(
resolveStyle: (_) => context.tokens.bodySmallStrong,
resolveStyle: (_) => context.tokens.bodySmallStrong
.copyWith(overflow: TextOverflow.ellipsis),
color: OptimusTypographyColor.secondary,
child: info,
);
Expand All @@ -202,3 +222,7 @@ class _Subtitle extends StatelessWidget {
child: subtitle,
);
}

extension on BuildContext {
double get prefixWidth => tokens.spacing400;
}
Loading

0 comments on commit 9b03011

Please sign in to comment.