Skip to content

Commit fcb1514

Browse files
jacobmllr95jacobmllr95
authored
chore(docs): improve icons page (#5579)
* feat(docs): improve icons page * Actually use `bootstrapIconsCount` variable * Move icon explorer to the bottom
1 parent e0de687 commit fcb1514

File tree

8 files changed

+103
-60
lines changed

8 files changed

+103
-60
lines changed

‎README.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
<br>
77

88
<p align="center">
9-
BootstrapVue, with over 40 available plugins, more than 80 custom components, and over 670 icons,
10-
provides one of the most comprehensive implementations of the Bootstrap v4 component and grid
11-
system for Vue.js, complete with extensive and automated WAI-ARIA accessibility markup.
9+
With more than 85 components, over 45 available plugins, several directives, and 1000+ icons,
10+
BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4.5
11+
component and grid system available for Vue.js v2.6, complete with extensive and automated
12+
WAI-ARIA accessibility markup.
1213
</p>
1314
<br>
1415

‎docs/components/icons-table.vue

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,18 +42,18 @@
4242
<transition-group
4343
tag="ul"
4444
name="flip-icon-list"
45-
class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 list-unstyled mb-n3 position-relative"
45+
class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 row-cols-xxl-10 list-unstyled"
4646
>
4747
<b-col
4848
v-for="icon in filteredIcons"
4949
:key="`_icon_${icon.name}`"
5050
tag="li"
51-
class="flip-icon-list-icon d-inline-flex flex-column mb-3 text-center"
51+
class="flip-icon-list-icon d-inline-flex flex-column mb-4 text-center"
5252
>
53-
<div class="card bg-light p-3" :title="icon.name">
53+
<b-card bg-variant="light" class="px-3 py-4 border-0" no-body>
5454
<b-icon :icon="icon.name" class="mx-auto"></b-icon>
55-
</div>
56-
<b-form-text class="mt-1 text-break" :title="icon.name">{{ icon.name }}</b-form-text>
55+
</b-card>
56+
<b-form-text class="mt-2 text-break" :title="icon.name">{{ icon.name }}</b-form-text>
5757
</b-col>
5858
</transition-group>
5959
<div aria-live="polite" aria-atomic="true">
@@ -121,6 +121,20 @@
121121
.flip-icon-list-leave-active {
122122
position: absolute;
123123
}
124+
125+
@media (min-width: 1200px) {
126+
.row-cols-xl-8 > * {
127+
flex: 0 0 12.5%;
128+
max-width: 12.5%;
129+
}
130+
}
131+
132+
@media (min-width: 1400px) {
133+
.row-cols-xxl-10 > * {
134+
flex: 0 0 10%;
135+
max-width: 10%;
136+
}
137+
}
124138
</style>
125139

126140
<script>

‎docs/content/index.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,36 @@ export const nav = [
6262
}
6363
]
6464

65+
// RegExp to grab the minor version from a full version
66+
const minorRE = /^(\d+\.\d+)(\..+)$/
67+
// RegExp to grab the major version from a full version
68+
const majorRE = /^(\d+)(\.\d+\..+)$/
69+
6570
export const bootstrapVersion = parseVersion(dependencies.bootstrap)
71+
export const bootstrapVersionMinor = bootstrapVersion.replace(minorRE, '$1')
72+
export const bootstrapVersionMajor = bootstrapVersion.replace(majorRE, '$1')
73+
6674
export const bootstrapIconsVersion = parseFullVersion(devDependencies['bootstrap-icons'])
75+
export const bootstrapIconsVersionMinor = bootstrapIconsVersion.replace(minorRE, '$1')
76+
export const bootstrapIconsVersionMajor = bootstrapIconsVersion.replace(majorRE, '$1')
77+
export const bootstrapIconsCount = 1000
78+
6779
export const popperVersion = parseVersion(dependencies['popper.js'])
80+
export const popperVersionMinor = popperVersion.replace(minorRE, '$1')
81+
export const popperVersionMajor = popperVersion.replace(majorRE, '$1')
82+
6883
export const portalVueVersion = parseVersion(dependencies['portal-vue'])
84+
export const portalVueVersionMinor = portalVueVersion.replace(minorRE, '$1')
85+
export const portalVueVersionMajor = portalVueVersion.replace(majorRE, '$1')
86+
6987
export const nuxtVersion = parseVersion(devDependencies.nuxt)
88+
export const nuxtVersionMinor = nuxtVersion.replace(minorRE, '$1')
89+
export const nuxtVersionMajor = nuxtVersion.replace(majorRE, '$1')
90+
7091
export const vueVersion = parseVersion(devDependencies.vue)
92+
export const vueVersionMinor = vueVersion.replace(minorRE, '$1')
93+
export const vueVersionMajor = vueVersion.replace(majorRE, '$1')
94+
7195
export const defaultConfig = DEFAULT_CONFIG
7296
export const bvDescription = description
7397

