tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: enhance button showcase layout and add disabled state examples

Browse Source
This commit is contained in:
ncoronel
2026-06-26 08:57:15 -03:00
parent 3c163e672b
commit 6086070891
3 changed files with 54 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
View File

@@ -7,12 +7,39 @@
Pagina dedicada a probar variantes de los componentes compartidos.
</p>
<div class="button-grid">
<app-button>Primary</app-button>
<app-button variant="secondary">Secondary</app-button>
<app-button variant="danger">Danger</app-button>
<app-button variant="danger-secondary">Danger secondary</app-button>
<app-button variant="cancel">Cancel</app-button>
<div class="button-showcase">
<div class="button-group">
<h2>Comunes</h2>
<div class="button-grid">
<app-button>Primary</app-button>
<app-button variant="secondary">Secondary</app-button>
<app-button variant="danger">Danger</app-button>
<app-button variant="danger-secondary">Danger secondary</app-button>
<app-button variant="cancel">Cancel</app-button>
</div>
</div>
<div class="button-group">
<h2>Disabled</h2>
<div class="button-grid">
<app-button [disabled]="true">Primary</app-button>
<app-button variant="secondary" [disabled]="true">Secondary</app-button>
<app-button variant="danger" [disabled]="true">Danger</app-button>
<app-button variant="danger-secondary" [disabled]="true">Danger secondary</app-button>
<app-button variant="cancel" [disabled]="true">Cancel</app-button>
</div>
</div>
<div class="button-group">
<h2>Una letra</h2>
<div class="button-grid button-grid--single-char">
<app-button>A</app-button>
<app-button variant="secondary">B</app-button>
<app-button variant="danger">C</app-button>
<app-button variant="danger-secondary">D</app-button>
<app-button variant="cancel">E</app-button>
</div>
</div>
</div>
<hr class="section-divider" />

20
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
View File

@@ -35,6 +35,26 @@ h1 {
gap: 0.75rem;
}
.button-showcase {
display: grid;
gap: 1.25rem;
}
.button-group {
display: grid;
gap: 0.75rem;
}
.button-group h2 {
margin: 0;
font-size: 1rem;
font-weight: 700;
}
.button-grid--single-char app-button {
min-width: 3rem;
}
.section-divider {
margin: 2rem 0;
}