Feature/icon text (#3230)

* Init icon text, Remove old new-tag elements

* Improve icon text

* Fix icon text docs

* Update sidebar

* Update changelog

CHANGELOG.md

@@ -22,6 +22,7 @@ If you were importing `utilities/_all` or even `bulma.sass` directly, no change
 ### New features
 
 * Fix #1583 New `is-ghost` button that behaves / looks like a regular link
+* New `icon-text` component, to combine an icon with text on its side
 
 ### Bug fixes
 

docs/_data/sponsors.json

@@ -308,6 +308,14 @@
       "width":"126",
       "height":"38",
       "follow": true
+    },
+    "aussiecasinohex": {
+      "name": "aussiecasinohex",
+      "url": "https://aussiecasinohex.com/",
+      "title": "AussieCasinoHEX.com",
+      "width":"170",
+      "height":"60",
+      "follow": true
     }
   },
   "home": [
@@ -336,6 +344,7 @@
     ,"123calendars"
     ,"quickbookstoolhub"
     ,"pondr"
+    ,"aussiecasinohex"
   ],
   "footer": [
     "polygon"

docs/_includes/components/categories.html

@@ -35,8 +35,8 @@
   {% endfor %}
 </nav>
 
-{% include global/side-sponsor.html %}
-
 {% unless page.hide_fortyfour %}
   {% include global/fortyfour.html %}
 {% endunless %}
+
+{% include global/side-sponsor.html %}

docs/_includes/elements/new-tag.html

@@ -3,7 +3,7 @@
 
 <div class="tags has-addons">
   {% if tag_version_value > current_version_value %}
-    <span class="tag is-warning">Coming soon!</span>
+    <span class="tag is-warning is-light">Coming soon!</span>
   {% elsif tag_version_value == current_version_value %}
     <span class="tag">New!</span>
     <span class="tag is-success">{{ include.version }}</span>

docs/_includes/global/side-sponsor.html

@@ -1,6 +1,6 @@
 <div class="bd-side-sponsrs">
   <p class="bd-side-sponsor-label">
-    Sponsor
+    Sponsors
   </p>
 
   <a class="bd-side-sponsor" href="https://runpondr.com/" target="_blank" rel="nofollow">
@@ -13,4 +13,15 @@
       height="38"
     %}
   </a>
+
+  <a class="bd-side-sponsor" href="https://aussiecasinohex.com/" target="_blank" rel="nofollow">
+    {%
+      include elements/responsive-image.html
+      path="amis/aussiecasinohex"
+      extension="png"
+      alt="AussieCasinoHEX.com"
+      width="170"
+      height="60"
+    %}
+  </a>
 </div>

docs/_sass/patreon.sass

@@ -9,12 +9,16 @@
   margin-bottom: 0.75rem
 
 .bd-side-sponsor
-  display: inline-block
+  @extend %block
-  height: 50px
+  align-items: center
+  display: flex
+  height: 30px
+  justify-content: center
   vertical-align: top
   img
     display: block
     max-height: 100%
+    width: auto
 
 .bd-banner
   border-radius: $radius-large

docs/css/bulma-docs.css

@@ -93,7 +93,7 @@ fieldset[disabled] .pagination-ellipsis {
 }
 
 .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