‎docs/pages/docs/icons/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Main from '~/components/main'
77
import QuickLinks from '~/components/quick-links'
88
import Section from '~/components/section'
99
import docsMixin from '~/plugins/docs-mixin'
10-
import { icons as iconsMeta, bootstrapIconsVersion } from '~/content'
10+
import { icons as iconsMeta, bootstrapIconsVersion, bootstrapIconsCount } from '~/content'
1111
import readmeData from '~/../src/icons/README.md'
1212

1313
const { titleLead = '', body = '', baseTOC = {} } = readmeData
@@ -34,7 +34,8 @@ export default {
3434
baseTOC,
3535
// Key for icons meta is `''` (empty slug)
3636
meta: iconsMeta[''],
37-
bootstrapIconsVersion
37+
bootstrapIconsVersion,
38+
bootstrapIconsCount
3839
}
3940
},
4041
computed: {

‎docs/pages/docs/index.js

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,30 @@ import QuickLinks from '~/components/quick-links'
44
import Section from '~/components/section'
55
import docsMixin from '~/plugins/docs-mixin'
66
import {
7+
bootstrapIconsCount,
78
bootstrapVersion,
9+
bootstrapVersionMajor,
10+
bootstrapVersionMinor,
811
defaultConfig,
912
nuxtVersion,
13+
nuxtVersionMajor,
14+
nuxtVersionMinor,
1015
popperVersion,
16+
popperVersionMajor,
17+
popperVersionMinor,
1118
portalVueVersion,
19+
portalVueVersionMajor,
20+
portalVueVersionMinor,
1221
version,
13-
vueVersion
22+
vueVersion,
23+
vueVersionMajor,
24+
vueVersionMinor
1425
} from '~/content'
1526
import meta from '~/markdown/intro/meta.json'
1627
import readmeData from '~/markdown/intro/README.md'
1728

1829
const { titleLead = '', body = '', baseTOC = {} } = readmeData
1930

20-
// RegExp to grab the minor version from a full version
21-
const minorRE = /^(\d+\.\d+)(\..+)$/
22-
// RegExp to grab the major version from a full version
23-
const majorRE = /^(\d+)(\.\d+\..+)$/
24-
2531
// @vue/component
2632
export default {
2733
name: 'BDVDocs',
@@ -36,25 +42,26 @@ export default {
3642
data() {
3743
return {
3844
bootstrapVersion,
39-
bootstrapVersionMinor: bootstrapVersion.replace(minorRE, '$1'),
40-
bootstrapVersionMajor: bootstrapVersion.replace(majorRE, '$1'),
45+
bootstrapVersionMinor,
46+
bootstrapVersionMajor,
47+
bootstrapIconsCount,
4148
defaultConfig,
4249
nuxtVersion,
43-
nuxtVersionMinor: nuxtVersion.replace(minorRE, '$1'),
44-
nuxtVersionMajor: nuxtVersion.replace(majorRE, '$1'),
50+
nuxtVersionMinor,
51+
nuxtVersionMajor,
4552
popperVersion,
46-
popperVersionMinor: popperVersion.replace(minorRE, '$1'),
47-
popperVersionMajor: popperVersion.replace(majorRE, '$1'),
53+
popperVersionMinor,
54+
popperVersionMajor,
4855
portalVueVersion,
49-
portalVueVersionMinor: portalVueVersion.replace(minorRE, '$1'),
50-
portalVueVersionMajor: portalVueVersion.replace(majorRE, '$1'),
56+
portalVueVersionMinor,
57+
portalVueVersionMajor,
5158
titleLead,
5259
body,
5360
baseTOC,
5461
version,
5562
vueVersion,
56-
vueVersionMinor: vueVersion.replace(minorRE, '$1'),
57-
vueVersionMajor: vueVersion.replace(majorRE, '$1')
63+
vueVersionMinor,
64+
vueVersionMajor
5865
}
5966
},
6067
computed: {

‎docs/pages/index.vue

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,10 @@
8282
<b-row class="mb-4">
8383
<b-col lg="10" offset-lg="1">
8484
<p class="text-lg-center">
85-
With more than 85 components, over 45 available plugins, several directives, and 670+ icons,
85+
With more than 85 components, over 45 available plugins, several directives, and {{ bootstrapIconsCount }}+ icons,
8686
<span class="bd-text-purple-bright">BootstrapVue</span> provides one of the most
8787
comprehensive implementations of the
88-
<span class="bd-text-purple-bright">Bootstrap v{{ bootstrapVersionMinor }}</span> component and grid system
88+
<span class="bd-text-purple-bright">Bootstrap v{{ bootstrapVersionMajor }}</span> component and grid system
8989
available for <span class="bd-text-purple-bright">Vue.js v{{ vueVersionMinor }}</span>, complete with
9090
extensive and automated
9191
<b-link href="https://www.w3.org/WAI/standards-guidelines/aria/" target="_blank">
@@ -546,7 +546,13 @@ $bv-angle-padding-md: 6rem;
546546
</style>
547547

548548
<script>
549-
import { version, bootstrapVersion, vueVersion } from '~/content'
549+
import {
550+
bootstrapIconsCount,
551+
bootstrapVersionMajor,
552+
bootstrapVersionMinor,
553+
version,
554+
vueVersionMinor
555+
} from '~/content'
550556
import BvLogo from '~/components/bv-logo'
551557
import BVCarbonAd from '~/components/carbon-ad'
552558
import BVContributors from '~/components/contributors'
@@ -557,25 +563,12 @@ export default {
557563
BVCarbonAd,
558564
BVContributors
559565
},
560-
data() {
561-
return {
562-
isIE: false,
563-
showLogo: false
564-
}
565-
},
566-
computed: {
567-
version: () => version,
568-
bootstrapVersionMinor: () => bootstrapVersion.replace(/\.\d+$/, ''),
569-
vueVersionMinor: () => vueVersion.replace(/\.\d+$/, ''),
570-
bootstrapUrl() {
571-
return `https://getbootstrap.com/docs/${this.bootstrapVersionMinor}`
572-
}
573-
},
574-
mounted() {
575-
this.$nextTick(() => {
576-
this.isIE = /msie|trident/i.test(window.navigator.userAgent || '')
577-
this.showLogo = true
578-
})
566+
created() {
567+
this.bootstrapUrl = `https://getbootstrap.com/docs/${bootstrapVersionMinor}`
568+
this.bootstrapVersionMajor = bootstrapVersionMajor
569+
this.bootstrapIconsCount = bootstrapIconsCount
570+
this.vueVersionMinor = vueVersionMinor
571+
this.version = version
579572
}
580573
}
581574
</script>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "bootstrap-vue",
33
"version": "2.15.0",
4-
"description": "BootstrapVue, with more than 85 custom components, over 45 plugins, several custom directives, and over 670 icons, provides one of the most comprehensive implementations of Bootstrap v4 components and grid system for Vue.js. With extensive and automated WAI-ARIA accessibility markup.",
4+
"description": "With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup.",
55
"main": "dist/bootstrap-vue.common.js",
66
"web": "dist/bootstrap-vue.js",
77
"module": "esm/index.js",

‎src/icons/README.md

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ installed by default. You do not need `bootstrap-icons` as a dependency.
1212
- Icon components were added in BootstrapVue release `v2.2.0`.
1313
- Bootstrap Icons `v1.0.0-alpha3` icons were added in BootstrapVue release `v2.8.0`.
1414
- Bootstrap Icons `v1.0.0-alpha4` icons were added in BootstrapVue release `v2.15.0`.
15+
- Bootstrap Icons `v1.0.0-alpha5` icons were added in BootstrapVue release `v2.16.0`.
1516

1617
<div class="alert alert-info small">
1718
<p class="mb-2">
@@ -32,20 +33,13 @@ installed by default. You do not need `bootstrap-icons` as a dependency.
3233
names &mdash; <code>arrow-up-down</code> renamed <code>arrow-down-up</code> and
3334
<code>people-circle</code> renamed <code>person-circle</code>.
3435
</li>
36+
<li>
37+
<strong>Alpha 5 changes:</strong> In addition to over 300 new icons, some icons have changed
38+
names &mdash; <code>camera</code> renamed <code>camera2</code>.
39+
</li>
3540
</ul>
3641
</div>
3742

38-
## Icons
39-
40-
The library includes over 670 icons. Use the explorer below to search and browse the available
41-
icons.
42-
43-
<div>
44-
<!-- Component rendered by docs/pages/docs/icons.index.js -->
45-
<!-- We use a `<div is="...">` to prevent marked loader from mangling the unknown tag -->
46-
<div is="IconsTable"></div>
47-
</div>
48-
4943
## Usage
5044

5145
BootstrapVue icons are not automatically installed when using BootstrapVue in your project, you must
@@ -878,3 +872,12 @@ SVGs are awesome to work with, but they do have some known quirks to work around
878872
needed.
879873
- **Safari skips `aria-label` when used on non-focusable SVGs.** As such, use the attribute
880874
`aria-hidden="true"` when using the icon and use CSS to visually hide the equivalent label.
875+
876+
## Icons
877+
878+
The library includes over {{ bootstrapIconsCount }} icons. Use the explorer below to search and
879+
browse the available icons.
880+
881+
<!-- Component rendered by `docs/pages/docs/icons.index.js` -->
882+
<!-- We use a `<div is="...">` to prevent marked loader from mangling the unknown tag -->
883+
<div is="IconsTable"></div>

0 commit comments

Comments
 (0)