RubyGems - playbook_ui - Versions diffs - 14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5121 → 14.9.0.pre.alpha.PLAY1660reactdropzone5020 - Mend

playbook_ui 14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5121 → 14.9.0.pre.alpha.PLAY1660reactdropzone5020

Files changed (60) hide show

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx CHANGED Viewed

@@ -17,60 +17,47 @@ const GaugeComplex = (props) => (
       gap="sm"
       padding="xl"
       wrap
-      {...props}
   >
     <FlexItem
         flex={1}
         grow
-        {...props}
     >
       <Card
           maxWidth="xs"
           padding="md"
-          {...props}
       >
         <Title
             paddingBottom="sm"
             size={4}
             text="Abandoned Calls"
-            {...props}
         />
-        <Flex
-            align="stretch"
-            {...props}
-        >
+        <Flex align="stretch">
           <Flex
               marginRight="sm"
               orientation="column"
-              {...props}
           >
             <Body
                 color="light"
                 paddingBottom="sm"
                 text="Total Abandoned"
-                {...props}
             />
             <Flex
                 align="baseline"
                 paddingBottom="xs"
-                {...props}
             >
               <Title
                   size={1}
                   text="39"
-                  {...props}
               />
               <Title
                   color="light"
                   size={3}
                   text="calls"
-                  {...props}
               />
             </Flex>
             <Caption
                 size="xs"
                 text="of 390"
-                {...props}
             />
           </Flex>
@@ -78,29 +65,22 @@ const GaugeComplex = (props) => (
               alignSelf="stretch"
               marginRight="sm"
               orientation="vertical"
-              {...props}
           />
           <Flex
               orientation="column"
               wrap
-              {...props}
           >
               <Body
                   color="light"
                   text="% Abandoned"
-                  {...props}
-              />
-            <Flex
-                wrap
-                {...props}
-            >
+               />
+            <Flex wrap>
               <FlexItem
                   fixedSize="150px"
                   overflow="hidden"
                   shrink
-                  {...props}
-              >
+              >
                 <Gauge
                     chartData={data}
                     disableAnimation
@@ -110,7 +90,7 @@ const GaugeComplex = (props) => (
                     {...props}
                 />
                </FlexItem>
-            </Flex>
+            </Flex>
           </Flex>
         </Flex>
       </Card>

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ type HomeAddressStreetProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
-  emphasis: "street" | "city" | "none",
+  emphasis: "street" | "city",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   homeId: string,
   houseStyle: string,
@@ -129,22 +129,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
           </div>
         </div>
       }
-      {emphasis == 'none' &&
-        <div>
-          <Body dark={dark}>
-            {joinPresent([titleize(address), houseStyle], ' · ')}
-          </Body>
-          <Body dark={dark}>{titleize(addressCont)}</Body>
-          <div>
-            <Body
-                color="light"
-                dark={dark}
-              >
-            {`${titleize(city)}, ${state} ${zipcode}`}
-          </Body>
-          </div>
-        </div>
-      }
       {homeId &&
         <Hashtag
             classname="home-hashtag"

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb CHANGED Viewed

@@ -24,20 +24,4 @@
   state: "PA",
   zipcode: "19382",
   territory: "PHL",
-}) %>
-<br>
-<br>
-<%= pb_rails("home_address_street", props: {
-  address: "70 Prospect Ave",
-  address_cont: "Apt M18",
-  city: "West Chester",
-  emphasis: "none",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  house_style: "Colonial",
-  state: "PA",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx CHANGED Viewed

@@ -32,21 +32,6 @@ const HomeAddressStreetEmphasis = (props) => {
           zipcode="19382"
           {...props}
       />
-      <br />
-      <br />
-      <HomeAddressStreet
-          address="70 Prospect Ave"
-          addressCont="Apt M18"
-          city="West Chester"
-          emphasis="none"
-          homeId="8250263"
-          homeUrl="https://powerhrg.com/"
-          houseStyle="Colonial"
-          state="PA"
-          territory="PHL"
-          zipcode="19382"
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md CHANGED Viewed

@@ -1,3 +1,2 @@
 Emphasis on street happens by default. (no prop needed)
-Emphasis on "city" makes the city emphasized, rather than the street.
-Adding "none" to emphasis prop will provide no emphasis.
+Emphasis on "city" makes the city emphasized, rather than the street.

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb CHANGED Viewed

@@ -7,7 +7,7 @@ module Playbook
       prop :address_cont
       prop :city
       prop :emphasis, type: Playbook::Props::Enum,
-                      values: %w[street city none],
+                      values: %w[street city],
                       default: "street"
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
@@ -77,20 +77,6 @@ module Playbook
         }
       end
-      def none_emphasis_props
-        {
-          address_house_style: address_house_style,
-          address_house_style2: address_house_style2,
-          city_state_zip: city_state_zip,
-          dark: dark,
-          home_id: home_id,
-          home_url: home_url,
-          target: target_option,
-          new_window: new_window,
-          territory: territory,
-        }
-      end
       def target_option
         if target && home_url
           target

data/app/pb_kits/playbook/pb_table/_table.tsx CHANGED Viewed

@@ -92,16 +92,16 @@ const Table = (props: TableProps): React.ReactElement => {
     useEffect(() => {
         const handleStickyColumns = () => {
             let accumulatedWidth = 0;
             stickyLeftcolumn.forEach((colId, index) => {
                 const isLastColumn = index === stickyLeftcolumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
                 if (header) {
                     header.classList.add('sticky');
                     (header as HTMLElement).style.left = `${accumulatedWidth}px`;
                     if (!isLastColumn) {
                         header.classList.add('with-border');
                         header.classList.remove('sticky-shadow');
@@ -109,14 +109,14 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.remove('with-border');
                         header.classList.add('sticky-shadow');
                     }
                     accumulatedWidth += (header as HTMLElement).offsetWidth;
                 }
                 cells.forEach((cell) => {
                     cell.classList.add('sticky');
                     (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
                     if (!isLastColumn) {
                         cell.classList.add('with-border');
                         cell.classList.remove('sticky-shadow');

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb CHANGED Viewed

@@ -25,16 +25,16 @@
       <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
-      <td>Value 6</td>
-      <td>Value 7</td>
-      <td>Value 8</td>
-      <td>Value 9</td>
-      <td>Value 10</td>
-      <td>Value 11</td>
-      <td>Value 12</td>
-      <td>Value 13</td>
-      <td>Value 14</td>
-      <td>Value 15</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
     </tr>
     <tr>
@@ -43,16 +43,16 @@
       <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
-      <td>Value 6</td>
-      <td>Value 7</td>
-      <td>Value 8</td>
-      <td>Value 9</td>
-      <td>Value 10</td>
-      <td>Value 11</td>
-      <td>Value 12</td>
-      <td>Value 13</td>
-      <td>Value 14</td>
-      <td>Value 15</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
     </tr>
     <tr>
@@ -61,16 +61,34 @@
       <td id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
-      <td>Value 6</td>
-      <td>Value 7</td>
-      <td>Value 8</td>
-      <td>Value 9</td>
-      <td>Value 10</td>
-      <td>Value 11</td>
-      <td>Value 12</td>
-      <td>Value 13</td>
-      <td>Value 14</td>
-      <td>Value 15</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+    </tr>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
     </tr>
   </tbody>

data/app/pb_kits/playbook/pb_table/docs/example.yml CHANGED Viewed

@@ -4,7 +4,6 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
-    - table_sticky_left_columns: Sticky Left Column
     - table_header: Table Header
     - table_alignment_row_rails: Row Alignment
     - table_alignment_column_rails: Cell Alignment
@@ -34,7 +33,6 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
-    - table_sticky_left_columns: Sticky Left Column
     - table_alignment_row: Row Alignment
     - table_alignment_column: Cell Alignment
     - table_alignment_shift_row: Row Shift

data/app/pb_kits/playbook/pb_table/index.ts CHANGED Viewed

@@ -51,11 +51,9 @@ export default class PbTable extends PbEnhancedElement {
               .split('-');
           if (this.stickyLeftColumns.length > 0) {
-            setTimeout(() => {
-              this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
-              this.handleStickyColumns();
-              window.addEventListener('resize', this.handleStickyColumnsRef);
-            }, 10);
+            this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
+            this.handleStickyColumns();
+            window.addEventListener('resize', this.handleStickyColumnsRef);
           }
         }
       });

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss CHANGED Viewed

@@ -1,29 +1,4 @@
-@import "../../tokens/screen_sizes";
-.table-responsive-scroll {
-    display: block;
-    overflow-x: scroll;
-    // Responsive Styles
-    @media (max-width: 1600px) {
-        &[class*="table-responsive-scroll"] {
-            border-radius: 4px;
-            box-shadow: 1px 0 0 0px $border_light
-          }
-        &[class^=pb_table].table-sm.table-card thead tr th:last-child,
-        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
-            border-right-width: 0px;
-        }
-        &[class^=pb_table].table-md.table-card thead tr th:last-child,
-        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:last-child {
-            border-right-width: 0px;
-        }
-        &[class^=pb_table].table-lg.table-card thead tr th:last-child,
-        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:last-child {
-            border-right-width: 0px;
-        }
+    .table-responsive-scroll {
+        display: block;
+        overflow-x: auto;
     }
-}

data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss CHANGED Viewed

@@ -3,6 +3,7 @@
 [class^="pb_table"] {
     .sticky {
         position: sticky !important;
+        left: 0;
         z-index: 1;
         background-color: white;
     }

data/app/pb_kits/playbook/pb_table/table.html.erb CHANGED Viewed

@@ -1,10 +1,4 @@
-<% if object.responsive_classname %>
-  <% responsive_class = object.responsive_classname %>
-<% else %>
-  <% responsive_class = nil %>
-<% end %>
-<%= content_tag(:div, class: responsive_class) do %>
+<%= content_tag(:div) do %>
   <% if object.tag == "table" %>
     <%= content_tag(:table,
       aria: object.aria,

data/app/pb_kits/playbook/pb_table/table.rb CHANGED Viewed

@@ -45,10 +45,6 @@ module Playbook
         )
       end
-      def responsive_classname
-        responsive ? "table-responsive-#{responsive}" : nil
-      end
     private
       def dark_class

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx CHANGED Viewed

@@ -123,13 +123,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   const childInput = children ? children.type === "input" : undefined
-  let formattedValue;
-  if (isMaskedInput) {
-    formattedValue = INPUTMASKS[mask].format(value.toString())
-  } else {
-    formattedValue = value
-  }
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
@@ -145,7 +138,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         ref={ref}
         required={required}
         type={type}
-        value={formattedValue}
+        value={value}
      />)
   )

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss CHANGED Viewed

@@ -90,7 +90,50 @@
       }
     }
   }
+  &[class*=dark] {
+    .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
+      color: $text_dk_light;
+    }
+    [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
+      display: inherit !important;
+    }
+    .typeahead-kit-select__menu {
+      background-color: $bg_dark;
+      color: $white;
+      z-index: $z_1;
+    }
+    .typeahead-kit-select__option:hover {
+      background-color: $active_dark;
+    }
+    .typeahead-kit-select__indicator:hover {
+      color: $white;
+    }
+    .typeahead-kit-select__input {
+      color: white;
+      input:focus {
+        box-shadow: none;
+      }
+    }
+    .typeahead-kit-select__single-value {
+      color: white;
+    }
+    .typeahead-kit-select__option--is-focused {
+      background-color: $active_dark;
+    }
+    [class^=pb_list_kit] {
+      background-color: $bg_dark;
+    }
+    .pb_item_kit {
+      button {
+        color: white !important;
+      }
+      @media (hover:hover) {
+        &:hover {
+          background-color: rgba($white,.1);
+        }
+      }
+    }
+  }
   &.react-select, &.react-select .dark {
     .text_input {
       display: inherit;
@@ -139,7 +182,7 @@
       }
     }
   }
   .typeahead-kit-select__menu {
     z-index: $z_1;
     .typeahead-kit-select__menu-list {
@@ -172,117 +215,5 @@
       }
     }
   }
-  &[class*=dark] {
-    .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
-      color: $text_dk_light;
-    }
-    .pb_text_input_kit_label {
-      color: $text_dk_light;
-    }
-    [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
-      display: inherit !important;
-    }
-    .typeahead-kit-select__menu {
-      background-color: $bg_dark;
-      color: $white;
-      z-index: $z_1;
-      .typeahead-kit-select__menu-list {
-        padding: 0;
-      }
-      .typeahead-kit-select__single-value {
-        color: white;
-      }
-      .typeahead-kit-select__option {
-        &.typeahead-kit-select__option--is-focused {
-          background-color: $hover_dark;
-        }
-        &.typeahead-kit-select__option--is-selected {
-          background-color: $active_dark;
-        }
-      }
-    }
-    .text_input_wrapper{
-      color: text_dk_default;
-    }
-    .typeahead-kit-select__option:hover {
-      background-color: $active_dark;
-    }
-    .typeahead-kit-select__indicator {
-      color: $text_dk_default;
-    }
-    .typeahead-kit-select__indicator:hover {
-      color: $text_dk_lighter;
-    }
-    .typeahead-kit-select__input {
-      color: white;
-      input:focus {
-        box-shadow: none;
-      }
-    }
-    .typeahead-kit-select__option--is-focused {
-      background-color: $active_dark;
-    }
-    [class^=pb_list_kit] {
-      background-color: $bg_dark;
-    }
-    .pb_item_kit {
-      button {
-        color: white !important;
-      }
-      @media (hover:hover) {
-        &:hover {
-          background-color: $hover_dark;
-        }
-      }
-    }
-    .text_input {
-      .typeahead-kit-select__input-container{
-        color: $text_dk_default
-      }
-      .typeahead-kit-select {
-        &__single-value{
-          color: $text_dk_default;
-        }
-      }
-      &.typeahead-kit-select {
-        &__single-value{
-          color: $text_dk_default;
-        }
-        &__control {
-          &--is-focused {
-            @include pb_textarea_focus;
-            @include transition_default;
-            border-color: $active_dark;
-            background-color: rgba($focus_input_dark,$opacity_5);
-            box-shadow: none;
-            .typeahead-plus-icon {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-    &.inline {
-      &:not(:hover) {
-        .text_input {
-          background-color: transparent;
-          border-color: transparent;
-        }
-        .typeahead-kit-select__indicator {
-          color: transparent;
-        }
-      }
-      &:hover {
-        .text_input {
-          background-color: $hover_dark;
-        }
-      }
-    }
-  }
 }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx CHANGED Viewed

@@ -55,18 +55,11 @@ const TypeaheadWithHighlight = (props) => {
               marginRight="sm"
               name={name}
               size="sm"
-              {...props}
           />
         </FlexItem>
         <FlexItem>
-          <Title
-              size={4}
-              {...props}
-          >
-            <span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
-          <Body color="light"
-              {...props}
-          >
+          <Title size={4}><span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
+          <Body color="light">
             <span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
             {territory}
           </Body>