Skip to content

Commit

Permalink
fix: Fix accordion missing text style (#186)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GittHub-d
GittHub-d committed May 29, 2023
1 parent 96592d5 commit b61d5af
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 73 deletions.
43 changes: 29 additions & 14 deletions example/lib/src/storybook/stories/accordion.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,20 +92,20 @@ class AccordionStory extends Story {

final dividerColor = colorTable(context)[dividerColorsKnob ?? 40];

final textColorsKnob = context.knobs.nullable.options(
label: "textColor",
description: "MoonColors variants for MoonAccordion text.",
final headerTextColorsKnob = context.knobs.nullable.options(
label: "headerTextColor",
description: "MoonColors variants for MoonAccordion header text.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

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

final expandedTextColorsKnob = context.knobs.nullable.options(
label: "expandedTextColor",
description: "MoonColors variants for expanded MoonAccordion text.",
label: "expandedHeaderTextColor",
description: "MoonColors variants for expanded MoonAccordion header text.",
enabled: false,
initial: 0,
// piccolo
Expand All @@ -114,6 +114,17 @@ class AccordionStory extends Story {

final expandedTextColor = colorTable(context)[expandedTextColorsKnob ?? 40];

final contentTextColorsKnob = context.knobs.nullable.options(
label: "contentTextColor",
description: "MoonColors variants for MoonAccordion content text.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

final contentTextColor = colorTable(context)[contentTextColorsKnob ?? 40];

final borderRadiusKnob = context.knobs.nullable.sliderInt(
label: "borderRadius",
description: "Border radius for MoonAccordion.",
Expand Down Expand Up @@ -151,8 +162,9 @@ class AccordionStory extends Story {
identityValue: AccordionItems.first,
groupIdentityValue: currentlyOpenAccordionItem,
accordionSize: accordionSizesKnob,
textColor: textColor,
expandedTextColor: expandedTextColor,
headerTextColor: headerTextColor,
expandedHeaderTextColor: expandedTextColor,
contentTextColor: contentTextColor,
borderColor: borderColor,
trailingIconColor: iconColor,
expandedTrailingIconColor: expandedIconColor,
Expand Down Expand Up @@ -180,8 +192,9 @@ class AccordionStory extends Story {
groupIdentityValue: currentlyOpenAccordionItem,
initiallyExpanded: true,
accordionSize: accordionSizesKnob,
textColor: textColor,
expandedTextColor: expandedTextColor,
headerTextColor: headerTextColor,
expandedHeaderTextColor: expandedTextColor,
contentTextColor: contentTextColor,
borderColor: borderColor,
trailingIconColor: iconColor,
expandedTrailingIconColor: expandedIconColor,
Expand Down Expand Up @@ -210,8 +223,9 @@ class AccordionStory extends Story {
accordionSize: accordionSizesKnob,
initiallyExpanded: true,
hasContentOutside: true,
textColor: textColor,
expandedTextColor: expandedTextColor,
headerTextColor: headerTextColor,
expandedHeaderTextColor: expandedTextColor,
contentTextColor: contentTextColor,
borderColor: borderColor,
trailingIconColor: iconColor,
expandedTrailingIconColor: expandedIconColor,
Expand All @@ -233,8 +247,9 @@ class AccordionStory extends Story {
MoonAccordionItem<AccordionItems>(
accordionSize: accordionSizesKnob,
hasContentOutside: true,
textColor: textColor,
expandedTextColor: expandedTextColor,
headerTextColor: headerTextColor,
expandedHeaderTextColor: expandedTextColor,
contentTextColor: contentTextColor,
borderColor: borderColor,
trailingIconColor: iconColor,
expandedTrailingIconColor: expandedIconColor,
Expand Down
46 changes: 28 additions & 18 deletions lib/src/theme/accordion/accordion_item_colors.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
expandedBackgroundColor: MoonColors.light.gohan,
borderColor: MoonColors.light.beerus,
dividerColor: MoonColors.light.beerus,
textColor: MoonTypography.light.colors.bodyPrimary,
expandedTextColor: MoonTypography.light.colors.bodyPrimary,
headerTextColor: MoonTypography.light.colors.bodyPrimary,
expandedHeaderTextColor: MoonTypography.light.colors.bodyPrimary,
contentTextColor: MoonTypography.light.colors.bodyPrimary,
trailingIconColor: MoonTypography.light.colors.bodySecondary,
expandedTrailingIconColor: MoonTypography.light.colors.bodyPrimary,
);
Expand All @@ -23,8 +24,9 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
expandedBackgroundColor: MoonColors.dark.gohan,
borderColor: MoonColors.dark.beerus,
dividerColor: MoonColors.dark.beerus,
textColor: MoonTypography.dark.colors.bodyPrimary,
expandedTextColor: MoonTypography.dark.colors.bodyPrimary,
headerTextColor: MoonTypography.dark.colors.bodyPrimary,
expandedHeaderTextColor: MoonTypography.dark.colors.bodyPrimary,
contentTextColor: MoonTypography.dark.colors.bodyPrimary,
trailingIconColor: MoonTypography.dark.colors.bodySecondary,
expandedTrailingIconColor: MoonTypography.dark.colors.bodyPrimary,
);
Expand All @@ -41,11 +43,14 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
/// Accordion item divider color.
final Color dividerColor;

/// Accordion item text color.
final Color textColor;
/// Accordion item header text color.
final Color headerTextColor;

/// Accordion item expanded text color.
final Color expandedTextColor;
/// Expanded accordion item header text color.
final Color expandedHeaderTextColor;

/// Accordion item content text color.
final Color contentTextColor;

/// Accordion item trailing icon color.
final Color trailingIconColor;
Expand All @@ -58,8 +63,9 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
required this.expandedBackgroundColor,
required this.borderColor,
required this.dividerColor,
required this.textColor,
required this.expandedTextColor,
required this.headerTextColor,
required this.expandedHeaderTextColor,
required this.contentTextColor,
required this.trailingIconColor,
required this.expandedTrailingIconColor,
});
Expand All @@ -70,8 +76,9 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
Color? expandedBackgroundColor,
Color? borderColor,
Color? dividerColor,
Color? textColor,
Color? expandedTextColor,
Color? headerTextColor,
Color? expandedHeaderTextColor,
Color? contentTextColor,
Color? trailingIconColor,
Color? expandedTrailingIconColor,
}) {
Expand All @@ -80,8 +87,9 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
expandedBackgroundColor: expandedBackgroundColor ?? this.expandedBackgroundColor,
borderColor: borderColor ?? this.borderColor,
dividerColor: dividerColor ?? this.dividerColor,
textColor: textColor ?? this.textColor,
expandedTextColor: expandedTextColor ?? this.expandedTextColor,
headerTextColor: headerTextColor ?? this.headerTextColor,
expandedHeaderTextColor: expandedHeaderTextColor ?? this.expandedHeaderTextColor,
contentTextColor: contentTextColor ?? this.contentTextColor,
trailingIconColor: trailingIconColor ?? this.trailingIconColor,
expandedTrailingIconColor: expandedTrailingIconColor ?? this.expandedTrailingIconColor,
);
Expand All @@ -96,8 +104,9 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
expandedBackgroundColor: colorPremulLerp(expandedBackgroundColor, other.expandedBackgroundColor, t)!,
borderColor: colorPremulLerp(borderColor, other.borderColor, t)!,
dividerColor: colorPremulLerp(dividerColor, other.dividerColor, t)!,
textColor: colorPremulLerp(textColor, other.textColor, t)!,
expandedTextColor: colorPremulLerp(expandedTextColor, other.expandedTextColor, t)!,
headerTextColor: colorPremulLerp(headerTextColor, other.headerTextColor, t)!,
expandedHeaderTextColor: colorPremulLerp(expandedHeaderTextColor, other.expandedHeaderTextColor, t)!,
contentTextColor: colorPremulLerp(contentTextColor, other.contentTextColor, t)!,
trailingIconColor: colorPremulLerp(trailingIconColor, other.trailingIconColor, t)!,
expandedTrailingIconColor: colorPremulLerp(expandedTrailingIconColor, other.expandedTrailingIconColor, t)!,
);
Expand All @@ -112,8 +121,9 @@ class MoonAccordionItemColors extends ThemeExtension<MoonAccordionItemColors> wi
..add(ColorProperty("expandedBackgroundColor", expandedBackgroundColor))
..add(ColorProperty("borderColor", borderColor))
..add(ColorProperty("dividerColor", dividerColor))
..add(ColorProperty("textColor", textColor))
..add(ColorProperty("expandedTextColor", expandedTextColor))
..add(ColorProperty("headerTextColor", headerTextColor))
..add(ColorProperty("expandedHeaderTextColor", expandedHeaderTextColor))
..add(ColorProperty("contentTextColor", contentTextColor))
..add(ColorProperty("trailingIconColor", trailingIconColor))
..add(ColorProperty("expandedTrailingIconColor", expandedTrailingIconColor));
}
Expand Down
34 changes: 23 additions & 11 deletions lib/src/theme/accordion/accordion_item_size_properties.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,31 +15,35 @@ class MoonAccordionItemSizeProperties extends ThemeExtension<MoonAccordionItemSi
headerHeight: MoonSizes.sizes.sm,
iconSizeValue: MoonSizes.sizes.x2s,
headerPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x4s),
textStyle: MoonTextStyles.heading.text12,
headerTextStyle: MoonTextStyles.heading.text12,
contentTextStyle: MoonTextStyles.body.text12,
);

static final md = MoonAccordionItemSizeProperties(
borderRadius: MoonBorders.borders.interactiveSm,
headerHeight: MoonSizes.sizes.md,
iconSizeValue: MoonSizes.sizes.xs,
headerPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s),
textStyle: MoonTextStyles.heading.text14,
headerTextStyle: MoonTextStyles.heading.text14,
contentTextStyle: MoonTextStyles.body.text14,
);

static final lg = MoonAccordionItemSizeProperties(
borderRadius: MoonBorders.borders.interactiveSm,
headerHeight: MoonSizes.sizes.lg,
iconSizeValue: MoonSizes.sizes.xs,
headerPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x3s),
textStyle: MoonTextStyles.heading.text14,
headerTextStyle: MoonTextStyles.heading.text14,
contentTextStyle: MoonTextStyles.body.text14,
);

static final xl = MoonAccordionItemSizeProperties(
borderRadius: MoonBorders.borders.interactiveSm,
headerHeight: MoonSizes.sizes.xl,
iconSizeValue: MoonSizes.sizes.xs,
headerPadding: EdgeInsets.symmetric(horizontal: MoonSizes.sizes.x2s),
textStyle: MoonTextStyles.heading.text16,
headerTextStyle: MoonTextStyles.heading.text16,
contentTextStyle: MoonTextStyles.body.text14,
);

/// Accordion item border radius.
Expand All @@ -54,15 +58,19 @@ class MoonAccordionItemSizeProperties extends ThemeExtension<MoonAccordionItemSi
/// Padding around accordion title and icon.
final EdgeInsetsGeometry headerPadding;

/// Accordion text style.
final TextStyle textStyle;
/// Accordion header text style.
final TextStyle headerTextStyle;

/// Accordion content text style.
final TextStyle contentTextStyle;

const MoonAccordionItemSizeProperties({
required this.borderRadius,
required this.headerHeight,
required this.iconSizeValue,
required this.headerPadding,
required this.textStyle,
required this.headerTextStyle,
required this.contentTextStyle,
});

@override
Expand All @@ -71,14 +79,16 @@ class MoonAccordionItemSizeProperties extends ThemeExtension<MoonAccordionItemSi
double? headerHeight,
double? iconSizeValue,
EdgeInsetsGeometry? headerPadding,
TextStyle? textStyle,
TextStyle? headerTextStyle,
TextStyle? contentTextStyle,
}) {
return MoonAccordionItemSizeProperties(
borderRadius: borderRadius ?? this.borderRadius,
headerHeight: headerHeight ?? this.headerHeight,
iconSizeValue: iconSizeValue ?? this.iconSizeValue,
headerPadding: headerPadding ?? this.headerPadding,
textStyle: textStyle ?? this.textStyle,
headerTextStyle: headerTextStyle ?? this.headerTextStyle,
contentTextStyle: contentTextStyle ?? this.contentTextStyle,
);
}

Expand All @@ -91,7 +101,8 @@ class MoonAccordionItemSizeProperties extends ThemeExtension<MoonAccordionItemSi
headerHeight: lerpDouble(headerHeight, other.headerHeight, t)!,
iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!,
headerPadding: EdgeInsetsGeometry.lerp(headerPadding, other.headerPadding, t)!,
textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!,
headerTextStyle: TextStyle.lerp(headerTextStyle, other.headerTextStyle, t)!,
contentTextStyle: TextStyle.lerp(contentTextStyle, other.contentTextStyle, t)!,
);
}

Expand All @@ -104,6 +115,7 @@ class MoonAccordionItemSizeProperties extends ThemeExtension<MoonAccordionItemSi
..add(DoubleProperty("headerHeight", headerHeight))
..add(DoubleProperty("iconSizeValue", iconSizeValue))
..add(DiagnosticsProperty<EdgeInsetsGeometry>("headerPadding", headerPadding))
..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle));
..add(DiagnosticsProperty<TextStyle>("headerTextStyle", headerTextStyle))
..add(DiagnosticsProperty<TextStyle>("contentTextStyle", contentTextStyle));
}
}
Loading

0 comments on commit b61d5af

Please sign in to comment.