From b61d5afc1c58f46da1171698d3fcb5fd1003b4be Mon Sep 17 00:00:00 2001 From: BirgittMajas <79840500+BirgittMajas@users.noreply.github.com> Date: Mon, 29 May 2023 21:05:54 +0300 Subject: [PATCH 1/2] fix: Fix accordion missing text style (#186) --- .../lib/src/storybook/stories/accordion.dart | 43 ++++++--- .../accordion/accordion_item_colors.dart | 46 ++++++---- .../accordion_item_size_properties.dart | 34 ++++--- lib/src/widgets/accordion/accordion_item.dart | 90 ++++++++++++------- 4 files changed, 140 insertions(+), 73 deletions(-) diff --git a/example/lib/src/storybook/stories/accordion.dart b/example/lib/src/storybook/stories/accordion.dart index 2c7ad896..15d4cad7 100644 --- a/example/lib/src/storybook/stories/accordion.dart +++ b/example/lib/src/storybook/stories/accordion.dart @@ -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 @@ -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.", @@ -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, @@ -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, @@ -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, @@ -233,8 +247,9 @@ class AccordionStory extends Story { MoonAccordionItem( accordionSize: accordionSizesKnob, hasContentOutside: true, - textColor: textColor, - expandedTextColor: expandedTextColor, + headerTextColor: headerTextColor, + expandedHeaderTextColor: expandedTextColor, + contentTextColor: contentTextColor, borderColor: borderColor, trailingIconColor: iconColor, expandedTrailingIconColor: expandedIconColor, diff --git a/lib/src/theme/accordion/accordion_item_colors.dart b/lib/src/theme/accordion/accordion_item_colors.dart index 58067f42..e1591fc0 100644 --- a/lib/src/theme/accordion/accordion_item_colors.dart +++ b/lib/src/theme/accordion/accordion_item_colors.dart @@ -12,8 +12,9 @@ class MoonAccordionItemColors extends ThemeExtension 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, ); @@ -23,8 +24,9 @@ class MoonAccordionItemColors extends ThemeExtension 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, ); @@ -41,11 +43,14 @@ class MoonAccordionItemColors extends ThemeExtension 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; @@ -58,8 +63,9 @@ class MoonAccordionItemColors extends ThemeExtension 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, }); @@ -70,8 +76,9 @@ class MoonAccordionItemColors extends ThemeExtension wi Color? expandedBackgroundColor, Color? borderColor, Color? dividerColor, - Color? textColor, - Color? expandedTextColor, + Color? headerTextColor, + Color? expandedHeaderTextColor, + Color? contentTextColor, Color? trailingIconColor, Color? expandedTrailingIconColor, }) { @@ -80,8 +87,9 @@ class MoonAccordionItemColors extends ThemeExtension 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, ); @@ -96,8 +104,9 @@ class MoonAccordionItemColors extends ThemeExtension 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)!, ); @@ -112,8 +121,9 @@ class MoonAccordionItemColors extends ThemeExtension 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)); } diff --git a/lib/src/theme/accordion/accordion_item_size_properties.dart b/lib/src/theme/accordion/accordion_item_size_properties.dart index 0c97f9fe..e2142eab 100644 --- a/lib/src/theme/accordion/accordion_item_size_properties.dart +++ b/lib/src/theme/accordion/accordion_item_size_properties.dart @@ -15,7 +15,8 @@ class MoonAccordionItemSizeProperties extends ThemeExtension("headerPadding", headerPadding)) - ..add(DiagnosticsProperty("textStyle", textStyle)); + ..add(DiagnosticsProperty("headerTextStyle", headerTextStyle)) + ..add(DiagnosticsProperty("contentTextStyle", contentTextStyle)); } } diff --git a/lib/src/widgets/accordion/accordion_item.dart b/lib/src/widgets/accordion/accordion_item.dart index ef0cf957..25acef9d 100644 --- a/lib/src/widgets/accordion/accordion_item.dart +++ b/lib/src/widgets/accordion/accordion_item.dart @@ -99,11 +99,14 @@ class MoonAccordionItem extends StatefulWidget { /// The color of accordion's trailing icon (downward caret by default) when the accordion is expanded. final Color? expandedTrailingIconColor; - /// The color of the accordion's text. - final Color? textColor; + /// The color of the accordion's header text. + final Color? headerTextColor; - /// The color of the expanded accordion's text. - final Color? expandedTextColor; + /// The color of the expanded accordion's header text. + final Color? expandedHeaderTextColor; + + /// The color of the accordion's content text. + final Color? contentTextColor; /// The height of the accordion header. final double? headerHeight; @@ -138,6 +141,12 @@ class MoonAccordionItem extends StatefulWidget { /// The semantic label for the accordion. final String? semanticLabel; + /// The text style of the accordion's header. If color is provided, it overrides the [headerTextColor]. + final TextStyle? headerTextStyle; + + /// The text style of the accordion's content. If color is provided, it overrides the [contentTextColor]. + final TextStyle? contentTextStyle; + /// The identity value represented by this accordion. final T? identityValue; @@ -189,8 +198,9 @@ class MoonAccordionItem extends StatefulWidget { this.dividerColor, this.trailingIconColor, this.expandedTrailingIconColor, - this.textColor, - this.expandedTextColor, + this.headerTextColor, + this.expandedHeaderTextColor, + this.contentTextColor, this.headerHeight, this.transitionDuration, this.transitionCurve, @@ -202,6 +212,8 @@ class MoonAccordionItem extends StatefulWidget { this.accordionSize, this.decoration, this.semanticLabel, + this.headerTextStyle, + this.contentTextStyle, this.identityValue, this.groupIdentityValue, this.onExpansionChanged, @@ -227,6 +239,12 @@ class _MoonAccordionItemState extends State> with Ticker ActivateIntent: CallbackAction(onInvoke: (_) => _handleTap()) }; + late MoonAccordionItemSizeProperties _effectiveMoonAccordionSize; + late BorderRadiusGeometry _effectiveBorderRadius; + late EdgeInsetsGeometry _effectiveHeaderPadding; + late EdgeInsets _resolvedDirectionalHeaderPadding; + late double _effectiveHeaderHeight; + final ColorTweenWithPremultipliedAlpha _backgroundColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _iconColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _hoverColorTween = ColorTweenWithPremultipliedAlpha(); @@ -246,12 +264,6 @@ class _MoonAccordionItemState extends State> with Ticker Color? _effectiveHoverEffectColor; - MoonAccordionItemSizeProperties? _effectiveMoonAccordionSize; - BorderRadiusGeometry? _effectiveBorderRadius; - EdgeInsetsGeometry? _effectiveHeaderPadding; - EdgeInsets? _resolvedDirectionalHeaderPadding; - double? _effectiveHeaderHeight; - bool _isExpanded = false; bool _isFocused = false; bool _isHovered = false; @@ -412,19 +424,22 @@ class _MoonAccordionItemState extends State> with Ticker final List effectiveShadows = widget.shadows ?? context.moonTheme?.accordionTheme.itemShadows.shadows ?? MoonShadows.light.sm; - final Color effectiveTextColor = widget.textColor ?? - context.moonTheme?.accordionTheme.itemColors.textColor ?? + final Color effectiveHeaderTextColor = widget.headerTextStyle?.color ?? + widget.headerTextColor ?? + context.moonTheme?.accordionTheme.itemColors.headerTextColor ?? MoonTypography.light.colors.bodyPrimary; - final Color effectiveExpandedTextColor = widget.expandedTextColor ?? - context.moonTheme?.accordionTheme.itemColors.expandedTextColor ?? + final Color effectiveExpandedHeaderTextColor = widget.expandedHeaderTextColor ?? + context.moonTheme?.accordionTheme.itemColors.expandedHeaderTextColor ?? MoonTypography.light.colors.bodyPrimary; + final TextStyle effectiveHeaderTextStyle = widget.headerTextStyle ?? _effectiveMoonAccordionSize.headerTextStyle; + _textColor ??= _textColorTween.animate(_expansionCurvedAnimation!); _textColorTween - ..begin = effectiveTextColor - ..end = effectiveExpandedTextColor; + ..begin = effectiveHeaderTextColor + ..end = effectiveExpandedHeaderTextColor; return RepaintBoundary( child: AnimatedBuilder( @@ -433,7 +448,7 @@ class _MoonAccordionItemState extends State> with Ticker return IconTheme( data: IconThemeData(color: _textColor!.value), child: DefaultTextStyle( - style: DefaultTextStyle.of(context).style.copyWith(color: _textColor!.value), + style: effectiveHeaderTextStyle.copyWith(color: _textColor!.value), child: Container( height: isContentOutsideHeader ? _effectiveHeaderHeight : null, padding: isContentOutsideHeader ? _resolvedDirectionalHeaderPadding : null, @@ -446,7 +461,7 @@ class _MoonAccordionItemState extends State> with Ticker shadows: effectiveShadows, shape: MoonSquircleBorder( side: widget.showBorder ? BorderSide(color: effectiveBorderColor) : BorderSide.none, - borderRadius: _effectiveBorderRadius!.squircleBorderRadius(context), + borderRadius: _effectiveBorderRadius.squircleBorderRadius(context), ), ) : null), @@ -464,11 +479,15 @@ class _MoonAccordionItemState extends State> with Ticker _effectiveHoverEffectColor ??= context.moonEffects?.controlHoverEffect.primaryHoverColor ?? MoonHoverEffects.lightHoverEffect.primaryHoverColor; - _effectiveMoonAccordionSize ??= _getMoonAccordionItemSize(context, widget.accordionSize); - _effectiveBorderRadius ??= widget.borderRadius ?? _effectiveMoonAccordionSize!.borderRadius; - _effectiveHeaderHeight ??= widget.headerHeight ?? _effectiveMoonAccordionSize!.headerHeight; - _effectiveHeaderPadding ??= widget.headerPadding ?? _effectiveMoonAccordionSize!.headerPadding; - _resolvedDirectionalHeaderPadding ??= _effectiveHeaderPadding!.resolve(Directionality.of(context)); + _effectiveMoonAccordionSize = _getMoonAccordionItemSize(context, widget.accordionSize); + + _effectiveBorderRadius = widget.borderRadius ?? _effectiveMoonAccordionSize.borderRadius; + + _effectiveHeaderHeight = widget.headerHeight ?? _effectiveMoonAccordionSize.headerHeight; + + _effectiveHeaderPadding = widget.headerPadding ?? _effectiveMoonAccordionSize.headerPadding; + + _resolvedDirectionalHeaderPadding = _effectiveHeaderPadding.resolve(Directionality.of(context)); final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.accordionTheme.itemColors.backgroundColor ?? @@ -493,6 +512,13 @@ class _MoonAccordionItemState extends State> with Ticker final Color effectiveHoverEffectColor = context.moonEffects?.controlHoverEffect.primaryHoverColor ?? MoonHoverEffects.lightHoverEffect.primaryHoverColor; + final Color effectiveContentTextColor = widget.contentTextStyle?.color ?? + widget.contentTextColor ?? + context.moonTheme?.accordionTheme.itemColors.contentTextColor ?? + MoonTypography.light.colors.bodyPrimary; + + final TextStyle effectiveContentTextStyle = widget.contentTextStyle ?? _effectiveMoonAccordionSize.contentTextStyle; + final Duration effectiveHoverEffectDuration = context.moonEffects?.controlHoverEffect.hoverDuration ?? MoonHoverEffects.lightHoverEffect.hoverDuration; @@ -508,6 +534,7 @@ class _MoonAccordionItemState extends State> with Ticker Curves.easeInOutCubic; _expansionAnimationController ??= AnimationController(duration: effectiveTransitionDuration, vsync: this); + _expansionCurvedAnimation ??= CurvedAnimation(parent: _expansionAnimationController!, curve: effectiveTransitionCurve); @@ -559,7 +586,7 @@ class _MoonAccordionItemState extends State> with Ticker children: [ if (widget.leading != null) Padding( - padding: EdgeInsetsDirectional.only(end: _resolvedDirectionalHeaderPadding!.left), + padding: EdgeInsetsDirectional.only(end: _resolvedDirectionalHeaderPadding.left), child: widget.leading, ), Expanded(child: widget.title), @@ -570,10 +597,13 @@ class _MoonAccordionItemState extends State> with Ticker ClipRect( child: Column( children: [ - Align( - alignment: widget.expandedAlignment ?? Alignment.topCenter, - heightFactor: _expansionCurvedAnimation!.value, - child: rootChild, + DefaultTextStyle( + style: effectiveContentTextStyle.copyWith(color: effectiveContentTextColor), + child: Align( + alignment: widget.expandedAlignment ?? Alignment.topCenter, + heightFactor: _expansionCurvedAnimation!.value, + child: rootChild, + ), ), ], ), From 66809558ee24b6636dd5c676b395182c7d0ac673 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 29 May 2023 21:07:16 +0300 Subject: [PATCH 2/2] chore(main): release 0.22.4 (#187) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .release-please-manifest.json | 2 +- CHANGELOG.md | 7 +++++++ example/pubspec.yaml | 2 +- pubspec.yaml | 2 +- 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/.release-please-manifest.json b/.release-please-manifest.json index 3c82815b..8cb85a31 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,3 +1,3 @@ { - ".": "0.22.3" + ".": "0.22.4" } \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c1a7bcd..ed8b84c1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## [0.22.4](https://github.com/coingaming/moon_flutter/compare/v0.22.3...v0.22.4) (2023-05-29) + + +### Bug Fixes + +* Fix accordion missing text style ([#186](https://github.com/coingaming/moon_flutter/issues/186)) ([b61d5af](https://github.com/coingaming/moon_flutter/commit/b61d5afc1c58f46da1171698d3fcb5fd1003b4be)) + ## [0.22.3](https://github.com/coingaming/moon_flutter/compare/v0.22.2...v0.22.3) (2023-05-26) diff --git a/example/pubspec.yaml b/example/pubspec.yaml index d09f5fd0..05e4a2eb 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -1,7 +1,7 @@ name: example description: Showcase Moon Design. publish_to: none -version: 0.22.3 +version: 0.22.4 environment: sdk: '>=2.18.6 <3.0.0' dependencies: diff --git a/pubspec.yaml b/pubspec.yaml index 1d2ee8eb..6a3e0742 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: moon_design description: Moon Design System for Flutter. -version: 0.22.3 +version: 0.22.4 homepage: https://flutter.moon.io/ environment: