Skip to content

Commit

Permalink
feat: align buttons to design specs (#239)
Browse files Browse the repository at this point in the history 
* feat: match colors to Figma specs
* feat: deprecate some buttons
  • Loading branch information
@smallTrogdor
smallTrogdor authored Dec 13, 2024
1 parent 8b81639 commit f253170
Show file tree
Hide file tree
Showing 35 changed files with 356 additions and 335 deletions.
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,19 @@ It is expected that you keep this format strictly, since we depend on it in our
### Added
- added `constraints` to `showSBBModalSheet` to allow varying screen sizes (tablet)


### Deprecated
- `SBBIconFormButton`
- `SBBIconButtonSmallBorderless`
- `SBBPrimaryButtonNegative`

### Fixed
- correct height for `SBBTertiaryButtonSmall` (40px => 32px)
- coloring of:
- `SBBSecondaryButton` (onHighlighted)
- `SBBTertiaryButton` (darkMode)
- `SBBIconButtonSmall`
- `SBBIconButtonLarge`
- `iconColor` in `SBBButtonStyle` is correctly overriden to support Flutter SDK >=3.27.0

## [2.0.0] - 2024-09-06
Expand Down
154 changes: 28 additions & 126 deletions example/lib/pages/button_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,74 +21,45 @@ class ButtonPage extends StatelessWidget {
child: Column(
children: [
SBBPrimaryButton(
label: 'Primary Button Default',
label: 'Default',
onPressed: () {
sbbToast.show(message: 'SBBPrimaryButton');
},
),
const SizedBox(height: sbbDefaultSpacing),
const SBBPrimaryButton(
label: 'Primary Button Disabled',
label: 'Disabled',
onPressed: null,
),
const SizedBox(height: sbbDefaultSpacing),
SBBPrimaryButton(
label: 'Primary Button Loading',
label: 'Loading',
onPressed: () {},
isLoading: true,
),
],
),
),
const SizedBox(height: sbbDefaultSpacing),
const SBBListHeader('Primary Button Negative'),
SBBGroup(
child: Container(
padding: const EdgeInsets.all(sbbDefaultSpacing),
color: style.themeValue(SBBColors.red, SBBColors.transparent),
child: Column(
children: [
SBBPrimaryButtonNegative(
label: 'Primary Button Negative Default',
onPressed: () {
sbbToast.show(message: 'SBBPrimaryButtonNegative');
},
),
const SizedBox(height: sbbDefaultSpacing),
const SBBPrimaryButtonNegative(
label: 'Primary Button Negative Disabled',
onPressed: null,
),
const SizedBox(height: sbbDefaultSpacing),
SBBPrimaryButtonNegative(
label: 'Primary Button Negative Loading',
onPressed: () {},
isLoading: true,
),
],
),
),
),
const SizedBox(height: sbbDefaultSpacing),
const SBBListHeader('Secondary Button'),
SBBGroup(
padding: const EdgeInsets.all(sbbDefaultSpacing),
child: Column(
children: [
SBBSecondaryButton(
label: 'Secondary Button Default',
label: 'Default',
onPressed: () {
sbbToast.show(message: 'SBBSecondaryButton');
},
),
const SizedBox(height: sbbDefaultSpacing),
const SBBSecondaryButton(
label: 'Secondary Button Disabled',
label: 'Disabled',
onPressed: null,
),
const SizedBox(height: sbbDefaultSpacing),
SBBSecondaryButton(
label: 'Secondary Button Loading',
label: 'Loading',
onPressed: () {},
isLoading: true,
),
Expand All @@ -105,40 +76,40 @@ class ButtonPage extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SBBTertiaryButtonLarge(
label: 'Tertiary Button Large Default',
label: 'Default',
onPressed: () {
sbbToast.show(message: 'SBBTertiaryButtonLarge');
},
),
const SizedBox(height: sbbDefaultSpacing),
const SBBTertiaryButtonLarge(
label: 'Tertiary Button Large Disabled',
label: 'Disabled',
onPressed: null,
),
const SizedBox(height: sbbDefaultSpacing),
SBBTertiaryButtonLarge(
label: 'Tertiary Button Large Loading',
label: 'Loading',
onPressed: () {},
isLoading: true,
),
const SizedBox(height: sbbDefaultSpacing),
SBBTertiaryButtonLarge(
label: 'Tertiary Button Large Icon',
icon: SBBIcons.plus_small,
label: 'Icon',
icon: SBBIcons.dog_small,
onPressed: () {
sbbToast.show(message: 'SBBTertiaryButtonLarge');
},
),
const SizedBox(height: sbbDefaultSpacing),
const SBBTertiaryButtonLarge(
label: 'Tertiary Button Large Icon Disabled',
icon: SBBIcons.plus_small,
label: 'Icon Disabled',
icon: SBBIcons.dog_small,
onPressed: null,
),
const SizedBox(height: sbbDefaultSpacing),
SBBTertiaryButtonLarge(
label: 'Tertiary Button Large Icon Loading',
icon: SBBIcons.plus_small,
label: 'Icon Loading',
icon: SBBIcons.dog_small,
onPressed: () {},
isLoading: true,
),
Expand All @@ -156,40 +127,40 @@ class ButtonPage extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SBBTertiaryButtonSmall(
label: 'Tertiary Button Small Default',
label: 'Default',
onPressed: () {
sbbToast.show(message: 'SBBTertiaryButtonSmall');
},
),
const SizedBox(height: sbbDefaultSpacing),
const SBBTertiaryButtonSmall(
label: 'Tertiary Button Small Disabled',
label: 'Disabled',
onPressed: null,
),
const SizedBox(height: sbbDefaultSpacing),
const SBBTertiaryButtonSmall(
label: 'Tertiary Button Small Loading',
label: 'Loading',
onPressed: null,
isLoading: true,
),
const SizedBox(height: sbbDefaultSpacing),
SBBTertiaryButtonSmall(
label: 'Tertiary Button Small Icon',
icon: SBBIcons.plus_small,
label: 'Icon',
icon: SBBIcons.dog_small,
onPressed: () {
sbbToast.show(message: 'SBBTertiaryButtonSmall');
},
),
const SizedBox(height: sbbDefaultSpacing),
const SBBTertiaryButtonSmall(
label: 'Tertiary Button Small Icon Disabled',
icon: SBBIcons.plus_small,
label: 'Icon Disabled',
icon: SBBIcons.dog_small,
onPressed: null,
),
const SizedBox(height: sbbDefaultSpacing),
const SBBTertiaryButtonSmall(
label: 'Tertiary Button Small Icon Loading',
icon: SBBIcons.plus_small,
label: 'Icon Loading',
icon: SBBIcons.dog_small,
onPressed: null,
isLoading: true,
),
Expand All @@ -208,12 +179,12 @@ class ButtonPage extends StatelessWidget {
onPressed: () {
sbbToast.show(message: 'SBBIconButtonLarge');
},
icon: SBBIcons.pen_small,
icon: SBBIcons.glass_cocktail_small,
),
const SizedBox(width: sbbDefaultSpacing),
const SBBIconButtonLarge(
onPressed: null,
icon: SBBIcons.pen_small,
icon: SBBIcons.glass_cocktail_small,
),
],
),
Expand All @@ -229,86 +200,17 @@ class ButtonPage extends StatelessWidget {
onPressed: () {
sbbToast.show(message: 'SBBIconButtonSmall');
},
icon: SBBIcons.circle_information_small_small,
icon: SBBIcons.glass_cocktail_small,
),
const SizedBox(width: sbbDefaultSpacing),
const SBBIconButtonSmall(
onPressed: null,
icon: SBBIcons.circle_information_small_small,
icon: SBBIcons.glass_cocktail_small,
),
const SizedBox(width: sbbDefaultSpacing),
],
),
),
const SizedBox(height: sbbDefaultSpacing),
const SBBListHeader('Icon Button Small Negative'),
SBBGroup(
child: Container(
padding: const EdgeInsets.all(sbbDefaultSpacing),
color: style.themeValue(SBBColors.red, SBBColors.transparent),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SBBIconButtonSmallNegative(
onPressed: () {
sbbToast.show(message: 'SBBIconButtonSmallNegative');
},
icon: SBBIcons.circle_information_small_small,
),
const SizedBox(width: sbbDefaultSpacing),
const SBBIconButtonSmallNegative(
onPressed: null,
icon: SBBIcons.circle_information_small_small,
),
const SizedBox(width: sbbDefaultSpacing),
],
),
),
),
const SizedBox(height: sbbDefaultSpacing),
const SBBListHeader('Icon Button Small Borderless'),
SBBGroup(
padding: const EdgeInsets.all(sbbDefaultSpacing),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SBBIconButtonSmallBorderless(
onPressed: () {
sbbToast.show(message: 'SBBIconButtonSmallBorderless');
},
icon: SBBIcons.drag_small,
),
const SizedBox(width: sbbDefaultSpacing),
const SBBIconButtonSmallBorderless(
onPressed: null,
icon: SBBIcons.drag_small,
),
const SizedBox(width: sbbDefaultSpacing),
],
),
),
const SizedBox(height: sbbDefaultSpacing),
const SBBListHeader('Icon Form Button'),
SBBGroup(
padding: const EdgeInsets.all(sbbDefaultSpacing),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SBBIconFormButton(
onPressed: () {
sbbToast.show(message: 'SBBIconFormButton');
},
icon: SBBIcons.pen_small,
),
const SizedBox(width: sbbDefaultSpacing),
const SBBIconFormButton(
onPressed: null,
icon: SBBIcons.pen_small,
),
],
),
),
const SizedBox(height: sbbDefaultSpacing),
],
),
);
Expand Down
58 changes: 37 additions & 21 deletions example/lib/pages/onboarding_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ class _VerticalEndPage extends StatelessWidget {
textAlign: TextAlign.center,
),
const SizedBox(height: 67),
SBBPrimaryButtonNegative(
SBBPrimaryButton(
label: 'Close Onboarding',
onPressed: onFinish,
),
Expand Down Expand Up @@ -240,7 +240,7 @@ class _HorizontalEndPage extends StatelessWidget {
textAlign: TextAlign.center,
),
const SizedBox(height: 67),
SBBPrimaryButtonNegative(
SBBPrimaryButton(
label: 'Close Onboarding',
onPressed: onFinish,
),
Expand Down Expand Up @@ -285,16 +285,24 @@ class _VerticalStartPage extends StatelessWidget {
),
textAlign: TextAlign.center,
),
const SizedBox(height: 67),
SBBPrimaryButtonNegative(
label: 'Start Onboarding',
onPressed: onStartOnboarding,
),
const SizedBox(height: sbbDefaultSpacing),
SBBPrimaryButton(
label: 'Skip Onboarding',
onPressed: onFinish,
),
const SizedBox(height: sbbDefaultSpacing * 9),
SBBGroup(
padding: EdgeInsets.symmetric(horizontal: sbbDefaultSpacing / 2, vertical: sbbDefaultSpacing),
child:
Column(
children: [
SBBPrimaryButton(
label: 'Start Onboarding',
onPressed: onStartOnboarding,
),
const SizedBox(height: sbbDefaultSpacing),
SBBSecondaryButton(
label: 'Skip Onboarding',
onPressed: onFinish,
),
],
)
)
],
),
),
Expand Down Expand Up @@ -339,15 +347,23 @@ class _HorizontalStartPage extends StatelessWidget {
textAlign: TextAlign.center,
),
const SizedBox(height: 67),
SBBPrimaryButtonNegative(
label: 'Start Onboarding',
onPressed: onStartOnboarding,
),
const SizedBox(height: sbbDefaultSpacing),
SBBPrimaryButton(
label: 'Skip Onboarding',
onPressed: onFinish,
),
SBBGroup(
padding: EdgeInsets.symmetric(horizontal: sbbDefaultSpacing / 2, vertical: sbbDefaultSpacing),
child:
Column(
children: [
SBBPrimaryButton(
label: 'Start Onboarding',
onPressed: onStartOnboarding,
),
const SizedBox(height: sbbDefaultSpacing),
SBBSecondaryButton(
label: 'Skip Onboarding',
onPressed: onFinish,
),
],
)
)
],
),
),
Expand Down
1 change: 0 additions & 1 deletion lib/sbb_design_system_mobile.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
library sbb_design_system_mobile;

export 'src/accordion/sbb_accordion.dart';
export 'src/button/sbb_button_style_extensions.dart';
export 'src/button/sbb_icon_button.dart';
export 'src/button/sbb_icon_form_button.dart';
export 'src/button/sbb_primary_button.dart';
Expand Down
Loading

0 comments on commit f253170

Please sign in to comment.