Aura - Rating | fix focus outline

primefaces · Apr 4, 2024 · 419d42c · 419d42c
1 parent 2efa214
commit 419d42c
Show file tree

Hide file tree

Showing 72 changed files with 298 additions and 92 deletions.
diff --git a/src/app/components/rating/rating.css b/src/app/components/rating/rating.css
@@ -1,6 +1,8 @@
 @layer primeng {
     .p-rating {
         display: inline-flex;
+        position: relative;
+        align-items: center;
     }
 
     .p-rating-icon {

diff --git a/src/app/components/rating/rating.ts b/src/app/components/rating/rating.ts
@@ -24,7 +24,7 @@ export const RATING_VALUE_ACCESSOR: any = {
     template: `
         <div class="p-rating" [ngClass]="{ 'p-readonly': readonly, 'p-disabled': disabled }" [attr.data-pc-name]="'rating'" [attr.data-pc-section]="'root'">
             <ng-container *ngIf="!isCustomIcon; else customTemplate">
-                <div *ngIf="cancel" [attr.data-pc-section]="'cancelItem'" (click)="onOptionClick($event, 0)" [ngClass]="{ 'p-focus': focusedOptionIndex() === 0 && isFocusVisible }" class="p-rating-item p-rating-cancel-item">
+                <div *ngIf="cancel" [attr.data-pc-section]="'cancelItem'" (click)="onOptionClick($event, 0)" [ngClass]="{ 'p-focus': focusedOptionIndex() === 0 }" class="p-rating-item p-rating-cancel-item">
                     <span class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
                         <input
                             type="radio"
@@ -43,7 +43,7 @@ export const RATING_VALUE_ACCESSOR: any = {
                     <BanIcon *ngIf="!iconCancelClass" [styleClass]="'p-rating-icon p-rating-cancel'" [ngStyle]="iconCancelStyle" [attr.data-pc-section]="'cancelIcon'" />
                 </div>
                 <ng-template ngFor [ngForOf]="starsArray" let-star let-i="index">
-                    <div class="p-rating-item" [ngClass]="{ 'p-rating-item-active': star + 1 <= value, 'p-focus': star + 1 === focusedOptionIndex() && isFocusVisible }" (click)="onOptionClick($event, star + 1)">
+                    <div class="p-rating-item" [ngClass]="{ 'p-rating-item-active': star + 1 <= value, 'p-focus': star + 1 === focusedOptionIndex() }" (click)="onOptionClick($event, star + 1)">
                         <span class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
                             <input
                                 type="radio"

diff --git a/src/app/showcase/doc/togglebutton/basicdoc.ts b/src/app/showcase/doc/togglebutton/basicdoc.ts
@@ -8,7 +8,7 @@ import { Code } from '../../domain/code';
             <p>Two-way binding to a boolean property is defined using the standard <i>ngModel</i> directive.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-toggleButton [(ngModel)]="checked" onLabel="Yes" offLabel="No"></p-toggleButton>
+            <p-toggleButton [(ngModel)]="checked" onLabel="Yes" offLabel="No" styleClass="w-6rem"></p-toggleButton>
         </div>
         <app-code [code]="code" selector="toggle-button-basic-demo"></app-code>
     `

diff --git a/src/app/showcase/service/appconfigservice.ts b/src/app/showcase/service/appconfigservice.ts
@@ -9,7 +9,7 @@ import { isPlatformBrowser } from '@angular/common';
 })
 export class AppConfigService {
     _config: AppConfig = {
-        theme: 'aura-light-blue',
+        theme: 'aura-light-green',
         darkMode: false,
         inputStyle: 'outlined',
         ripple: true,

diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
@@ -1693,6 +1693,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1709,7 +1713,6 @@
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #93cbf9;
-    border-color: #64B5F6;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #64B5F6;

diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
@@ -1693,6 +1693,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1709,7 +1713,6 @@
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #a7d8a9;
-    border-color: #81C784;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #81C784;

diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
@@ -1693,6 +1693,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1709,7 +1713,6 @@
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #ffe284;
-    border-color: #FFD54F;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #FFD54F;

diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
@@ -1693,6 +1693,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: rgba(255, 255, 255, 0.87);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1709,7 +1713,6 @@
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 1px #cf95d9;
-    border-color: #BA68C8;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #BA68C8;

diff --git a/src/assets/components/themes/aura-dark-amber/theme.css b/src/assets/components/themes/aura-dark-amber/theme.css
@@ -1710,6 +1710,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #a1a1aa;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
@@ -1724,9 +1728,8 @@
   }
   .p-rating .p-rating-item.p-focus {
     outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: -1px;
+    outline-offset: 2px;
     box-shadow: none;
-    border-color: #52525b;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #fbbf24;

diff --git a/src/assets/components/themes/aura-dark-blue/theme.css b/src/assets/components/themes/aura-dark-blue/theme.css
@@ -1710,6 +1710,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #a1a1aa;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
@@ -1724,9 +1728,8 @@
   }
   .p-rating .p-rating-item.p-focus {
     outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: -1px;
+    outline-offset: 2px;
     box-shadow: none;
-    border-color: #52525b;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #60a5fa;

diff --git a/src/assets/components/themes/aura-dark-cyan/theme.css b/src/assets/components/themes/aura-dark-cyan/theme.css
@@ -1710,6 +1710,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #a1a1aa;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
@@ -1724,9 +1728,8 @@
   }
   .p-rating .p-rating-item.p-focus {
     outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: -1px;
+    outline-offset: 2px;
     box-shadow: none;
-    border-color: #52525b;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #22d3ee;

diff --git a/src/assets/components/themes/aura-dark-green/theme.css b/src/assets/components/themes/aura-dark-green/theme.css
@@ -1710,6 +1710,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #a1a1aa;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
@@ -1724,9 +1728,8 @@
   }
   .p-rating .p-rating-item.p-focus {
     outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: -1px;
+    outline-offset: 2px;
     box-shadow: none;
-    border-color: #52525b;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #34d399;

diff --git a/src/assets/components/themes/aura-dark-indigo/theme.css b/src/assets/components/themes/aura-dark-indigo/theme.css
@@ -1710,6 +1710,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #a1a1aa;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
@@ -1724,9 +1728,8 @@
   }
   .p-rating .p-rating-item.p-focus {
     outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: -1px;
+    outline-offset: 2px;
     box-shadow: none;
-    border-color: #52525b;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #818cf8;

diff --git a/src/assets/components/themes/aura-dark-lime/theme.css b/src/assets/components/themes/aura-dark-lime/theme.css
@@ -1710,6 +1710,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #a1a1aa;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
@@ -1724,9 +1728,8 @@
   }
   .p-rating .p-rating-item.p-focus {
     outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: -1px;
+    outline-offset: 2px;
     box-shadow: none;
-    border-color: #52525b;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #a3e635;

diff --git a/src/assets/components/themes/aura-dark-noir/theme.css b/src/assets/components/themes/aura-dark-noir/theme.css
@@ -1710,6 +1710,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #a1a1aa;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
@@ -1724,9 +1728,8 @@
   }
   .p-rating .p-rating-item.p-focus {
     outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: -1px;
+    outline-offset: 2px;
     box-shadow: none;
-    border-color: #52525b;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #fafafa;

diff --git a/src/assets/components/themes/aura-dark-pink/theme.css b/src/assets/components/themes/aura-dark-pink/theme.css
@@ -1710,6 +1710,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #a1a1aa;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
@@ -1724,9 +1728,8 @@
   }
   .p-rating .p-rating-item.p-focus {
     outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: -1px;
+    outline-offset: 2px;
     box-shadow: none;
-    border-color: #52525b;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #f472b6;

diff --git a/src/assets/components/themes/aura-dark-purple/theme.css b/src/assets/components/themes/aura-dark-purple/theme.css
@@ -1710,6 +1710,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #a1a1aa;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
@@ -1724,9 +1728,8 @@
   }
   .p-rating .p-rating-item.p-focus {
     outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: -1px;
+    outline-offset: 2px;
     box-shadow: none;
-    border-color: #52525b;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #a78bfa;

diff --git a/src/assets/components/themes/aura-dark-teal/theme.css b/src/assets/components/themes/aura-dark-teal/theme.css
@@ -1710,6 +1710,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #a1a1aa;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
@@ -1724,9 +1728,8 @@
   }
   .p-rating .p-rating-item.p-focus {
     outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: -1px;
+    outline-offset: 2px;
     box-shadow: none;
-    border-color: #52525b;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #2dd4bf;

diff --git a/src/assets/components/themes/aura-light-amber/theme.css b/src/assets/components/themes/aura-light-amber/theme.css
@@ -1712,6 +1712,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #64748b;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
@@ -1726,9 +1730,8 @@
   }
   .p-rating .p-rating-item.p-focus {
     outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: -1px;
+    outline-offset: 2px;
     box-shadow: none;
-    border-color: #94a3b8;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #f59e0b;

diff --git a/src/assets/components/themes/aura-light-blue/theme.css b/src/assets/components/themes/aura-light-blue/theme.css
@@ -1712,6 +1712,10 @@
   .p-rating {
     gap: 0.5rem;
   }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    outline-color: transparent;
+  }
   .p-rating .p-rating-item .p-rating-icon {
     color: #64748b;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
@@ -1726,9 +1730,8 @@
   }
   .p-rating .p-rating-item.p-focus {
     outline: 1px solid var(--p-focus-ring-color);
-    outline-offset: -1px;
+    outline-offset: 2px;
     box-shadow: none;
-    border-color: #94a3b8;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #3B82F6;