chore: Use maximum available space in ui.inline instead of hardcoded …

…constant. #1974 (#2152)

py/examples/background_progress.py

@@ -44,7 +44,7 @@ async def serve(q: Q):
     # Unimportant, draw initial UI.
     if not q.client.initialized:
         q.page['form'] = ui.form_card(box='1 1 3 2', items=[
-            ui.inline([
+            ui.buttons([
                 ui.button(name='start_job', label='Start job'),
                 ui.button(name='cancel', label='Cancel')
             ]),

py/examples/form_visibility.py

@@ -12,7 +12,7 @@ async def serve(q: Q):
             ui.text_l(name='text_l', content='Second text'),
             ui.text_m(name='text_m', content='Third text'),
             ui.text_s(name='text_s', content='Fourth text'),
-            ui.inline([
+            ui.buttons([
                 ui.button(name='left1', label='Left1'),
                 ui.button(name='left2', label='Left2'),
                 ui.button(name='left3', label='Left3'),

ui/src/form.tsx

@@ -238,34 +238,30 @@ type XComponentsProps = {
   inset?: B
   height?: S
   direction?: 'row' | 'column'
+  isInline?: B
 }
 
-const
-  needsDefaultWidth = new Set(['date_picker', 'dropdown', 'slider', 'range_slider', 'table', 'visualization', 'vega_visualization']),
-  getComponentWidth = (componentKey: S, isInline: B) => isInline && needsDefaultWidth.has(componentKey) ? '400px' : 'auto'
-
 export const
-  XComponents = ({ items, justify, align, inset, height, direction = 'column' }: XComponentsProps) => {
+  XComponents = ({ items, justify, align, inset, height, direction = 'column', isInline = false }: XComponentsProps) => {
     const
       components = items.map((m: any, i) => {
         const
           // All form items are wrapped by their component name (first and only prop of "m").
           [componentKey] = Object.keys(m),
-          isInline = !!(justify || align),
-          { name, visible = true, width = getComponentWidth(componentKey, isInline), height } = m[componentKey],
+          { name, visible = true, width = 'auto', height } = m[componentKey],
           visibleStyles: React.CSSProperties = visible ? {} : { display: 'none' },
           // TODO: Ugly, maybe use ui.inline's 'align' prop instead?
-          alignSelf = componentKey === 'links' ? 'flex-start' : undefined
-
-        if (m[componentKey].width !== width) m[componentKey].width = width
+          alignSelf = componentKey === 'links' ? 'flex-start' : undefined,
+          // Components within inline, with no explicit width, and no explicit alignment in main direction should grow to fill the available space.
+          shouldParentGrow = isInline && width === 'auto' && !justify
 
         return (
           <div
             // Recreate only if name or position within form items changed, update otherwise.
             key={name || `${componentKey}-${i}`}
             data-visible={visible}
             className={height === '1' ? css.fullHeight : ''}
-            style={{ ...visibleStyles, width, alignSelf }}
+            style={{ ...visibleStyles, width, minWidth: width, alignSelf, flexGrow: shouldParentGrow ? 1 : undefined }}
           >
             <XComponent model={m} />
           </div>
@@ -286,11 +282,12 @@ export const
   XInline = ({ model: m }: { model: Inline }) => (
     <XComponents
       items={m.items}
-      justify={m.justify || 'start'}
-      align={m.align || 'center'}
+      justify={m.justify}
+      align={m.align || (m.direction === 'row' ? 'center' : undefined)}
       inset={m.inset}
       height={m.height}
       direction={m.direction || 'row'}
+      isInline
     />
   )
 

ui/src/header.tsx

@@ -16,13 +16,13 @@ import * as Fluent from '@fluentui/react'
 import { B, Box, box, Model, S } from 'h2o-wave'
 import React from 'react'
 import { stylesheet } from 'typestyle'
-import { Component, XInline } from './form'
+import { Component, XComponents } from './form'
 import { CardEffect, cards, getEffectClass, toCardEffect } from './layout'
 import { NavGroup, XNav } from './nav'
+import { Z_INDEX } from './parts/styleConstants'
 import { centerMixin, clas, cssVar, important, padding, px } from './theme'
 import { Command } from './toolbar'
 import { bond } from './ui'
-import { Z_INDEX } from './parts/styleConstants'
 
 const css = stylesheet({
   card: {
@@ -141,8 +141,12 @@ export const View = bond(({ name, state, changed }: Model<State & { commands: Co
               {subtitle && <div className={clas(css.nudgeUp, 'wave-s12')}>{subtitle}</div>}
             </div>
           </div>
-          {secondary_items && <div className={css.center}><XInline model={{ items: secondary_items }} /></div>}
-          {items && <div style={{ zIndex: Z_INDEX.HEADER, marginRight: state.commands ? 30 : undefined }}><XInline model={{ items }} /></div>}
+          {secondary_items && <div className={css.center}><XComponents items={secondary_items} justify='start' align='center' direction='row' /></div>}
+          {items && (
+            <div style={{ zIndex: Z_INDEX.HEADER, marginRight: state.commands ? 30 : undefined }}>
+              <XComponents items={items} justify='start' align='center' direction='row' />
+            </div>
+          )}
           {nav && <Navigation items={nav} isOpenB={navB} />}
         </div>
       )

website/widgets/form/inline.md

@@ -21,6 +21,8 @@ q.page['form'] = ui.form_card(
 )
 ```
 
+All components will try to take all the available space by default. This behavior can be controlled by specifying `width` and `height` component properties explicitly.
+
 Check the full API at [ui.inline](/docs/api/ui#inline).
 
 ## Horizontal alignment (`justify`)
@@ -71,7 +73,7 @@ It's also possible to specify `1` to fill the remaining card space. Useful for d
 ```py
 q.page['example'] = ui.form_card(box='1 1 -1 -1', items=[
     ui.inline(
-        items=[ui.text('I am in the perfect center!')], 
+        items=[ui.text('I am in the perfect center!')],
         justify='center',
         align='center',
         height='1'
@@ -93,20 +95,23 @@ q.page['example'] = ui.form_card(box='1 1 -1 3', items=[
         items=[
             ui.inline(
                 direction='column',
+                align='center',
                 items=[
                     ui.text_l(content='Sub title 1'),
                     ui.text(content='Lorem ipsum dolor sit amet'),
                 ]
             ),
             ui.inline(
                 direction='column',
+                align='center',
                 items=[
                     ui.text_l(content='Sub title 2'),
                     ui.text(content='Lorem ipsum dolor sit amet'),
                 ]
             ),
             ui.inline(
                 direction='column',
+                align='center',
                 items=[
                     ui.text_l(content='Sub title 3'),
                     ui.text(content='Lorem ipsum dolor sit amet'),