fix: button type directly in class

geonetwork · Jan 11, 2024 · e111a8e · e111a8e
1 parent 438f1ef
commit e111a8e
Show file tree

Hide file tree

Showing 22 changed files with 42 additions and 37 deletions.
diff --git a/apps/datafeeder/src/app/presentation/components/upload-data/upload-data.component.html b/apps/datafeeder/src/app/presentation/components/upload-data/upload-data.component.html
@@ -36,7 +36,7 @@
 </div>
 <gn-ui-button
   (buttonClick)="handleUploadBtnClick()"
-  type="primary"
+  type="btn-primary"
   extraClass="rounded-full px-20"
   [disabled]="uploading"
 >

diff --git a/...atafeeder/src/app/presentation/pages/dataset-validation-page/dataset-validation-page.html b/...atafeeder/src/app/presentation/pages/dataset-validation-page/dataset-validation-page.html
@@ -46,7 +46,7 @@
       <gn-ui-button
         (buttonClick)="submitValidation()"
         [disabled]="!isValid()"
-        type="primary"
+        type="btn-primary"
         extraClass="rounded-full px-20"
       >
         <span class="uppercase text-white font-bold" translate>

diff --git a/...eeder/src/app/presentation/pages/success-publish-page/success-publish-page.component.html b/...eeder/src/app/presentation/pages/success-publish-page/success-publish-page.component.html
@@ -13,15 +13,15 @@
       <div class="flex-1 flex flex-col justify-between pl-20">
         <div class="flex flex-col pt-8">
           <gn-ui-button
-            type="primary"
+            type="btn-primary"
             extraClass="rounded-full px-20 mb-2"
             (buttonClick)="openGeonetworkLink()"
             ><span translate class="uppercase text-white font-bold"
               >datafeeder.publishSuccess.geonetworkRecord</span
             ></gn-ui-button
           >
           <gn-ui-button
-            type="primary"
+            type="btn-primary"
             extraClass="rounded-full px-20"
             (buttonClick)="openGeoserverLink()"
             ><span class="uppercase text-white font-bold" translate
@@ -31,7 +31,7 @@
         </div>
 
         <gn-ui-button
-          type="primary"
+          type="btn-primary"
           extraClass="rounded-full px-20 secondary"
           (buttonClick)="backToHome()"
         >

diff --git a/apps/datafeeder/src/app/presentation/pages/summarize-page/summarize-page.component.html b/apps/datafeeder/src/app/presentation/pages/summarize-page/summarize-page.component.html
@@ -17,7 +17,7 @@
           <gn-ui-wizard-summarize></gn-ui-wizard-summarize>
           <gn-ui-button
             class="pt-10"
-            type="primary"
+            type="btn-primary"
             extraClass="rounded-full px-20"
             (buttonClick)="submit()"
             ><span class="uppercase text-white font-bold" translate
@@ -30,7 +30,7 @@
         </div>
       </div>
       <gn-ui-button
-        type="primary"
+        type="btn-primary"
         extraClass="rounded-full px-20 secondary"
         (buttonClick)="previous()"
         ><span class="uppercase font-bold"

diff --git a/apps/datahub/src/app/home/search/search-filters/search-filters.component.html b/apps/datahub/src/app/home/search/search-filters/search-filters.component.html
@@ -77,7 +77,7 @@ <h2 class="text-xl mr-4 font-title" translate>
       *ngIf="!userId && (myRecordsFilterEnabled$ | async) && isOpen"
     >
       <gn-ui-button
-        type="light"
+        type="btn-light"
         extraClass="text-sm align-middle"
         (buttonClick)="toggleMyRecordsFilter(false)"
       >
@@ -104,7 +104,7 @@ <h2 class="text-xl mr-4 font-title" translate>
         class="hidden sm:block"
         *ngIf="!isOpen"
         (buttonClick)="open()"
-        type="outline"
+        type="btn-outline"
         extraClass="!px-[8px]"
         data-cy="filters-expand"
       >

diff --git a/...etadata-converter/src/app/components/record-field-array/record-field-array.component.html b/...etadata-converter/src/app/components/record-field-array/record-field-array.component.html
@@ -14,7 +14,7 @@
       </ng-container>
       <gn-ui-button
         class="absolute top-0 right-1"
-        [type]="'outline'"
+        [type]="'btn-outline'"
         (buttonClick)="removeItem(i)"
         extraClass="!p-[0.5em]"
         title="Delete this item"
@@ -27,7 +27,7 @@
     </div>
     <div class="p-2">
       <gn-ui-button
-        [type]="'primary'"
+        [type]="'btn-primary'"
         (buttonClick)="addItem()"
         extraClass="py-[0.5em] px-[1em]"
       >

