playbook_ui 12.18.0.pre.alpha.play786multilevelselectimprovements627 → 12.19.0.pre.alpha.movemarkdown637

data/app/pb_kits/playbook/pb_table/styles/_structure.scss

@@ -1,50 +0,0 @@
-@import "../../tokens/colors";
-
-[class^=pb_table] {
-  @each $name, $value in $cell-pad-list {
-    &.#{$name} {
-      width: 100%;
-      thead {
-        tr {
-          th {
-            padding: $cell-pad-md $cell-gutter;
-
-            &:first-child {
-              padding-left: $cell-pad-endcap;
-            }
-            &:last-child {
-              padding-right: $cell-pad-endcap;
-            }
-          }
-        }
-      }
-      tbody {
-        tr {
-          td {
-            border-color: $border_light;
-            border-style: solid;
-            border-width: 0 0 1px;
-            padding: $value $cell-gutter;
-
-            &:first-child {
-              padding-left: $cell-pad-endcap;
-            }
-            &:last-child {
-              padding-right: $cell-pad-endcap;
-            }
-          }
-        }
-      }
-      &.data_table {
-        thead tr th {
-          padding-top: $cell-pad-sm;
-          padding-bottom: $cell-pad-sm;
-        }
-        tbody tr td {
-          padding-top: $cell-pad-sm;
-          padding-bottom: $cell-pad-sm;
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_table-card.scss

@@ -1,62 +0,0 @@
-[class^=pb_table] {
-  &.table-sm,
-  &.table-md,
-  &.table-lg {
-    &.table-card {
-      border-collapse: separate;
-      border-spacing: 0;
-      background: $white;
-
-      thead {
-        tr {
-          th {
-            border-color: $border_light;
-            border-style: solid;
-            border-width: 1px 0 1px 0;
-
-            &:first-child {
-              border-radius: 4px 0 0 0;
-              border-width: 1px 0 1px 1px;
-            }
-            &:last-child {
-              border-radius: 0 4px 0 0;
-              border-width: 1px 1px 1px 0;
-            }
-          }
-        }
-      }
-
-      tbody {
-        tr {
-          td {
-            border-color: $border_light;
-            border-style: solid;
-            border-width: 0 0 1px 0;
-
-            &:first-child {
-              border-width: 0 0 1px 1px;
-            }
-            &:last-child {
-              border-width: 0 1px 1px 0;
-            }
-          }
-
-          &:last-child {
-            td {
-              border-width: 0 0 1px 0;
-
-              &:first-child {
-                border-radius: 0 0 0 4px;
-                border-width: 0 0 1px 1px;
-              }
-              &:last-child {
-                border-radius: 0 0 4px 0;
-                border-width: 0 1px 1px 0;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -1,100 +0,0 @@
-@import "../../tokens/screen_sizes";
-
-$table-dark-card-bg: $bg_dark;
-
-[class^=pb_table] {
-  &.table-sm,
-  &.table-md,
-  &.table-lg {
-    &.table-dark {
-      thead {
-        tr {
-          border-color: $border_dark !important;
-
-          th {
-            border-color: $border_dark !important;
-            color: $text_dk_light;
-          }
-        }
-      }
-      tbody {
-        tr {
-          border-color: $border_dark;
-          transition: none !important;
-
-          td {
-            border-color: $border_dark !important;
-            border-bottom-width: 0 !important;
-            color: $white;
-
-            &:before {
-              color: $text_lt_light !important;
-            }
-          }
-          &:first-child {
-            td {
-              border-top-width: 0 !important;
-            }
-          }
-        }
-      }
-
-      &:not(.no-hover) {
-        tbody {
-          tr {
-            @media (hover:hover) {
-              &:hover {
-                td {
-                  border-color: $border_dark !important;
-                  background: $bg_dark;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &.table-card {
-        background: $table-dark-card-bg !important;
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: $screen-xs-max) {
-  [class^=pb_table] {
-    &.table-sm,
-    &.table-md,
-    &.table-lg {
-      &.table-card {
-        &.table-dark {
-          background: none !important;
-
-          tbody {
-            tr {
-              td {
-                background: $table-dark-card-bg !important;
-              }
-            }
-          }
-        }
-      }
-      &.table-dark {
-        tbody {
-          tr {
-            td {
-              &:first-child {
-                border-top-color: $border_dark !important;
-              }
-            }
-            &:first-child {
-              td {
-                border-top-width: 1px !important;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -1,125 +0,0 @@
-@import "../../tokens/border_radius";
-@import "../../tokens/positioning";
-@import "../../pb_caption/caption_mixin";
-
-@media only screen and (max-width: $screen-lg-min) {
-  [class^=pb_table] {
-    &.table-sm.table-collapse-md,
-    &.table-md.table-collapse-md,
-    &.table-lg.table-collapse-md {
-      width: 100%;
-      background: none !important;
-
-      thead {
-        tr {
-          left: $offscreen;
-          position: absolute;
-          top: $offscreen;
-
-          th {
-            display: block;
-            visibility: visible;
-          }
-        }
-      }
-      tbody {
-        tr {
-          td {
-            display: block;
-            visibility: visible;
-            border-left-width: 1px !important;
-            border-right-width: 1px !important;
-            border-bottom-width: 0 !important;
-            border-color: $border_light !important;
-            min-height: 2.2em;
-            position: relative;
-            text-align:left;
-            white-space: normal;
-            &:before {
-              content: attr(data-title);
-              @include caption;
-              width: 100% !important;
-              white-space: nowrap !important;
-              text-overflow: ellipsis !important;
-              position: relative !important;
-              top: 0 !important;
-              left: 0 !important;
-              height: 100% !important;
-              padding-left: 0 !important;
-              display: block !important;
-            }
-
-            &:first-child {
-              margin-top: $space_md !important;
-              border-top-width: 1px !important;
-              border-top-color: $border_light !important;
-              border-radius: $border_rad_light $border_rad_light 0 0;
-            }
-
-            &:last-child {
-              border-radius: 0 0 $border_rad_light $border_rad_light;
-              border-bottom-width: 1px !important;
-            }
-          }
-
-          &:first-child {
-            td {
-              &:first-child {
-                margin-top: $space-xs !important;
-              }
-            }
-          }
-        }
-      }
-      &.table-card {
-        background: none !important;
-
-        tbody {
-          tr {
-            td {
-              background: $white !important;
-              border-left-width: 1px !important;
-              border-right-width: 1px !important;
-              border-top-width: 1px !important;
-              &:after {
-                height: 0;
-                background-color: transparent;
-              }
-
-              &:first-child {
-                border-radius: $border_rad_light $border_rad_light 0 0 !important;
-              }
-              &:last-child {
-                border-radius: 0 0 $border_rad_light $border_rad_light !important;
-              }
-            }
-          }
-        }
-      }
-      @media (hover:hover) {
-        &:hover {
-          tbody {
-            tr {
-              box-shadow: 0 0 0 $white !important;
-            }
-          }
-        }
-      }
-      // reset the first and last to normalize
-      @each $name, $value in $cell-pad-list {
-        &.#{$name} {
-          tbody {
-            tr {
-              td {
-                &:first-child,
-                &:last-child {
-                  padding: $value $cell-gutter !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_table/styles/_variables.scss

@@ -1,26 +0,0 @@
-@import "../../tokens/spacing";
-@import "../../tokens/typography";
-
-//--------- PADDING ---------//
-
-// Cell padding between cells
-$cell-gutter: $space-xs;
-
-// First & last cell padding
-$cell-pad-endcap: $space-lg;
-
-// Vertical cell padding
-$cell-pad-sm: $space-xs;
-$cell-pad-md: $space-sm;
-$cell-pad-lg: $space-lg;
-
-$cell-pad-list: (
-  table-sm: $cell-pad-sm,
-  table-md: $cell-pad-md,
-  table-lg: $cell-pad-lg
-);
-
-//--------- CONTENT ---------//
-
-$default-header-size: $font-smaller;
-$default-font-size: $font-small;

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -1,16 +0,0 @@
-[class^=pb_table] {
-  &.vertical-border {
-    td,
-    th {
-      border-right: 1px solid $border_light !important;
-    }
-
-    @media screen and (min-width: $screen-xs-min) {
-      tr:hover {
-        td:last-child {
-          border-right-color: darken($border_light, 10%) !important;
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_text_input/docs/_description.md

@@ -1,2 +0,0 @@
-Area where user can enter small amount of text. Commonly used in forms.<br/>
-<strong>Note:</strong> This kit does not handle form validation logic.

data/app/pb_kits/playbook/pb_text_input/docs/_footer.md

@@ -1,2 +0,0 @@
-### Things to Avoid
-Do not use for large amounts of text (use <a href="https://playbook.powerapp.cloud/kits/textarea">Textarea</a> instead). Avoid using a text input without validation if input is required and using  with  validation if not required.

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb

@@ -1,25 +0,0 @@
-<%= pb_rails("text_input", props: {
-  label: "Add On With Defaults",
-  add_on: { icon: "bat" }
-}) %>
-
-<%= pb_rails("text_input", props: {
-  label: "Right-Aligned Add On With Border",
-  add_on: { icon: "user", alignment: 'right', border: true }
-}) %>
-
-
-<%= pb_rails("text_input", props: {
-  label: "Right-Aligned Add On With No Border",
-  add_on: { icon: "percent", alignment: 'right', border: false }
-}) %>
-
-<%= pb_rails("text_input", props: {
-  label: "Left-Aligned Add On With No Border",
-  add_on: { icon: "percent", alignment: 'left', border: false }
-}) %>
-
-<%= pb_rails("text_input", props: {
-  label: "Left-Aligned Add On With Border",
-  add_on: { icon: "user", alignment: 'left', border: true }
-}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx

@@ -1,83 +0,0 @@
-import React, { useState } from 'react'
-
-import TextInput from '../_text_input'
-
-const TextInputAddOn = (props) => {
-  const [defaultInput, setDefaultInput] = useState('')
-  const [firstInput, setFirstInput] = useState('')
-  const [secondInput, setSecondInput] = useState('')
-  const [thirdInput, setThirdInput] = useState('')
-  const [fourthInput, setFourthInput] = useState('')
-
-  const handleUpdateDefaultInput = ({ target }) => {
-    setDefaultInput(target.value)
-  }
-
-  const handleUpdateFirstInput = ({ target }) => {
-    setFirstInput(target.value)
-  }
-
-  const handleUpdateSecondInput = ({ target }) => {
-    setSecondInput(target.value)
-  }
-
-  const handleUpdateThirdInput = ({ target }) => {
-    setThirdInput(target.value)
-  }
-
-  const handleUpdateFourthInput = ({ target }) => {
-    setFourthInput(target.value)
-  }
-
-  return (
-    <>
-      <div>
-        <TextInput
-            addOn={{ icon: 'bat' }}
-            label="Add On With Defaults"
-            onChange={handleUpdateDefaultInput}
-            value={defaultInput}
-            {...props}
-        />
-      </div>
-      <div>
-        <TextInput
-            addOn={{ icon: 'user', alignment: 'right', border: true }}
-            label="Right-Aligned Add On With Border"
-            onChange={handleUpdateFirstInput}
-            value={firstInput}
-            {...props}
-        />
-      </div>
-      <div>
-        <TextInput
-            addOn={{ icon: 'percent', alignment: 'right', border: false }}
-            label="Right-Aligned Add On With No Border"
-            onChange={handleUpdateThirdInput}
-            value={thirdInput}
-            {...props}
-        />
-      </div>
-      <div>
-        <TextInput
-            addOn={{ icon: 'percent', alignment: 'left', border: false }}
-            label="Left-Aligned Add On With No Border"
-            onChange={handleUpdateSecondInput}
-            value={secondInput}
-            {...props}
-        />
-      </div>
-      <div>
-        <TextInput
-            addOn={{ icon: 'percent', alignment: 'left', border: true }}
-            label="Left-Aligned Add On With Border"
-            onChange={handleUpdateFourthInput}
-            value={fourthInput}
-            {...props}
-        />
-      </div>
-    </>
-  )
-}
-
-export default TextInputAddOn

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("text_input", props: {label: "Custom Input"}) do %>
-    <input placeholder="Custom placeholder" name="custom-name"></input>
-<% end %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx

@@ -1,29 +0,0 @@
-import React, { useState } from 'react'
-
-import TextInput from '../_text_input'
-
-const TextInputCustom = (props) => {
-  const [name, setName] = useState('')
-  const handleUpdateName = ({ target }) => {
-    setName(target.value)
-  }
-  return (
-    <div>
-      <TextInput
-          label="Custom Label"
-          {...props}
-      >
-        <input
-            name="custom-name"
-            onChange={handleUpdateName}
-            placeholder="custom-placeholder"
-            type="text"
-            value={name}
-            {...props}
-        />
-      </TextInput>
-    </div>
-  )
-}
-
-export default TextInputCustom

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb

@@ -1,31 +0,0 @@
-<%= pb_rails("text_input", props: {
-  label: "First Name",
-  placeholder: "Enter first name",
-  value: "Timothy Wenhold",
-  data: { say: "hi", yell: "go" },
-  aria: { something: "hello"},
-  id: "unique_id"
-}) %>
-
-<%= pb_rails("text_input", props: {
-  label: "Last Name",
-  placeholder: "Enter last name"
-}) %>
-
-<%= pb_rails("text_input", props: {
-    label: "Phone Number",
-    type: "phone",
-    placeholder: "Enter phone number"
-}) %>
-
-<%= pb_rails("text_input", props: {
-    label: "Email Address",
-    type: "email",
-    placeholder: "Enter email address"
-}) %>
-
-<%= pb_rails("text_input", props: {
-    label: "Zip Code",
-    type: "number",
-    placeholder: "Enter zip code"
-}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -1,102 +0,0 @@
-import React, { useState } from 'react'
-
-import Caption from '../../pb_caption/_caption'
-import TextInput from '../../pb_text_input/_text_input'
-import Title from '../../pb_title/_title'
-
-const TextInputDefault = (props) => {
-  const handleOnChangeFirstName = ({ target }) => {
-    setFirstName(target.value)
-  }
-  const ref = React.createRef()
-
-  const [firstName, setFirstName] = useState('')
-  const [formFields, setFormFields] = useState({
-    firstName: 'Jane',
-    lastName: 'Doe',
-    phone: '8888888888',
-    email: 'jane@doe.com',
-    zip: 55555,
-  })
-
-  const handleOnChangeFormField =  ({ target }) => {
-    const { name, value } = target
-    setFormFields({ ...formFields, [name]: value })
-  }
-
-  return (
-    <div>
-      <TextInput
-          aria={{ label: 'hello' }}
-          data={{ say: 'hi', yell: 'go' }}
-          id="unique-id"
-          label="First Name"
-          name="firstName"
-          onChange={handleOnChangeFormField}
-          placeholder="Enter first name"
-          value={formFields.firstName}
-          {...props}
-      />
-      <TextInput
-          label="Last Name"
-          name="lastName"
-          onChange={handleOnChangeFormField}
-          placeholder="Enter last name"
-          value={formFields.lastName}
-          {...props}
-      />
-      <TextInput
-          label="Phone Number"
-          name="phone"
-          onChange={handleOnChangeFormField}
-          placeholder="Enter phone number"
-          type="phone"
-          value={formFields.phone}
-          {...props}
-      />
-      <TextInput
-          label="Email Address"
-          name="email"
-          onChange={handleOnChangeFormField}
-          placeholder="Enter email address"
-          type="email"
-          value={formFields.email}
-          {...props}
-      />
-      <TextInput
-          label="Zip Code"
-          name="zip"
-          onChange={handleOnChangeFormField}
-          placeholder="Enter zip code"
-          type="number"
-          value={formFields.zip}
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <Title>{'Event Handler Props'}</Title>
-
-      <br />
-      <Caption>{'onChange'}</Caption>
-
-      <br />
-
-      <TextInput
-          label="First Name"
-          onChange={handleOnChangeFirstName}
-          placeholder="Enter first name"
-          ref={ref}
-          value={firstName}
-          {...props}
-      />
-
-      <If condition={firstName !== ''}>
-        {`First name is: ${firstName}`}
-      </If>
-    </div>
-  )
-}
-
-export default TextInputDefault

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name", disabled: true }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-
-import TextInput from '../_text_input'
-
-class TextInputDisabled extends React.Component {
-  render(props) {
-    return (
-      <div>
-        <TextInput
-            disabled
-            label="Last Name"
-            placeholder="Enter last name"
-            {...props}
-        />
-      </div>
-    )
-  }
-}
-
-export default TextInputDisabled