From a86ed325f913e727ac8fbf933260d1e9f735167b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Thu, 16 Jul 2020 01:02:27 +0200 Subject: [PATCH 1/3] feat(docs): improve icons page --- README.md | 7 +++--- docs/components/icons-table.vue | 24 +++++++++++++++----- docs/content/index.js | 24 ++++++++++++++++++++ docs/pages/docs/icons/index.js | 5 +++-- docs/pages/docs/index.js | 39 +++++++++++++++++++-------------- docs/pages/index.vue | 37 +++++++++++++------------------ package.json | 2 +- src/icons/README.md | 7 +++++- 8 files changed, 95 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 3e2d6b9c402..6c294bc2806 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,10 @@

- BootstrapVue, with over 40 available plugins, more than 80 custom components, and over 670 icons, - provides one of the most comprehensive implementations of the Bootstrap v4 component and grid - system for Vue.js, complete with extensive and automated WAI-ARIA accessibility markup. + 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.5 + component and grid system available for Vue.js v2.6, complete with extensive and automated + WAI-ARIA accessibility markup.


diff --git a/docs/components/icons-table.vue b/docs/components/icons-table.vue index 65bb9852aa5..46b88375d18 100644 --- a/docs/components/icons-table.vue +++ b/docs/components/icons-table.vue @@ -42,18 +42,18 @@ -
+ -
- {{ icon.name }} + + {{ icon.name }}
@@ -121,6 +121,20 @@ .flip-icon-list-leave-active { position: absolute; } + +@media (min-width: 1200px) { + .row-cols-xl-8 > * { + flex: 0 0 12.5%; + max-width: 12.5%; + } +} + +@media (min-width: 1400px) { + .row-cols-xxl-10 > * { + flex: 0 0 10%; + max-width: 10%; + } +} diff --git a/package.json b/package.json index c7e2d8f4dab..5c04bd7baa8 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "bootstrap-vue", "version": "2.15.0", - "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.", + "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.", "main": "dist/bootstrap-vue.common.js", "web": "dist/bootstrap-vue.js", "module": "esm/index.js", diff --git a/src/icons/README.md b/src/icons/README.md index c34982c6cc7..0a328643e07 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -12,6 +12,7 @@ installed by default. You do not need `bootstrap-icons` as a dependency. - Icon components were added in BootstrapVue release `v2.2.0`. - Bootstrap Icons `v1.0.0-alpha3` icons were added in BootstrapVue release `v2.8.0`. - Bootstrap Icons `v1.0.0-alpha4` icons were added in BootstrapVue release `v2.15.0`. +- Bootstrap Icons `v1.0.0-alpha5` icons were added in BootstrapVue release `v2.16.0`.

@@ -32,12 +33,16 @@ installed by default. You do not need `bootstrap-icons` as a dependency. names — arrow-up-down renamed arrow-down-up and people-circle renamed person-circle. +

  • + Alpha 5 changes: In addition to over 300 new icons, some icons have changed + names — camera renamed camera2. +
    • ## Icons -The library includes over 670 icons. Use the explorer below to search and browse the available +The library includes over 1000 icons. Use the explorer below to search and browse the available icons.
    From 9b3a3995a3b99b33a5291ed8798606a1b43ab0d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Thu, 16 Jul 2020 01:07:55 +0200 Subject: [PATCH 2/3] Actually use `bootstrapIconsCount` variable --- src/icons/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/icons/README.md b/src/icons/README.md index 0a328643e07..44453cff815 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -42,8 +42,8 @@ installed by default. You do not need `bootstrap-icons` as a dependency. ## Icons -The library includes over 1000 icons. Use the explorer below to search and browse the available -icons. +The library includes over {{ bootstrapIconsCount }} icons. Use the explorer below to search and +browse the available icons.
    From 646a271dee172e9645fc3e06c6be97ec45ef33ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Thu, 16 Jul 2020 16:51:54 +0200 Subject: [PATCH 3/3] Move icon explorer to the bottom --- src/icons/README.md | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/icons/README.md b/src/icons/README.md index 44453cff815..ed07c60a4fd 100644 --- a/src/icons/README.md +++ b/src/icons/README.md @@ -40,17 +40,6 @@ installed by default. You do not need `bootstrap-icons` as a dependency.
    -## Icons - -The library includes over {{ bootstrapIconsCount }} icons. Use the explorer below to search and -browse the available icons. - -
    - - -
    -
    - ## Usage BootstrapVue icons are not automatically installed when using BootstrapVue in your project, you must @@ -883,3 +872,12 @@ SVGs are awesome to work with, but they do have some known quirks to work around needed. - **Safari skips `aria-label` when used on non-focusable SVGs.** As such, use the attribute `aria-hidden="true"` when using the icon and use CSS to visually hide the equivalent label. + +## Icons + +The library includes over {{ bootstrapIconsCount }} icons. Use the explorer below to search and +browse the available icons. + + + +