diff --git a/packages/cosmos_ui_components/lib/components/cosmos_elevated_button.dart b/packages/cosmos_ui_components/lib/components/cosmos_elevated_button.dart index 07b49ba5..6a587c9e 100644 --- a/packages/cosmos_ui_components/lib/components/cosmos_elevated_button.dart +++ b/packages/cosmos_ui_components/lib/components/cosmos_elevated_button.dart @@ -13,6 +13,10 @@ class CosmosElevatedButton extends StatelessWidget { this.prefixIcon, this.height = GlobalConstants.defaultButtonHeight, this.contentPadding, + this.elevation, + this.backgroundColor, + this.textColor, + this.shadowColor, }) : super(key: key); final VoidCallback? onTap; @@ -21,29 +25,37 @@ class CosmosElevatedButton extends StatelessWidget { final Widget? prefixIcon; final double height; final double? contentPadding; + final double? elevation; + final Color? backgroundColor; + final Color? textColor; + final Color? shadowColor; @override Widget build(BuildContext context) { + final theme = CosmosTheme.of(context); return ElevatedButton( onPressed: onTap, style: ElevatedButton.styleFrom( + primary: backgroundColor, + onPrimary: textColor, fixedSize: Size.fromHeight(height), - shape: RoundedRectangleBorder(borderRadius: CosmosTheme.of(context).borderRadiusM), - elevation: 0, + shape: RoundedRectangleBorder(borderRadius: theme.borderRadiusM), + elevation: elevation ?? 0, + shadowColor: shadowColor ?? theme.colors.shadowColor, ), child: Row( mainAxisSize: MainAxisSize.min, children: [ if (prefixIcon != null) ...[ prefixIcon!, - SizedBox(width: contentPadding ?? CosmosTheme.of(context).spacingS), + SizedBox(width: contentPadding ?? theme.spacingS), ], Text( text, style: CosmosTextTheme.elevatedButton, ), if (suffixIcon != null) ...[ - SizedBox(width: contentPadding ?? CosmosTheme.of(context).spacingS), + SizedBox(width: contentPadding ?? theme.spacingS), suffixIcon!, ], ], @@ -58,6 +70,10 @@ class CosmosElevatedButton extends StatelessWidget { ..add(DoubleProperty('contentPadding', contentPadding)) ..add(DoubleProperty('height', height)) ..add(StringProperty('text', text)) - ..add(ObjectFlagProperty.has('onTap', onTap)); + ..add(ObjectFlagProperty.has('onTap', onTap)) + ..add(DoubleProperty('elevation', elevation)) + ..add(ColorProperty('textColor', textColor)) + ..add(ColorProperty('backgroundColor', backgroundColor)) + ..add(ColorProperty('shadowColor', shadowColor)); } } diff --git a/packages/cosmos_ui_components/lib/components/cosmos_text_field.dart b/packages/cosmos_ui_components/lib/components/cosmos_text_field.dart index 72ec880e..2ea217ac 100644 --- a/packages/cosmos_ui_components/lib/components/cosmos_text_field.dart +++ b/packages/cosmos_ui_components/lib/components/cosmos_text_field.dart @@ -14,6 +14,8 @@ class CosmosTextField extends StatefulWidget { this.hint, this.keyboardType, this.controller, + this.textAlign = TextAlign.start, + this.style, Key? key, }) : super(key: key); @@ -26,6 +28,8 @@ class CosmosTextField extends StatefulWidget { final Widget? suffix; final TextInputType? keyboardType; final TextEditingController? controller; + final TextAlign textAlign; + final TextStyle? style; @override State createState() => _CosmosTextFieldState(); @@ -41,26 +45,28 @@ class CosmosTextField extends StatefulWidget { ..add(IntProperty('minLines', minLines)) ..add(ObjectFlagProperty.has('onChanged', onChanged)) ..add(DiagnosticsProperty('controller', controller)) - ..add(StringProperty('hint', hint)); + ..add(StringProperty('hint', hint)) + ..add(EnumProperty('textAlign', textAlign)) + ..add(DiagnosticsProperty('style', style)); } } class _CosmosTextFieldState extends State { - late TextEditingController controller; - bool isTextEmpty = false; + late TextEditingController _controller; + bool _isTextEmpty = false; @override void initState() { super.initState(); - controller = widget.controller ?? TextEditingController(); - controller.text = widget.initialText; + _controller = widget.controller ?? TextEditingController(); + _controller.text = widget.initialText; } @override void dispose() { if (widget.controller == null) { // it's a controller created internally by the CosmosTextField, thus we'll take care of disposing it properly here - controller.dispose(); + _controller.dispose(); } super.dispose(); } @@ -69,18 +75,20 @@ class _CosmosTextFieldState extends State { Widget build(BuildContext context) { final theme = CosmosTheme.of(context); return TextField( - controller: controller, + controller: _controller, maxLines: widget.maxLines, maxLength: widget.maxLength, minLines: widget.minLines, keyboardType: widget.keyboardType, onChanged: (value) { widget.onChanged(value); - if (value.isEmpty == isTextEmpty) { + if (value.isEmpty == _isTextEmpty) { setState(() {}); - isTextEmpty = !isTextEmpty; + _isTextEmpty = !_isTextEmpty; } }, + textAlign: widget.textAlign, + style: widget.style, decoration: InputDecoration( counterText: widget.maxLength == null ? null : '', border: UnderlineInputBorder(borderSide: BorderSide(color: theme.colors.inputBorder)), @@ -90,7 +98,7 @@ class _CosmosTextFieldState extends State { ), suffix: widget.suffix == null ? _buildClearButton() - : (controller.text.isEmpty ? widget.suffix : _buildClearButton()), + : (_controller.text.isEmpty ? widget.suffix : _buildClearButton()), ), ); } @@ -98,7 +106,7 @@ class _CosmosTextFieldState extends State { InkWell _buildClearButton() { return InkWell( onTap: () { - controller.clear(); + _controller.clear(); setState(() {}); }, child: SizedBox( @@ -108,12 +116,4 @@ class _CosmosTextFieldState extends State { ), ); } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty('controller', controller)) - ..add(DiagnosticsProperty('isTextEmpty', isTextEmpty)); - } } diff --git a/packages/cosmos_ui_components/lib/cosmos_theme.dart b/packages/cosmos_ui_components/lib/cosmos_theme.dart index d8ab50fd..20112f61 100644 --- a/packages/cosmos_ui_components/lib/cosmos_theme.dart +++ b/packages/cosmos_ui_components/lib/cosmos_theme.dart @@ -28,6 +28,7 @@ class CosmosTheme extends InheritedWidget { @override bool updateShouldNotify(CosmosTheme oldWidget) => oldWidget.themeData != themeData; + @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); @@ -60,6 +61,8 @@ class CosmosThemeData extends Equatable { this.borderRadiusM = defaultBorderRadiusM, this.borderRadiusS = defaultBorderRadiusS, this.elevationS = defaultElevationS, + this.elevationM = defaultElevationM, + this.elevationL = defaultElevationL, this.colors = const CosmosColorsData(), }); @@ -88,6 +91,8 @@ class CosmosThemeData extends Equatable { static const defaultFontSizeXL = 28.0; static const defaultFontSizeXXL = 40.0; static const defaultElevationS = 4.0; + static const defaultElevationM = 8.0; + static const defaultElevationL = 12.0; static const defaultBorderRadiusL = BorderRadius.all(Radius.circular(defaultRadiusL)); static const defaultBorderRadiusM = BorderRadius.all(Radius.circular(defaultRadiusM)); @@ -113,6 +118,8 @@ class CosmosThemeData extends Equatable { final double fontSizeXL; final double fontSizeXXL; final double elevationS; + final double elevationM; + final double elevationL; final BorderRadius borderRadiusM; final BorderRadius borderRadiusL; final BorderRadius borderRadiusS; @@ -122,6 +129,7 @@ class CosmosThemeData extends Equatable { List get props => [ spacingXXXL, spacingXXL, + spacingXL, spacingL, spacingM, spacingS, @@ -130,6 +138,7 @@ class CosmosThemeData extends Equatable { mediumDuration, shortDuration, radiusXL, + radiusL, radiusM, radiusS, fontSizeS, @@ -137,8 +146,13 @@ class CosmosThemeData extends Equatable { fontSizeL, fontSizeXL, fontSizeXXL, + borderRadiusL, borderRadiusM, borderRadiusS, + elevationS, + elevationM, + elevationL, + colors, ]; } @@ -157,6 +171,7 @@ class CosmosColorsData extends Equatable { this.inputBorder = lightBorder, this.avatarBg = silver, this.error = defaultError, + this.shadowColor = defaultShadowColor, }); static const lightBg = Color(0xFFFFFFFF); @@ -179,6 +194,7 @@ class CosmosColorsData extends Equatable { static const darkDivider = Color(0x17FFFFFF); static const iosError = Color(0xFFE74444); static const defaultError = Color(0xFFFF3D56); + static const defaultShadowColor = Colors.black38; final Color inactive; final Color divider; @@ -193,6 +209,7 @@ class CosmosColorsData extends Equatable { final Color inputBorder; final Color avatarBg; final Color error; + final Color shadowColor; @override List get props => [ @@ -209,5 +226,6 @@ class CosmosColorsData extends Equatable { inputBorder, avatarBg, error, + shadowColor, ]; }