Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

buttons rework: align to design specs #239

Merged
merged 18 commits into from
Dec 13, 2024
Merged

buttons rework: align to design specs #239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
ff9b600
feat: match colors to Figma specs
smallTrogdor Dec 10, 2024
2bb53ca
feat: rm primaryMobile and primaryNegativeMobile getters
smallTrogdor Dec 10, 2024
68ccb74
docs: update docs and button page only the spec components
smallTrogdor Dec 10, 2024
03be9b6
feat: elevatedButtonTheme becomes filledButtonTheme
smallTrogdor Dec 10, 2024
d752278
feat: update _InputPadding copy from Material
smallTrogdor Dec 10, 2024
8fd07b3
feat: TertiarybuttonSmall actually is small (32px instead of 40px)
smallTrogdor Dec 10, 2024
75c194c
docs: update docs on notexistent button variants
smallTrogdor Dec 10, 2024
9f530f2
docs: update CHANGELOG.md
smallTrogdor Dec 10, 2024
7658dbd
feat: rm unnecessary button style extension
smallTrogdor Dec 11, 2024
77c2455
feat: simplify padding in Secondary and Tertiary Button
smallTrogdor Dec 11, 2024
04a2474
feat: deprecate some buttons
smallTrogdor Dec 11, 2024
953005e
chore: remove negative button from example app
smallTrogdor Dec 11, 2024
b74f36f
tests: update onboarding goldens to reflect new buttons
smallTrogdor Dec 11, 2024
1052eea
tests: add golden tests for all buttons
smallTrogdor Dec 11, 2024
a394067
fix: remove dry baseline computation for 3.19.6 compatibility
smallTrogdor Dec 11, 2024
4547c5b
feat: add PR rework and merge main into branch
smallTrogdor Dec 13, 2024
e23f284
tests: fix tests by adding icon color to tertiary button in style
smallTrogdor Dec 13, 2024
f1f6286
feat: replace all use of medium icons with small icons
smallTrogdor Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading