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

Jump to bottom

fix: [MDS-551] Add default theming for icons #192

Merged
merged 1 commit into from
Jun 14, 2023
Merged

fix: [MDS-551] Add default theming for icons #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
46 changes: 40 additions & 6 deletions example/lib/src/storybook/stories/authcode.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,34 @@ class AuthCodeStory extends Story {
],
);

final textColorsKnob = context.knobs.nullable.options(
label: "Text color",
description: "MoonColors variants for MoonAuthCode text.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

final textColor = colorTable(context)[textColorsKnob ?? 40];

final cursorColorsKnob = context.knobs.nullable.options(
label: "authFieldCursorColor",
description: "MoonColors variants for MoonAuthCode cursor.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

final cursorColor = colorTable(context)[cursorColorsKnob ?? 40];

final selectedFillColorsKnob = context.knobs.nullable.options(
label: "selectedFillColor",
description: "MoonColors variants for selected MoonAuthCode input field.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand All @@ -55,7 +78,8 @@ class AuthCodeStory extends Story {
label: "activeFillColor",
description: "MoonColors variants for active MoonAuthCode input fields.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand All @@ -65,7 +89,8 @@ class AuthCodeStory extends Story {
label: "inactiveFillColor",
description: "MoonColors variants for inactive MoonAuthCode input fields.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand All @@ -75,7 +100,8 @@ class AuthCodeStory extends Story {
label: "selectedBorderColor",
description: "MoonColors variants for selected MoonAuthCode input field border.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand All @@ -85,7 +111,8 @@ class AuthCodeStory extends Story {
label: "activeBorderColor",
description: "MoonColors variants for active MoonAuthCode input fields borders.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand All @@ -95,7 +122,8 @@ class AuthCodeStory extends Story {
label: "inactiveBorderColor",
description: "MoonColors variants for inactive MoonAuthCode input fields borders.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand Down Expand Up @@ -155,6 +183,8 @@ class AuthCodeStory extends Story {
mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
textStyle: TextStyle(color: textColor),
authFieldCursorColor: cursorColor,
selectedFillColor: selectedFillColor,
activeFillColor: activeFillColor,
inactiveFillColor: inactiveFillColor,
Expand All @@ -177,6 +207,8 @@ class AuthCodeStory extends Story {
mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center,
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
textStyle: TextStyle(color: textColor),
authFieldCursorColor: cursorColor,
selectedFillColor: selectedFillColor,
activeFillColor: activeFillColor,
inactiveFillColor: inactiveFillColor,
Expand All @@ -202,6 +234,8 @@ class AuthCodeStory extends Story {
borderRadius:
borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
errorStreamController: errorStreamController,
textStyle: TextStyle(color: textColor),
authFieldCursorColor: cursorColor,
selectedFillColor: selectedFillColor,
activeFillColor: activeFillColor,
inactiveFillColor: inactiveFillColor,
Expand Down
6 changes: 4 additions & 2 deletions example/lib/src/storybook/stories/avatar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,6 @@ class AvatarStory extends Story {
const TextDivider(text: "Customisable MoonAvatar"),
const SizedBox(height: 32),
MoonAvatar(
textColor: textColor,
avatarSize: avatarSizesKnob,
badgeSize: badgeSizeKnob?.toDouble(),
borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
Expand All @@ -124,7 +123,10 @@ class AvatarStory extends Story {
badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight,
content: Padding(
padding: const EdgeInsets.only(top: 1.0),
child: Text(customLabelTextKnob),
child: Text(
customLabelTextKnob,
style: TextStyle(color: textColor),
),
),
),
const SizedBox(height: 40),
Expand Down
12 changes: 12 additions & 0 deletions example/lib/src/storybook/stories/checkbox.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,17 @@ class CheckboxStory extends Story {
: super(
name: "Checkbox",
builder: (context) {
final textColorsKnob = context.knobs.nullable.options(
label: "Text color",
description: "MoonColors variants for MoonCheckbox with label text.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

final textColor = colorTable(context)[textColorsKnob ?? 40];

final checkColorsKnob = context.knobs.nullable.options(
label: "checkColor",
description: "MoonColors variants for MoonCheckbox icon.",
Expand Down Expand Up @@ -94,6 +105,7 @@ class CheckboxStory extends Story {
return MoonCheckbox.withLabel(
context,
label: "With label",
textStyle: TextStyle(color: textColor),
activeColor: activeColor,
inactiveColor: inactiveColor,
checkColor: checkColor,
Expand Down
21 changes: 17 additions & 4 deletions example/lib/src/storybook/stories/modal.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,23 @@ class ModalStory extends Story {
: super(
name: "Modal",
builder: (context) {
final textColorsKnob = context.knobs.nullable.options(
label: "Text color",
description: "MoonColors variants for MoonModal text.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

final textColor = colorTable(context)[textColorsKnob ?? 40];

final backgroundColorsKnob = context.knobs.nullable.options(
label: "backgroundColor",
description: "MoonColors variants for MoonModal background.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand All @@ -22,7 +34,8 @@ class ModalStory extends Story {
label: "barrierColor",
description: "MoonColors variants for MoonModal barrier.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand Down Expand Up @@ -58,7 +71,7 @@ class ModalStory extends Story {
padding: const EdgeInsets.fromLTRB(24, 20, 24, 16),
child: Text(
"MoonModal title",
style: context.moonTypography!.heading.text18,
style: context.moonTypography!.heading.text18.copyWith(color: textColor),
),
),
Container(
Expand All @@ -69,7 +82,7 @@ class ModalStory extends Story {
padding: const EdgeInsets.fromLTRB(24, 16, 24, 16),
child: Text(
"Reopen the MoonModal to view the updated knob value.",
style: context.moonTypography!.body.text14,
style: context.moonTypography!.body.text14.copyWith(color: textColor),
),
),
Padding(
Expand Down
24 changes: 21 additions & 3 deletions example/lib/src/storybook/stories/popover.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,23 @@ class PopoverStory extends Story {
],
);

final textColorsKnob = context.knobs.nullable.options(
label: "Text color",
description: "MoonColors variants for MoonPopover text.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

final textColor = colorTable(context)[textColorsKnob ?? 40];

final backgroundColorsKnob = context.knobs.nullable.options(
label: "backgroundColor",
description: "MoonColors variants for MoonPopover background.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand All @@ -48,7 +60,8 @@ class PopoverStory extends Story {
label: "borderColor",
description: "MoonColors variants for MoonPopover border.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand Down Expand Up @@ -106,7 +119,12 @@ class PopoverStory extends Story {
content: const MoonIcon(MoonIcons.rocket_24),
),
const SizedBox(width: 12),
Expanded(child: Text(customLabelTextKnob)),
Expanded(
child: Text(
customLabelTextKnob,
style: TextStyle(color: textColor),
),
),
],
),
const SizedBox(height: 16),
Expand Down
19 changes: 17 additions & 2 deletions example/lib/src/storybook/stories/radio.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,23 @@ class RadioStory extends Story {
: super(
name: "Radio",
builder: (context) {
final textColorsKnob = context.knobs.nullable.options(
label: "Text color",
description: "MoonColors variants for MoonRadio with label text.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

final textColor = colorTable(context)[textColorsKnob ?? 40];

final activeColorsKnob = context.knobs.nullable.options(
label: "activeColor",
description: "MoonColors variants for checked MoonRadio.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand All @@ -31,7 +43,8 @@ class RadioStory extends Story {
label: "inactiveColor",
description: "MoonColors variants for unchecked MoonRadio.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand Down Expand Up @@ -78,6 +91,7 @@ class RadioStory extends Story {
const SizedBox(height: 32),
MoonRadio.withLabel(
context,
textStyle: TextStyle(color: textColor),
value: ChoiceLabel.first,
groupValue: valueLabel,
label: "With label #1",
Expand All @@ -87,6 +101,7 @@ class RadioStory extends Story {
const SizedBox(height: 8),
MoonRadio.withLabel(
context,
textStyle: TextStyle(color: textColor),
value: ChoiceLabel.second,
groupValue: valueLabel,
label: "With label #2",
Expand Down
38 changes: 14 additions & 24 deletions example/lib/src/storybook/stories/switch.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import 'package:example/src/storybook/common/color_options.dart';
import 'package:example/src/storybook/common/widgets/text_divider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:moon_design/moon_design.dart';
import 'package:storybook_flutter/storybook_flutter.dart';
Expand Down Expand Up @@ -29,7 +28,8 @@ class SwitchStory extends Story {
label: "thumbColor",
description: "MoonColors variants for MoonSwitch thumb.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand All @@ -39,7 +39,8 @@ class SwitchStory extends Story {
label: "activeTrackColor",
description: "MoonColors variants for active MoonSwitch track.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand All @@ -49,7 +50,8 @@ class SwitchStory extends Story {
label: "inactiveTrackColor",
description: "MoonColors variants for inactive MoonSwitch track.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

Expand Down Expand Up @@ -85,22 +87,15 @@ class SwitchStory extends Story {
StatefulBuilder(
builder: (context, setState) {
return MoonSwitch(
activeThumbWidget: const MoonIcon(
MoonIcons.check_alternative_16,
size: 14,
),
inactiveThumbWidget: const MoonIcon(
MoonIcons.close_16,
size: 12,
),
activeTrackWidget: Text(
switchSize: switchSizesKnob,
activeThumbWidget: const MoonIcon(MoonIcons.check_alternative_16),
inactiveThumbWidget: const MoonIcon(MoonIcons.close_small_16),
activeTrackWidget: const Text(
"ON",
style: MoonTextStyles.caption.text8.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1),
textAlign: TextAlign.center,
),
inactiveTrackWidget: Text(
inactiveTrackWidget: const Text(
"OFF",
style: MoonTextStyles.caption.text8.copyWith(letterSpacing: kIsWeb ? 0.5 : 0.1),
textAlign: TextAlign.center,
),
value: value,
Expand All @@ -112,14 +107,9 @@ class SwitchStory extends Story {
StatefulBuilder(
builder: (context, setState) {
return MoonSwitch(
activeTrackWidget: const MoonIcon(
MoonIcons.check_alternative_16,
size: 14,
),
inactiveTrackWidget: const MoonIcon(
MoonIcons.close_16,
size: 12,
),
switchSize: switchSizesKnob,
activeTrackWidget: const MoonIcon(MoonIcons.moon_16),
inactiveTrackWidget: const MoonIcon(MoonIcons.sun_16),
value: value,
onChanged: (newValue) => setState(() => value = newValue),
);
Expand Down
Loading