diff --git a/...adata-converter/src/app/components/record-field-simple/record-field-simple.component.html b/...adata-converter/src/app/components/record-field-simple/record-field-simple.component.html
@@ -59,7 +59,7 @@
 </div>
 <gn-ui-button
   *ngIf="isMissing"
-  [type]="'outline'"
+  [type]="'btn-outline'"
   (buttonClick)="addValue()"
   extraClass="m-2 py-[0.5em] px-[1em]"
 >

diff --git a/apps/metadata-editor/src/app/edit/edit-page.component.html b/apps/metadata-editor/src/app/edit/edit-page.component.html
@@ -35,13 +35,13 @@ <h1 class="text-xl font-bold font-title mb-4">General informations</h1>
     <div class="mt-10 ml-auto w-max">
       <gn-ui-button
         *ngIf="(saving$ | async) === false"
-        type="primary"
+        type="btn-primary"
         (buttonClick)="saveRecord()"
         >Save record</gn-ui-button
       >
       <gn-ui-button
         *ngIf="(saving$ | async) === true"
-        type="primary"
+        type="btn-primary"
         extraClass="opacity-50"
         [disabled]="true"
       >

diff --git a/apps/webcomponents/src/app/components/gn-aggregated-records/gn-aggregated-records.html b/apps/webcomponents/src/app/components/gn-aggregated-records/gn-aggregated-records.html
@@ -15,7 +15,7 @@
     ></gn-ui-records-metrics>
   </div>
   <div>
-    <gn-ui-button type="secondary" (buttonClick)="clearFilter()" translate
+    <gn-ui-button type="btn-secondary" (buttonClick)="clearFilter()" translate
       >nav.back</gn-ui-button
     >
     <gn-ui-results-list-container></gn-ui-results-list-container>

diff --git a/libs/feature/editor/src/lib/components/wizard/wizard.component.html b/libs/feature/editor/src/lib/components/wizard/wizard.component.html
@@ -10,15 +10,15 @@
 <div class="flex pt-24 pl-8">
   <gn-ui-button
     (buttonClick)="handlePreviousBtnClick()"
-    type="primary"
+    type="btn-primary"
     class="pr-8"
     extraClass="rounded-full px-20"
   >
     <span class="uppercase text-white font-bold" translate>previous</span>
   </gn-ui-button>
   <gn-ui-button
     (buttonClick)="handleNextBtnClick()"
-    type="primary"
+    type="btn-primary"
     extraClass="rounded-full px-20"
   >
     <span class="uppercase text-white font-bold" translate>next</span>

diff --git a/...b/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html b/...b/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html
@@ -10,7 +10,7 @@ <h1 class="text-sm font-medium truncate">
     </h1>
     <ng-container *ngFor="let link of mapLinks">
       <gn-ui-button
-        [type]="'outline'"
+        [type]="'btn-outline'"
         (buttonClick)="handleLinkClick(link)"
         extraClass="!py-[8px] !px-[12px]"
       >

diff --git a/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.html b/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.html
@@ -1,7 +1,7 @@
 <gn-ui-button
   *ngIf="externalViewer"
   (buttonClick)="openInExternalViewer()"
-  type="secondary"
+  type="btn-secondary"
   [title]="'record.externalViewer.open' | translate"
   extraClass="ms-2 !rounded-lg"
 >

diff --git a/libs/feature/search/src/lib/results-list/results-list.container.component.html b/libs/feature/search/src/lib/results-list/results-list.container.component.html
@@ -18,7 +18,7 @@
     <div class="show-more h-[100px] pt-[30px]" *ngIf="showMore === 'button'">
       <gn-ui-button
         data-cy="addMoreBtn"
-        type="secondary"
+        type="btn-secondary"
         (buttonClick)="onShowMore()"
         extraClass="m-auto !p-[22px]"
       >

diff --git a/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html b/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html
@@ -1,7 +1,7 @@
 <div class="relative">
   <div class="flex flex-row gap-[5px] items-center">
     <gn-ui-button
-      type="light"
+      type="btn-light"
       [disabled]="currentPage === 1"
       (buttonClick)="previousPage()"
       extraClass="!px-[3px]"
@@ -22,7 +22,7 @@
       </ng-container>
     </ng-container>
     <gn-ui-button
-      type="light"
+      type="btn-light"
       [disabled]="currentPage === totalPages"
       (buttonClick)="nextPage()"
       extraClass="!px-[3px]"

diff --git a/libs/ui/elements/src/lib/pagination/pagination.component.html b/libs/ui/elements/src/lib/pagination/pagination.component.html
@@ -2,7 +2,7 @@
   <div class="sm:absolute sm:inset-0" *ngIf="!hideButton">
     <gn-ui-button
       (buttonClick)="nextPage()"
