bindable-ui · lukelarsen · Apr 1, 2020 · Mar 25, 2020 · Mar 25, 2020 · Mar 25, 2020
diff --git a/dev-app/routes/components/copy/slots/index.html b/dev-app/routes/components/copy/slots/index.html
@@ -24,8 +24,10 @@
                     >
                         <span slot="tip">
                             <c-tip side="top" icon-tip.bind="true" arrow-position="leftEdge" size="medium">
-                                <div slot="trigger"><c-icon icon="question"></c-icon></div>
-                                <div slot="content">Content Here. Huzzah! that is a bit longer just to test</div>
+                                <div slot="trigger">
+                                    <c-icon icon="question"></c-icon>
+                                </div>
+                                <div slot="content"><c-p color="white">Content Here. Huzzah! that is a bit longer just to test</c-p></div>
                             </c-tip>
                         </span>
                     </c-copy>

diff --git a/dev-app/routes/components/forms/add-remove/actions/index.ts b/dev-app/routes/components/forms/add-remove/actions/index.ts
@@ -25,14 +25,14 @@ export class AddRemoveActions {
 
     public addRemoveActions = [
         {
-            description: 'Set a function to fire when the select contents changes on the left side.',
+            description: 'An object with callback functions. More details coming soon.',
             name: 'actions-left',
-            value: 'function',
+            value: 'object',
         },
         {
-            description: 'Set a function to fire when the select contents changes on the right side.',
+            description: 'An object with callback functions. More details coming soon.',
             name: 'actions-right',
-            value: 'function',
+            value: 'object',
         },
     ];
 }
diff --git a/dev-app/routes/components/forms/add-remove/properties/index.html b/dev-app/routes/components/forms/add-remove/properties/index.html
@@ -30,7 +30,7 @@
                     ></c-form-add-remove>
                 </c-code-sample>
             </l-stack>
-            <br>
+            <br><br><br>
         </div>
 
         <c-divider></c-divider>
@@ -50,7 +50,7 @@
                     ></c-form-add-remove>
                 </c-code-sample>
             </l-stack>
-            <br>
+            <br><br><br>
         </div>
 
         <c-divider></c-divider>
@@ -68,7 +68,7 @@
                     ></c-form-add-remove>
                 </c-code-sample>
             </l-stack>
-            <br>
+            <br><br><br>
         </div>
 
         <c-divider></c-divider>

diff --git a/dev-app/routes/components/forms/date/actions/index.ts b/dev-app/routes/components/forms/date/actions/index.ts
@@ -25,7 +25,7 @@ export class DateInputActions {
 
     public formDateOptionsActions = [
         {
-            description: 'An object of callbacks.',
+            description: 'An object with callback functions. More details coming soon.',
             name: 'callbacks',
             value: 'object',
         },

diff --git a/dev-app/routes/components/forms/date/properties/index.html b/dev-app/routes/components/forms/date/properties/index.html
@@ -38,7 +38,7 @@
                         <div>
                             <c-form-date
                                 id="test31"
-                                label="Error"
+                                label="Icon"
                                 label-icon="info"
                                 error-msg="Date is required"
                             ></c-form-date>

diff --git a/dev-app/routes/components/forms/select/actions/index.html b/dev-app/routes/components/forms/select/actions/index.html
@@ -22,9 +22,11 @@
 };</c-code>
                 <c-code-sample>
                     <l-grid min-size="25ch">
+                        <l-stack>
                         <c-form-select select-value.bind="vSelectOutput" options.bind="testOptions" label="Select Label" error-msg="This is an error" actions.bind="testActions"></c-form-select>
+                        <c-p>select: ${vSelectOutput}</c-p>
+                        </l-stack>
                     </l-grid>
-                    <c-p>select: ${vSelectOutput}</c-p>
                 </c-code-sample>
             </l-stack>
         </div>

diff --git a/dev-app/routes/components/forms/select/actions/index.ts b/dev-app/routes/components/forms/select/actions/index.ts
@@ -21,19 +21,13 @@ export class SelectActions {
             colHeadName: 'description',
             colHeadValue: 'Description',
         },
-        {
-            _class: 'monospaced',
-            colClass: 't85',
-            colHeadName: 'default',
-            colHeadValue: 'Default',
-        },
     ];
 
     public formSelectActions = [
         {
-            description: 'Set a function to fire when the select contents changes.',
+            description: 'An object with callback functions. More details coming soon.',
             name: 'actions',
-            value: 'function',
+            value: 'object',
         },
     ];
 

diff --git a/dev-app/routes/components/forms/select/properties/index.html b/dev-app/routes/components/forms/select/properties/index.html
@@ -60,11 +60,13 @@
     }];
 }</c-code>
                 <c-code-sample>
