ENGCOM-6024: Replace deprecated "nobr" element #24888

Author: sidolov

lib/web/css/docs/layout.html

@@ -55,25 +55,25 @@
         <tr>
             <th>@layout-class-1column</th>
             <td class="vars_value">page-layout-1column</td>
-            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
             <td>Class name for one column layout</td>
         </tr>
         <tr>
             <th>@layout-class-2columns__left</th>
             <td class="vars_value">page-layout-2columns-left</td>
-            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
             <td>Class name for two columns layout with left sidebar</td>
         </tr>
         <tr>
             <th nowrap="nowrap">@layout-class-2columns__right</th>
             <td class="vars_value">page-layout-2columns-right</td>
-            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
             <td>Class name for two columns layout with right sidebar</td>
         </tr>
         <tr>
             <th>@layout-class-3columns</th>
             <td class="vars_value">page-layout-3columns</td>
-            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
             <td>Class name for three columns layout with left sidebar</td>
         </tr>
         <tr>

lib/web/css/docs/responsive.html

@@ -57,25 +57,25 @@ footer.footer {
 //        <tr>
 //            <th>@layout-class-1column</th>
 //            <td class="vars_value">page-layout-1column</td>
-//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+//            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
 //            <td>Class name for one column layout</td>
 //        </tr>
 //        <tr>
 //            <th>@layout-class-2columns__left</th>
 //            <td class="vars_value">page-layout-2columns-left</td>
-//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+//            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
 //            <td>Class name for two columns layout with left sidebar</td>
 //        </tr>
 //        <tr>
 //            <th nowrap="nowrap">@layout-class-2columns__right</th>
 //            <td class="vars_value">page-layout-2columns-right</td>
-//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+//            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
 //            <td>Class name for two columns layout with right sidebar</td>
 //        </tr>
 //        <tr>
 //            <th>@layout-class-3columns</th>
 //            <td class="vars_value">page-layout-3columns</td>
-//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+//            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
 //            <td>Class name for three columns layout with left sidebar</td>
 //        </tr>
 //        <tr>

lib/web/css/docs/source/_layout.less

@@ -4,7 +4,7 @@
 //  */
 
 //  # Responsive
-//  Magento UI library provides a strong approach for working with media queries. It`s based on recursive call of <nobr><code>.media-width()</code></nobr> mixin defined anywhere in project but invoked in one place in <nobr><code>lib/web/css/source/lib/_responsive.less</code></nobr>. That's why in the resulting <code>styles.css</code> we have every media query only once with all the rules there, not a multiple calls for the same query.
+//  Magento UI library provides a strong approach for working with media queries. It`s based on recursive call of <span style="white-space: nowrap"><code>.media-width()</code></span> mixin defined anywhere in project but invoked in one place in <span style="white-space: nowrap"><code>lib/web/css/source/lib/_responsive.less</code></span>. That's why in the resulting <code>styles.css</code> we have every media query only once with all the rules there, not a multiple calls for the same query.
 //
 //  To see the media queries work resize window to understand which breakpoint is applied.
 //  ```
@@ -43,8 +43,8 @@
 //  ```css
 // .media-width(<@extremum>, <@break>);
 //  ```
-//  <nobr><code>@extremum: max|min</code></nobr> - sets whether to use **min-width** or **max-width** in media query condition<br />
-//  <nobr><code>@break: value</code></nobr> - sets the value of breakpoint to compare with in media query condition.<br />
+//  <span style="white-space: nowrap"><code>@extremum: max|min</code></span> - sets whether to use **min-width** or **max-width** in media query condition<br />
+//  <span style="white-space: nowrap"><code>@break: value</code></span> - sets the value of breakpoint to compare with in media query condition.<br />
 //  For example
 //  ```css
 //  .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {

lib/web/css/docs/source/_responsive.less

@@ -4169,25 +4169,25 @@
 //        <tr>
 //            <th>@layout-class-1column</th>
 //            <td class="vars_value">page-layout-1column</td>
-//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+//            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
 //            <td>Class name for one column layout</td>
 //        </tr>
 //        <tr>
 //            <th>@layout-class-2columns__left</th>
 //            <td class="vars_value">page-layout-2columns-left</td>
-//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+//            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
 //            <td>Class name for two columns layout with left sidebar</td>
 //        </tr>
 //        <tr>
 //            <th nowrap="nowrap">@layout-class-2columns__right</th>
 //            <td class="vars_value">page-layout-2columns-right</td>
-//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+//            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
 //            <td>Class name for two columns layout with right sidebar</td>
 //        </tr>
 //        <tr>
 //            <th>@layout-class-3columns</th>
 //            <td class="vars_value">page-layout-3columns</td>
-//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+//            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
 //            <td>Class name for three columns layout with left sidebar</td>
 //        </tr>
 //        <tr>

lib/web/css/docs/source/_variables.less

@@ -4168,25 +4168,25 @@ <h2 id="layout-variables">Layout variables</h2>
         <tr>
             <th>@layout-class-1column</th>
             <td class="vars_value">page-layout-1column</td>
-            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
             <td>Class name for one column layout</td>
         </tr>
         <tr>
             <th>@layout-class-2columns__left</th>
             <td class="vars_value">page-layout-2columns-left</td>
-            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
             <td>Class name for two columns layout with left sidebar</td>
         </tr>
         <tr>
             <th nowrap="nowrap">@layout-class-2columns__right</th>
             <td class="vars_value">page-layout-2columns-right</td>
-            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
             <td>Class name for two columns layout with right sidebar</td>
         </tr>
         <tr>
             <th>@layout-class-3columns</th>
             <td class="vars_value">page-layout-3columns</td>
-            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
+            <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td>
             <td>Class name for three columns layout with left sidebar</td>
         </tr>
         <tr>