RubyGems - playbook_ui - Versions diffs - 15.1.0.pre.alpha.typeaheadscss11143 → 15.1.0.pre.rc.0 - Mend

playbook_ui 15.1.0.pre.alpha.typeaheadscss11143 → 15.1.0.pre.rc.0

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 (207) hide show

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

@@ -140,14 +140,10 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     formattedValue = value
   }
-  const errorId = error ? `${id}-error` : undefined
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
         {...domSafeProps(props)}
-        aria-describedby={errorId}
-        aria-invalid={!!error}
         autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
         className="text_input"
         disabled={disabled}
@@ -206,20 +202,16 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label && (
-        <label htmlFor={id}>
-          <Caption className="pb_text_input_kit_label"
-              text={label}
-          />
-        </label>
-      )}
+      {label &&
+        <Caption
+            className="pb_text_input_kit_label"
+            text={label}
+        />
+      }
       <div className={`${addOnCss} text_input_wrapper`}>
         {render}
         {error && <Body
-            aria={{ atomic: "true", live: "polite" }}
-            htmlOptions={{ role: "alert" }}
-            id={errorId}
             status="negative"
             text={error}
             variant={null}

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

@@ -9,27 +9,23 @@
 <%= pb_rails("text_input", props: {
   label: "Last Name",
-  placeholder: "Enter last name",
-  id: "last-name"
+  placeholder: "Enter last name"
 }) %>
 <%= pb_rails("text_input", props: {
     label: "Phone Number",
     type: "phone",
-    placeholder: "Enter phone number",
-    id: "phone"
+    placeholder: "Enter phone number"
 }) %>
 <%= pb_rails("text_input", props: {
     label: "Email Address",
     type: "email",
-    placeholder: "Enter email address",
-    id: "email"
+    placeholder: "Enter email address"
 }) %>
 <%= pb_rails("text_input", props: {
     label: "Zip Code",
     type: "number",
-    placeholder: "Enter zip code",
-    id: "zip"
+    placeholder: "Enter zip code"
 }) %>

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

@@ -38,7 +38,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="last-name"
           label="Last Name"
           name="lastName"
           onChange={handleOnChangeFormField}
@@ -47,7 +46,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="phone"
           label="Phone Number"
           name="phone"
           onChange={handleOnChangeFormField}
@@ -57,7 +55,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="email"
           label="Email Address"
           name="email"
           onChange={handleOnChangeFormField}
@@ -67,7 +64,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="zip"
           label="Zip Code"
           name="zip"
           onChange={handleOnChangeFormField}
@@ -88,7 +84,6 @@ const TextInputDefault = (props) => {
       <br />
       <TextInput
-          id="first-name"
           label="First Name"
           onChange={handleOnChangeFirstName}
           placeholder="Enter first name"

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb CHANGED Viewed

@@ -1,8 +1,6 @@
 <%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
-  <label for="<%= object.input_options[:id] || object.id %>" >
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
-  </label>
   <% end %>
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
@@ -17,7 +15,7 @@
     <% else %>
       <%= input_tag %>
     <% end %>
-    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }}) if object.error %>
+    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>

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

@@ -64,16 +64,10 @@ module Playbook
         "#{object.id}-sanitized" if id.present?
       end
-      def error_id
-        "#{id}-error" if error.present?
-      end
     private
       def all_input_options
         {
-          'aria-describedby': error.present? ? error_id : nil,
-          'aria-invalid': error.present?,
           autocomplete: autocomplete == true ? nil : (autocomplete.presence || "off"),
           class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx CHANGED Viewed

@@ -18,11 +18,9 @@ type TimestampProps = {
   timezone: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  showCurrentYear?: boolean,
   showDate?: boolean,
   showUser?: boolean,
   hideUpdated?: boolean,
-  showTime?: boolean,
   showTimezone?: boolean,
   unstyled?: boolean,
   variant?: "default" | "elapsed" | "updated"
@@ -39,11 +37,9 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     text,
     timezone,
     timestamp,
-    showCurrentYear = false,
     showDate = true,
     showUser = false,
     hideUpdated = false,
-    showTime = true,
     showTimezone = false,
     unstyled = false,
     variant = 'default',
@@ -59,6 +55,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
   )
   const currentYear = new Date().getFullYear().toString()
+  const dateDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
   const shouldShowUser = showUser == true && text.length > 0
   const shouldShowTimezone = showTimezone == true && timezone.length > 0
   const updatedText = hideUpdated ? "" : "Last updated"
@@ -73,26 +70,16 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     return timeDisplay
   }
