Skip to content

Commit ea6ba30

Browse files
susnuxsusnux
authored
Merge pull request #4885 from nextcloud-libraries/fix/app-navigation-caption-color
fix(NcAppNavigationCaption): Make color `main-text` for accessibility
2 parents d9d3e74 + c2763e2 commit ea6ba30

File tree

1 file changed

+60
-45
lines changed

1 file changed

+60
-45
lines changed

‎src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue

+60-45
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<docs>
22
```vue
33
<template>
4-
<NcAppNavigationCaption
5-
name="Your caption goes here">
6-
<template #actions>
7-
<NcActionButton>
8-
<template #icon>
9-
<Plus :size="20" />
10-
</template>
11-
This is an action
12-
</NcActionButton>
13-
</template>
14-
</NcAppNavigationCaption>
4+
<ul>
5+
<NcAppNavigationCaption
6+
name="Your caption goes here">
7+
<template #actions>
8+
<NcActionButton>
9+
<template #icon>
10+
<Plus :size="20" />
11+
</template>
12+
This is an action
13+
</NcActionButton>
14+
</template>
15+
</NcAppNavigationCaption>
16+
</ul>
1517
</template>
1618
<script>
1719
import Plus from 'vue-material-design-icons/Plus'
@@ -22,43 +24,51 @@
2224
},
2325
}
2426
</script>
27+
<style scoped>
28+
/* mock the appnavigation */
29+
ul {
30+
background-color: #cce6f4;
31+
}
32+
</style>
2533
```
2634

2735
### Element with a slot for custom actions icon
2836
```vue
2937
<template>
30-
<NcAppNavigationCaption
31-
name="Your caption goes here">
32-
<template #actionsTriggerIcon>
33-
<Plus slot="icon" :size="20" />
34-
</template>
35-
<template #actions>
36-
<NcActionButton>
37-
<template #icon>
38-
<Pencil :size="20" />
39-
</template>
40-
Rename
41-
</NcActionButton>
42-
<NcActionButton>
43-
<template #icon>
44-
<Delete :size="20" />
45-
</template>
46-
Delete
47-
</NcActionButton>
48-
<NcActionButton>
49-
<template #icon>
50-
<ArrowRight :size="20" />
51-
</template>
52-
Validate
53-
</NcActionButton>
54-
<NcActionButton>
55-
<template #icon>
56-
<Download :size="20" />
57-
</template>
58-
Download
59-
</NcActionButton>
60-
</template>
61-
</NcAppNavigationCaption>
38+
<ul>
39+
<NcAppNavigationCaption
40+
name="Your caption goes here">
41+
<template #actionsTriggerIcon>
42+
<Plus slot="icon" :size="20" />
43+
</template>
44+
<template #actions>
45+
<NcActionButton>
46+
<template #icon>
47+
<Pencil :size="20" />
48+
</template>
49+
Rename
50+
</NcActionButton>
51+
<NcActionButton>
52+
<template #icon>
53+
<Delete :size="20" />
54+
</template>
55+
Delete
56+
</NcActionButton>
57+
<NcActionButton>
58+
<template #icon>
59+
<ArrowRight :size="20" />
60+
</template>
61+
Validate
62+
</NcActionButton>
63+
<NcActionButton>
64+
<template #icon>
65+
<Download :size="20" />
66+
</template>
67+
Download
68+
</NcActionButton>
69+
</template>
70+
</NcAppNavigationCaption>
71+
</ul>
6272
</template>
6373
<script>
6474
import ArrowRight from 'vue-material-design-icons/ArrowRight'
@@ -77,6 +87,12 @@
7787
}
7888
}
7989
</script>
90+
<style scoped>
91+
/* mock the appnavigation */
92+
ul {
93+
background-color: #cce6f4;
94+
}
95+
</style>
8096
```
8197

8298
</docs>
@@ -146,13 +162,12 @@ export default {
146162
147163
&__name {
148164
font-weight: bold;
149-
color: var(--color-primary-element);
165+
color: var(--color-main-text);
150166
font-size: var(--default-font-size);
151167
line-height: $clickable-area;
152168
white-space: nowrap;
153169
overflow: hidden;
154170
text-overflow: ellipsis;
155-
opacity: $opacity_normal;
156171
box-shadow: none !important;
157172
flex-shrink: 0;
158173
// padding to align the name with the icon of app navigation items

0 commit comments

Comments
 (0)