fix: tab buttons touch target (#170)

* fix: tab buttons touch target * fix: feedback close button touch target * tests: update tests
ForkbombEu · Oct 10, 2024 · 27ff6ad · 27ff6ad
1 parent ffc59e7
commit 27ff6ad
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/src/components/feedback/d-feedback.tsx b/src/components/feedback/d-feedback.tsx
@@ -76,8 +76,8 @@ export class DFeedback {
               <div class="w-6 h-6">{this.type === 'success' ? successIcon : errorIcon}</div>
               <d-text>{this.feedback}</d-text>
             </div>
-            <button onClick={this.onClose} class="w-12 h-12 flex items-center justify-end">
-              <div class="w-5 h-5">{closeIcon}</div>
+            <button onClick={this.onClose}>
+              <div class="w-12 h-12 flex items-center justify-end">{closeIcon}</div>
             </button>
           </div>
           {this.message && (

diff --git a/src/components/feedback/test/d-feedback.spec.tsx b/src/components/feedback/test/d-feedback.spec.tsx
@@ -22,8 +22,8 @@ describe('d-feedback', () => {
                </div>
                <d-text></d-text>
              </div>
-             <button class="w-12 h-12 flex items-center justify-end">
-               <div class="h-5 w-5">
+             <button>
+               <div class="w-12 h-12 flex items-center justify-end">
                  <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                    <g id="x">
                      <path clip-rule="evenodd" d="M4.29279 4.29259C4.48031 4.10512 4.73462 3.99981 4.99979 3.99981C5.26495 3.99981 5.51926 4.10512 5.70679 4.29259L9.99979 8.58559L14.2928 4.29259C14.385 4.19708 14.4954 4.1209 14.6174 4.06849C14.7394 4.01608 14.8706 3.9885 15.0034 3.98734C15.1362 3.98619 15.2678 4.01149 15.3907 4.06177C15.5136 4.11205 15.6253 4.18631 15.7192 4.2802C15.8131 4.37409 15.8873 4.48574 15.9376 4.60864C15.9879 4.73154 16.0132 4.86321 16.012 4.99599C16.0109 5.12877 15.9833 5.25999 15.9309 5.382C15.8785 5.504 15.8023 5.61435 15.7068 5.70659L11.4138 9.99959L15.7068 14.2926C15.8889 14.4812 15.9897 14.7338 15.9875 14.996C15.9852 15.2582 15.88 15.509 15.6946 15.6944C15.5092 15.8798 15.2584 15.985 14.9962 15.9873C14.734 15.9895 14.4814 15.8888 14.2928 15.7066L9.99979 11.4136L5.70679 15.7066C5.51818 15.8888 5.26558 15.9895 5.00339 15.9873C4.74119 15.985 4.49038 15.8798 4.30497 15.6944C4.11956 15.509 4.01439 15.2582 4.01211 14.996C4.00983 14.7338 4.11063 14.4812 4.29279 14.2926L8.58579 9.99959L4.29279 5.70659C4.10532 5.51907 4 5.26476 4 4.99959C4 4.73443 4.10532 4.48012 4.29279 4.29259Z" fill="currentColor" fill-rule="evenodd" id="Vector"></path>

diff --git a/src/components/icon/d-icon.tsx b/src/components/icon/d-icon.tsx
@@ -13,6 +13,7 @@ export class DIcon {
   @Prop() outline: boolean = false;
   @Prop() size: number = 24;
   @State() private pathData: { d: string; fill?: string; stroke?: string }[];
+  @State() private fillAndStroke: { fill: string; stroke: string };
   @State() private pathList: HTMLElement[];
   @State() private visible = false;
   private intersectionObserver: IntersectionObserver;
@@ -22,6 +23,7 @@ export class DIcon {
       this.visible = true;
       await this.loadIconPathData();
       this.generatePathList();
+      this.getFillAndStroke();
     });
   }
 
@@ -37,18 +39,20 @@ export class DIcon {
   }
 
   render() {
-    const fill = this.outline ? 'none' : 'currentColor';
-    const stroke = this.outline ? 'currentColor' : 'none';
     const { size } = this;
     return (
       <Host>
-        <svg xmlns="http://www.w3.org/2000/svg" fill={fill} stroke={stroke} height={size} width={size} viewBox="0 0 24 24">
+        <svg xmlns="http://www.w3.org/2000/svg" height={size} width={size} viewBox="0 0 24 24" {...this.fillAndStroke}>
           {this.pathList}
         </svg>
       </Host>
     );
   }
 
+  @Watch('outline') private getFillAndStroke(): void {
+    this.fillAndStroke = this.outline ? { fill: 'none', stroke: 'currentColor' } : { fill: 'currentColor', stroke: 'none' };
+  }
+
   @Watch('icon') private async loadIconPathData(): Promise<void> {
     const { icon, visible } = this;
     if (!Build.isBrowser || !icon || !visible) {

diff --git a/src/components/tab-button/d-tab-button.tsx b/src/components/tab-button/d-tab-button.tsx
@@ -23,7 +23,7 @@ export class DTabButton {
       const icon = icons[this.tab];
       if (!icon) return null;
 
-      return <d-icon icon={icon} size={28} {...(this.active ? {} : { outline: true })} />;
+      return <d-icon icon={icon} size={28} outline={!this.active} />;
     };
 
     return (
@@ -32,6 +32,7 @@ export class DTabButton {
           tab={this.tab}
           href={`/${this.tab}`}
           class={{
+            'h-12 w-12 block': true,
             'text-on-alt': !this.active,
             'text-on': this.active,
           }}

diff --git a/src/components/tab-button/test/d-tab-button.spec.tsx b/src/components/tab-button/test/d-tab-button.spec.tsx
@@ -10,7 +10,7 @@ describe('d-tab-button', () => {
     expect(page.root).toEqualHtml(`
       <d-tab-button tab="home">
        <mock:shadow-root>
-         <ion-tab-button class="text-on-alt" href="/home" tab="home">
+         <ion-tab-button class="block h-12 text-on-alt w-12" href="/home" tab="home">
            <div class="relative w-fit">
               <d-icon icon="home" outline="" size="28"></d-icon>
             </div>