-  const baseDateDisplay = () => {
-  let display = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
-  if (DateTime.toYear(timestamp, timezone).toString() !== currentYear || showCurrentYear) {
-    display = `${display}, ${DateTime.toYear(timestamp, timezone)}`
-  }
-  return display
-}
   const fullDateDisplay = () => {
-    const fullDisplay = baseDateDisplay()
-    return showTime ? `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}` : fullDisplay
+    let fullDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
+    if (DateTime.toYear(timestamp, timezone).toString() !== currentYear) {
+      fullDisplay = `${fullDisplay}, ${DateTime.toYear(timestamp, timezone)}`
+    }
+    return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
   }
   const formatUpdatedString = () => {
-    const finalUpdatedString = []
-    if (shouldShowUser) finalUpdatedString.push(`by ${text}`)
-    if (showDate && !showTime) finalUpdatedString.push(`on ${baseDateDisplay()}`)
-    if (showDate && showTime) finalUpdatedString.push(`on ${baseDateDisplay()} at ${timeDisplay}`)
-    if (showTime && !showDate) finalUpdatedString.push(`at ${timeDisplay}`)
-    return `Last updated ${finalUpdatedString.join(' ')}`
+    return `Last updated ${userDisplay} on ${dateDisplay} at ${timeDisplay}`
   }
   const formatElapsedString = () => {
@@ -106,10 +93,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     case 'elapsed':
       return formatElapsedString()
     default:
-      if (showDate && showTime) return timestamp ? fullDateDisplay() : text
-      if (showDate && !showTime) return baseDateDisplay()
-      if (!showDate && showTime) return fullTimeDisplay()
-      return text
+      return showDate ? timestamp ? fullDateDisplay() : text : fullTimeDisplay()
     }
   }

data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Use these only to display status updates in areas that has a lot of data.

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb CHANGED Viewed

@@ -8,6 +8,7 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: true,
   align: "left"
 }) %>
@@ -15,6 +16,7 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
+  show_date: true,
   align: "left"
 }) %>
@@ -22,6 +24,7 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
+  show_date: true,
   align: "left"
 }) %>
@@ -37,6 +40,7 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: true,
   align: "center"
 }) %>
@@ -44,6 +48,7 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
+  show_date: true,
   align: "center"
 }) %>
@@ -51,6 +56,7 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
+  show_date: true,
   align: "center"
 }) %>
@@ -58,6 +64,7 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: false,
   align: "right"
 }) %>
@@ -65,6 +72,7 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: true,
   align: "right"
 }) %>
@@ -72,6 +80,7 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
+  show_date: true,
   align: "right"
 }) %>
@@ -79,5 +88,6 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
+  show_date: true,
   align: "right"
 }) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx CHANGED Viewed

@@ -25,6 +25,7 @@ const TimestampAlign = (props) => {
       <Timestamp
           align="left"
+          showDate
           timestamp={todaysDate}
           {...props}
       />
@@ -33,6 +34,7 @@ const TimestampAlign = (props) => {
       <Timestamp
           align="left"
+          showDate
           timestamp={futureDate}
           {...props}
       />
@@ -41,6 +43,7 @@ const TimestampAlign = (props) => {
       <Timestamp
           align="left"
+          showDate
           timestamp={pastDate}
           {...props}
       />
@@ -59,6 +62,7 @@ const TimestampAlign = (props) => {
       <Timestamp
           align="center"
+          showDate
           timestamp={todaysDate}
           {...props}
       />
@@ -67,6 +71,7 @@ const TimestampAlign = (props) => {
       <Timestamp
           align="center"
+          showDate
           timestamp={futureDate}
           {...props}
       />
@@ -75,6 +80,7 @@ const TimestampAlign = (props) => {
       <Timestamp
           align="center"
+          showDate
           timestamp={pastDate}
           {...props}
       />
@@ -93,6 +99,7 @@ const TimestampAlign = (props) => {
       <Timestamp
           align="right"
+          showDate
           timestamp={todaysDate}
           {...props}
       />
@@ -101,6 +108,7 @@ const TimestampAlign = (props) => {
       <Timestamp
           align="right"
+          showDate
           timestamp={futureDate}
           {...props}
       />
@@ -109,6 +117,7 @@ const TimestampAlign = (props) => {
       <Timestamp
           align="right"
+          showDate
           timestamp={pastDate}
           {...props}
       />

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb CHANGED Viewed

@@ -1,15 +1,29 @@
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now
+  timestamp: DateTime.now,
+  show_date: false,
+  align: "left"
 }) %>
 <br>
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now + 4.years
+  timestamp: DateTime.now,
+  show_date: true,
+  align: "left"
 }) %>
 <br>
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now - 1.year
+  timestamp: DateTime.now + 4.years,
+  show_date: true,
+  align: "left"
+}) %>
+<br>
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now - 1.year,
+  show_date: true,
+  align: "left"
 }) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx CHANGED Viewed

@@ -15,6 +15,8 @@ const TimestampDefault = (props) => {
   return (
     <div>
       <Timestamp
+          align="left"
+          showDate={false}
           timestamp={todaysDate}
           {...props}
       />
@@ -22,6 +24,17 @@ const TimestampDefault = (props) => {
       <br />
       <Timestamp
+          align="left"
+          showDate
+          timestamp={todaysDate}
+          {...props}
+      />
+      <br />
+      <Timestamp
+          align="left"
+          showDate
           timestamp={futureDate}
           {...props}
       />
@@ -29,6 +42,8 @@ const TimestampDefault = (props) => {
       <br />
       <Timestamp
+          align="left"
+          showDate
           timestamp={pastDate}
           {...props}
       />

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb CHANGED Viewed

@@ -10,6 +10,7 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 3.months,
   variant: "elapsed",
+  show_user: false
 }) %>
 <br>
@@ -17,5 +18,6 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 320.days,
   variant: "elapsed",
+  show_user: false,
   hide_updated: true
 }) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx CHANGED Viewed

@@ -23,6 +23,7 @@ const TimestampElapsed = (props) => {
       <br />
       <Timestamp
+          showUser={false}
           timestamp={customDate}
           variant="elapsed"
           {...props}
@@ -32,6 +33,7 @@ const TimestampElapsed = (props) => {
       <Timestamp
           hideUpdated
+          showUser={false}
           timestamp={customDate}
           variant="elapsed"
           {...props}

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb CHANGED Viewed

@@ -3,30 +3,37 @@
   show_date: false,
   show_timezone: true,
   timezone: "America/New_York",
+  align: "left"
 }) %>
 <br>
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: true,
   show_timezone: true,
   timezone: "America/New_York",
+  align: "left"
 }) %>
 <br>
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
+  show_date: true,
   show_timezone: true,
   timezone: "America/New_York",
