Skip to content

Commit

Permalink
feat: [MDS-535] Create MoonTabBar component (#179)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GittHub-d
GittHub-d authored May 26, 2023
1 parent 6c6a9cf commit cf19d9f
Show file tree
Hide file tree
Showing 20 changed files with 1,581 additions and 200 deletions.
19 changes: 13 additions & 6 deletions example/lib/src/storybook/stories/segmented_control.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,7 @@ class SegmentedControlStory extends Story {
description: "Gap between MoonSegmentedControl segments.",
enabled: false,
initial: 4,
max: 16,
);

final isExpandedKnob = context.knobs.boolean(
label: "isExpanded",
description: "Whether MoonSegmentControl is horizontally expanded.",
max: 12,
);

final showLeadingKnob = context.knobs.boolean(
Expand All @@ -109,6 +104,16 @@ class SegmentedControlStory extends Story {
description: "Show widget in MoonSegmentedControl trailing slot.",
);

final isExpandedKnob = context.knobs.boolean(
label: "isExpanded",
description: "Expand MoonSegmentControl horizontally.",
);

final isDisabledKnob = context.knobs.boolean(
label: "isDisabled",
description: "Disable MoonSegmentedControl.",
);

final segmentStyle = SegmentStyle(
textColor: textColor,
selectedTextColor: selectedTextColor,
Expand All @@ -128,6 +133,7 @@ class SegmentedControlStory extends Story {
Column(
children: [
MoonSegmentedControl(
isDisabled: isDisabledKnob,
isExpanded: isExpandedKnob,
gap: gapKnob?.toDouble(),
segmentedControlSize: segmentedControlSizesKnob,
Expand Down Expand Up @@ -159,6 +165,7 @@ class SegmentedControlStory extends Story {
const TextDivider(text: "Icon MoonSegmentedControl"),
const SizedBox(height: 32),
MoonSegmentedControl(
isDisabled: isDisabledKnob,
isExpanded: isExpandedKnob,
gap: gapKnob?.toDouble(),
segmentedControlSize: segmentedControlSizesKnob,
Expand Down
225 changes: 225 additions & 0 deletions example/lib/src/storybook/stories/tab_bar.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
import 'package:example/src/storybook/common/color_options.dart';
import 'package:example/src/storybook/common/widgets/text_divider.dart';
import 'package:flutter/material.dart';
import 'package:moon_design/moon_design.dart';
import 'package:storybook_flutter/storybook_flutter.dart';

class TabBarStory extends Story {
TabBarStory()
: super(
name: "TabBar",
builder: (context) {
final tabsSizesKnob = context.knobs.nullable.options(
label: "tabBarSize",
description: "Size variants for MoonTabBar.",
enabled: false,
initial: MoonTabBarSize.md,
options: const [
Option(label: "sm", value: MoonTabBarSize.sm),
Option(label: "md", value: MoonTabBarSize.md),
],
);

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

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

final selectedTextColorsKnob = context.knobs.nullable.options(
label: "selectedTextColor",
description: "MoonColors variants for selected tab text.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

final selectedTextColor = colorTable(context)[selectedTextColorsKnob ?? 40];

final indicatorColorsKnob = context.knobs.nullable.options(
label: "indicatorColor",
description: "MoonColors variants for default MoonTabBar indicator.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

final indicatorColor = colorTable(context)[indicatorColorsKnob ?? 40];

final selectedTabColorsKnob = context.knobs.nullable.options(
label: "selectedTabColor",
description: "MoonColors variants for pill MoonTabBar selected tab.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

final selectedTabColor = colorTable(context)[selectedTabColorsKnob ?? 40];

final borderRadiusKnob = context.knobs.nullable.sliderInt(
label: "borderRadius",
description: "Border radius for pill MoonTabBar.",
enabled: false,
initial: 8,
max: 32,
);

final indicatorHeightKnob = context.knobs.nullable.sliderInt(
label: "indicatorHeight",
description: "Indicator height for default MoonTabBar.",
enabled: false,
initial: 2,
max: 4,
);

final gapKnob = context.knobs.nullable.sliderInt(
label: "gap",
description: "Gap between MoonTabBar children.",
enabled: false,
initial: 4,
max: 12,
);

final showLeadingKnob = context.knobs.boolean(
label: "leading",
description: "Show widget in MoonTabBar leading slot.",
);

final showLabelKnob = context.knobs.boolean(
label: "label",
description: "Show widget in MoonTabBar label slot.",
initial: true,
);

final showTrailingKnob = context.knobs.boolean(
label: "trailing",
description: "Show widget in MoonTabBar trailing slot.",
);

final isExpandedKnob = context.knobs.boolean(
label: "isExpanded",
description: "Expand MoonTabBar horizontally.",
);

final tabStyle = MoonTabStyle(
textColor: textColor,
selectedTextColor: selectedTextColor,
indicatorColor: indicatorColor,
indicatorHeight: indicatorHeightKnob?.toDouble(),
);

final pillTabStyle = MoonPillTabStyle(
textColor: textColor,
selectedTextColor: selectedTextColor,
selectedTabColor: selectedTabColor,
borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
);

return Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 64),
const TextDivider(text: "Default MoonTabBar"),
const SizedBox(height: 32),
Column(
children: [
MoonTabBar(
tabBarSize: tabsSizesKnob,
isExpanded: isExpandedKnob,
gap: gapKnob?.toDouble(),
tabs: [
MoonTab(
leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
label: showLabelKnob ? const Text('Tab1') : null,
trailing: showTrailingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
tabStyle: tabStyle,
),
MoonTab(
leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
label: showLabelKnob ? const Text('Tab2') : null,
trailing: showTrailingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
tabStyle: tabStyle,
),
MoonTab(
leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
label: showLabelKnob ? const Text('Tab3') : null,
trailing: showTrailingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
tabStyle: tabStyle,
),
],
),
const SizedBox(height: 32),
const TextDivider(text: "MoonTabBar with disabled tab"),
const SizedBox(height: 32),
MoonTabBar(
tabBarSize: tabsSizesKnob,
isExpanded: isExpandedKnob,
gap: gapKnob?.toDouble(),
tabs: [
MoonTab(
trailing: const MoonIcon(MoonIcons.frame_24),
tabStyle: tabStyle,
),
MoonTab(
trailing: const MoonIcon(MoonIcons.frame_24),
tabStyle: tabStyle,
disabled: true,
),
MoonTab(
trailing: const MoonIcon(MoonIcons.frame_24),
tabStyle: tabStyle,
),
MoonTab(
trailing: const MoonIcon(MoonIcons.frame_24),
tabStyle: tabStyle,
),
],
),
const SizedBox(height: 32),
const TextDivider(text: "Pill MoonTabBar"),
const SizedBox(height: 32),
MoonTabBar.pill(
tabBarSize: tabsSizesKnob,
isExpanded: isExpandedKnob,
gap: gapKnob?.toDouble(),
pillTabs: [
MoonPillTab(
leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
label: showLabelKnob ? const Text('Tab1') : null,
trailing: showTrailingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
tabStyle: pillTabStyle,
),
MoonPillTab(
leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
label: showLabelKnob ? const Text('Tab2') : null,
trailing: showTrailingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
tabStyle: pillTabStyle,
),
MoonPillTab(
leading: showLeadingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
label: showLabelKnob ? const Text('Tab3') : null,
trailing: showTrailingKnob ? const MoonIcon(MoonIcons.frame_24) : null,
tabStyle: pillTabStyle,
),
],
),
],
),
const SizedBox(height: 64),
],
),
),
);
},
);
}
2 changes: 2 additions & 0 deletions example/lib/src/storybook/storybook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import 'package:example/src/storybook/stories/popover.dart';
import 'package:example/src/storybook/stories/radio.dart';
import 'package:example/src/storybook/stories/segmented_control.dart';
import 'package:example/src/storybook/stories/switch.dart';
import 'package:example/src/storybook/stories/tab_bar.dart';
import 'package:example/src/storybook/stories/tag.dart';
import 'package:example/src/storybook/stories/text_area.dart';
import 'package:example/src/storybook/stories/text_input.dart';
Expand Down Expand Up @@ -96,6 +97,7 @@ class StorybookPage extends StatelessWidget {
RadioStory(),
SegmentedControlStory(),
SwitchStory(),
TabBarStory(),
TagStory(),
TextAreaStory(),
TextInputStory(),
Expand Down
7 changes: 7 additions & 0 deletions lib/moon_design.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,15 @@ export 'package:moon_design/src/widgets/popover/popover.dart';
export 'package:moon_design/src/widgets/progress/circular_progress.dart';
export 'package:moon_design/src/widgets/progress/linear_progress.dart';
export 'package:moon_design/src/widgets/radio/radio.dart';
export 'package:moon_design/src/widgets/segmented_control/segment.dart';
export 'package:moon_design/src/widgets/segmented_control/segment_style.dart';
export 'package:moon_design/src/widgets/segmented_control/segmented_control.dart';
export 'package:moon_design/src/widgets/switch/switch.dart';
export 'package:moon_design/src/widgets/tab_bar/pill_tab.dart';
export 'package:moon_design/src/widgets/tab_bar/pill_tab_style.dart';
export 'package:moon_design/src/widgets/tab_bar/tab.dart';
export 'package:moon_design/src/widgets/tab_bar/tab_bar.dart';
export 'package:moon_design/src/widgets/tab_bar/tab_style.dart';
export 'package:moon_design/src/widgets/tag/tag.dart';
export 'package:moon_design/src/widgets/text_area/text_area.dart';
export 'package:moon_design/src/widgets/text_input/form_text_input.dart';
Expand Down
5 changes: 3 additions & 2 deletions lib/src/theme/segmented_control/segmented_control_colors.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,22 @@ import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

import 'package:moon_design/src/theme/colors.dart';
import 'package:moon_design/src/theme/typography/typography.dart';
import 'package:moon_design/src/utils/color_premul_lerp.dart';

@immutable
class MoonSegmentedControlColors extends ThemeExtension<MoonSegmentedControlColors> with DiagnosticableTreeMixin {
static final light = MoonSegmentedControlColors(
backgroundColor: MoonColors.light.goku,
selectedSegmentColor: MoonColors.light.gohan,
textColor: MoonColors.light.bulma,
textColor: MoonTypography.light.colors.bodyPrimary,
selectedTextColor: MoonColors.light.bulma,
);

static final dark = MoonSegmentedControlColors(
backgroundColor: MoonColors.dark.goku,
selectedSegmentColor: MoonColors.dark.gohan,
textColor: MoonColors.dark.bulma,
textColor: MoonTypography.dark.colors.bodyPrimary,
selectedTextColor: MoonColors.dark.bulma,
);

Expand Down
Loading

0 comments on commit cf19d9f

Please sign in to comment.