Skip to content

Commit e267b04

Browse files
udeniusudenius
committed
refactor: replace <button> with <f-button> in examples (refs SFKUI-7309)
1 parent 95201b6 commit e267b04

File tree

50 files changed

+388
-455
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+388
-455
lines changed

‎docs/components/page-layout/examples/FLayoutApplicationTemplateExample.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import { defineComponent } from "vue";
33
import {
4+
FButton,
45
FLayoutApplicationTemplate,
56
FLayoutLeftPanel,
67
FLayoutRightPanel,
@@ -19,8 +20,8 @@ interface ExampleData {
1920
}
2021
2122
export default defineComponent({
22-
name: "FullNavigationExampleApp",
23-
components: { FLayoutApplicationTemplate, FLayoutLeftPanel, FLayoutRightPanel },
23+
name: "FLayoutApplicationTemplateExample",
24+
components: { FButton, FLayoutApplicationTemplate, FLayoutLeftPanel, FLayoutRightPanel },
2425
data(): ExampleData {
2526
return {
2627
selectedText: "",
@@ -77,9 +78,7 @@ export default defineComponent({
7778

7879
<template #content>
7980
<p>{{ selectedText }}</p>
80-
<button class="button button--primary" type="button" @click="closePanel()">
81-
Stäng
82-
</button>
81+
<f-button @click="closePanel()">Stäng</f-button>
8382
</template>
8483
<template #default>
8584
<div class="container-fluid">

‎docs/components/validation/examples/RequiredExample.vue‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script lang="ts">
22
import { defineComponent } from "vue";
3-
import { FTextField, FValidationForm } from "@fkui/vue";
3+
import { FButton, FTextField, FValidationForm } from "@fkui/vue";
44
55
export default defineComponent({
66
name: "RequiredExample",
7-
components: { FTextField, FValidationForm },
7+
components: { FButton, FTextField, FValidationForm },
88
data() {
99
return { model: "" };
1010
},
@@ -23,20 +23,12 @@ export default defineComponent({
2323
<f-validation-form :use-error-list="false" @submit="onSubmit">
2424
<f-text-field v-model="model" v-validation.required> Fyll i minst ett tecken </f-text-field>
2525
<div class="button-group">
26-
<button
27-
id="submit"
28-
type="submit"
29-
class="button button-group__item button--primary button--large"
30-
>
26+
<f-button id="submit" class="button-group__item" size="large" type="submit">
3127
Spara
32-
</button>
33-
<button
34-
type="button"
35-
class="button button-group__item button--secondary button--large"
36-
@click="onCancel"
37-
>
28+
</f-button>
29+
<f-button class="button-group__item" size="large" variant="secondary" @click="onCancel">
3830
Avbryt
39-
</button>
31+
</f-button>
4032
</div>
4133
</f-validation-form>
4234
</template>

‎docs/styles/examples/CompareDensity.vue‎

Lines changed: 44 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
import { defineComponent } from "vue";
33
import {
44
FBadge,
5+
FButton,
56
FCard,
67
FCheckboxField,
78
FDataTable,
89
FDatepickerField,
910
FExpandablePanel,
1011
FExpandableParagraph,
1112
FFieldset,
12-
FIcon,
1313
FList,
1414
FMessageBox,
1515
FRadioField,
@@ -23,24 +23,24 @@ import {
2323
2424
export default defineComponent({
2525
components: {
26-
FTextField,
27-
FTextareaField,
28-
FSelectField,
29-
FDatepickerField,
30-
FFieldset,
26+
FBadge,
27+
FButton,
28+
FCard,
3129
FCheckboxField,
32-
FRadioField,
3330
FDataTable,
34-
FTableColumn,
35-
FList,
36-
FCard,
37-
FBadge,
38-
FExpandableParagraph,
31+
FDatepickerField,
3932
FExpandablePanel,
33+
FExpandableParagraph,
34+
FFieldset,
35+
FList,
4036
FMessageBox,
41-
FTooltip,
42-
FIcon,
37+
FRadioField,
38+
FSelectField,
4339
FStaticField,
40+
FTableColumn,
41+
FTextField,
42+
FTextareaField,
43+
FTooltip,
4444
},
4545
data() {
4646
return {
@@ -191,64 +191,53 @@ export default defineComponent({
191191
<template #default> Innehåll </template>
192192
<template #footer>
193193
<div class="button-group">
194-
<button
195-
class="button button-group__item button--tertiary button--medium button--align-text"
196-
type="button"
194+
<f-button
195+
class="button-group__item"
196+
align-text
197+
icon-left="pen"
198+
variant="tertiary"
197199
>
198-
<f-icon name="pen"></f-icon>
199200
<span> Ändra </span>
200-
</button>
201-
<button
202-
class="button button-group__item button--tertiary button--medium button--align-text"
203-
type="button"
201+
</f-button>
202+
<f-button
203+
class="button-group__item"
204+
align-text
205+
icon-left="trashcan"
206+
variant="tertiary"
204207
>
205-
<f-icon name="trashcan"></f-icon>
206208
<span> Ta bort </span>
207-
</button>
209+
</f-button>
208210
</div>
209211
</template>
210212
</f-card>
211213

212214
<div class="button-group">
213-
<button
214-
class="button button--primary button--medium button-group__item"
215-
type="button"
216-
>
217-
Medium
218-
</button>
219-
<button
220-
class="button button--secondary button--medium button-group__item"
221-
type="button"
215+
<f-button class="button-group__item"> Medium </f-button>
216+
<f-button class="button-group__item" variant="secondary"> Medium </f-button>
217+
<f-button
218+
class="button-group__item"
219+
align-text
220+
icon-left="paper-clip"
221+
variant="tertiary"
222222
>
223223
Medium
224-
</button>
225-
<button
226-
class="button button--tertiary button--medium button-group__item"
227-
type="button"
228-
>
229-
<f-icon name="paper-clip" class="button__icon"></f-icon> Medium
230-
</button>
224+
</f-button>
231225
</div>
232226

233227
<div class="button-group">
234-
<button
235-
class="button button--primary button--large button-group__item"
236-
type="button"
237-
>
228+
<f-button class="button-group__item" size="large"> Large </f-button>
229+
<f-button class="button-group__item" size="large" variant="secondary">
238230
Large
239-
</button>
240-
<button
241-
class="button button--secondary button--large button-group__item"
242-
type="button"
231+
</f-button>
232+
<f-button
233+
class="button-group__item"
234+
align-text
235+
icon-left="paper-clip"
236+
size="large"
237+
variant="tertiary"
243238
>
244239
Large
245-
</button>
246-
<button
247-
class="button button--tertiary button--large button-group__item"
248-
type="button"
249-
>
250-
<f-icon name="paper-clip" class="button__icon"></f-icon> Large
251-
</button>
240+
</f-button>
252241
</div>
253242

254243
<f-badge> Bricka </f-badge>

‎examples/page-layout/src/views/XOverviewView.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { FInteractiveTable, FTableColumn, useDetailsPanel } from "@fkui/vue";
2+
import { FButton, FInteractiveTable, FTableColumn, useDetailsPanel } from "@fkui/vue";
33
import { type Expense } from "../expense";
44
import { type Person } from "../person";
55
@@ -25,7 +25,7 @@ function openThing(): void {
2525
<template>
2626
<h1>Översikt</h1>
2727
<p>Lorem ipsum dolor sit amet</p>
28-
<button type="button" class="button button--secondary" @click="openThing">Öppna en helt annan detaljpanel</button>
28+
<f-button type="button" variant="secondary" @click="openThing">Öppna en helt annan detaljpanel</f-button>
2929

3030
<f-interactive-table
3131
:rows="ankeborgare"

‎packages/vue-labs/src/components/FTable/examples/FTableBulkTestExample.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { ref, useTemplateRef } from "vue";
33
import { assertRef, formatNumber } from "@fkui/logic";
4-
import { FSortFilterDataset } from "@fkui/vue";
4+
import { FButton, FSortFilterDataset } from "@fkui/vue";
55
import { FTable, defineTableColumns } from "@fkui/vue-labs";
66
77
const tableRef = useTemplateRef("table");
@@ -51,9 +51,7 @@ function onRemoveSelectedRows(): void {
5151
</script>
5252

5353
<template>
54-
<button type="button" class="button button--secondary" @click="onRemoveSelectedRows">
55-
Ta bort markerade rader
56-
</button>
54+
<f-button variant="secondary" @click="onRemoveSelectedRows"> Ta bort markerade rader </f-button>
5755
<f-sort-filter-dataset v-test="'filter'" :data="rows" :sortable-attributes>
5856
<template #default="{ sortFilterResult }">
5957
<f-table
@@ -65,5 +63,5 @@ function onRemoveSelectedRows(): void {
6563
></f-table>
6664
</template>
6765
</f-sort-filter-dataset>
68-
<button type="button" class="button button--secondary" @click="onAddRow">Lägg till rad</button>
66+
<f-button variant="secondary" @click="onAddRow">Lägg till rad</f-button>
6967
</template>

‎packages/vue-labs/src/components/FTable/examples/FTableExample.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { h, ref, useTemplateRef } from "vue";
33
import { assertRef, formatNumber } from "@fkui/logic";
4-
import { FSortFilterDataset } from "@fkui/vue";
4+
import { FButton, FSortFilterDataset } from "@fkui/vue";
55
import { type TableColumn, FTable, defineTableColumns, removeRow } from "@fkui/vue-labs";
66
77
const tableRef = useTemplateRef("table");
@@ -250,9 +250,7 @@ function onRemoveSelectedRows(): void {
250250
</script>
251251

252252
<template>
253-
<button type="button" class="button button--secondary" @click="onRemoveSelectedRows">
254-
Ta bort markerade rader
255-
</button>
253+
<f-button variant="secondary" @click="onRemoveSelectedRows"> Ta bort markerade rader </f-button>
256254
<f-sort-filter-dataset :data="rows" :sortable-attributes>
257255
<template #default="{ sortFilterResult }">
258256
<f-table
@@ -270,7 +268,7 @@ function onRemoveSelectedRows(): void {
270268
</f-table>
271269
</template>
272270
</f-sort-filter-dataset>
273-
<button type="button" class="button button--secondary" @click="onAddRow">Lägg till rad</button>
271+
<f-button variant="secondary" @click="onAddRow">Lägg till rad</f-button>
274272
</template>
275273

276274
<style>

‎packages/vue-labs/src/components/FTable/examples/FTableInputFieldsExample.vue‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
import { computed, ref } from "vue";
33
import { ValidationService } from "@fkui/logic";
4+
import { FButton } from "@fkui/vue";
45
import { FTable, defineTableColumns } from "@fkui/vue-labs";
56
67
interface TableRow {
@@ -229,9 +230,7 @@ function validataAll(): void {
229230
</script>
230231

231232
<template>
232-
<button type="button" class="button button--secondary" @click="validataAll">
233-
Interagerbart element före
234-
</button>
233+
<f-button variant="secondary" @click="validataAll"> Interagerbart element före </f-button>
235234
<div id="all">
236235
<f-table :rows :columns="columns1" key-attribute="id" striped> </f-table>
237236
<f-table :rows :columns="columns2" key-attribute="id" striped> </f-table>
@@ -240,7 +239,5 @@ function validataAll(): void {
240239
<pre>Summa: {{ { sum } }}</pre>
241240
<h3>Rows ({{ rows.length }} items):</h3>
242241
<pre>{{ rows }}</pre>
243-
<button type="button" class="button button--secondary" @click="validataAll">
244-
Interagerbart element efter
245-
</button>
242+
<f-button variant="secondary" @click="validataAll"> Interagerbart element efter </f-button>
246243
</template>

‎packages/vue/src/components/FContextMenu/examples/FContextMenuExample.vue‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { defineComponent } from "vue";
3-
import { type ContextMenuItem, FContextMenu } from "@fkui/vue";
3+
import { type ContextMenuItem, FButton, FContextMenu } from "@fkui/vue";
44
55
const exampleItems: ContextMenuItem[] = [
66
{ label: "Påminnelse", key: "MENU_2", icon: "bell" },
@@ -12,7 +12,7 @@ const exampleItems: ContextMenuItem[] = [
1212
1313
export default defineComponent({
1414
name: "FContextMenuExample",
15-
components: { FContextMenu },
15+
components: { FButton, FContextMenu },
1616
data() {
1717
return {
1818
items: exampleItems,
@@ -39,16 +39,14 @@ export default defineComponent({
3939

4040
<template>
4141
<div data-testid="fcontextmenu-exempel1">
42-
<button
42+
<f-button
4343
ref="popupAnchor"
4444
data-test="open-example-contextmenu-button"
45-
type="button"
46-
class="button button--primary"
4745
aria-haspopup="menu"
4846
@click="onClick"
4947
>
5048
Öppna
51-
</button>
49+
</f-button>
5250
<pre>Selected: {{ selected }}</pre>
5351
<f-context-menu
5452
data-test="contextmenu-open"

‎packages/vue/src/components/FContextMenu/examples/FContextMenuExampleTextOnly.vue‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { defineComponent } from "vue";
3-
import { type ContextMenuItem, FContextMenu } from "@fkui/vue";
3+
import { type ContextMenuItem, FButton, FContextMenu } from "@fkui/vue";
44
55
const exampleItems: ContextMenuItem[] = [
66
{ label: "Skriv ut", key: "MENU_1" },
@@ -15,7 +15,7 @@ const exampleItems: ContextMenuItem[] = [
1515
1616
export default defineComponent({
1717
name: "FContextMenuExampleTextOnly",
18-
components: { FContextMenu },
18+
components: { FButton, FContextMenu },
1919
data() {
2020
return {
2121
items: exampleItems,
@@ -42,16 +42,14 @@ export default defineComponent({
4242

4343
<template>
4444
<div data-testid="fcontextmenu-exempel2">
45-
<button
45+
<f-button
4646
ref="popupAnchor"
4747
data-test="open-example-contextmenu-button"
48-
type="button"
49-
class="button button--primary"
5048
aria-haspopup="menu"
5149
@click="onClick"
5250
>
5351
Öppna
54-
</button>
52+
</f-button>
5553
<pre>Selected: {{ selected }}</pre>
5654
<f-context-menu
5755
:is-open

0 commit comments

Comments
 (0)