Update documentation on icon slot for boxes #1123

le0tan · 2020-03-14T07:32:40Z

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [X] Documentation update

Please replace the vue-strap file with MarkBind/vue-strap#136

damithc · 2020-03-14T08:17:27Z

docs/userGuide/components/advanced.md

+**Box Slot Options:**
+Slot name | Default class | Notes
+--- | --- | --- 
+_icon | (depends on box's `type` attribute) | Example: `<i slot="_icon" class="fas fa-times"></i>` will replace the icon with a cross sign in spite of the box's type.


 is not how I normally use the slot technique.
I was expecting to use it like :fas-home:. Would that work?

You can use <md>:fas-home:</md>:

The only differences are: using _icon instead of icon, using <md> to enforce the markdown parsing inside embedded HTML.

Nice.
I suppose not easy to change to icon instead of _icon? If not, this is going to be the first time we expose a underscore prefixed name in the user guide.

Nice.
I suppose not easy to change to icon instead of _icon? If not, this is going to be the first time we expose a underscore prefixed name in the user guide.

Should be pretty simple. Having an underscore does not change vue's slot behaviour in anyway.
_xxx is just the naming convention for slots we don't want to be exposed to the user MarkBind/vue-strap#120 (comment)

Let's use icon then, as we are now exposing it to the users?

Also, are there any limitations as to what can be put in the slot? e.g., can I put a markbind thumnail or an image in the icon slot?

Let's use icon then, as we are now exposing it to the users?

Sure, will create corresponding vue-strap PR shortly.

Also, are there any limitations as to what can be put in the slot? e.g., can I put a markbind thumnail or an image in the icon slot?

There shouldn't be any limitations as it's just replacing the placeholder in the template. Just the formatting could be messed up and need manual config.

Good. Can try some reasonable use cases (e.g., using thumbnails, images, small animated gifs) as icons and give them as examples in the documentation.

damithc · 2020-03-20T02:06:04Z

docs/userGuide/components/advanced.md

+    <img slot="icon" src="https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif"></img>
+    some very useful info
+</box>
+


Can post a screenshot? I can't see the final look from the PR preview.

For the animated gif, can find one without background (or make the box background white) so that it blends in nicely? We should try to make the examples as good looking as possible.

Can also add an example using a thumbnail as an icon (i.e., using MarkBind thumbnails feature), possibly a thumbnail of a letter or a number?

ang-zeyu

Changes to /vue-strap looks good 👍
will need to update the name for the icon attribute to slot transformation, and tests as well here

ang-zeyu · 2020-03-20T07:31:50Z

docs/userGuide/components/advanced.md

+
+Slot name | Default class |
+--- | --- |
+icon | (depends on box's `type` attribute) |


Could remove the brackets ( )

ang-zeyu · 2020-03-20T07:32:57Z

docs/userGuide/components/advanced.md

+--- | --- |
+icon | (depends on box's `type` attribute) |
+
+*Example 1*: Override the default icon for a certain type of box.


Could use {{ icon_example }} to be consistent with the rest of the page here

marvinchin

LGTM 🚀 As a heads up, this would break sites that were using the (undocumented) _icon slot.

* 'master' of https://github.com/MarkBind/markbind: Update test files (MarkBind#1138) Remove OK button from modals (MarkBind#1134) Add start from line number functionality to code blocks (MarkBind#1115) Allow special tags to be self-closing (MarkBind#1101) Simplify baseUrl resolving process (MarkBind#1087) Remove redundant file writing (MarkBind#1090) Bump acorn from 5.7.3 to 5.7.4 (MarkBind#1121) Bump acorn from 7.1.0 to 7.1.1 in /src/lib/markbind (MarkBind#1120) Unify markdown-it parser variants (MarkBind#1056) Remove dynamic include feature (MarkBind#1037) Fix flex shrink not applying in content wrapper (MarkBind#1135) Escape Nunjucks for special tags (MarkBind#1049) Update documentation on icon slot for boxes (MarkBind#1123)

…x-pageNav * 'master' of https://github.com/MarkBind/markbind: Update test files (MarkBind#1138) Remove OK button from modals (MarkBind#1134) Add start from line number functionality to code blocks (MarkBind#1115) Allow special tags to be self-closing (MarkBind#1101) Simplify baseUrl resolving process (MarkBind#1087) Remove redundant file writing (MarkBind#1090) Bump acorn from 5.7.3 to 5.7.4 (MarkBind#1121) Bump acorn from 7.1.0 to 7.1.1 in /src/lib/markbind (MarkBind#1120) Unify markdown-it parser variants (MarkBind#1056) Remove dynamic include feature (MarkBind#1037) Fix flex shrink not applying in content wrapper (MarkBind#1135) Escape Nunjucks for special tags (MarkBind#1049) Update documentation on icon slot for boxes (MarkBind#1123) Convert code in boxes to code block (MarkBind#1086)

damithc · 2020-03-30T01:56:31Z

@le0tan perhaps this enhancement got affected by MarkBind/vue-strap#131 ?

le0tan · 2020-03-30T03:07:23Z

@damithc looks like so. As the width of the icon wrapper is fixed, it makes the slot for icon less useful - 1em width is usually not enough for pictures. @yash-chowdhary can you take a look?

yash-chowdhary · 2020-04-02T01:56:47Z

@le0tan perhaps this enhancement got affected by [MarkBind/vue-strap#131]

This issue can be fixed by making use of our icon-size attribute.
Here's the original (w/o icon-size) -

Here's the box with icon-size= "2x" -

Here's an example with multiple boxes -

For @damithc 's example on using thumbnails -

achievable this way -

<box icon-size="2x" type="info">
    <thumbnail circle slot="icon" text=":book:" background="#dff5ff" size="50"/>
    thumbnail as icon
</box>

We can still maintain the width of the icon-wrappers with this enhancement.

damithc · 2020-04-06T05:56:33Z

For @damithc 's example on using thumbnails -

The thumbnail should be circle.

BTW, if we have to make a choice, I'd rather sacrifice fixed alignment to gain better aspect ratio. Hopefully, we can have both.

yash-chowdhary · 2020-04-07T01:19:13Z

The solution mentioned in #1172 would fix this.
Vuestrap PR link

* Update documentation on icon slot for boxes * Update the examples for using icon slot for boxes. * Resolve comments.

Update documentation on icon slot for boxes

ad380b1

damithc reviewed Mar 14, 2020

View reviewed changes

Update the examples for using icon slot for boxes.

13eefec

le0tan mentioned this pull request Mar 19, 2020

Change _icon to icon for user exposure MarkBind/vue-strap#136

Merged

le0tan requested review from damithc, ang-zeyu and yamgent March 19, 2020 10:01

damithc reviewed Mar 20, 2020

View reviewed changes

ang-zeyu reviewed Mar 20, 2020

View reviewed changes

Resolve comments.

574ff07

le0tan requested a review from marvinchin March 21, 2020 09:43

marvinchin approved these changes Mar 21, 2020

View reviewed changes

marvinchin added this to the v2.12.1 milestone Mar 21, 2020

marvinchin merged commit 2ee765b into MarkBind:master Mar 21, 2020

damithc mentioned this pull request Mar 30, 2020

<box>: use fixed icon width for seamless style boxes #1041

Closed

yash-chowdhary mentioned this pull request Apr 6, 2020

Box icon sizes skewed or cropped with custom content #1172

Closed

marvinchin pushed a commit that referenced this pull request Apr 10, 2020

Update documentation on icon slot for boxes (#1123)

461697b

* Update documentation on icon slot for boxes * Update the examples for using icon slot for boxes. * Resolve comments.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update documentation on icon slot for boxes #1123

Update documentation on icon slot for boxes #1123

le0tan commented Mar 14, 2020 •

edited

Loading

damithc Mar 14, 2020

le0tan Mar 14, 2020

damithc Mar 14, 2020

ang-zeyu Mar 14, 2020

damithc Mar 15, 2020

damithc Mar 15, 2020

le0tan Mar 15, 2020

damithc Mar 15, 2020

damithc Mar 20, 2020

le0tan Mar 20, 2020

damithc Mar 20, 2020

ang-zeyu left a comment

ang-zeyu Mar 20, 2020

ang-zeyu Mar 20, 2020

marvinchin left a comment

damithc commented Mar 30, 2020

le0tan commented Mar 30, 2020

yash-chowdhary commented Apr 2, 2020 •

edited

Loading

damithc commented Apr 6, 2020

yash-chowdhary commented Apr 7, 2020

Update documentation on icon slot for boxes #1123

Update documentation on icon slot for boxes #1123

Conversation

le0tan commented Mar 14, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ang-zeyu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marvinchin left a comment

Choose a reason for hiding this comment

damithc commented Mar 30, 2020

le0tan commented Mar 30, 2020

yash-chowdhary commented Apr 2, 2020 • edited Loading

damithc commented Apr 6, 2020

yash-chowdhary commented Apr 7, 2020

le0tan commented Mar 14, 2020 •

edited

Loading

yash-chowdhary commented Apr 2, 2020 •

edited

Loading