Skip to content

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

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

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

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

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
15 changes: 4 additions & 11 deletions docs/components/FDialogueTree.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,15 @@ Låter användaren navigera genom X antal dialoger som leder till en slutvy base
<div class="dialogue-tree" data-test="dialogue-tree">
<ul class="dialogue-tree__list">
<li class="dialogue-tree__list-item">
<button type="button">
Anställning
<f-icon name="arrow-right"></f-icon>
</button>
<f-button icon-right="arrow-right"> Anställning </f-button>
</li>
<li class="dialogue-tree__list-item">
<button type="button">
<f-button icon-right="arrow-right">
Enskild firma eller handelsbolag
<f-icon name="arrow-right"></f-icon>
</button>
</f-button>
</li>
<li class="dialogue-tree__list-item">
<button type="button">
Aktiebolag
<f-icon name="arrow-right"></f-icon>
</button>
<f-button icon-right="arrow-right"> Aktiebolag </f-button>
</li>
</ul>
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/components/modal/FConfirmModal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ Se {@link FConfirmModal#anvandning `Användning`} för hur du använder `FConfir
```diff
<template>
<div>
<button type="button" @click="onClick">Open modal</button>
<f-button @click="onClick">Open modal</f-button>
- <f-confirm-modal></f-confirm-modal>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion docs/components/modal/FFormModal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ Se {@link FFormModal#anvandning `Användning`} för hur du använder `FFormModal
```diff
<template>
<div>
<button type="button" @click="onClick">Open modal</button>
<f-button @click="onClick">Open modal</f-button>
- <f-form-modal></f-form-modal>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion docs/components/modal/FModal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Se {@link FModal#anvandning `Användning`} för hur du använder `FModal` med AP
```diff
<template>
<div>
<button type="button" @click="onClick">Open modal</button>
<f-button @click="onClick">Open modal</f-button>
- <f-modal></f-modal>
</div>
</template>
Expand Down
8 changes: 3 additions & 5 deletions docs/components/page-layout/FDetailsPanel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,9 +207,7 @@ Du kan lägga in egna knappar som stänger detaljpanelen.
<template #default="panelScope">
<h2 :slot="panelScope.header">Rubrik</h2>
<div :slot="panelScope.content">
<button type="button" @click="panelScope.close()">
Stäng
</button>
<f-button @click="panelScope.close()"> Stäng </f-button>
</div>
<div :slot="panelScope.footer">Footer</div>
</template>
Expand All @@ -222,8 +220,8 @@ Du kan lägga in egna knappar som stänger detaljpanelen.
`close()` tar en optional sträng som kan användas för att särskilja olika knappar:

```html static
<button type="button" @click="close('save')">Spara</button>
<button type="button" @click="close('cancel')">Avbryt</button>
<f-button @click="close('save')">Spara</f-button>
<f-button @click="close('cancel')">Avbryt</f-button>
```

```ts
Expand Down
4 changes: 1 addition & 3 deletions docs/components/table-and-list/FCrudDataset.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,7 @@ Du behöver själv hantera vad klick på knappen ska utföra för åtgärd.
<f-crud-dataset>
<template #default> ... </template>
<template #buttons="{ buttonClasses }">
<button type="button" :class="buttonClasses" @click="onClick">
My button
</button>
<f-button :class="buttonClasses" @click="onClick"> My button </f-button>
</template>
</f-crud-dataset>
```
Expand Down
34 changes: 15 additions & 19 deletions docs/functions/config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,36 +42,32 @@ Anger i vilken ordning man vill visa knappar i bekräftelsemodal.
`LEFT_TO_RIGHT`: Vänster till höger

```html nomarkup borderless
<button inert type="button" class="docs-example-button button--primary">
Ta bort
</button>
<button inert type="button" class="docs-example-button button--secondary">
<f-button inert class="docs-example-button"> Ta bort </f-button>
<f-button inert class="docs-example-button" variant="secondary">
Avbryt
</button>
</f-button>
```

`RIGHT_TO_LEFT`: Höger till vänster

```html nomarkup borderless
<button inert type="button" class="docs-example-button button--secondary">
<f-button inert class="docs-example-button" variant="secondary">
Avbryt
</button>
<button inert type="button" class="docs-example-button button--primary">
Ta bort
</button>
</f-button>
<f-button inert class="docs-example-button"> Ta bort </f-button>
```

#### Modaler med inbyggd knappordning

| Komponent | Inställning | Knappordning |
| ---------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bekräftelsemodal (FConfirmModal) | LEFT_TO_RIGHT | <button inert type="button" class="docs-example-button button--primary">Spara</button><button inert type="button" class="docs-example-button button--secondary">Avbryt</button> |
| Bekräftelsemodal (FConfirmModal) | RIGHT_TO_LEFT | <button inert type="button" class="docs-example-button button--secondary">Avbryt</button><button inert type="button" class="docs-example-button button--primary">Spara</button> |
| Formulärsmodal (FFormModal) | \* | <button inert type="button" class="docs-example-button button--primary">Spara</button><button inert type="button" class="docs-example-button button--secondary">Avbryt</button> |
| Datamängdredigerare (FCrudDataset) - Lägg till | \* | <button inert type="button" class="docs-example-button button--primary">Lägg till</button><button inert type="button" class="docs-example-button button--secondary">Avbryt</button> |
| Datamängdredigerare (FCrudDataset) - Ändra | \* | <button inert type="button" class="docs-example-button button--primary">Spara</button><button inert type="button" class="docs-example-button button--secondary">Avbryt</button> |
| Datamängdredigerare (FCrudDataset) - Ta bort | LEFT_TO_RIGHT | <button inert type="button" class="docs-example-button button--primary">Ta bort</button><button inert type="button" class="docs-example-button button--secondary">Avbryt</button> |
| Datamängdredigerare (FCrudDataset) - Ta bort | RIGHT_TO_LEFT | <button inert type="button" class="docs-example-button button--secondary">Avbryt</button><button inert type="button" class="docs-example-button button--primary">Ta bort</button> |
| Komponent | Inställning | Knappordning |
| ---------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bekräftelsemodal (FConfirmModal) | LEFT_TO_RIGHT | <f-button inert class="docs-example-button">Spara</f-button><f-button inert class="docs-example-button" variant="secondary">Avbryt</f-button> |
| Bekräftelsemodal (FConfirmModal) | RIGHT_TO_LEFT | <f-button inert class="docs-example-button" variant="secondary">Avbryt</f-button><f-button inert class="docs-example-button">Spara</f-button> |
| Formulärsmodal (FFormModal) | \* | <f-button inert class="docs-example-button">Spara</f-button><f-button inert class="docs-example-button" variant="secondary">Avbryt</f-button> |
| Datamängdredigerare (FCrudDataset) - Lägg till | \* | <f-button inert class="docs-example-button">Lägg till</f-button><f-button inert class="docs-example-button" variant="secondary">Avbryt</f-button> |
| Datamängdredigerare (FCrudDataset) - Ändra | \* | <f-button inert class="docs-example-button">Spara</f-button><f-button inert class="docs-example-button" variant="secondary">Avbryt</f-button> |
| Datamängdredigerare (FCrudDataset) - Ta bort | LEFT_TO_RIGHT | <f-button inert class="docs-example-button">Ta bort</f-button><f-button inert class="docs-example-button" variant="secondary">Avbryt</f-button> |
| Datamängdredigerare (FCrudDataset) - Ta bort | RIGHT_TO_LEFT | <f-button inert class="docs-example-button" variant="secondary">Avbryt</f-button><f-button inert class="docs-example-button">Ta bort</f-button> |

### `teleportTarget`

Expand Down
4 changes: 2 additions & 2 deletions docs/functions/functions/dom-functions/focus.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,12 +98,12 @@ The example below will recursively search for a focus target and eventually focu

<script lang="ts">
import { defineComponent } from "vue";
import { focus } from "@fkui/vue";
import { FButton, focus } from "@fkui/vue";

const MyButton = defineComponent({
template: /* HTML */ `
<p>I have a button</p>
<button ref="foo" type="button">My button</button>
<f-button ref="foo">My button</f-button>
`,
computed: {
focusTarget() {
Expand Down
12 changes: 6 additions & 6 deletions docs/functions/helpers/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ Om man vill dölja ett visst innehåll som enbart skärmläsare kan läsa upp s
Ett exempel är om man har en knapp med en text, och i skärmläsare vill förtydliga vad som händer när man trycker på knappen.

```html
<button type="button" class="button">
<f-button>
<span class="sr-only">Gå vidare till</span>
Nästa
<span class="sr-only">sida</span>
</button>
</f-button>
```

## Separera element för skärmläsare
Expand All @@ -33,7 +33,7 @@ Klassen `sr-separator` används för att separera uppläsningen av två element,
</div>
<div class="tooltip">
<div class="tooltip__container">
<button class="tooltip__button" type="button" aria-expanded="true">
<f-button class="tooltip__button" aria-expanded="true">
<span class="icon-stack icon-stack--circle">
<svg focusable="false" class="icon icon__info button__icon">
<use href="#f-icon-circle" />
Expand All @@ -43,7 +43,7 @@ Klassen `sr-separator` används för att separera uppläsningen av två element,
</svg>
</span>
<span class="sr-only"> Denna text syns bara för skärmläsare. </span>
</button>
</f-button>
</div>
</div>
<label class="label sr-separator">
Expand All @@ -63,7 +63,7 @@ Klassen `sr-separator` används för att separera uppläsningen av två element,
</div>
<div class="tooltip">
<div class="tooltip__container">
<button class="tooltip__button" type="button" aria-expanded="true">
<f-button class="tooltip__button" aria-expanded="true">
<span class="icon-stack icon-stack--circle">
<svg focusable="false" class="icon icon__info button__icon">
<use href="#f-icon-circle" />
Expand All @@ -73,7 +73,7 @@ Klassen `sr-separator` används för att separera uppläsningen av två element,
</svg>
</span>
<span class="sr-only"> Denna text syns bara för skärmläsare. </span>
</button>
</f-button>
</div>
</div>
<input type="text" class="sr-separator" maxlength="50" />
Expand Down
26 changes: 12 additions & 14 deletions docs/gettingstarted/migration/migrating-crud-button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,24 +80,22 @@ Proparna
<template #default="{ updateItem, deleteItem }">
<f-list :items>
<template #default="{ item }">
<button
type="button"
class="button button--small button--tertiary"
<f-button
icon-left="pen"
size="small"
variant="tertiary"
@click="updateItem(item)"
>
<f-icon name="pen">
<title>Ändra {{ item.name }}</title>
</f-icon>
</button>
<button
type="button"
class="button button--small button--tertiary"
Ändra {{ item.name }}
</f-button>
<f-button
icon-left="pen"
size="small"
variant="tertiary"
@click="deleteItem(item)"
>
<f-icon name="pen">
<title>Ta bort {{ item.name }}</title>
</f-icon>
</button>
Ta bort {{ item.name }}
</f-button>
</template>
</f-list>
</template>
Expand Down
Loading