-.subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .message:not(:last-child), .pagination:not(:last-child), .tabs:not(:last-child) {
+.subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .message:not(:last-child), .pagination:not(:last-child), .tabs:not(:last-child), .bd-side-sponsor:not(:last-child) {
   margin-bottom: 1.5rem;
 }
 
@@ -2153,6 +2153,32 @@ fieldset[disabled] .button {
   width: 3rem;
 }
 
+.icon-text {
+  align-items: flex-start;
+  color: inherit;
+  display: inline-flex;
+  flex-wrap: wrap;
+  line-height: 1.5rem;
+  vertical-align: top;
+}
+
+.icon-text .icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.icon-text .icon:not(:last-child) {
+  margin-right: 0.25em;
+}
+
+.icon-text .icon:not(:first-child) {
+  margin-left: 0.25em;
+}
+
+div.icon-text {
+  display: flex;
+}
+
 .image {
   display: block;
   position: relative;
@@ -15250,14 +15276,17 @@ svg {
 }
 
 .bd-side-sponsor {
-  display: inline-block;
+  align-items: center;
-  height: 50px;
+  display: flex;
+  height: 30px;
+  justify-content: center;
   vertical-align: top;
 }
 
 .bd-side-sponsor img {
   display: block;
   max-height: 100%;
+  width: auto;
 }
 
 .bd-banner {

docs/documentation/columns/gap.html

@@ -238,8 +238,6 @@ breadcrumb:
 
 {% include elements/anchor.html name="Breakpoint based column gaps" %}
 
-{% include elements/new-tag.html version="0.7.2" %}
-
 <div class="content">
   <p>
     You can define a column gap for each viewport size:

docs/documentation/columns/sizes.html

@@ -126,8 +126,6 @@ breadcrumb:
   <p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
 </div>
 
-{% include elements/new-tag.html version="0.6.1" %}
-
 <div class="content">
   <p>You can now use the following multiples of <code>20%</code> as well:</p>
   <ul>

docs/documentation/components/card.html

@@ -134,8 +134,6 @@ meta:
   </ul>
 </div>
 
-{% include elements/new-tag.html version="0.5.3" %}
-
 <div class="content">
   <p>
     You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.

docs/documentation/components/navbar.html

@@ -899,8 +899,6 @@ $(document).ready(function() {
 
 {% include elements/anchor.html name="Fixed navbar" %}
 
-{% include elements/new-tag.html version="0.6.1" %}
-
 <div class="content">
   <p>
     You can now <strong>fix</strong> the navbar to either the <strong>top</strong> or <strong>bottom</strong> of the page. This is a 2-step process:
@@ -1039,8 +1037,6 @@ $(document).ready(function() {
   Dropup
 </h4>
 
-{% include elements/new-tag.html version="0.6.1" %}
-
 <div class="content">
   <p>
     If you're using a navbar at the bottom, like the <a href="#fixed-navbar">fixed bottom navbar</a>, you might want to use a <strong>dropup menu</strong>. Simply add the <code>has-dropdown</code> and <code>has-dropdown-up</code> modifiers to the parent <code>navbar-item</code>.

docs/documentation/components/pagination.html

@@ -205,8 +205,6 @@ meta:
 
 {% include elements/anchor.html name="Styles" %}
 
-{% include elements/new-tag.html version="0.6.2" %}
-
 <p class="content">
   Add the <code>is-rounded</code> modifier to have rounded pagination items.
 </p>

docs/documentation/components/tabs.html

@@ -423,8 +423,6 @@ meta:
 
 {% include elements/snippet.html content=tabs_toggle_example horizontal=true more=true %}
 
-{% include elements/new-tag.html version="0.6.2" %}
-
 <p class="content">
   If you use both <code>is-toggle</code> and <code>is-toggle-rounded</code>, the first and last items will be <strong>rounded</strong>.
 </p>

docs/documentation/elements/button.html

@@ -582,8 +582,6 @@ meta:
 
 {% include elements/snippet.html wrapper="buttons" content=button_sizes_example %}
 
-{% include elements/new-tag.html version="0.7.4" %}
-
 <div class="content">
   <p>
     You can change the size of <strong>multiple buttons</strong> at once by wrapping them in a <code>buttons</code> parent, and applying one of 3 modifiers:
@@ -657,7 +655,6 @@ meta:
 
 <div class="columns">
   <div class="column">
-    {% include elements/new-tag.html version="0.6.2" %}
     <div class="buttons">
       {{ button_rounded_example }}
     </div>
@@ -823,8 +820,6 @@ meta:
 
 {% include elements/anchor.html name="List of buttons" %}
 
-{% include elements/new-tag.html version="0.6.1" %}
-
 <div class="columns">
   <div class="column">
     <div class="content">

docs/documentation/elements/content.html

@@ -178,8 +178,6 @@ meta:
   <p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
 </div>
 
-{% include elements/new-tag.html version="0.7.2" %}
-
 <div class="content">
   <p>
     <strong>Ordered lists</strong> <code>&lt;ol&gt;</code> support different <strong>types</strong> of items markers. To modify them, use either:

docs/documentation/elements/icon.html

@@ -24,6 +24,133 @@ meta:
 </span>
 {% endcapture %}
 
+{% capture icon_text_example %}
+<span class="icon-text">
+  <span class="icon">
+    <i class="fas fa-home"></i>
+  </span>
+  <span>Home</span>
+</span>
+{% endcapture %}
+
+{% capture icon_text_train_example %}
+<span class="icon-text">
+  <span class="icon">
+    <i class="fas fa-train"></i>
+  </span>
+  <span>Paris</span>
+  <span class="icon">
+    <i class="fas fa-arrow-right"></i>
+  </span>
+  <span>Budapest</span>
+  <span class="icon">
+    <i class="fas fa-arrow-right"></i>
+  </span>
+  <span>Bucharest</span>
+  <span class="icon">
+    <i class="fas fa-arrow-right"></i>
+  </span>
+  <span>Istanbul</span>
+  <span class="icon">
+    <i class="fas fa-flag-checkered"></i>
+  </span>
+</span>
+{% endcapture %}
+
+{% capture icon_text_in_content_example %}
+<div class="content">
+  <p>
+    An invitation to
+    <span class="icon-text">
+      <span class="icon">
+        <i class="fas fa-utensils"></i>
+      </span>
+      <span>dinner</span>
+    </span>
+    was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in
+    <span class="icon-text">
+      <span class="icon">
+        <i class="fas fa-city"></i>
+      </span>
+      <span>town</span>
+    </span>
+    the following day, and, consequently, unable to accept the honour of their
+    <span class="icon-text">
+      <span class="icon">
+        <i class="fas fa-envelope-open-text"></i>
+      </span>
+      <span>invitation</span>
+    </span>,
+    etc.
+  </p>
+
+  <p>
+    Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his
+    <span class="icon-text">
+      <span class="icon">
+        <i class="fas fa-flag-checkered"></i>
+      </span>
+      <span>arrival</span>
+    </span>
+    in Hertfordshire; and she began to fear that he might be always
+    <span class="icon-text">
+      <span class="icon">
+        <i class="fas fa-plane-departure"></i>
+      </span>
+      <span>flying</span>
+    </span>
+    about from one place to another, and never settled at Netherfield as he ought to be.
+  </p>
+</div>
+{% endcapture %}
+
+{% capture icon_text_div_example %}
+<div class="icon-text">
+  <span class="icon has-text-info">
+    <i class="fas fa-info-circle"></i>
+  </span>
+  <span>Information</span>
+</div>
+
+<p class="block">
+  Your package will be delivered on <strong>Tuesday at 08:00</strong>.
+</p>
+
+<div class="icon-text">
+  <span class="icon has-text-success">
+    <i class="fas fa-check-square"></i>
+  </span>
+  <span>Success</span>
+</div>
+
+<p class="block">
+  Your image has been successfully uploaded.
+</p>
+
+<div class="icon-text">
+  <span class="icon has-text-warning">
+    <i class="fas fa-exclamation-triangle"></i>
+  </span>
+  <span>Warning</span>
+</div>
+
+<p class="block">
+  Some information is missing from your <a href="#">profile</a> details.
+</p>
+
+<div class="icon-text">
+  <span class="icon has-text-danger">
+    <i class="fas fa-ban"></i>
+  </span>
+  <span>Danger</span>
+</div>
+
+<p class="block">
+  There was an error in your submission. <a href="#">Please try again</a>.
+</p>
+
+{% endcapture %}
+
 {% capture icon_color_example %}
 <span class="icon has-text-info">
   <i class="fas fa-info-circle"></i>
@@ -39,6 +166,36 @@ meta:
 </span>
 {% endcapture %}
 
+{% capture icon_text_color_example %}
+<span class="icon-text has-text-info">
+  <span class="icon">
+    <i class="fas fa-info-circle"></i>
+  </span>
+  <span>Info</span>
+</span>
+
+<span class="icon-text has-text-success">
+  <span class="icon">
+    <i class="fas fa-check-square"></i>
+  </span>
+  <span>Success</span>
+</span>
+
+<span class="icon-text has-text-warning">
+  <span class="icon">
+    <i class="fas fa-exclamation-triangle"></i>
+  </span>
+  <span>Warning</span>
+</span>
+
+<span class="icon-text has-text-danger">
+  <span class="icon">
+    <i class="fas fa-ban"></i>
+  </span>
+  <span>Danger</span>
+</span>
+{% endcapture %}
+
 {% capture icon_sizes_example %}
 <span class="icon">
   <i class="fas fa-camera-retro fa-lg"></i>
@@ -90,13 +247,50 @@ meta:
   </div>
 </div>
 
-
 <div class="content">
   <p>
     By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.
   </p>
 </div>
 
+<!--  -->
+{% include elements/anchor.html name="Icon text" %}
+
+{% include elements/new-tag.html version="0.9.2" %}
+
+<div class="content">
+  <p>
+    You can combine an <code>icon</code> with <strong>text</strong>, using the <code>icon-text</code> wrapper, as long as all text <em>inside</em> is wrapped in its own <code>span</code> element:
+  </p>
+</div>
+
+{% include elements/snippet.html content=icon_text_example %}
+
+<div class="content">
+  <p>
+    You can combine <strong>as many</strong> <code>icon</code> elements and text elements as you want:
+  </p>
+</div>
+
+{% include elements/snippet.html content=icon_text_train_example %}
+
+<div class="content">
+  <p>
+    Since <code>icon-text</code> is an <code>inline-flex</code> element, it can easily be inserted within any paragraph of <strong>text</strong>.
+  </p>
+</div>
+
+{% include elements/snippet.html content=icon_text_in_content_example %}
+
+<div class="content">
+  <p>
+    You can also turn the <code>icon-text</code> into a <code>flex</code> element simply by using a <code>&lt;div&gt;</code> tag instead:
+  </p>
+</div>
+
+{% include elements/snippet.html content=icon_text_div_example %}
+
+<!--  -->
 {% include elements/anchor.html name="Colors" %}
 
 <div class="content">
@@ -107,6 +301,15 @@ meta:
 
 {% include elements/snippet.html content=icon_color_example %}
 
+<div class="content">
+  <p>
+    The same applies to the <code>icon-text</code>:
+  </p>
+</div>
+
+{% include elements/snippet.html content=icon_text_color_example %}
+
+<!--  -->
 {% include elements/anchor.html name="Sizes" %}
 
 <div class="content">
@@ -283,6 +486,7 @@ meta:
   </tbody>
 </table>
 
+<!--  -->
 {% include elements/anchor.html name="Font Awesome variations" %}
 
 <div class="content">
@@ -426,6 +630,7 @@ meta:
   </tbody>
 </table>
 
+<!--  -->
 {% include elements/anchor.html name="Material Design Icons" %}
 
 <div class="content">
@@ -750,6 +955,7 @@ meta:
   </tbody>
 </table>
 
+<!--  -->
 {% include elements/anchor.html name="Ionicons" %}
 
 <div class="content">

docs/documentation/elements/image.html

@@ -184,8 +184,6 @@ meta:
 
 {% include elements/anchor.html name="Arbitrary ratios with any element" %}
 
-{% include elements/new-tag.html version="0.7.4" %}
-
 <div class="content">
   <p>
     You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>, simply by applying the <code>has-ratio</code> modifier to a resizable element.

docs/documentation/elements/progress.html

@@ -65,8 +65,6 @@ meta:
 
 {% include elements/anchor.html name="Indeterminate" %}
 
-{% include elements/new-tag.html version="0.7.4" %}
-
 <div class="content">
   <p>
     If you don't set the HTML <code>value</code> attribute, you can display an <strong>indeterminate</strong> progress bar. It's used to show that some progress is going on, but the actual duration is not yet determined.

docs/documentation/elements/tag.html

@@ -381,8 +381,6 @@ meta:
   </div>
 </div>
 
-{% include elements/new-tag.html version="0.7.4" %}
-
 <div class="content">
   <p>
     You can change the size of <strong>all</strong> tags at once:

docs/documentation/form/general.html

@@ -1086,9 +1086,6 @@ variables_keys:
 
 {% include elements/anchor.html name="Disabled form" %}
 
-{% include elements/new-tag.html version="0.7.4" %}
-
-
 <div class="content">
   <p>
     You can disable part or a whole form by wrapping a set of controls in a <strong>fieldset</strong> with a <code>disabled</code> HTML attribute.

docs/documentation/form/input.html

@@ -301,8 +301,6 @@ meta:
 
 {% include elements/anchor.html name="Styles" %}
 
-{% include elements/new-tag.html version="0.6.2" %}
-
 <div class="columns">
   <div class="column is-half">
     {{ rounded_example }}
@@ -379,7 +377,6 @@ meta:
 </div>
 
 <h4 class="subtitle">Readonly and static inputs</h4>
-{% include elements/new-tag.html version="0.5.3" %}
 
 <div class="content">
   <p>

docs/documentation/form/select.html

@@ -332,8 +332,6 @@ meta:
 
 {% include elements/anchor.html name="Styles" %}
 
-{% include elements/new-tag.html version="0.6.2" %}
-
 <div class="content">
   <p>
     You can create a <strong>rounded dropdown</strong> by appending the <code>is-rounded</code> modifier:

docs/documentation/form/textarea.html

@@ -232,8 +232,6 @@ meta:
 
 <h4 class="subtitle">Readonly</h4>
 
-{% include elements/new-tag.html version="0.5.3" %}
-
 <div class="content">
   <p>
     If you use the <code>readonly</code> HTML attribute, the textarea will look similar to a normal one, but is not editable and has no shadow.

docs/documentation/helpers/color-helpers.html

@@ -111,8 +111,6 @@ breadcrumb:
 
 {% include elements/anchor.html name="Background color" %}
 
-{% include elements/new-tag.html version="0.7.0" %}
-
 <div class="content">
   <p>
     You can set any element to one of the <strong>10 colors</strong> or <strong>9 shades of grey</strong>:

docs/documentation/helpers/typography-helpers.html

@@ -378,8 +378,6 @@ breadcrumb:
 
 {% include elements/anchor.html name="Font family" %}
 
-{% include elements/new-tag.html version="0.7.4" %}
-
 <div class="content">
   <p>
     You can change the font family with the use of one of <strong>5 font family helpers</strong>:

docs/documentation/layout/hero.html

@@ -461,7 +461,6 @@ meta:
 <section class="section">
   <div class="container">
     {% include elements/anchor.html name="Fullheight with navbar" %}
-    {% include elements/new-tag.html version="0.7.2" %}
     <div class="content">
       <p>
         If you are using a <a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the <code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar height.

docs/documentation/overview/responsiveness.html

@@ -214,8 +214,6 @@ $fullhd-enabled: false
 
 {% include elements/anchor.html name="Disabling breakpoints" %}
 
-{% include elements/new-tag.html version="0.7.0" %}
-
 <div class="content">
   <p>
     By default, the <code>$widescreen</code> and <code>$fullhd</code> breakpoints are <strong>enabled</strong>. You can disable them by setting the corresponding Sass boolean to <code>false</code>:

sass/elements/icon.sass

@@ -2,6 +2,7 @@ $icon-dimensions: 1.5rem !default
 $icon-dimensions-small: 1rem !default
 $icon-dimensions-medium: 2rem !default
 $icon-dimensions-large: 3rem !default
+$icon-text-spacing: 0.25em !default
 
 .icon
   align-items: center
@@ -19,3 +20,21 @@ $icon-dimensions-large: 3rem !default
   &.is-large
     height: $icon-dimensions-large
     width: $icon-dimensions-large
+
+.icon-text
+  align-items: flex-start
+  color: inherit
+  display: inline-flex
+  flex-wrap: wrap
+  line-height: $icon-dimensions
+  vertical-align: top
+  .icon
+    flex-grow: 0
+    flex-shrink: 0
+    &:not(:last-child)
+      margin-right: $icon-text-spacing
+    &:not(:first-child)
+      margin-left: $icon-text-spacing
+
+div.icon-text
+  display: flex