-                    <l-grid min-size="25ch">
-                        <c-form-select select-value.bind="vSelectOutput" options.bind="testOptions" label="Select Label" error-msg="This is an error"></c-form-select>
-                        <c-form-select options.bind="testOptions" error-msg="This is an error"></c-form-select>
-                    </l-grid>
-                    <c-p>select: ${vSelectOutput}</c-p>
+                    <l-stack spacing="var(--s0)">
+                        <l-grid min-size="25ch">
+                            <c-form-select select-value.bind="vSelectOutput" options.bind="testOptions" label="Select Label" error-msg="This is an error"></c-form-select>
+                            <c-form-select options.bind="testOptions" error-msg="This is an error"></c-form-select>
+                        </l-grid>
+                        <c-p>select: ${vSelectOutput}</c-p>
+                    </l-stack>
                 </c-code-sample>
             </l-stack>
         </div>

diff --git a/dev-app/routes/components/timeline/properties/index.ts b/dev-app/routes/components/timeline/properties/index.ts
@@ -15,6 +15,7 @@ export class TimelineProperties {
         },
         {
             _class: 'monospaced',
+            colClass: 't270',
             colHeadName: 'type',
             colHeadValue: 'Type',
         },
@@ -24,6 +25,7 @@ export class TimelineProperties {
         },
         {
             _class: 'monospaced',
+            colClass: 't150',
             colHeadName: 'default',
             colHeadValue: 'Default',
         },

