RubyGems - playbook_ui - Versions diffs - 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2010 - Mend

playbook_ui 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2010

Files changed (99) hide show

data/app/pb_kits/playbook/pb_source/_source.tsx CHANGED Viewed

@@ -32,7 +32,7 @@ const Source = ({
   source,
   type = 'inbound',
   user = {},
-}: SourceProps) => {
+}: SourceProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const ariaProps = buildAriaProps(aria)
@@ -72,11 +72,11 @@ const Source = ({
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={css}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={css}
+        id={id}
     >
       <div className="pb__source_layout">
@@ -84,13 +84,13 @@ const Source = ({
           <>
             {showIcon() &&
               <IconCircle
-                icon={typeIconNames[type]}
-                size="sm"
+                  icon={typeIconNames[type]}
+                  size="sm"
               />
             }
             {!showIcon() &&
               <Avatar
-                {...avatar()}
+                  {...avatar()}
               />
             }
           </>
@@ -98,20 +98,20 @@ const Source = ({
         <div className="pb__source_content">
           <Title
-            size={4}
-            tag="h4"
-            text={source}
+              size={4}
+              tag="h4"
+              text={source}
           />
           <div className="pb__source_value">
             <Body
-              color="light"
-              text={typeText()}
+                color="light"
+                text={typeText()}
             />
             {user.userId &&
               <Caption
-                text={user.userId}
+                  text={user.userId}
               />
             }
           </div>

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 type TableProps = {
@@ -9,19 +9,19 @@ type TableProps = {
   children: React.ReactNode[] | React.ReactNode,
   className: string,
   collapse?: "sm" | "md" | "lg",
-  container: boolean,
+  container?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
   dataTable: boolean,
-  disableHover: boolean,
+  disableHover?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  responsive: "collapse" | "scroll" | "none",
-  singleLine: boolean,
-  size: "sm" | "md" | "lg",
+  responsive?: "collapse" | "scroll" | "none",
+  singleLine?: boolean,
+  size?: "sm" | "md" | "lg",
   sticky?: boolean,
   verticalBorder?: boolean,
-}
+} & GlobalProps
 const Table = (props: TableProps) => {
   const {
@@ -56,29 +56,29 @@ const Table = (props: TableProps) => {
   return (
     <table
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(
-        'pb_table',
-        `table-${size}`,
-        `table-responsive-${responsive}`,
-        {
-          'table-card': container,
-          'table-dark': dark,
-          'data_table': dataTable,
-          'single-line': singleLine,
-          'no-hover': disableHover,
-          'sticky-header': sticky,
-        },
-        globalProps(props),
-        tableCollapseCss,
-        verticalBorderCss,
-        className
-      )}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(
+          'pb_table',
+          `table-${size}`,
+          `table-responsive-${responsive}`,
+          {
+            'table-card': container,
+            'table-dark': dark,
+            'data_table': dataTable,
+            'single-line': singleLine,
+            'no-hover': disableHover,
+            'sticky-header': sticky,
+          },
+          globalProps(props),
+          tableCollapseCss,
+          verticalBorderCss,
+          className
+        )}
+        id={id}
     >
-      {children}
+        {children}
     </table>
   )
 }

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

@@ -3,6 +3,7 @@
 @import "../tokens/colors";
 [class^="pb_text_input_kit"] {
+  margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;

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

@@ -70,15 +70,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   const shouldShowAddOn = icon !== null
   const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : ""
   const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : ""
-  const defaultMarginBottom = props.marginBottom ?? "mb_sm"
   const css = classnames([
     'pb_text_input_kit',
     inline ? 'inline' : "",
     error ? 'error' : "",
     globalProps(props),
     className,
-    defaultMarginBottom
   ])
   const addOnIcon = (
     <Icon
@@ -147,7 +144,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label &&
+      {label &&
         <Caption
             className="pb_text_input_kit_label"
             text={label}

data/app/pb_kits/playbook/pb_text_input/text_input.rb CHANGED Viewed

@@ -25,12 +25,8 @@ module Playbook
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
-      def default_margin_bottom
-        object.margin_bottom.present? ? "" : " mb_sm"
-      end
       def classname
-        generate_classname("pb_text_input_kit") + error_class + inline_class + default_margin_bottom
+        generate_classname("pb_text_input_kit") + error_class + inline_class
       end
       def input_tag

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

@@ -148,7 +148,7 @@
     .placeholder {
       position: absolute;
       margin-right: 2px;
-      margin-left: 2px;
+      margin-left: 10px;
       top: 50%;
       transform: translateY(-50%);
       box-sizing: border-box;

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

@@ -73,8 +73,10 @@ const TypeaheadWithHighlight = (props) => {
     Option: (highlightProps: OptionProps) => (
       <components.Option {...highlightProps}/>
     ),
-    SingleValue: ({ data }: any) => (
-      <span>{data.name}</span>
+    SingleValue: ({ ...props }) => (
+      <components.SingleValue {...props}>
+        <span>{props.data.name}</span>
+      </components.SingleValue>
     )
   }

data/app/pb_kits/playbook/playbook-doc.js CHANGED Viewed

@@ -4,6 +4,7 @@ import WebpackerReact from 'webpacker-react'
 // KIT EXAMPLES
 import 'pb_form/pb_form_validation'
+import * as AdvancedTable from 'pb_advanced_table/docs'
 import * as Avatar from 'pb_avatar/docs'
 import * as AvatarActionButton from 'pb_avatar_action_button/docs'
 import * as Background from 'pb_background/docs'
@@ -105,6 +106,7 @@ import * as Walkthrough from 'pb_walkthrough/docs'
 import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 WebpackerReact.registerComponents({
+  ...AdvancedTable,
   ...Avatar,
   ...AvatarActionButton,
   ...Background,

data/app/pb_kits/playbook/utilities/globalProps.ts CHANGED Viewed

@@ -17,7 +17,7 @@ type AlignContent = {
 }
 type AlignItems = {
-  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
+  alignItems?: Alignment | ("flexStart" | "flexEnd" | "stretch" | "baseline")
 }
 type AlignSelf = {

data/dist/menu.yml CHANGED Viewed

@@ -43,6 +43,9 @@ kits:
       - name: "table"
         platforms: *web
         description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data.
+      - name: "advanced_table"
+        platforms: *react_only
+        description:
       - name: "list"
         platforms: *web
         description: Lists display a vertical set of related content.
@@ -354,4 +357,4 @@ kits:
         description: Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.
       - name: "user"
         platforms: *web
-        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
+        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.