Skip to content

Commit

Permalink
fix: [MDS-551] Add default theming for icons (#192)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GittHub-d
GittHub-d committed Jun 14, 2023
1 parent cfba80e commit fc476a0
Show file tree
Hide file tree
Showing 51 changed files with 807 additions and 185 deletions.
46 changes: 40 additions & 6 deletions example/lib/src/storybook/stories/authcode.dart
View file
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
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
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
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
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
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
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

0 comments on commit fc476a0

Please sign in to comment.