diff --git a/dev-app/routes/components/tip/actions/index.ts b/dev-app/routes/components/tip/actions/index.ts
@@ -34,10 +34,9 @@ export class TipActions {
 
     public tipActions = [
         {
-            default: '',
-            description: 'Callback functions supported: onHide, onShow. See actions section below for examples.',
+            description: 'An object with callback functions. Functions supported: onHide, onShow. See actions section below for examples.',
             name: 'actions',
-            value: 'Object with callback functions.',
+            value: 'object',
         },
     ];
 

diff --git a/dev-app/routes/components/type/headlines/index.html b/dev-app/routes/components/type/headlines/index.html
@@ -13,6 +13,7 @@
                 <c-code-sample>
                     <c-h1 flush-top.bind="false">Not flush on the top</c-h1>
                     <c-h1>Normal Headline 1</c-h1>
+                    <c-h1 truncate.bind="true">Headline 1 that is really long and will truncate at the end of the line or something. Shrink the width of the browser window if needed.</c-h1>
                     <l-cluster
                         align="flex-start"
                         justify="space-between"
@@ -25,6 +26,7 @@
                                 spacing="var(--s-3)"
                                 spacing-direction="right"
                                 truncated-content.bind="true"
+                                style="width: 100%"
                             >
                                 <div>
                                     <c-icon

diff --git a/dev-app/routes/layouts/box-link/index.html b/dev-app/routes/layouts/box-link/index.html
@@ -57,6 +57,29 @@
 
             <c-divider></c-divider>
 
+            <div>
+                <l-stack spacing="var(--s-3)">
+                    <c-h3>fill-space</c-h3>
+                    <c-code-sample>
+                        <l-grid>
+                            <l-box-link fill-space.bind="true">
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                            </l-box-link>
+                            <l-box-link fill-space.bind="true">
+                                <c-p>Single line yet the same height.</c-p>
+                            </l-box-link>
+                            <l-box-link fill-space.bind="false">
+                                <c-p>fill-space set to false</c-p>
+                            </l-box-link>
+                        </l-grid>
+                    </c-code-sample>
+                </l-stack>
+            </div>
+
+            <c-divider></c-divider>
+
             <div>
                 <l-stack spacing="var(--s-3)">
                     <c-h3>margin-sides &amp; margin-ends</c-h3>

diff --git a/dev-app/routes/layouts/box-link/index.ts b/dev-app/routes/layouts/box-link/index.ts
@@ -52,6 +52,12 @@ export class BoxLinkProperties {
             name: 'color',
             value: 'Any color value. It is advised that you use the Core Color CSS Properties.',
         },
+        {
+            default: 'false',
+            description: 'Set to true if you want height: 100% set on the box.',
+            name: 'fill-space',
+            value: 'boolean',
+        },
         {
             default: '#',
             description: 'Set the URL where the link should go.',

diff --git a/dev-app/routes/layouts/box/index.html b/dev-app/routes/layouts/box/index.html
@@ -55,6 +55,29 @@
 
             <c-divider></c-divider>
 
+            <div>
+                <l-stack spacing="var(--s-3)">
+                    <c-h3>fill-space</c-h3>
+                    <c-code-sample>
+                        <l-grid>
+                            <l-box fill-space.bind="true">
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                            </l-box>
+                            <l-box fill-space.bind="true">
+                                <c-p>Single line yet the same height.</c-p>
+                            </l-box>
+                            <l-box fill-space.bind="false">
+                                <c-p>fill-space set to false</c-p>
+                            </l-box>
+                        </l-grid>
+                    </c-code-sample>
+                </l-stack>
+            </div>
+
+            <c-divider></c-divider>
+
             <div>
                 <l-stack spacing="var(--s-3)">
                     <c-h3>margin-sides &amp; margin-ends</c-h3>

diff --git a/dev-app/routes/layouts/box/index.ts b/dev-app/routes/layouts/box/index.ts
@@ -46,6 +46,12 @@ export class BoxProperties {
             name: 'color',
             value: 'Any color value. It is advised that you use the Core Color CSS Properties.',
         },
+        {
+            default: 'false',
+            description: 'Set to true if you want height: 100% set on the box.',
+            name: 'fill-space',
+            value: 'boolean',
+        },
         {
             default: '0px',
             description: 'Set the left and right margin of the box.',

diff --git a/dev-app/routes/layouts/grid/methods/index.ts b/dev-app/routes/layouts/grid/methods/index.ts
@@ -21,24 +21,13 @@ export class GridMethods {
             colHeadName: 'description',
             colHeadValue: 'Description',
         },
-        {
-            _class: 'monospaced',
-            colHeadName: 'default',
-            colHeadValue: 'Default',
-        },
     ];
 
     public gridMethods = [
         {
-            description: 'The function you want to run when the button is clicked.',
-            name: 'action',
-            value: 'function',
-        },
-        {
-            default: '_self',
-            description: 'Set if you want the box link to open in a new window.',
-            name: 'target',
-            value: '_self | _blank',
+            description: 'An object with callback functions. More details coming soon.',
+            name: 'actions',
+            value: 'object',
         },
     ];
 

diff --git a/dev-app/routes/layouts/grid/properties/index.html b/dev-app/routes/layouts/grid/properties/index.html
@@ -52,21 +52,22 @@
             <l-stack spacing="var(--s-3)">
                 <c-h3>gap</c-h3>
                 <c-code-sample>
-                    <l-grid gap="var(--s5)">
-                        <l-box>First Item</l-box>
-                        <l-box>Second Item</l-box>
-                        <l-box>Third Item</l-box>
-                        <l-box>Fourth Item</l-box>
-                        <l-box>Fifth Item</l-box>
-                    </l-grid>
-
-                    <l-grid gap="0px">
-                        <l-box>First Item</l-box>
-                        <l-box>Second Item</l-box>
-                        <l-box>Third Item</l-box>
-                        <l-box>Fourth Item</l-box>
-                        <l-box>Fifth Item</l-box>
-                    </l-grid>
+                    <l-stack>
+                        <l-grid gap="var(--s5)">
+                            <l-box>First Item</l-box>
+                            <l-box>Second Item</l-box>
+                            <l-box>Third Item</l-box>
+                            <l-box>Fourth Item</l-box>
+                            <l-box>Fifth Item</l-box>
+                        </l-grid>
+                        <l-grid gap="0px">
+                            <l-box>First Item</l-box>
+                            <l-box>Second Item</l-box>
+                            <l-box>Third Item</l-box>
+                            <l-box>Fourth Item</l-box>
+                            <l-box>Fifth Item</l-box>
+                        </l-grid>
+                    </l-stack>
                 </c-code-sample>
             </l-stack>
         </div>
@@ -77,15 +78,16 @@
             <l-stack spacing="var(--s-3)">
                 <c-h3>auto-sizing</c-h3>
                 <c-code-sample>
-                    <l-grid>
-                        <l-box>First Item</l-box>
-                        <l-box>Second Item</l-box>
-                    </l-grid>
-
-                    <l-grid auto-sizing="auto-fill">
-                        <l-box>First Item</l-box>
-                        <l-box>Second Item</l-box>
-                    </l-grid>
+                    <l-stack>
+                        <l-grid>
+                            <l-box>First Item</l-box>
+                            <l-box>Second Item</l-box>
+                        </l-grid>
+                        <l-grid auto-sizing="auto-fill">
+                            <l-box>First Item</l-box>
+                            <l-box>Second Item</l-box>
+                        </l-grid>
+                    </l-stack>
                 </c-code-sample>
             </l-stack>
         </div>

diff --git a/dev-app/routes/layouts/stack/index.html b/dev-app/routes/layouts/stack/index.html
@@ -118,7 +118,7 @@
 
             <c-divider></c-divider>
 
-            <div>
+            <div style="height: 500px;">
                 <l-stack spacing="var(--s-3)">
                     <c-h3>Split After</c-h3>
                     <c-code-sample class="example">