Merge branch 'master' into dependabot/pub/storybook/url_launcher-6.2.2

MewsSystems · Jan 9, 2024 · 39f94f9 · 39f94f9
2 parents 549bf13 + cfa08ff
commit 39f94f9
Show file tree

Hide file tree

Showing 22 changed files with 107 additions and 68 deletions.
diff --git a/.github/workflows/tokens-pr.yml b/.github/workflows/tokens-pr.yml
@@ -6,6 +6,9 @@ on:
     paths:
       - "optimus/lib/src/theme/optimus_tokens.dart"
 
+env:
+  PR_TYPE: "feat"
+
 jobs:
   pull-request:
     if: github.event.head_commit.author.name == 'mews-tech'
@@ -38,12 +41,16 @@ jobs:
 
           git push origin ${{ github.ref_name }}
 
+      - name: Mark breaking release
+        if: endsWith(github.ref_name, '.0.0')
+        run: echo "PR_TYPE=feat!" >> $GITHUB_ENV
+
       - name: Create Pull Request
         run: |
           gh pr create \
             --base master \
             --head ${{ github.ref_name }} \
-            --title 'feat: Design Tokens Update' \
+            --title '$PR_TYPE: Design Tokens Update' \
             --body 'Design Tokens were updated! This PR was created to update the code.'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/optimus/lib/src/avatar.dart b/optimus/lib/src/avatar.dart
