Cleaned up the dialog components page, as it had formatting issues and outdated information

7 years ago · 9c5c9de152
2 changed files with 117 additions and 137 deletions
--- a/_data/nav.yml
+++ b/_data/nav.yml
@ -366,14 +366,14 @@
    - url: "#table_grid"
    - url: "#table_tab_navigation"
    - url: "#table_default_attributes"
-    - url: "#table_default_styles"    
+    - url: "#table_default_styles"
    - url: "#table_responsive_width"
    - url: "#table_class_list"
    - url: "#table_cell_class_list"
    - url: "#table_row_class_list"
    - url: "#table_advtab"
    - url: "#table_cell_advtab"
-    - url: "#table_resize_bars"    
+    - url: "#table_resize_bars"
    - url: "#table_style_by_css"
    - url: "#Commands"
    - url: "#API"
@ -435,7 +435,6 @@
    - url: "#HtmlPanel"
    - url: "#Iframe"
    - url: "#Input"
-    - url: "#JukeBox"
    - url: "#Panel"
    - url: "#SelectBox"
    - url: "#SizeInput"
--- a/ui-components/dialogcomponents.md
+++ b/ui-components/dialogcomponents.md
@ -13,12 +13,12 @@ This chapter describes the Dialog component summary is a reference list of all T
 An **AlertBanner** is a color-coded banner to alert the user of a problem. A URL may be provided to direct users to a reference site that may resolve the informed issue.

 ```js
-    {
-        type: 'alertbanner',
-      level: 'info', // 'info' | 'warn' | 'error' | 'success'
-      text: 'An informative message to the user',
-      icon: string,
-    }
+{
+  type: 'alertbanner',
+  level: 'info', // 'info' | 'warn' | 'error' | 'success'
+  text: 'An informative message to the user',
+  icon: string
+}
 ```

 ### Button
@ -27,12 +27,12 @@ A **Button** component to be used inside the dialog body. These buttons differ f


 ```js
-    {
-      type: 'button',
-      text: 'Alpha',
-      primary: true,
-      name: 'alpha-button'
-    }
+{
+  type: 'button',
+  text: 'Alpha',
+  primary: true,
+  name: 'alpha-button'
+}
 ```

 ### Charmap
@ -40,15 +40,15 @@ A **Button** component to be used inside the dialog body. These buttons differ f
 A **Charmap** is a specialized component that prints a range of unique characters from Unicode.

 ```js
-    {
-        type: 'charmap',
-      name: 'charmap-1',
-      characters: [
-            {value: 'A', text: 'A'},
-            {value: 'B', text: 'B'},
-            {value: 'C', text: 'C'}
-        ]
-    }
+{
+  type: 'charmap',
+  name: 'charmap-1',
+  characters: [
+    {value: 'A', text: 'A'},
+    {value: 'B', text: 'B'},
+    {value: 'C', text: 'C'}
+  ]
+}
 ```

 ### Checkbox
@ -56,11 +56,11 @@ A **Charmap** is a specialized component that prints a range of unique character
 A **Checkbox** is a component, used to toggle states on, or off.

 ```js
-    {
-      type: 'checkbox',
-      name: 'checkbox-1',
-      label: 'Checkbox Label'
-    }
+{
+  type: 'checkbox',
+  name: 'checkbox-1',
+  label: 'Checkbox Label'
+}
 ```

 ### ColorInput
@ -68,12 +68,11 @@ A **Checkbox** is a component, used to toggle states on, or off.
 A **ColorInput** is a specialized input field which takes `RGB` colors and will render the sample color typed.

 ```js
-    {
-      type: 'colorinput',
-      name: 'colorA',
-      label: 'Color Label',
-      colspan: 1
-    }
+{
+  type: 'colorinput',
+  name: 'colorA',
+  label: 'Color Label'
+}
 ```

 ### ColorPicker
@ -81,12 +80,11 @@ A **ColorInput** is a specialized input field which takes `RGB` colors and will
 A **ColorPicker**  is an intuitive color picker tool similar to image editors.

 ```js
-    {
-      type: 'colorpicker',
-      name: 'color',
-      label: 'Color A',
-      colspan: 1
-    }
+{
+  type: 'colorpicker',
+  name: 'color',
+  label: 'Color A'
+}
 ```

 ### DropZone
@ -94,11 +92,11 @@ A **ColorPicker**  is an intuitive color picker tool similar to image editors.
 A **DropZone** is a component that catches drag and drops items, or lets the user browse that can send a list of files for processing and receive the result.

 ```js
-    {
-      type: 'dropzone',
-      name: 'dropzone',
-      label: 'Dropzone'
-    }
+{
+  type: 'dropzone',
+  name: 'dropzone',
+  label: 'Dropzone'
+}
 ```

 ### Grid
@ -106,11 +104,11 @@ A **DropZone** is a component that catches drag and drops items, or lets the use
 A **Grid** is a layout component that creates columns in the dialog body.

 ```js
-    {
-      type: 'grid',
-      columns: 2,
-      items: [ ]
-    }
+{
+  type: 'grid',
+  columns: 2,
+  items: [ ]
+}
 ```

 ### HtmlPanel
@ -118,10 +116,10 @@ A **Grid** is a layout component that creates columns in the dialog body.
 A **HtmlPanel** is similar to panel. It only takes a string of HTML.

 ```js
-    {
-      type: 'htmlpanel',
-      html: '<div>html</div>'
-    }
+{
+  type: 'htmlpanel',
+  html: '<div>html</div>'
+}
 ```

 ### Iframe
