Merge pull request #37 from sensasi-delight:sensasi-delight/issue36

Refactor IconButton auto init bug
sensasi-delight · Jun 30, 2024 · 5fe1425 · 5fe1425
2 parents e966964 + 2b68aca
commit 5fe1425
Show file tree

Hide file tree

Showing 10 changed files with 520 additions and 512 deletions.
diff --git a/src/Components/Button.php b/src/Components/Button.php
@@ -5,48 +5,37 @@
 use Illuminate\View\Component;
 use Illuminate\View\ComponentAttributeBag;
 use Illuminate\View\ComponentSlot;
+use InvalidArgumentException;
+use MaterialBlade\Components\Button\Properties\Variant;
 use MaterialBlade\Helper;
 
 class Button extends Component
 {
-    public string $color;
-
-    public bool $isFullwidth;
-
-    public bool $isRipple;
-
-    public bool $withWrapper;
-
-    public ?string $label;
-
-    // public string $size;
-
-    public ?string $variant;
+    private Variant $variant;
 
     /**
      * Create a new component instance.
      *
      * @return void
      */
     public function __construct(
-        bool $fullwidth = false,
-        // string $size = null,
-        string $variant = 'text',
-        bool $withWrapper = false,
-        string $color = 'primary',
-        bool $disableRipple = false,
-        ?string $label = null,
-
+        string $variant = 'unelevated',
+        public bool $withWrapper = false,
         public string|array|null $startIcon = null,
-        public string|array|null $endIcon = null
+        public string|array|null $endIcon = null,
+
+        private string $color = 'primary',
+        private bool $fullwidth = false,
+
+        // on view only
+        public bool $disableRipple = false,
+        public ?string $label = null,
+        private ?string $htmlTag = null,
+
+        // private string $size = null,
     ) {
-        $this->color = $color;
-        $this->isFullwidth = $fullwidth;
         $this->label = $label;
-        $this->isRipple = ! $disableRipple;
-        $this->variant = $variant;
-        $this->withWrapper = $withWrapper;
-        // $this->size = $size;
+        $this->variant = Variant::fromString($variant);
     }
 
     /**
@@ -59,28 +48,48 @@ public function render()
         return 'mbv::button';
     }
 
-    public function validateComponent(ComponentSlot $slot)
+    public function attributesPreprocess(ComponentAttributeBag $attributes, ComponentSlot $slot)
     {
-        if (! $this->label && $slot->isEmpty()) {
-            throw new \Exception('Please fill the "label" attribute or the component slot', 1);
-        }
-    }
+        $this->validateSlot($slot);
 
-    public function attributesPreprocess(ComponentAttributeBag $attributes)
-    {
         if ($this->color !== 'primary') {
             $attributes = $attributes->merge([
                 'style' => $attributes->prepends('--mdc-theme-primary: '.Helper::getColor($this->color)),
             ]);
         }
 
-        return $attributes->class([
+        return $attributes->merge([
+            'data-mdc-auto-init' => 'MDCRipple',
+            'aria-label' => $this->label ?? $slot->__toString(),
+        ])->class([
             'mdc-button',
             'mdc-button--touch' => $this->withWrapper,
-            'mdc-button--'.($this->variant) => $this->variant !== 'text' && in_array($this->variant, ['raised', 'unelevated', 'outlined']),
+            'mdc-button--'.($this->variant->value) => $this->variant !== Variant::TEXT,
             'mdc-button--icon-leading' => (bool) $this->startIcon,
             'mdc-button--icon-trailing' => (bool) $this->endIcon,
-            'fullwidth' => $this->isFullwidth,
+            'fullwidth' => $this->fullwidth,
         ]);
     }
+
+    public function getHtmlTag(ComponentAttributeBag $attributes)
+    {
+        if ($this->htmlTag) {
+            return $this->htmlTag;
+        }
+
+        return $attributes->has('href') ? 'a' : 'button';
+    }
+
+    private function validateSlot(ComponentSlot $slot)
+    {
+        throw_if(
+            ! $this->label && $slot->isEmpty(),
+            new InvalidArgumentException('Please fill the "label" attribute or the component slot')
+        );
+
+        throw_if(
+            $this->label && $slot->hasActualContent(),
+            new InvalidArgumentException('You cannot use both "label" attribute and the component slot')
+        );
+    }
 }
diff --git a/src/Components/Button/Properties/Variant.php b/src/Components/Button/Properties/Variant.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace MaterialBlade\Components\Button\Properties;
+
+use MaterialBlade\Traits\PropertyEnum;
+
+enum Variant: string
+{
+    use PropertyEnum;
+
+    case RAISED = 'raised';
+    case OUTLINED = 'outlined';
+    case UNELEVATED = 'unelevated';
+    case TEXT = 'text';
+}
diff --git a/src/Components/FAB.php b/src/Components/FAB.php
@@ -5,16 +5,21 @@
 use Illuminate\View\Component;
 use Illuminate\View\ComponentAttributeBag;
 use InvalidArgumentException;
+use MaterialBlade\Components\FAB\Properties\Variant;
 use MaterialBlade\Helper;
 
+/**
+ * @see https://mui.com/material-ui/react-floating-action-button/
+ * @see https://m2.material.io/components/buttons-floating-action-button/web
+ * @see https://github.com/material-components/material-components-web/blob/v14.0.0/packages/mdc-fab/README.md
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/fab
+ */
 class FAB extends Component
 {
-    public string $variant;
+    private Variant $variant;
 
     public bool $isWithWrapper;
 
-    public ?string $color;
-
     public ?string $label;
 
     /**
@@ -24,13 +29,13 @@ class FAB extends Component
      */
     public function __construct(
         string $variant = 'regular',
-        string $color = 'secondary',
         bool $withWrapper = false,
         ?string $label = null,
 
+        private string $color = 'secondary',
         public string|array|null $icon = null,
     ) {
-        $this->variant = $variant;
+        $this->variant = Variant::fromString($variant);
         $this->color = $color;
         $this->isWithWrapper = $withWrapper;
         $this->label = $label;
@@ -54,9 +59,11 @@ public function attributesPreprocess(ComponentAttributeBag $attributes)
             $attributes = $attributes->merge(['style' => $attributes->prepends('--mdc-theme-secondary: '.Helper::getColor($this->color))]);
         }
 
-        return $attributes->class([
+        return $attributes->merge([
+            'data-mdc-auto-init' => 'MDCRipple',
+        ])->class([
             'mdc-fab',
-            'mdc-fab--mini' => $this->variant === 'mini',
+            'mdc-fab--mini' => $this->variant === Variant::MINI,
             'mdc-fab--extended' => $this->label,
             'mdc-fab--touch' => $this->isWithWrapper,
         ]);
@@ -65,7 +72,7 @@ public function attributesPreprocess(ComponentAttributeBag $attributes)
     private function validateComponent()
     {
         throw_if(
-            $this->variant === 'mini' && $this->label,
+            $this->variant === Variant::MINI && $this->label,
             new InvalidArgumentException('"mini" variant can\'t have a label')
         );
 

diff --git a/src/Components/FAB/Properties/Variant.php b/src/Components/FAB/Properties/Variant.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace MaterialBlade\Components\FAB\Properties;
+
+use MaterialBlade\Traits\PropertyEnum;
+
+enum Variant: string
+{
+    use PropertyEnum;
+
+    case REGULAR = 'regular';
+    case MINI = 'mini';
+}
diff --git a/src/Components/IconButton.php b/src/Components/IconButton.php
@@ -5,42 +5,32 @@
 use Illuminate\View\Component;
 use Illuminate\View\ComponentAttributeBag;
 
+/**
+ * @see https://mui.com/material-ui/react-icon-button/
+ * @see https://m2.material.io/develop/web/components/buttons/icon-buttons
+ * @see https://github.com/material-components/material-components-web/blob/v14.0.0/packages/mdc-icon-button/README.md
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/icon-button
+ */
 class IconButton extends Component
 {
-    public bool $isRipple;
-
-    public bool $isWithWrapper;
-
-    public ?string $color;
-
-    public ?bool $isToggle;
-
-    public ?string $offColor;
-
-    // public $size;
-
     /**
      * Create a new component instance.
      *
      * @return void
      */
     public function __construct(
         public string|array $icon,
-        string $color = 'var(--mdc-theme-text-secondary-on-light)',
-        string $offColor = 'var(--mdc-theme-text-secondary-on-light)',
-        bool $disableRipple = false,
-        bool $withWrapper = false,
-        ?string $toggle = null,
-        public string|array|null $offIcon = null
+        public bool $withWrapper = false,
+        public bool $disableRipple = false,
+        public string|array|null $offIcon = null,
+        public string $color = 'var(--mdc-theme-text-secondary-on-background)',
+        public ?string $toggle = null,
+
+        // only on view
+        public string $offColor = 'var(--mdc-theme-text-secondary-on-background)'
+
         // string $size = null
-    ) {
-        $this->color = $color;
-        $this->isToggle = is_null($toggle) ? null : ($toggle == 'on' ? true : false);
-        $this->offColor = $offColor;
-        $this->isRipple = ! $disableRipple;
-        $this->isWithWrapper = $withWrapper;
-        // $this->size = $size;
-    }
+    ) {}
 
     /**
      * Get the view / contents that represent the component.
@@ -56,18 +46,16 @@ public function attributesPreprocess(ComponentAttributeBag $attributes)
     {
         $attributes = $attributes->class([
             'mdc-icon-button',
-            'mdc-icon-button--touch' => $this->isWithWrapper,
-            'mdc-icon-button--on' => $this->isToggle,
+            'mdc-icon-button--touch' => $this->withWrapper,
+            'mdc-icon-button--on' => $this->toggle === 'on',
         ]);
 
         $attributes = $attributes->merge(['aria-label' => $this->icon]);
 
-        if (! is_null($this->isToggle)) {
-            $attributes = $attributes->merge(['aria-pressed' => $this->isToggle]);
+        if ($this->toggle !== null) {
+            $attributes = $attributes->merge(['aria-pressed' => $this->toggle]);
         }
 
-        return $attributes->merge([
-            'data-mdc-auto-init' => 'MDCRipple',
-        ]);
+        return $attributes;
     }
 }