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

Merged
Antreesy merged 3 commits into from
Apr 14, 2026
Merged

[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
78eda8d
chore(NcActions): outline icons in docs
ShGKme Nov 25, 2025
80dd9e0
chore(NcActions): normalize icon import
ShGKme Nov 25, 2025
95960dc
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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
</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 Expand Up @@ -412,11 +412,11 @@

props: {
/**
* @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.

Check warning on line 415 in src/components/NcActionButton/NcActionButton.vue

View workflow job for this annotation

GitHub Actions / eslint 

Unexpected inline JSDoc tag. Did you mean to use {@nextcloud}, \@nextcloud, or `@nextcloud`?
* @todo Add a check in @nextcloud/vue 9 that this prop is not provided,

Check warning on line 416 in src/components/NcActionButton/NcActionButton.vue

View workflow job for this annotation

GitHub Actions / eslint 

Unexpected inline JSDoc tag. Did you mean to use {@nextcloud}, \@nextcloud, or `@nextcloud`?
* otherwise root element will inherit incorrect aria-hidden.
*/
ariaHidden: {

Check warning on line 419 in src/components/NcActionButton/NcActionButton.vue

View workflow job for this annotation

GitHub Actions / eslint 

'ariaHidden' of property found, but never used
type: Boolean,
// eslint-disable-next-line vue/no-boolean-default
default: null,
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
Loading