Skip to content

[stable8] chore(NcActions): outline icons in docs #7921

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
backportbot wants to merge 3 commits into
base: stable8
Choose a base branch
from
Draft

[stable8] chore(NcActions): outline icons in docs #7921

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0325622
chore(NcActions): outline icons in docs
ShGKme Nov 25, 2025
54aa341
chore(NcActions): normalize icon import
ShGKme Nov 25, 2025
4fade78
chore(NcActions): use design-recommended icons in docs
ShGKme Nov 25, 2025
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
100 changes: 50 additions & 50 deletions src/components/NcActionButton/NcActionButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,38 +11,38 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
<NcActions>
<NcActionButton @click="showMessage('Delete')">
<template #icon>
<Delete :size="20" />
<IconTrashCanOutline :size="20" />
</template>
Delete
</NcActionButton>
<NcActionButton :close-after-click="true" @click="showMessage('Delete and close menu')">
<template #icon>
<Delete :size="20" />
<IconTrashCanOutline :size="20" />
</template>
Delete and close
</NcActionButton>
<NcActionButton :is-menu="true">
<template #icon>
<Plus :size="20" />
<IconPlus :size="20" />
</template>
Create
</NcActionButton>
<NcActionButton :disabled="true" @click="showMessage('Disabled')">
<template #icon>
<Delete :size="20" />
<IconTrashCanOutline :size="20" />
</template>
Disabled button
</NcActionButton>
</NcActions>
</template>
<script>
import Delete from 'vue-material-design-icons/Delete.vue'
import Plus from 'vue-material-design-icons/Plus.vue'
import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
import IconPlus from 'vue-material-design-icons/Plus.vue'