-      type="secondary"
+      type="btn-secondary"
       [disabled]="currentPage === nPages"
       extraClass="lg:m-auto !p-[22px]"
     >
@@ -34,7 +34,7 @@
         id="navigate_previous"
         class="mr-2"
         [disabled]="currentPage === 1"
-        [type]="'light'"
+        [type]="'btn-light'"
         extraClass="!px-[3px]"
         data-cy="prev-page"
       >
@@ -44,7 +44,7 @@
         (buttonClick)="nextPage()"
         id="navigate_next"
         [disabled]="currentPage === nPages"
-        [type]="'light'"
+        [type]="'btn-light'"
         extraClass="!px-[3px]"
         data-cy="next-page"
       >

diff --git a/libs/ui/elements/src/lib/pagination/pagination.component.spec.ts b/libs/ui/elements/src/lib/pagination/pagination.component.spec.ts
@@ -34,7 +34,9 @@ describe('PaginationComponent', () => {
     let btn
     describe('by default', () => {
       beforeEach(() => {
-        btn = fixture.debugElement.query(By.css('gn-ui-button[type=secondary]'))
+        btn = fixture.debugElement.query(
+          By.css('gn-ui-button[type=btn-secondary]')
+        )
       })
       it('is displayed', () => {
         expect(btn).toBeTruthy()

diff --git a/libs/ui/inputs/src/lib/button/button.component.html b/libs/ui/inputs/src/lib/button/button.component.html
@@ -1,6 +1,5 @@
 <button
   type="button"
-  class="flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
   [class]="classList"
   [disabled]="disabled"
   (click)="handleClick($event)"

diff --git a/libs/ui/inputs/src/lib/button/button.component.ts b/libs/ui/inputs/src/lib/button/button.component.ts
@@ -14,14 +14,18 @@ import { propagateToDocumentOnly } from '@geonetwork-ui/util/shared'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonComponent {
-  @Input() type: 'primary' | 'secondary' | 'default' | 'outline' | 'light' =
-    'default'
+  @Input() type:
+    | 'btn-primary'
+    | 'btn-secondary'
+    | 'btn-default'
+    | 'btn-outline'
+    | 'btn-light' = 'btn-default'
   @Input() disabled = false
   @Input() extraClass = ''
   @Output() buttonClick = new EventEmitter<void>()
 
   get classList() {
-    return `btn-${this.type} ${this.extraClass}`
+    return `${this.type} ${this.extraClass}`
   }
 
   handleClick(event: Event) {

diff --git a/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html b/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html
@@ -1,5 +1,5 @@
 <gn-ui-button
-  type="outline"
+  type="btn-outline"
   extraClass="w-full !p-[8px] !pl-[16px]"
   [title]="title"
   [attr.aria-owns]="id"

diff --git a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html
@@ -7,7 +7,7 @@
     {{ title }}
   </span>
   <gn-ui-button
-    type="outline"
+    type="btn-outline"
     class="grow min-w-0"
     extraClass="!p-[8px] !pl-[16px] flex flex-row w-full {{ extraBtnClass }}"
     [title]="title"

diff --git a/libs/ui/search/src/lib/record-table/record-table.component.html b/libs/ui/search/src/lib/record-table/record-table.component.html
@@ -69,7 +69,7 @@
         </div>
         <div class="record-table-header text-gray-400 flex gap-1">
           <gn-ui-button
-            type="light"
+            type="btn-light"
             extraClass="px-3 pl-0 space-x-1 text-left"
             (buttonClick)="setSortBy('resourceTitleObject.default.keyword')"
           >
@@ -93,7 +93,7 @@
         </div>
         <div class="record-table-header text-gray-400 flex gap-1">
           <gn-ui-button
-            type="light"
+            type="btn-light"
             extraClass="px-3 pl-0 space-x-1"
             (buttonClick)="setSortBy('recordOwner')"
           >
@@ -114,7 +114,7 @@
         </div>
         <div class="record-table-header text-gray-400 flex gap-1">
           <gn-ui-button
-            type="light"
+            type="btn-light"
             extraClass="px-3 pl-0 space-x-1"
             (buttonClick)="setSortBy('changeDate')"
           >
@@ -135,7 +135,7 @@
         </div>
         <div class="record-table-header text-gray-400 flex gap-1">
           <gn-ui-button
-            type="light"
+            type="btn-light"
             extraClass="px-3 pl-0 space-x-1"
             (buttonClick)="setSortBy('createDate')"
           >

diff --git a/tailwind.base.css b/tailwind.base.css
@@ -8,7 +8,7 @@
   }
 
   .btn {
-    @apply flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50;
+    @apply flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none;
   }
 
   .btn-default {
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ @@
       }
       .btn {
-        @apply flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50;
+        @apply flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none;
       }
       .btn-default {
@@ Expand Down @@