+  align: "left"
 }) %>
 <br>
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
+  show_date: true,
   show_timezone: true,
   timezone: "America/New_York",
+  align: "left"
 }) %>
 <br>
@@ -36,30 +43,37 @@
   show_date: false,
   show_timezone: true,
   timezone: "Asia/Hong_Kong",
+  align: "left"
 }) %>
 <br>
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: true,
   show_timezone: true,
   timezone: "Asia/Hong_Kong",
+  align: "left"
 }) %>
 <br>
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
+  show_date: true,
   show_timezone: true,
   timezone: "Asia/Hong_Kong",
+  align: "left"
 }) %>
 <br>
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
+  show_date: true,
   show_timezone: true,
   timezone: "Asia/Hong_Kong",
+  align: "left"
 }) %>
 <br>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx CHANGED Viewed

@@ -15,6 +15,7 @@ const TimestampTimezones = (props) => {
   return (
     <div>
       <Timestamp
+          align="left"
           showDate={false}
           showTimezone
           timestamp={todaysDate}
@@ -25,6 +26,8 @@ const TimestampTimezones = (props) => {
       <br />
       <Timestamp
+          align="left"
+          showDate
           showTimezone
           timestamp={todaysDate}
           timezone="America/New_York"
@@ -34,6 +37,8 @@ const TimestampTimezones = (props) => {
       <br />
       <Timestamp
+          align="left"
+          showDate
           showTimezone
           timestamp={futureDate}
           timezone="America/New_York"
@@ -43,6 +48,8 @@ const TimestampTimezones = (props) => {
       <br />
       <Timestamp
+          align="left"
+          showDate
           showTimezone
           timestamp={pastDate}
           timezone="America/New_York"
@@ -52,6 +59,7 @@ const TimestampTimezones = (props) => {
       <br />
       <Timestamp
+          align="left"
           showDate={false}
           showTimezone
           timestamp={todaysDate}
@@ -62,6 +70,8 @@ const TimestampTimezones = (props) => {
       <br />
       <Timestamp
+          align="left"
+          showDate
           showTimezone
           timestamp={todaysDate}
           timezone="Asia/Hong_Kong"
@@ -71,6 +81,8 @@ const TimestampTimezones = (props) => {
       <br />
       <Timestamp
+          align="left"
+          showDate
           showTimezone
           timestamp={futureDate}
           timezone="Asia/Hong_Kong"
@@ -80,6 +92,8 @@ const TimestampTimezones = (props) => {
       <br />
       <Timestamp
+          align="left"
+          showDate
           showTimezone
           timestamp={pastDate}
           timezone="Asia/Hong_Kong"

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb CHANGED Viewed

@@ -2,6 +2,8 @@
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
+  show_date: true,
+  align: "left",
   unstyled: true,
 }) %>
@@ -12,6 +14,8 @@
 <%= pb_rails("title", props: { size: 1 }) do %>
   <%= pb_rails("timestamp", props: {
     timestamp: DateTime.now,
+    show_date: true,
+    align: "left",
     unstyled: true,
   }) %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx CHANGED Viewed

@@ -10,6 +10,8 @@ const TimestampUnstyled = (props) => {
           text="Basic unstyled example"
       />
       <Timestamp
+          align="left"
+          showDate
           timestamp={new Date()}
           unstyled
           {...props}
@@ -22,6 +24,8 @@ const TimestampUnstyled = (props) => {
       />
       <Title size={1}>
         <Timestamp
+            align="left"
+            showDate
             timestamp={new Date()}
             unstyled
             {...props}

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx CHANGED Viewed

@@ -17,6 +17,7 @@ const TimestampUpdated = (props) => {
       <br />
       <Timestamp
+          showUser={false}
           timestamp={todaysDate}
           variant="updated"
           {...props}