Repository: h2oai/wave
File: ui/src/progress.tsx (TypeScript)

Code before:
 * Progress bars are used to show the completion status of an operation lasting more than 2 seconds.
 * If the state of progress cannot be determined, do not set a value.
 * Progress bars feature a bar showing total units to completion, and total units finished.
 * The label appears above the bar, and the caption appears below.
 * The label should tell someone exactly what the operation is doing.
 *
 * Examples of formatting include:
 * [Object] is being [operation name], or
 * [Object] is being [operation name] to [destination name] or
 * [Object] is being [operation name] from [source name] to [destination name]
 *
 * Status text is generally in units elapsed and total units.
 * Real-world examples include copying files to a storage location, saving edits to a file, and more.
 * Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete.
 * Avoid time units as they are rarely accurate enough to be trustworthy.
 * Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar.
 * Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.
*/

const
  css = stylesheet({
    leftAlign: {
      position:'absolute',
      marginLeft:0
    },
  })

export interface Progress {
  /** The text displayed above the bar. */
  label: S
  /** The text displayed below the bar. */
  caption?: S
  /** The progress, between 0.0 and 1.0, or -1 (default) if indeterminate. */
  value?: F
  /** The width of the separator, e.g. '100px'. Defaults to '100%'. */
  width?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
  /** An identifying name for this component. */
  name?: S
  /** The type of progress bar to be displayed */
  type?: 'bar'|'spinner'
}

export const
  XProgress = ({ model }: { model: Progress }) => {
    const
      {type, label, caption = 'Please wait...', value, name } = model
    return (

Review comment (suggestion):
Hm.. I think this would not work if wrapped in `ui.inline`.

```py
ui.inline(items=[ui.progress(label='Spinner Progress', type='spinner')], justify='center'),
```

^^ Should be perfectly centered.

Let's use `styles` prop on `Fluent.Spinner` instead. `Fluent.Spinner styles={{ root: { justifyContent: 'auto' } }}` should do the trick. Please test it out.

Code after:
 * If the state of progress cannot be determined, do not set a value.
 * Progress bars feature a bar showing total units to completion, and total units finished.
 * The label appears above the bar, and the caption appears below.
 * The label should tell someone exactly what the operation is doing.
 *
 * Examples of formatting include:
 * [Object] is being [operation name], or
 * [Object] is being [operation name] to [destination name] or
 * [Object] is being [operation name] from [source name] to [destination name]
 *
 * Status text is generally in units elapsed and total units.
 * Real-world examples include copying files to a storage location, saving edits to a file, and more.
 * Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete.
 * Avoid time units as they are rarely accurate enough to be trustworthy.
 * Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar.
 * Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.
*/

export interface Progress {
  /** The text displayed above the bar or right to the spinner. */
  label: S
  /** The text displayed below the bar or spinner. */
  caption?: S
  /** The progress, between 0.0 and 1.0, or -1 (default) if indeterminate. */
  value?: F
  /** The width of the separator, e.g. '100px'. Defaults to '100%'. */
  width?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
  /** An identifying name for this component. */
  name?: S
  /** The type of progress bar to be displayed. One of 'bar', 'spinner'. Defaults to 'bar'. */
  type?: 'bar' | 'spinner'
}

export const
  XProgress = ({ model }: { model: Progress }) => {
    const { type = 'bar', label, caption, value, name } = model
    return (
      <div data-test={name}>
        {type === 'spinner'
          ? <Fluent.Spinner
            styles={{ root: { justifyContent: 'auto' } }}
            label={caption || label}
            size={Fluent.SpinnerSize.medium}
            labelPosition={caption ? 'bottom' : 'right'}
          />
          : <Fluent.ProgressIndicator label={label} description={caption || 'Please wait...'} percentComplete={value} />}
      </div>