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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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>