@@ -101,7 +101,7 @@ class _Indicator extends StatelessWidget {
           shape: BoxShape.circle,
           color: theme.colors.primary500,
           border: Border.all(
-            width: 2,
+            width: context.tokens.borderWidth200,
             color:
                 theme.isDark ? theme.colors.neutral500 : theme.colors.neutral0,
           ),

diff --git a/optimus/lib/src/badge/base_badge.dart b/optimus/lib/src/badge/base_badge.dart
@@ -21,22 +21,23 @@ class BaseBadge extends StatelessWidget {
   final Color? textColor;
   final Color? outlineColor;
 
-  double get _bareHeight => text.isEmpty ? _emptySize : _badgeHeight;
-  double get _outlinedHeight => _bareHeight + _outlineSize * 2;
-  double get _height => outline ? _outlinedHeight : _bareHeight;
-
   @override
   Widget build(BuildContext context) {
     final hasText = text.isNotEmpty;
     final tokens = OptimusTheme.of(context).tokens;
     final backgroundColor = this.backgroundColor ?? tokens.backgroundAccent;
     final textColor = this.textColor ?? tokens.textStaticInverse;
     final outlineColor = this.outlineColor ?? tokens.borderStaticInverse;
+    final outlineSize = tokens.borderWidth200;
+    final bareHeight = text.isEmpty ? _emptySize : _badgeHeight;
+    final outlinedHeight = bareHeight + outlineSize * 2;
+    final height = outline ? outlinedHeight : bareHeight;
+
     final decoration = BoxDecoration(
       borderRadius: const BorderRadius.all(Radius.circular(50)),
       color: backgroundColor,
       border:
-          outline ? Border.all(width: _outlineSize, color: outlineColor) : null,
+          outline ? Border.all(width: outlineSize, color: outlineColor) : null,
     );
 
     final child = hasText
@@ -57,10 +58,10 @@ class BaseBadge extends StatelessWidget {
 
     return Container(
       constraints: BoxConstraints(
-        minWidth: hasText ? _badgeHeight : _height,
-        maxWidth: hasText ? double.infinity : _height,
+        minWidth: hasText ? _badgeHeight : height,
+        maxWidth: hasText ? double.infinity : height,
       ),
-      height: _height,
+      height: height,
       decoration: decoration,
       padding: const EdgeInsets.symmetric(
         horizontal: spacing50,
@@ -72,5 +73,4 @@ class BaseBadge extends StatelessWidget {
 }
 
 const _emptySize = spacing100;
-const _outlineSize = 2.0;
 const _badgeHeight = 16.0;
diff --git a/optimus/lib/src/button/base_dropdown_button.dart b/optimus/lib/src/button/base_dropdown_button.dart
@@ -130,7 +130,10 @@ class _BaseDropDownButtonState<T> extends State<BaseDropDownButton<T>>
                   color: _color,
                   borderRadius: borderRadius,
                   border: borderColor != null
-                      ? Border.all(color: borderColor, width: 1)
+                      ? Border.all(
+                          color: borderColor,
+                          width: context.tokens.borderWidth100,
+                        )
                       : null,
                 ),
                 duration: buttonAnimationDuration,

diff --git a/optimus/lib/src/button/icon.dart b/optimus/lib/src/button/icon.dart
@@ -73,7 +73,10 @@ class _OptimusIconButtonState extends State<OptimusIconButton>
               isHovered: _isHovered,
             ),
             border: borderColor != null
-                ? Border.all(color: borderColor, width: 1)
+                ? Border.all(
+                    color: borderColor,
+                    width: context.tokens.borderWidth100,
+                  )
                 : null,
             borderRadius: BorderRadius.circular(context.tokens.borderRadius50),
           ),

diff --git a/optimus/lib/src/card.dart b/optimus/lib/src/card.dart
@@ -122,14 +122,14 @@ class OptimusNestedCard extends StatelessWidget {
   /// Controls card variant.
   final OptimusNestedCardVariant variant;
 
-  Border? _border(OptimusThemeData theme) =>
+  Border? _border(BuildContext context) =>
       variant == OptimusNestedCardVariant.normal
           ? Border.all(
-              width: 1,
+              width: context.tokens.borderWidth100,
               // TODO(VG): can be changed when final dark theme design is ready.
-              color: theme.isDark
-                  ? theme.colors.neutral0t32
-                  : theme.colors.neutral500t16,
+              color: context.theme.isDark
+                  ? context.theme.colors.neutral0t32
+                  : context.theme.colors.neutral500t16,
             )
           : null;
 
@@ -143,18 +143,14 @@ class OptimusNestedCard extends StatelessWidget {
       };
 
   @override
-  Widget build(BuildContext context) {
-    final theme = OptimusTheme.of(context);
-
-    return _Card(
-      spacing: padding,
-      attachment: attachment,
-      border: _border(theme),
-      color: _color(theme),
-      contentWrapperBuilder: contentWrapperBuilder,
-      child: child,
-    );
-  }
+  Widget build(BuildContext context) => _Card(
+        spacing: padding,
+        attachment: attachment,
+        border: _border(context),
+        color: _color(context.theme),
+        contentWrapperBuilder: contentWrapperBuilder,
+        child: child,
+      );
 }
 
 class _Card extends StatelessWidget {

diff --git a/optimus/lib/src/chat/chat.dart b/optimus/lib/src/chat/chat.dart
@@ -374,7 +374,7 @@ class _StatusCircle extends StatelessWidget {
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(context.tokens.borderRadius100),
         border: Border.all(
-          width: 1.2,
+          width: context.tokens.borderWidth100,
           color: theme.isDark
               ? theme.colors.neutral0t64
               : theme.colors.neutral1000t64,

diff --git a/optimus/lib/src/checkbox/checkbox.dart b/optimus/lib/src/checkbox/checkbox.dart
@@ -121,6 +121,7 @@ class OptimusCheckbox extends StatelessWidget {
         ignoring: !isEnabled,
         child: GroupWrapper(
           error: error,
+          isEnabled: isEnabled,
           child: GestureDetector(
             onTap: _handleTap,
             child: Row(

diff --git a/optimus/lib/src/checkbox/checkbox_group.dart b/optimus/lib/src/checkbox/checkbox_group.dart
@@ -58,6 +58,7 @@ class OptimusCheckboxGroup<T> extends StatelessWidget {
   Widget build(BuildContext context) => GroupWrapper(
         label: label,
         error: error,
+        isEnabled: isEnabled,
         child: IgnorePointer(
           ignoring: !isEnabled,
           child: Column(

diff --git a/optimus/lib/src/checkbox/checkbox_tick.dart b/optimus/lib/src/checkbox/checkbox_tick.dart
@@ -57,7 +57,10 @@ class _CheckboxTickState extends State<CheckboxTick> with ThemeGetter {
           decoration: BoxDecoration(
             color: _interactionState.fillColor(context, _state),
             border: _state.isUnchecked
-                ? Border.all(color: _borderColor, width: 1.5)
+                ? Border.all(
+                    color: _borderColor,
+                    width: context.tokens.borderWidth150,
+                  )
                 : null,
             borderRadius: BorderRadius.circular(context.tokens.borderRadius25),
           ),

diff --git a/optimus/lib/src/checkbox/nested_checkbox.dart b/optimus/lib/src/checkbox/nested_checkbox.dart
@@ -48,6 +48,7 @@ class OptimusNestedCheckboxGroup extends StatelessWidget {
   Widget build(BuildContext context) => GroupWrapper(
         label: label,
         error: error,
+        isEnabled: isEnabled,
         child: IgnorePointer(
           ignoring: !isEnabled,
           child: NestedCheckboxData(

diff --git a/optimus/lib/src/common/field_wrapper.dart b/optimus/lib/src/common/field_wrapper.dart
@@ -145,7 +145,10 @@ class _FieldWrapper extends State<FieldWrapper> with ThemeGetter {
                     color: _background,
                     borderRadius:
                         BorderRadius.circular(context.tokens.borderRadius100),
-                    border: Border.all(color: _borderColor, width: 1.5),
+                    border: Border.all(
+                      color: _borderColor,
+                      width: context.tokens.borderWidth150,
+                    ),
                   )
                 : null,
             child: MouseRegion(

diff --git a/optimus/lib/src/common/group_wrapper.dart b/optimus/lib/src/common/group_wrapper.dart
@@ -9,12 +9,14 @@ class GroupWrapper extends StatelessWidget {
     this.label,
     this.error,
     this.isRequired = false,
+    this.isEnabled = true,
   });
 
   final Widget child;
   final String? label;
   final String? error;
   final bool isRequired;
+  final bool isEnabled;
 
   @override
   Widget build(BuildContext context) {
@@ -26,7 +28,11 @@ class GroupWrapper extends StatelessWidget {
       mainAxisSize: MainAxisSize.min,
       children: [
         if (label != null && label.isNotEmpty)
-          OptimusFieldLabel(label: label, isRequired: isRequired),
+          OptimusFieldLabel(
+            label: label,
+            isRequired: isRequired,
+            isEnabled: isEnabled,
+          ),
         child,
         if (error != null && error.isNotEmpty) OptimusFieldError(error: error),
       ],

diff --git a/optimus/lib/src/radio/radio.dart b/optimus/lib/src/radio/radio.dart
@@ -119,6 +119,7 @@ class _OptimusRadioState<T> extends State<OptimusRadio<T>> with ThemeGetter {
   @override
   Widget build(BuildContext context) => GroupWrapper(
         error: widget.error,
+        isEnabled: widget.isEnabled,
         child: IgnorePointer(
           ignoring: !widget.isEnabled,
           child: GestureWrapper(
@@ -192,7 +193,8 @@ class _RadioCircle extends StatelessWidget {
           decoration: BoxDecoration(
             shape: BoxShape.circle,
             border: Border.all(
-              width: isSelected ? 6 : 1.5,
+              width:
+                  isSelected ? _selectedBorder : context.tokens.borderWidth150,
               color: state.borderColor(context, isSelected: isSelected),
             ),
             color: state.circleFillColor(context),
@@ -232,3 +234,4 @@ extension on _RadioState {
 }
 
 const double _leadingSize = 32;
+const double _selectedBorder = 6.0;
diff --git a/optimus/lib/src/radio/radio_group.dart b/optimus/lib/src/radio/radio_group.dart
@@ -62,6 +62,7 @@ class OptimusRadioGroup<T> extends StatelessWidget {
   Widget build(BuildContext context) => GroupWrapper(
         label: label,
         error: error,
+        isEnabled: isEnabled,
         child: OptimusEnabled(
           isEnabled: isEnabled,
           child: Column(

diff --git a/optimus/lib/src/segmented_control/segmented_control.dart b/optimus/lib/src/segmented_control/segmented_control.dart
@@ -71,6 +71,7 @@ class OptimusSegmentedControl<T> extends StatelessWidget {
         label: label,
         error: error,
         isRequired: isRequired,
+        isEnabled: isEnabled,
         child: OptimusEnabled(
           isEnabled: isEnabled,
           child: DecoratedBox(

diff --git a/optimus/lib/src/segmented_control/wrapper.dart b/optimus/lib/src/segmented_control/wrapper.dart
@@ -64,6 +64,8 @@ class _BorderWrapperState extends State<BorderWrapper> with ThemeGetter {
     };
   }
 
+  double get _borderWidth => context.tokens.borderWidth100;
+
   BorderRadiusGeometry get _borderRadius {
     final borderRadius = Radius.circular(tokens.borderRadius50);
 
@@ -127,5 +129,3 @@ class _BorderWrapperState extends State<BorderWrapper> with ThemeGetter {
 }
 
 enum _ItemPosition { first, inBetween, last }
-
-const _borderWidth = 1;
diff --git a/optimus/lib/src/tabs.dart b/optimus/lib/src/tabs.dart
@@ -59,7 +59,7 @@ class OptimusTabBar extends StatelessWidget {
   Decoration _buildIndicator(OptimusTokens tokens) => UnderlineTabIndicator(
         borderSide: BorderSide(
           color: tokens.borderInteractivePrimaryDefault,
-          width: 2.5,
+          width: tokens.borderWidth250,
         ),
         insets: const EdgeInsets.only(bottom: -1),
       );
@@ -78,7 +78,7 @@ class OptimusTabBar extends StatelessWidget {
               border: Border(
                 bottom: BorderSide(
                   color: tokens.borderStaticSecondary,
-                  width: 1.5,
+                  width: tokens.borderWidth150,
                 ),
               ),
             ),

diff --git a/optimus/lib/src/tag.dart b/optimus/lib/src/tag.dart
@@ -150,7 +150,7 @@ class _Tag extends StatelessWidget {
           border: outline
               ? Border.all(
                   color: borderColor,
-                  width: 1.5,
+                  width: context.tokens.borderWidth150,
                   style: BorderStyle.solid,
                 )
               : null,

diff --git a/storybook/lib/stories/radio.dart b/storybook/lib/stories/radio.dart
@@ -44,21 +44,26 @@ class _RadioExampleState extends State<RadioExample> {
 
   @override
   Widget build(BuildContext context) => SingleChildScrollView(
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: _options
-              .map(
-                (i) => OptimusRadio<String>(
-                  isEnabled: widget.isEnabled,
-                  label: Text(i),
-                  size: widget.size,
-                  value: i,
-                  groupValue: _groupValue,
-                  onChanged: _handleChanged,
-                  error: widget.error,
-                ),
-              )
-              .toList(),
+        child: Center(
+          child: SizedBox(
+            width: 400,
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: _options
+                  .map(
+                    (i) => OptimusRadio<String>(
+                      isEnabled: widget.isEnabled,
+                      label: Text(i),
+                      size: widget.size,
+                      value: i,
+                      groupValue: _groupValue,
+                      onChanged: _handleChanged,
+                      error: widget.error,
+                    ),
+                  )
+                  .toList(),
+            ),
+          ),
         ),
       );
 }
@@ -108,16 +113,21 @@ class _RadioGroupExampleState extends State<_RadioGroupExample> {
   void _handleChanged(String value) => setState(() => _groupValue = value);
 
   @override
-  Widget build(BuildContext context) => OptimusRadioGroup<String>(
-        size: widget.size,
-        value: _groupValue,
-        label: widget.label,
-        error: widget.error,
-        isEnabled: widget.isEnabled,
-        onChanged: _handleChanged,
-        items: _options
-            .map((i) => OptimusGroupItem<String>(label: Text(i), value: i))
-            .toList(),
+  Widget build(BuildContext context) => Center(
+        child: SizedBox(
+          width: 400,
+          child: OptimusRadioGroup<String>(
+            size: widget.size,
+            value: _groupValue,
+            label: widget.label,
+            error: widget.error,
+            isEnabled: widget.isEnabled,
+            onChanged: _handleChanged,
+            items: _options
+                .map((i) => OptimusGroupItem<String>(label: Text(i), value: i))
+                .toList(),
+          ),
+        ),
       );
 }