playbook_ui 14.3.0.pre.alpha.revert3654PBNTR479removeextraspacingfromradiochildren3734 → 14.3.0.pre.rc.0

data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss

@@ -3,20 +3,18 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 
-
-// Tiptap mixins section (React Advanced Editor)
-@mixin preview_tiptap_first_child {
+@mixin preview_first_child {
     :first-child {
         margin-top: 0;
     }
 }
 
-@mixin preview_tiptap_p {
+@mixin preview_p {
     margin: 1rem 0 0 0;
     min-height: 1rem;
 }
 
-@mixin preview_tiptap_code {
+@mixin preview_code {
     font-family: monospace;
     background: $bg_light;
     padding: 0.1rem 0.3rem;
@@ -25,7 +23,7 @@
     overflow: hidden;
 }
 
-@mixin preview_tiptap_pre_codeblock {
+@mixin preview_pre_codeblock {
     display: inline-block;
     width: 100%;
     vertical-align: top;
@@ -46,7 +44,7 @@
     }
 }
 
-@mixin preview_tiptap_a {
+@mixin preview_a {
     color: $primary;
     border-bottom: 1px solid $primary;
     &:hover {
@@ -55,7 +53,7 @@
     }
 }
 
-@mixin preview_tiptap_blockquote {
+@mixin preview_blockquote {
     font-size: $font_larger;
     padding: $space_sm $space_md;
     font-style: italic;
@@ -65,7 +63,7 @@
     }
 }
 
-@mixin preview_tiptap_h1 {
+@mixin preview_h1 {
     font-size: $text_largest;
     line-height: $text_larger;
     font-weight: $bolder;
@@ -73,7 +71,7 @@
     margin: 2.1rem 0 0 0;
 }
 
-@mixin preview_tiptap_h2 {
+@mixin preview_h2 {
     font-size: $text_larger;
     line-height: $text_larger;
     font-weight: $bolder;
@@ -81,7 +79,7 @@
     margin: 1.9rem 0 0 0;
 }
 
-@mixin preview_tiptap_h3 {
+@mixin preview_h3 {
     font-size: $text_large;
     line-height: $text_large;
     font-weight: $bolder;
@@ -89,7 +87,7 @@
     margin: 1.7rem 0 0 0;
 }
 
-@mixin preview_tiptap_smaller_headings {
+@mixin preview_smaller_headings {
     font-size: $text_base;
     line-height: $text_base;
     letter-spacing: $lspace_tight;
@@ -97,7 +95,7 @@
     margin: 1rem 0 0 0;
 }
 
-@mixin preview_tiptap_hr {
+@mixin preview_hr {
     margin: 2.2rem 0;
     box-sizing: content-box;
     overflow: hidden;
@@ -109,7 +107,7 @@
     border: 0; 
 }
 
-@mixin preview_tiptap_ol {
+@mixin preview_ol {
     margin: 1rem 0 0 0;
     padding-left: $space_md;
     list-style: decimal;
@@ -121,7 +119,7 @@
     }
 }
 
-@mixin preview_tiptap_ul {
+@mixin preview_ul {
     list-style-position: disc;
     margin: 1rem 0 0 0;
     padding-left: $space_md;
@@ -132,37 +130,3 @@
       }
     }
 }
-
-// Trix mixins section (Rails and React default editor)
-@mixin preview_trix_div {
-    line-height: 1.4;
-}
-
-@mixin preview_trix_h1 {
-    font-size: 2em;
-    line-height: 1.4; 
-}
-@mixin preview_trix_blockquote {
-    border: 0 solid #ccc;
-    border-left-width: 0.3em;
-    margin-left: 0.3em;
-    padding-left: 0.6em; 
-    line-height: 1.4;
-}
-
-@mixin preview_trix_li {
-    line-height: 1.4;
-    margin-left: $space_sm;
-}
-
-@mixin preview_trix_pre {
-    display: inline-block;
-    width: 100%;
-    vertical-align: top;
-    font-family: monospace;
-    font-size: 0.9em;
-    padding: 0.5em;
-    white-space: pre;
-    background-color: #eee;
-    overflow-x: auto; 
-}

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -10,6 +10,18 @@
 @import "./trix_styles";
 @import "./tiptap_styles";
 
+.trix-content pre {
+  display: inline-block;
+  width: 100%;
+  vertical-align: top;
+  font-family: monospace;
+  font-size: 0.9em;
+  padding: 0.5em;
+  white-space: pre;
+  background-color: #ccc !important;
+  color: black !important;
+  overflow-x: auto;
+}
 [class^=pb_rich_text_editor_kit] {
   // Disables File Attatchment Button in Toolbar
   trix-toolbar [data-trix-button-group="file-tools"] {
@@ -94,7 +106,7 @@
     .trix-button--icon {
       height: $space_lg;
       width: $space_lg;
-      margin: $space_xs / 2;
+      margin: calc($space_xs / 2);
       border-radius: $border_rad_heavier;
       &::before {
         background-size: auto;
@@ -104,7 +116,7 @@
       background: $white;
       border: 1px solid #E4E8F0;
       border-bottom: none;
-      padding: $space_xs / 2;
+      padding: calc($space_xs / 2);
       border-top-left-radius: $border_rad_heavier;
       border-top-right-radius: $border_rad_heavier;
       .trix-button-group {

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -86,44 +86,44 @@
     }
 
     code {
-      @include preview_tiptap_code;
+      @include preview_code;
     }
 
     pre {
-      @include preview_tiptap_pre_codeblock;
+      @include preview_pre_codeblock;
     }
     a {
-      @include preview_tiptap_a;
+      @include preview_a;
     }
     blockquote {
-      @include preview_tiptap_blockquote;
+      @include preview_blockquote;
     }
     &:focus-visible {
       outline: unset;
       @include transition_default;
     }
     h1 {
-      @include preview_tiptap_h1;
+      @include preview_h1;
     }
     h2 {
-      @include preview_tiptap_h2;
+      @include preview_h2;
     }
     h3 {
-      @include preview_tiptap_h3;
+      @include preview_h3;
     }
     h4,
     h5,
     h6 {
-      @include preview_tiptap_smaller_headings;
+      @include preview_smaller_headings;
     }
     hr {
-      @include preview_tiptap_hr;
+      @include preview_hr;
     }
     ol {
-      @include preview_tiptap_ol;
+      @include preview_ol;
     }
     ul {
-      @include preview_tiptap_ul;
+      @include preview_ul;
     }
   }
 }
@@ -170,40 +170,40 @@
   }
 }
 .tiptap-content {
-  @include preview_tiptap_first_child;
+  @include preview_first_child;
   a {
-    @include preview_tiptap_a;
+    @include preview_a;
   }
   blockquote {
-    @include preview_tiptap_blockquote;
+    @include preview_blockquote;
   }
   h1 {
-    @include preview_tiptap_h1;
+    @include preview_h1;
   }
   h2 {
-    @include preview_tiptap_h2;
+    @include preview_h2;
   }
   h3 {
-    @include preview_tiptap_h3;
+    @include preview_h3;
   }
   h4,
   h5,
   h6 {
-    @include preview_tiptap_smaller_headings;
+    @include preview_smaller_headings;
   }
   hr {
-    @include preview_tiptap_hr;
+    @include preview_hr;
   }
   ol {
-    @include preview_tiptap_ol;
+    @include preview_ol;
   }
   p {
-    @include preview_tiptap_p;
+    @include preview_p;
   }
   pre {
-    @include preview_tiptap_pre_codeblock;
+    @include preview_pre_codeblock;
   }
   ul {
-    @include preview_tiptap_ul;
+    @include preview_ul;
   }
 }

data/app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss

@@ -1,5 +1,3 @@
-@import "previewer_mixin";
-
 @charset "UTF-8";
 /*
 Trix 1.3.0
@@ -299,31 +297,41 @@ trix-editor .attachment__metadata {
   trix-editor .attachment__metadata .attachment__size {
     margin-left: 0.2em;
     white-space: nowrap; }
-  trix-editor blockquote {
-    @include preview_trix_blockquote; }
-  trix-editor [dir=rtl] blockquote,
-  trix-editor blockquote[dir=rtl] {
-    @include preview_trix_blockquote }
 @charset "UTF-8";
-.trix-content * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0; }
-  .trix-content#content-preview div {
-    @include preview_trix_div; }
+.trix-content {
+  line-height: 1.5; }
+  .trix-content * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0; }
   .trix-content h1 {
-    @include preview_trix_h1; }
+    font-size: 1.2em;
+    line-height: 1.2; }
   .trix-content blockquote {
-    @include preview_trix_blockquote; }
+    border: 0 solid #ccc;
+    border-left-width: 0.3em;
+    margin-left: 0.3em;
+    padding-left: 0.6em; }
   .trix-content [dir=rtl] blockquote,
   .trix-content blockquote[dir=rtl] {
-    @include preview_trix_blockquote; }
+    border-width: 0;
+    border-right-width: 0.3em;
+    margin-right: 0.3em;
+    padding-right: 0.6em; }
   .trix-content li {
-    @include preview_trix_li; }
+    margin-left: 1em; }
   .trix-content [dir=rtl] li {
-    @include preview_trix_li; }
+    margin-right: 1em; }
   .trix-content pre {
-    @include preview_trix_pre; }
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+    font-family: monospace;
+    font-size: 0.9em;
+    padding: 0.5em;
+    white-space: pre;
+    background-color: #eee;
+    overflow-x: auto; }
   .trix-content img {
     max-width: 100%;
     height: auto; }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -1,7 +1,7 @@
 
 <%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
 <div id="card-obfuscation" style="display:none">
-  <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
+  <%= pb_rails("card", props: { margin_top: "md" }) do %>
    <div id="content-preview" class="trix-content">
    </div>
   <% end %>
@@ -11,25 +11,15 @@
 <% end %>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
-    function handleButtonClick() {
-      const editorContainer = [...document.querySelectorAll('[data-react-props]')]
-        .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
+  // Button event handler
+  const button = document.getElementById('preview-button');
+  button.addEventListener('click', function() {
+    const content = document.getElementById('content-preview-editor');
+    const previewArea = document.getElementById('content-preview');
+    const cardDiv = document.getElementById('card-obfuscation');
 
-      const editorElement = editorContainer?.querySelector('trix-editor')
-      const inputId = editorElement?.getAttribute('input')
-      const inputElement = inputId && document.getElementById(inputId)
-      
-      const editorContent = inputElement?.value || '' 
-      const previewArea = document.getElementById('content-preview')
-      const cardDiv = document.getElementById('card-obfuscation')
-
-      if (previewArea && cardDiv) {
-        previewArea.innerHTML = editorContent 
-        cardDiv.style.display = 'block'
-      }
-    }
-
-    document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
-  })
+    previewArea.innerHTML = content.value;
+    cardDiv.classList.add('mt_md');
+    cardDiv.style.display = 'block';
+  });
 </script>

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -81,7 +81,7 @@
     display: block;
     &.error {
       [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
+        margin-top: calc($space_xs / 2);
       }
       > select:first-child {
         border-color: $error;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -43,7 +43,7 @@ $pb_selectable_card_border: 2px;
       align-items: center;
       height: $pb_selectable_card_indicator_size;
       width: $pb_selectable_card_indicator_size;
-      border-radius: $pb_selectable_card_indicator_size/2 + $pb_selectable_card_border/2;
+      border-radius: calc($pb_selectable_card_indicator_size/2) + calc($pb_selectable_card_border/2);
       border-width: $pb_selectable_card_border;
       border-style: solid;
       border-color: $white;
@@ -52,8 +52,8 @@ $pb_selectable_card_border: 2px;
       font-size: $font_smaller;
       text-align: center;
       position: absolute;
-      top: -($pb_selectable_card_indicator_size/2);
-      right: -($pb_selectable_card_indicator_size/2);
+      top: -(calc($pb_selectable_card_indicator_size/2));
+      right: -(calc($pb_selectable_card_indicator_size/2));
       opacity: 0;
     }
   }

data/app/pb_kits/playbook/pb_star_rating/docs/example.yml

@@ -7,7 +7,6 @@ examples:
     - star_rating_number_config: Number Config
     - star_rating_size_options: Size Options
     - star_rating_interactive: Interactive
-    - star_rating_default_value: Default Value
 
   react:
     - star_rating_default: Default

data/app/pb_kits/playbook/pb_star_rating/index.js

@@ -12,7 +12,6 @@ export default class PbStarRating extends PbEnhancedElement {
   connect() {
     this.addEventListeners()
     this.handleFormReset()
-    this.setDefaultValue()
   }
 
   addEventListeners() {
@@ -129,7 +128,7 @@ export default class PbStarRating extends PbEnhancedElement {
     const form = this.element.closest("form")
     if (form) {
       form.addEventListener("reset", () => {
-        this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)?.setAttribute("value","")
+        this.updateHiddenInputValue("")
         this.resetStarRatingValues()
       })
     }
@@ -154,13 +153,4 @@ export default class PbStarRating extends PbEnhancedElement {
       }
     }
   }
-
-  setDefaultValue() {
-    const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
-    const defaultValue = hiddenInput.value
-
-    if (defaultValue) {
-      this.updateStarColors(defaultValue)
-    }
-  }
 }

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -34,7 +34,6 @@ module Playbook
                       default: false
       prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
-      prop :default_value
 
       def one_decimal_rating
         rating.to_f.round(1)
@@ -121,8 +120,7 @@ module Playbook
           data: { "pb-star-rating-input": true },
           name: name,
           required: required,
-          style: "display: none",
-          value: default_value || ""
+          style: "display: none"
         )
       end
     end

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

@@ -101,7 +101,7 @@
   &.error {
     .text_input_wrapper {
       [class*="pb_body_kit"] {
-        margin-top: $space_xs / 2;
+        margin-top: calc($space_xs / 2);
       }
       input,
       .text_input {

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

@@ -60,7 +60,7 @@
 
   &.error {
     [class*=pb_body_kit] {
-      margin-top: $space_xs / 2;
+      margin-top: calc($space_xs / 2);
     }
     textarea {
       border-color: $error;

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -22,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: $space_xs/2;
-      margin-right: $space_xs/2;
+      margin-left: calc($space_xs/2);
+      margin-right: calc($space_xs/2);
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: calc($space_xs/2);
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: calc($space_xs/2);
     }
   }
 }

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -4,9 +4,9 @@
 @import "../tokens/typography";
 
 $connector_width: 2px;
-$icon_margin: $space_xs/2;
+$icon_margin: calc($space_xs/2);
 $icon_height: 28px;
-$height_from_top: $icon_height/2 - $connector_width/2;
+$height_from_top: calc($icon_height/2) - calc($connector_width/2);
 
 @mixin pb_timeline_line_solid($width, $height, $margin) {
     width: $width;

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

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

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -27,18 +27,6 @@ module Playbook
                      values: %w[default elapsed updated],
                      default: "default"
 
-      # Variables to use with pb_time_ago method
-      SECS_FORTY_FIVE = 45
-      SECS_PER_MIN  = 60
-      SECS_PER_HOUR = 60 * SECS_PER_MIN # 3,600 seconds
-      SECS_PER_DAY  = 24 * SECS_PER_HOUR # 86,400 seconds
-      SECS_PER_WEEK = 7 * SECS_PER_DAY # 604,800 seconds
-      SECS_PER_26 = 26 * SECS_PER_DAY # 26 days = 2,246,400 seconds
-      SECS_PER_MONTH = 4 * SECS_PER_WEEK # 2,419,200 seconds
-      SECS_PER_YEAR = 12 * SECS_PER_MONTH # 29,030,400 seconds
-      SECS_PER_320 = 320 * SECS_PER_DAY # 320 days = 27,648,000 seconds
-      SECS_PER_CENT = 100 * SECS_PER_YEAR # 3,153,600,000 seconds
-
       def classname
         generate_classname("pb_timestamp_kit", variant_class, align)
       end
@@ -85,42 +73,10 @@ module Playbook
 
       def format_elapsed_string
         user_string = show_user ? " by #{text}" : ""
-        datetime_string = " #{pb_time_ago(pb_date_time.convert_to_timestamp)} ago"
-        datetime_string[1] = hide_updated ? datetime_string[1].upcase : datetime_string[1]
+        datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
         updated_string = hide_updated ? "" : "Last updated"
-        "#{updated_string}#{user_string}#{datetime_string}"
-      end
 
-      def pb_time_ago(value)
-        time_ago = DateTime.now.to_i - value.to_i
-        case time_ago
-        when (0...SECS_FORTY_FIVE)
-          "a few seconds"
-        when (SECS_FORTY_FIVE...SECS_PER_MIN)
-          "a minute"
-        when (SECS_PER_MIN...SECS_PER_HOUR)
-          time = time_ago / SECS_PER_MIN
-          time == 1 ? "a minute" : "#{time_ago / SECS_PER_MIN} minutes"
-        when (SECS_PER_HOUR...SECS_PER_DAY)
-          time = time_ago / SECS_PER_HOUR
-          time == 1 ? "an hour" : "#{time_ago / SECS_PER_HOUR} hours"
-        when (SECS_PER_DAY...SECS_PER_WEEK)
-          time = time_ago / SECS_PER_DAY
-          time == 1 ? "a day" : "#{time_ago / SECS_PER_DAY} days"
-        when (SECS_PER_WEEK...SECS_PER_26)
-          time = time_ago / SECS_PER_WEEK
-          time == 1 ? "a week" : "#{time_ago / SECS_PER_WEEK} weeks"
-        when (SECS_PER_26...SECS_PER_MONTH)
-          "a month"
-        when (SECS_PER_MONTH...SECS_PER_320)
-          time = time_ago / SECS_PER_MONTH
-          time == 1 ? "a month" : "#{time_ago / SECS_PER_MONTH} months"
-        when (SECS_PER_320...SECS_PER_YEAR)
-          "a year"
-        when (SECS_PER_YEAR...SECS_PER_CENT)
-          time = time_ago / SECS_PER_YEAR
-          time == 1 ? "a year" : "#{time_ago / SECS_PER_YEAR} years"
-        end
+        "#{updated_string}#{user_string}#{datetime_string}"
       end
 
       def datetime_or_text

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -8,7 +8,7 @@ $transition: .2s ease-in-out;
 [class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
-  $height: $width / 2;
+  $height: calc($width / 2);
   $border_success: 3px solid $color_checkbox_success;
   $border_default: 3px solid $color_checkbox_default;
 
@@ -27,7 +27,7 @@ $transition: .2s ease-in-out;
       &:after {
         transition: $transition;
         content: "";
-        width: $width / 2 - 4px;
+        width: calc($width / 2) - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -68,7 +68,7 @@ $transition: .2s ease-in-out;
         background-color: $color_checkbox_success;
 
         &:after {
-          left: $width / 2 + 2px;
+          left: calc($width / 2) + 2px;
           background-color: $white;
         }
       }