RubyGems - playbook_ui - Versions diffs - 6.1.0.pre.alpha2 → 6.2.0 - Mend

playbook_ui 6.1.0.pre.alpha2 → 6.2.0

Files changed (150) hide show

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx CHANGED

@@ -7,19 +7,20 @@ import type { InputCallback } from '../types.js'
 import { globalProps } from '../utilities/globalProps.js'
 type TextareaProps = {
-  className?: String,
-  children?: Array<React.ReactChild>,
-  data?: String,
-  error?: String,
-  id?: String,
-  object?: String,
-  method?: String,
-  label?: String,
-  placeholder?: String,
-  value?: String,
-  name?: String,
-  rows?: Number,
-  dark?: Boolean,
+  className?: string,
+  children?: array<React.ReactChild>,
+  data?: string,
+  disabled?: boolean,
+  error?: string,
+  id?: string,
+  object?: string,
+  method?: string,
+  label?: string,
+  placeholder?: string,
+  value?: string,
+  name?: string,
+  required?: boolean,
+  rows?: number,
   resize: 'none' | 'both' | 'horizontal' | 'vertical',
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
@@ -27,25 +28,25 @@ type TextareaProps = {
 const Textarea = ({
   className,
   children,
-  dark = false,
+  disabled,
   resize = 'none',
   error,
   label,
   name,
   onChange = () => {},
   placeholder,
+  required,
   rows = 4,
   value,
   ...props
 }: TextareaProps) => {
-  const textareaClass = `pb_textarea_kit${dark ? '_dark' : ''}`
   const errorClass = error ? 'error' : null
-  const resizeClass = ` resize_${resize}`
+  const resizeClass = `resize_${resize}`
+  const classes = classnames('pb_textarea_kit', className, errorClass, resizeClass, globalProps(props))
   return (
-    <div className={classnames(textareaClass, className, errorClass, resizeClass, globalProps(props))}>
+    <div className={classes}>
       <Caption
-          dark={dark}
           text={label}
       />
       <If condition={children}>
@@ -53,16 +54,17 @@ const Textarea = ({
         <Else />
         <textarea
             {...props}
-            className={textareaClass}
+            className="pb_textarea_kit"
+            disabled={disabled}
             name={name}
             onChange={onChange}
             placeholder={placeholder}
+            required={required}
             rows={rows}
             value={value}
         />
         <If condition={error}>
           <Body
-              dark={dark}
               status="negative"
               text={error}
           />

data/app/pb_kits/playbook/pb_textarea/_textarea.scss CHANGED

@@ -40,9 +40,7 @@
     overflow: auto;
   }
-  &[class*=_dark] {
+  &.dark {
     textarea::placeholder {
       @include pb_body_light_dark;
     }

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark.jsx CHANGED

@@ -27,7 +27,6 @@ const TextareaDark = () => {
           placeholder="Placeholder text"
           value="Default value text"
       />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark_error.jsx CHANGED

@@ -12,7 +12,6 @@ const TextareaDarkError = () => {
           placeholder="Placeholder text"
           value="Default value text"
       />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_textarea/textarea.rb CHANGED

@@ -7,8 +7,6 @@ module Playbook
       partial "pb_textarea/textarea"
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :error
       prop :object
       prop :label
@@ -23,15 +21,11 @@ module Playbook
       prop :value
       def classname
-        generate_classname("pb_textarea_kit", dark_class) + error_class + resize_class
+        generate_classname("pb_textarea_kit") + error_class + resize_class
       end
     private
-      def dark_class
-        dark ? "dark" : nil
-      end
       def error_class
         error ? " error" : ""
       end

data/app/pb_kits/playbook/pb_time/_time.jsx CHANGED

@@ -11,11 +11,11 @@ import { Body, Icon, Title  } from '../'
 type TimeProps = {
   align?: 'left" | "center' | 'right',
-  className?: String | Array<String>,
-  data?: String,
-  date: String,
-  id?: String,
-  showTimezone?: Boolean,
+  className?: string | array<string>,
+  data?: string,
+  date: string,
+  id?: string,
+  showTimezone?: boolean,
   size?: 'lg' | 'sm' | 'xs',
 }

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx CHANGED

@@ -7,16 +7,16 @@ import DateTime from '../pb_kit/dateTime.js'
 import { globalProps } from '../utilities/globalProps.js'
 type TimeRangeInlineProps = {
-  className?: String,
-  id?: String,
-  data?: String,
+  className?: string,
+  id?: string,
+  data?: string,
   alignment?: "left" | "center" | "vertical",
   size?: "sm" | "xs",
-  dark?: Boolean,
-  icon?: Boolean,
-  timezone?: Boolean,
-  startTime: String,
-  endTime: String,
+  dark?: boolean,
+  icon?: boolean,
+  timezone?: boolean,
+  startTime: string,
+  endTime: string,
 }
 const timezoneString = (dateValue) => {

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx CHANGED

@@ -14,11 +14,11 @@ const Components = {
 }
 type TimeStackedProps = {
-  className?: String | Array<String>,
-  dark?: Boolean,
-  data?: String,
-  date: String,
-  id?: String,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  date: string,
+  id?: string,
   align?: "left" | "center" | "right",
   tag?: "body" | "caption",
 }

data/app/pb_kits/playbook/pb_timeline/_item.jsx CHANGED

@@ -7,8 +7,8 @@ import { DateStacked, IconCircle } from '..'
 type ItemProps = {
   className?: string,
-  children?: Array<React.Node>,
-  date?: Date,
+  children?: array<React.Node>,
+  date?: date,
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',

data/app/pb_kits/playbook/pb_timeline/_timeline.jsx CHANGED

@@ -7,12 +7,12 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 type TimelineProps = {
   aria?: object,
-  children?: Array<React.ReactChild>,
-  className?: String,
-  data?: String,
-  id?: String,
-  orientation?: String,
-  showDate?: Boolean,
+  children?: array<React.ReactChild>,
+  className?: string,
+  data?: string,
+  id?: string,
+  orientation?: string,
+  showDate?: boolean,
 }
 const Timeline = ({

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx CHANGED

@@ -10,10 +10,10 @@ import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 type TimestampProps = {
-  id?: String,
+  id?: string,
   data?: object,
-  className?: String,
-  text?: String,
+  className?: string,
+  text?: string,
 }
 const Timestamp = (props: TimestampProps) => {

data/app/pb_kits/playbook/pb_title/_title.jsx CHANGED

@@ -7,13 +7,13 @@ import { globalProps } from '../utilities/globalProps.js'
 type TitleProps = {
   aria?: object,
-  children?: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  children?: array<React.ReactNode> | React.ReactNode,
+  className?: string,
   data?: object,
-  id?: String,
+  id?: string,
   size?: 1 | 2 | 3 | 4,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
-  text?: String,
+  text?: string,
   variant?: null | "primary",
 }

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx CHANGED

@@ -11,11 +11,11 @@ import { globalProps } from '../utilities/globalProps.js'
 type TitleCountProps = {
   align: "center" | "left" | "right",
   aria?: object,
-  className?: String,
+  className?: string,
   count?: Numeric,
   data?: object,
-  id?: String,
-  title?: String,
+  id?: string,
+  title?: string,
   size?: "lg" | "sm",
 };

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_dark.html.erb ADDED

@@ -0,0 +1,19 @@
+<%= pb_rails("title_detail", props: {
+  dark: true,
+  title: "Email Notifications",
+  detail: "Commits data and history"
+}) %>
+<%= pb_rails("title_detail", props: {
+  dark: true,
+  title: "Email Notifications",
+  detail: "Commits data and history",
+  align: "center"
+}) %>
+<%= pb_rails("title_detail", props: {
+  dark: true,
+  title: "Email Notifications",
+  detail: "Commits data and history",
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_dark.jsx ADDED

@@ -0,0 +1,29 @@
+import React from 'react'
+import { TitleDetail } from '../../'
+const TitleDetailDark = () => (
+  <div>
+    <TitleDetail
+        dark
+        detail="Commits data and history"
+        title="Email Notifications"
+    />
+    <TitleDetail
+        align="center"
+        dark
+        detail="Commits data and history"
+        title="Email Notifications"
+    />
+    <TitleDetail
+        align="right"
+        dark
+        detail="Commits data and history"
+        title="Email Notifications"
+    />
+  </div>
+)
+export default TitleDetailDark

data/app/pb_kits/playbook/pb_toggle/_toggle.jsx CHANGED

@@ -14,15 +14,15 @@ import { globalProps } from '../utilities/globalProps.js'
 type Props = {
   aria?: object,
-  checked?: Boolean,
+  checked?: boolean,
   children?: React.Node,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  name?: String,
+  id?: string,
+  name?: string,
   onChange?: InputCallback<HTMLInputElement>,
   size?: "sm" | "md",
-  value?: String,
+  value?: string,
 }
 const Toggle = ({

data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb CHANGED

@@ -11,10 +11,9 @@
       label: object.label,
       name: object.name,
       value: object.value,
-      placeholder: object.placeholder,
-      dark: object.dark
+      placeholder: object.placeholder
     }) %>
-    <%= pb_rails("list", props: { ordered: false, dark: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
+    <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
     <% end %>
   </div>

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

@@ -79,7 +79,7 @@
     }
   }
-  &[class*=_dark] {
+  .dark {
     .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
       color: $text_dk_light;
     }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb CHANGED

@@ -16,7 +16,6 @@
 <br><br><br>
 <%= javascript_tag defer: "defer" do %>
   document.addEventListener("pb-typeahead-kit-search", function(event) {
     if (!event.target.dataset.typeaheadExample2) return;

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb CHANGED

@@ -11,13 +11,11 @@ module Playbook
       prop :placeholder
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       partial "pb_typeahead/typeahead"
       def classname
-        generate_classname("pb_typeahead_kit", dark_class)
+        generate_classname("pb_typeahead_kit")
       end
       def data
@@ -27,12 +25,6 @@ module Playbook
           pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
         )
       end
-    private
-      def dark_class
-        dark ? "dark" : nil
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_user/_user.jsx CHANGED

@@ -6,16 +6,16 @@ import { Avatar, Body, Title } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 type UserProps = {
-  className?: String,
-  id?: String,
-  name: String,
-  territory?: String,
-  title?: String,
+  className?: string,
+  id?: string,
+  name: string,
+  territory?: string,
+  title?: string,
   size?: "sm" | "md" | "lg",
   align?: "left" | "center" | "right",
   orientation?: "horiztonal" | "vertical",
-  avatar?: Boolean,
-  avatarUrl?: String,
+  avatar?: boolean,
+  avatarUrl?: string,
 }
 const User = (props: UserProps) => {

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx CHANGED

@@ -4,8 +4,8 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 type UserBadgeProps = {
-  className?: String,
-  id?: String,
+  className?: string,
+  id?: string,
   badge?: "million-dollar" | "veteran",
   size?: "sm" | "md" | "lg",
 }