Skip to content

refactor: replace <button> with <f-button> in examples (refs SFKUI-7309) #1065

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
udenius wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor: replace <button> with <f-button> in examples (refs SFKUI-7309) #1065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions docs/components/page-layout/examples/FLayoutApplicationTemplateExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import {
FButton,
FLayoutApplicationTemplate,
FLayoutLeftPanel,
FLayoutRightPanel,
Expand All @@ -19,8 +20,8 @@ interface ExampleData {
}

export default defineComponent({
name: "FullNavigationExampleApp",
components: { FLayoutApplicationTemplate, FLayoutLeftPanel, FLayoutRightPanel },
name: "FLayoutApplicationTemplateExample",
components: { FButton, FLayoutApplicationTemplate, FLayoutLeftPanel, FLayoutRightPanel },
data(): ExampleData {
return {
selectedText: "",
Expand Down Expand Up @@ -77,9 +78,7 @@ export default defineComponent({

<template #content>
<p>{{ selectedText }}</p>
<button class="button button--primary" type="button" @click="closePanel()">
Stäng
</button>
<f-button @click="closePanel()">Stäng</f-button>
</template>
<template #default>
<div class="container-fluid">
Expand Down
20 changes: 6 additions & 14 deletions docs/components/validation/examples/RequiredExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<script lang="ts">
import { defineComponent } from "vue";
import { FTextField, FValidationForm } from "@fkui/vue";
import { FButton, FTextField, FValidationForm } from "@fkui/vue";

export default defineComponent({
name: "RequiredExample",
components: { FTextField, FValidationForm },
components: { FButton, FTextField, FValidationForm },
data() {
return { model: "" };
},
Expand All @@ -23,20 +23,12 @@ export default defineComponent({
<f-validation-form :use-error-list="false" @submit="onSubmit">
<f-text-field v-model="model" v-validation.required> Fyll i minst ett tecken </f-text-field>
<div class="button-group">
<button
id="submit"
type="submit"
class="button button-group__item button--primary button--large"
>
<f-button id="submit" class="button-group__item" size="large" type="submit">
Spara
</button>
<button
type="button"
class="button button-group__item button--secondary button--large"
@click="onCancel"
>
</f-button>
<f-button class="button-group__item" size="large" variant="secondary" @click="onCancel">
Avbryt
</button>
</f-button>
</div>
</f-validation-form>
</template>
99 changes: 44 additions & 55 deletions docs/styles/examples/CompareDensity.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
import { defineComponent } from "vue";
import {
FBadge,
FButton,
FCard,
FCheckboxField,
FDataTable,
FDatepickerField,
FExpandablePanel,
FExpandableParagraph,
FFieldset,
FIcon,
FList,
FMessageBox,
FRadioField,
Expand All @@ -23,24 +23,24 @@ import {

export default defineComponent({
components: {
FTextField,
FTextareaField,
FSelectField,
FDatepickerField,
FFieldset,
FBadge,
FButton,
FCard,
FCheckboxField,
FRadioField,
FDataTable,
FTableColumn,
FList,
FCard,
FBadge,
FExpandableParagraph,
FDatepickerField,
FExpandablePanel,
FExpandableParagraph,
FFieldset,
FList,
FMessageBox,
FTooltip,
FIcon,
FRadioField,
FSelectField,
FStaticField,
FTableColumn,
FTextField,
FTextareaField,
FTooltip,
},
data() {
return {
Expand Down Expand Up @@ -191,64 +191,53 @@ export default defineComponent({
<template #default> Innehåll </template>
<template #footer>
<div class="button-group">
<button
class="button button-group__item button--tertiary button--medium button--align-text"
type="button"
<f-button
class="button-group__item"
align-text
icon-left="pen"
variant="tertiary"
>
<f-icon name="pen"></f-icon>
<span> Ändra </span>
</button>
<button
class="button button-group__item button--tertiary button--medium button--align-text"
type="button"
</f-button>
<f-button
class="button-group__item"
align-text
icon-left="trashcan"
variant="tertiary"
>
<f-icon name="trashcan"></f-icon>
<span> Ta bort </span>
</button>
</f-button>
</div>
</template>
</f-card>

<div class="button-group">
<button
class="button button--primary button--medium button-group__item"
type="button"
>
Medium
</button>
<button
class="button button--secondary button--medium button-group__item"
type="button"
<f-button class="button-group__item"> Medium </f-button>
<f-button class="button-group__item" variant="secondary"> Medium </f-button>
<f-button
class="button-group__item"
align-text
icon-left="paper-clip"
variant="tertiary"
>
Medium
</button>
<button
class="button button--tertiary button--medium button-group__item"
type="button"
>
<f-icon name="paper-clip" class="button__icon"></f-icon> Medium
</button>
</f-button>
</div>

<div class="button-group">
<button
class="button button--primary button--large button-group__item"
type="button"
>
<f-button class="button-group__item" size="large"> Large </f-button>
<f-button class="button-group__item" size="large" variant="secondary">
Large
</button>
<button
class="button button--secondary button--large button-group__item"
type="button"
</f-button>
<f-button
class="button-group__item"
align-text
icon-left="paper-clip"
size="large"
variant="tertiary"
>
Large
</button>
<button
class="button button--tertiary button--large button-group__item"
type="button"
>
<f-icon name="paper-clip" class="button__icon"></f-icon> Large
</button>
</f-button>
</div>

<f-badge> Bricka </f-badge>
Expand Down
4 changes: 2 additions & 2 deletions examples/page-layout/src/views/XOverviewView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { FInteractiveTable, FTableColumn, useDetailsPanel } from "@fkui/vue";
import { FButton, FInteractiveTable, FTableColumn, useDetailsPanel } from "@fkui/vue";
import { type Expense } from "../expense";
import { type Person } from "../person";

Expand All @@ -25,7 +25,7 @@ function openThing(): void {
<template>
<h1>Översikt</h1>
<p>Lorem ipsum dolor sit amet</p>
<button type="button" class="button button--secondary" @click="openThing">Öppna en helt annan detaljpanel</button>
<f-button type="button" variant="secondary" @click="openThing">Öppna en helt annan detaljpanel</f-button>

<f-interactive-table
:rows="ankeborgare"
Expand Down
8 changes: 3 additions & 5 deletions packages/vue-labs/src/components/FTable/examples/FTableBulkTestExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, useTemplateRef } from "vue";
import { assertRef, formatNumber } from "@fkui/logic";
import { FSortFilterDataset } from "@fkui/vue";
import { FButton, FSortFilterDataset } from "@fkui/vue";
import { FTable, defineTableColumns } from "@fkui/vue-labs";

const tableRef = useTemplateRef("table");
Expand Down Expand Up @@ -51,9 +51,7 @@ function onRemoveSelectedRows(): void {
</script>

<template>
<button type="button" class="button button--secondary" @click="onRemoveSelectedRows">
Ta bort markerade rader
</button>
<f-button variant="secondary" @click="onRemoveSelectedRows"> Ta bort markerade rader </f-button>
<f-sort-filter-dataset v-test="'filter'" :data="rows" :sortable-attributes>
<template #default="{ sortFilterResult }">
<f-table
Expand All @@ -65,5 +63,5 @@ function onRemoveSelectedRows(): void {
></f-table>
</template>
</f-sort-filter-dataset>
<button type="button" class="button button--secondary" @click="onAddRow">Lägg till rad</button>
<f-button variant="secondary" @click="onAddRow">Lägg till rad</f-button>
</template>
15 changes: 6 additions & 9 deletions packages/vue-labs/src/components/FTable/examples/FTableExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { h, ref, useTemplateRef } from "vue";
import { assertRef, formatNumber } from "@fkui/logic";
import { FSortFilterDataset } from "@fkui/vue";
import { FButton, FSortFilterDataset } from "@fkui/vue";
import { type TableColumn, FTable, defineTableColumns, removeRow } from "@fkui/vue-labs";

const tableRef = useTemplateRef("table");
Expand Down Expand Up @@ -253,9 +253,7 @@ function onRemoveSelectedRows(): void {
</script>

<template>
<button type="button" class="button button--secondary" @click="onRemoveSelectedRows">
Ta bort markerade rader
</button>
<f-button variant="secondary" @click="onRemoveSelectedRows"> Ta bort markerade rader </f-button>
<f-sort-filter-dataset :data="rows" :sortable-attributes>
<template #default="{ sortFilterResult }">
<f-table
Expand All @@ -273,14 +271,13 @@ function onRemoveSelectedRows(): void {
</f-table>
</template>
</f-sort-filter-dataset>
<button type="button" class="button button--secondary" @click="onAddRow">Lägg till rad</button>
<button
type="button"
class="button button--secondary"
<f-button variant="secondary" @click="onAddRow">Lägg till rad</f-button>
<f-button
variant="secondary"
@click="oformateradTextKolumnSynlig = !oformateradTextKolumnSynlig"
>
Dölj/visa "Oformatterad text"
</button>
</f-button>
</template>

<style>
Expand Down
9 changes: 3 additions & 6 deletions packages/vue-labs/src/components/FTable/examples/FTableInputFieldsExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { computed, ref } from "vue";
import { ValidationService } from "@fkui/logic";
import { FButton } from "@fkui/vue";
import { FTable, defineTableColumns } from "@fkui/vue-labs";

interface TableRow {
Expand Down Expand Up @@ -229,9 +230,7 @@ function validataAll(): void {
</script>

<template>
<button type="button" class="button button--secondary" @click="validataAll">
Interagerbart element före
</button>
<f-button variant="secondary" @click="validataAll"> Interagerbart element före </f-button>
<div id="all">
<f-table :rows :columns="columns1" key-attribute="id" striped> </f-table>
<f-table :rows :columns="columns2" key-attribute="id" striped> </f-table>
Expand All @@ -240,7 +239,5 @@ function validataAll(): void {
<pre>Summa: {{ { sum } }}</pre>
<h3>Rows ({{ rows.length }} items):</h3>
<pre>{{ rows }}</pre>
<button type="button" class="button button--secondary" @click="validataAll">
Interagerbart element efter
</button>
<f-button variant="secondary" @click="validataAll"> Interagerbart element efter </f-button>
</template>
10 changes: 4 additions & 6 deletions packages/vue/src/components/FContextMenu/examples/FContextMenuExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import { defineComponent } from "vue";
import { type ContextMenuItem, FContextMenu } from "@fkui/vue";
import { type ContextMenuItem, FButton, FContextMenu } from "@fkui/vue";

const exampleItems: ContextMenuItem[] = [
{ label: "Påminnelse", key: "MENU_2", icon: "bell" },
Expand All @@ -12,7 +12,7 @@ const exampleItems: ContextMenuItem[] = [

export default defineComponent({
name: "FContextMenuExample",
components: { FContextMenu },
components: { FButton, FContextMenu },
data() {
return {
items: exampleItems,
Expand All @@ -39,16 +39,14 @@ export default defineComponent({

<template>
<div data-testid="fcontextmenu-exempel1">
<button
<f-button
ref="popupAnchor"
data-test="open-example-contextmenu-button"
type="button"
class="button button--primary"
aria-haspopup="menu"
@click="onClick"
>
Öppna
</button>
</f-button>
<pre>Selected: {{ selected }}</pre>
<f-context-menu
data-test="contextmenu-open"
Expand Down
10 changes: 4 additions & 6 deletions packages/vue/src/components/FContextMenu/examples/FContextMenuExampleTextOnly.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import { defineComponent } from "vue";
import { type ContextMenuItem, FContextMenu } from "@fkui/vue";
import { type ContextMenuItem, FButton, FContextMenu } from "@fkui/vue";

const exampleItems: ContextMenuItem[] = [
{ label: "Skriv ut", key: "MENU_1" },
Expand All @@ -15,7 +15,7 @@ const exampleItems: ContextMenuItem[] = [

export default defineComponent({
name: "FContextMenuExampleTextOnly",
components: { FContextMenu },
components: { FButton, FContextMenu },
data() {
return {
items: exampleItems,
Expand All @@ -42,16 +42,14 @@ export default defineComponent({

<template>
<div data-testid="fcontextmenu-exempel2">
<button
<f-button
ref="popupAnchor"
data-test="open-example-contextmenu-button"
type="button"
class="button button--primary"
aria-haspopup="menu"
@click="onClick"
>
Öppna
</button>
</f-button>
<pre>Selected: {{ selected }}</pre>
<f-context-menu
:is-open
Expand Down
Loading
Loading