@ -129,13 +127,12 @@ A **HtmlPanel** is similar to panel. It only takes a string of HTML.
 A **Iframe** is a component used to define the values of an iframe.

 ```js
-    {
-        name: 'IframeName',
-        type: 'iframe',
-        label: 'Description of iframe',
-        size: 'flex',
-        sandboxed: true
-    }
+{
+  name: 'IframeName',
+  type: 'iframe',
+  label: 'Description of iframe',
+  sandboxed: true
+}
 ```

 ### Input
@ -143,25 +140,12 @@ A **Iframe** is a component used to define the values of an iframe.
 A **Input** is a single line text field, and also renders a label element.

 ```js
-     {
-       type: 'input',
-       name: 'inputA',
-       label: 'Input Label',
-       placeholder: 'example',
-       colspan: 1
-     }
-```
-
-### JukeBox
-
-A **JukeBox**  is a specialized component that can cycle through a list of options.
-
-```js
-    {
-      type: 'colorpicker',
-      name: 'colorpicker',
-      label: 'Color'
-    }
+{
+  type: 'input',
+  name: 'inputA',
+  label: 'Input Label',
+  placeholder: 'example'
+}
 ```

 ### Panel
@ -169,10 +153,10 @@ A **JukeBox**  is a specialized component that can cycle through a list of optio
 A **Panel** is a basic container, that holds other components, we can compose many components inside a panel. In HTML terms consider a panel a `<div>` wrapper. A dialog body configuration must begin with either a Panel or a TabPanel.

 ```js
-    {
-      type: 'panel',
-      items: [ ... ]
-    }
+{
+  type: 'panel',
+  items: [ ... ]
+}
 ```

 ### SelectBox
@ -180,15 +164,15 @@ A **Panel** is a basic container, that holds other components, we can compose ma
 A **SelectBox** allows users to select a choice from a list of many options.

 ```js
-    {
-      type: 'selectbox',
-      name: 'SelectA',
-      label: 'Select Label',
-      items: [
-        { value: 'one', text: 'One' },
-        { value: 'two', text: 'Two' }
-      ]
-    }
+{
+  type: 'selectbox',
+  name: 'SelectA',
+  label: 'Select Label',
+  items: [
+    { value: 'one', text: 'One' },
+    { value: 'two', text: 'Two' }
+  ]
+}
 ```

 ### SizeInput
@ -196,29 +180,28 @@ A **SelectBox** allows users to select a choice from a list of many options.
 A **SizeInput** is a specialized input field that can lock ratios, see image dialog.

 ```js
-    {
-      type: 'sizeinput',
-      name: 'size',
-      label: 'Dimensions'
-      colspan: 1
-    }
+{
+  type: 'sizeinput',
+  name: 'size',
+  label: 'Dimensions'
+}
 ```

 ### Tabpanel

-A **Tabpanel -** is similar to a Panel, where it can hold other components. TabPanel is a layout component that will separate sections using tabs. Each tab is a panel that can contain different components. A dialog body configuration must begin with either a Panel or a TabPanel.
+A **Tabpanel** is similar to a Panel, where it can hold other components. TabPanel is a layout component that will separate sections using tabs. Each tab is a panel that can contain different components. A dialog body configuration must begin with either a Panel or a TabPanel.

 ```js
+{
+  type: 'tabpanel',
+  tabs: [
    {
-      type: 'tabpanel',
-      tabs: [
-        {
-          title: 'First Tab',
-          items: [ .... ]
-        },
-        ...
-      ]
-    }
+      title: 'First Tab',
+      items: [ .... ]
+    },
+    ...
+  ]
+}
 ```

 ### TextArea
@ -226,14 +209,12 @@ A **Tabpanel -** is similar to a Panel, where it can hold other components. TabP
 A **TextArea** is a multiline text field.

 ```js
-    {
-      type: 'textarea',
-      size: 'flex'
-      name: 'text-a',
-      label: 'Text: ',
-      placeholder: 'example',
-      colspan: 1
-    }
+{
+  type: 'textarea',
+  name: 'text-a',
+  label: 'Text: ',
+  placeholder: 'example'
+}
 ```

 ### UrlInput
@ -241,23 +222,23 @@ A **TextArea** is a multiline text field.
 A **URlInput** is a specialized input text field for image dialog. This will include a typeahead for previous image URLs entered.

 ```js
-    // URL input for image dialog
-    // This will include a typeahead for previous image urls entered
-    {
-      name: 'src',
-      type: 'urlinput',
-      filetype: 'image',
-      label: 'Source'
-    }
-    // URL input for link dialog
-    // The main difference from the image mode is that it will include typeahead
-    // Information for all anchor targets and headings in the document as well
-    // As the history of 5 previously entered URLs.
-    {
-      name: 'url',
-      type: 'urlinput',
-      filetype: 'file',
-      label: 'Url'
-    }
-    // Note that "filetype" also accepts "media"
+// URL input for image dialog
+// This will include a typeahead for previous image urls entered
+{
+  name: 'src',
+  type: 'urlinput',
+  filetype: 'image',
+  label: 'Source'
+}
+// URL input for link dialog
+// The main difference from the image mode is that it will include typeahead
+// Information for all anchor targets and headings in the document as well
+// As the history of 5 previously entered URLs.
+{
+  name: 'url',
+  type: 'urlinput',
+  filetype: 'file',
+  label: 'Url'
+}
+// Note that "filetype" also accepts "media"
 ```