export default {
components: {
Delete,
Plus,
IconTrashCanOutline,
IconPlus,
},
methods: {
showMessage(msg) {
Expand All @@ -62,34 +62,34 @@ For the same purpose, but in a more compact way, `description` prop can be used.
<NcActions>
<NcActionButton @click="showMessage('Add')">
<template #icon>
<Plus :size="20" />
<IconPlus :size="20" />
</template>
Add new
</NcActionButton>
<NcActionButton name="Long button" @click="showMessage('Delete')">
<template #icon>
<Delete :size="20" />
<IconTrashCanOutline :size="20" />
</template>
This button is associated with a very long text.\nAnd with new lines too.
</NcActionButton>
<NcActionButton description="Subline description for the button" @click="showMessage('Edit')">
<template #icon>
<Pencil :size="20" />
<IconPencilOutline :size="20" />
</template>
Edit
</NcActionButton>
</NcActions>
</template>
<script>
import Delete from 'vue-material-design-icons/Delete.vue'
import Pencil from 'vue-material-design-icons/Pencil.vue'
import Plus from 'vue-material-design-icons/Plus.vue'
import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
import IconPlus from 'vue-material-design-icons/Plus.vue'

export default {
components: {
Delete,
Pencil,
Plus,
IconTrashCanOutline,
IconPencilOutline,
IconPlus,
},
methods: {
showMessage(msg) {
Expand All @@ -108,18 +108,18 @@ Action icon attribute with a single action
<NcActions>
<NcActionButton @click="showMessage('Add')">
<template #icon>
<Plus :size="20" />
<IconPlus :size="20" />
</template>
Add new
</NcActionButton>
</NcActions>
</template>
<script>
import Plus from 'vue-material-design-icons/Plus.vue'
import IconPlus from 'vue-material-design-icons/Plus.vue'

export default {
components: {
Plus,
IconPlus,
},
methods: {
showMessage(msg) {
Expand All @@ -138,26 +138,26 @@ You can also use a custom icon, for example from the vue-material-design-icons l
<NcActions>
<NcActionButton>
<template #icon>
<HandBackLeft :size="20" />
<IconHandBackLeftOutline :size="20" />
</template>
Raise left hand
</NcActionButton>
<NcActionButton>
<template #icon>
<HandBackRight :size="20" />
<IconHandBackRightOutline :size="20" />
</template>
Raise right hand
</NcActionButton>
</NcActions>
</template>
<script>
import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
import HandBackRight from 'vue-material-design-icons/HandBackRight.vue'
import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
import IconHandBackRightOutline from 'vue-material-design-icons/HandBackRightOutline.vue'

export default {
components: {
HandBackLeft,
HandBackRight,
IconHandBackLeftOutline,
IconHandBackRightOutline,
},
}
</script>
Expand All @@ -173,18 +173,18 @@ For example to have the button act like a toggle button just set the `modelValue
<NcActions>
<NcActionButton :model-value.sync="fullscreen">
<template #icon>
<Fullscreen :size="20" />
<IconFullscreen :size="20" />
</template>
Fullscreen
</NcActionButton>
</NcActions>
</template>
<script>
import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'

export default {
components: {
Fullscreen,
IconFullscreen,
},
data() {
return {
Expand All @@ -203,26 +203,26 @@ This also allows tri-state behavior (`true`, `false`, `null`) in which case `ari
<NcActions>
<NcActionButton :model-value.sync="handRaised" type="checkbox">
<template #icon>
<HandBackLeft :size="20" />
<IconHandBackLeftOutline :size="20" />
</template>
Raise hand
</NcActionButton>
<NcActionButton :model-value.sync="fullscreen" type="checkbox">
<template #icon>
<Fullscreen :size="20" />
<IconFullscreen :size="20" />
</template>
Fullscreen
</NcActionButton>
</NcActions>
</template>
<script>
import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'

export default {
components: {
HandBackLeft,
Fullscreen,
IconHandBackLeftOutline,
IconFullscreen,
},
data() {
return {
Expand All @@ -248,32 +248,32 @@ Note: unlike native radio buttons, `NcActionButton` are not grouped by name, so
<NcActions>
<NcActionButton :model-value.sync="payment" type="radio" value="cash">
<template #icon>
<Cash :size="20" />
<IconCash :size="20" />
</template>
Pay with cash
</NcActionButton>
<NcActionButton :model-value.sync="payment" type="radio" value="card">
<template #icon>
<CreditCard :size="20" />
<IconCreditCardOutline :size="20" />
</template>
Pay by card
</NcActionButton>
<NcActionSeparator />
<NcActionButton type="radio" :model-value="align.isLeft" @update:modelValue="setAlign('Left', $event)">
<template #icon>
<FormatAlignLeft :size="20" />
<IconFormatAlignLeft :size="20" />
</template>
Left
</NcActionButton>
<NcActionButton type="radio" :model-value="align.isCenter" @update:modelValue="setAlign('Center', $event)">
<template #icon>
<FormatAlignCenter :size="20" />
<IconFormatAlignCenter :size="20" />
</template>
Center
</NcActionButton>
<NcActionButton type="radio" :model-value="align.isRight" @update:modelValue="setAlign('Right', $event)">
<template #icon>
<FormatAlignRight :size="20" />
<IconFormatAlignRight :size="20" />
</template>
Right
</NcActionButton>
Expand All @@ -285,19 +285,19 @@ Note: unlike native radio buttons, `NcActionButton` are not grouped by name, so
</div>
</template>
<script>
import Cash from 'vue-material-design-icons/Cash.vue'
import CreditCard from 'vue-material-design-icons/CreditCard.vue'
import FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'
import FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'
import FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'
import IconCash from 'vue-material-design-icons/Cash.vue'
import IconCreditCardOutline from 'vue-material-design-icons/CreditCardOutline.vue'
import IconFormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'
import IconFormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'
import IconFormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'

export default {
components: {
Cash,
CreditCard,
FormatAlignLeft,
FormatAlignCenter,
FormatAlignRight,
IconCash,
IconCreditCardOutline,
IconFormatAlignLeft,
IconFormatAlignCenter,
IconFormatAlignRight,
},
data() {
return {
Expand Down
24 changes: 12 additions & 12 deletions src/components/NcActionButtonGroup/NcActionButtonGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,48 +18,48 @@ This should be used sparingly for accessibility.
type="radio"
value="l">
<template #icon>
<AlignLeft :size="20" />
<IconAlignHorizontalLeft :size="20" />
</template>
</NcActionButton>
<NcActionButton aria-label="Align center"
:model-value.sync="alignment"
type="radio"
value="c">
<template #icon>
<AlignCenter :size="20" />
<IconAlignHorizontalCenter :size="20" />
</template>
</NcActionButton>
<NcActionButton aria-label="Align right"
:model-value.sync="alignment"
type="radio"
value="r">
<template #icon>
<AlignRight :size="20" />
<IconAlignHorizontalRight :size="20" />
</template>
</NcActionButton>
</NcActionButtonGroup>
<NcActionButton :close-after-click="true"
@click="showMessage('Some other action')">
<template #icon>
<Plus :size="20" />
<IconPlus :size="20" />
</template>
Some other action
</NcActionButton>
</NcActions>
</div>
</template>
<script>
import AlignLeft from 'vue-material-design-icons/AlignHorizontalLeft'
import AlignRight from 'vue-material-design-icons/AlignHorizontalRight'
import AlignCenter from 'vue-material-design-icons/AlignHorizontalCenter'
import Plus from 'vue-material-design-icons/Plus'
import IconAlignHorizontalLeft from 'vue-material-design-icons/AlignHorizontalLeft.vue'
import IconAlignHorizontalRight from 'vue-material-design-icons/AlignHorizontalRight.vue'
import IconAlignHorizontalCenter from 'vue-material-design-icons/AlignHorizontalCenter.vue'
import IconPlus from 'vue-material-design-icons/Plus.vue'

export default {
components: {
AlignLeft,
AlignRight,
AlignCenter,
Plus,
IconAlignHorizontalLeft,
IconAlignHorizontalRight,
IconAlignHorizontalCenter,
IconPlus,
},
data() {
return { alignment: 'l' }
Expand Down
Loading