playbook_ui 16.6.0.pre.alpha.emptystatepresets15848 → 16.6.0.pre.alpha.play294216115

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f403796e53bc3b998e1c127a73fec5be5d4ecdff23f011d4bdf66777e5d8549f
-  data.tar.gz: 27bc94414daabd7e53b42d503e86aaedfbc3edff2332d8a17506d3c8823bd0bd
+  metadata.gz: f4decbfeb1e045070d591f56daf85d3ef2794bf2855d33e889f00fb2dc694be7
+  data.tar.gz: 04b363904b41e8d0b30e2752af2c1e07d6cf6ca38ca5ae0f3576b515fcaa8c23
 SHA512:
-  metadata.gz: 1e215435bd8d6420d587f0db1043b603f272ef79020bee8e3f0abf597daac8473b6d0a9481dfb901a7bb364a56109f975b40f557436d6decba7652db5006b8e4
-  data.tar.gz: 50a69d0bc34bf5fbb44ee650b4158fe1e4dd8b51b84a51243ef7b3a2c428e82ccf0943a399dc2a6b5c50c20480260b4c4b5b79c1bf18a9624fc47e1809eaec64
+  metadata.gz: 42918e61a6d599a6b5033053eaad2a5d09139d2d977d85f766f0fbd5c65f0e05608bef3c57fa787ce7efd3e847d785ba198472bd532e436ffbc2d7c161ad3314
+  data.tar.gz: 13bc1c4045f5d400052204a4a495d345aeb2b814de5ba3d8c87e510327e18ecaa80d18d99b307d75a9d3e8a7c2cf9c2e0b2466ea7a30c41f9d282aad0766275f

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.jsx

@@ -9,7 +9,21 @@ import ListItem from "../../pb_list/_list_item"
 import PbReactPopover from "../../pb_popover/_popover"
 import SectionSeparator from "../../pb_section_separator/_section_separator"
 import StarRating from "../../pb_star_rating/_star_rating"
-import COMPOSITION_MOCK_DATA from "./advanced_table_grouped_headers_composition_mock_data.json"
+
+const COMPOSITION_MOCK_DATA = [
+  { id: "1", year: "2015", newEnrollments: "12", scheduledMeetings: "40", attendanceRate: "62%", classCompletionRate: "28%" },
+  { id: "2", year: "2016", newEnrollments: "88", scheduledMeetings: "12", attendanceRate: "71%", classCompletionRate: "55%" },
+  { id: "3", year: "2017", newEnrollments: "34", scheduledMeetings: "67", attendanceRate: "58%", classCompletionRate: "41%" },
+  { id: "4", year: "2018", newEnrollments: "05", scheduledMeetings: "91", attendanceRate: "44%", classCompletionRate: "73%" },
+  { id: "5", year: "2019", newEnrollments: "61", scheduledMeetings: "19", attendanceRate: "83%", classCompletionRate: "36%" },
+  { id: "6", year: "2020", newEnrollments: "19", scheduledMeetings: "54", attendanceRate: "67%", classCompletionRate: "62%" },
+  { id: "7", year: "2021", newEnrollments: "73", scheduledMeetings: "08", attendanceRate: "52%", classCompletionRate: "49%" },
+  { id: "8", year: "2022", newEnrollments: "50", scheduledMeetings: "50", attendanceRate: "75%", classCompletionRate: "45%" },
+  { id: "9", year: "2023", newEnrollments: "95", scheduledMeetings: "03", attendanceRate: "69%", classCompletionRate: "81%" },
+  { id: "10", year: "2024", newEnrollments: "27", scheduledMeetings: "76", attendanceRate: "91%", classCompletionRate: "22%" },
+  { id: "11", year: "2025", newEnrollments: "41", scheduledMeetings: "33", attendanceRate: "48%", classCompletionRate: "94%" },
+  { id: "12", year: "2026", newEnrollments: "66", scheduledMeetings: "66", attendanceRate: "55%", classCompletionRate: "58%" },
+]
 
 const LEAF_COUNT = "newEnrollments"
 const LEAF_SCHEDULED = "scheduledMeetings"

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
+import INFINITE_SCROLL_MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
 
 const AdvancedTableInfiniteScroll = (props) => {
   const columnDefinitions = [
@@ -39,7 +39,7 @@ const AdvancedTableInfiniteScroll = (props) => {
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
+          tableData={INFINITE_SCROLL_MOCK_DATA}
           virtualizedRows
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx

@@ -1,8 +1,8 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import Caption from '../../pb_caption/_caption'
-import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
-import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
+import MOCK_DATA_INLINE_LOADING from "./advanced_table_mock_data_inline_loading.json"
+import MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN from "./advanced_table_mock_data_inline_loading_empty_children.json"
 
 const AdvancedTableInlineRowLoading = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import AdvancedTable from '../_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
 
 const AdvancedTableRowPinning = (props) => {
   const columnDefinitions = [
@@ -43,7 +43,7 @@ const AdvancedTableRowPinning = (props) => {
           columnDefinitions={columnDefinitions}
           maxHeight="xs"
           pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
-          tableData={MOCK_DATA}
+          tableData={MOCK_DATA_WITH_ID}
           tableProps={{sticky: true}}
           {...props}
       >

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_inline_loading_empty_children.json

@@ -0,0 +1,41 @@
+[
+  {
+    "year": "2021",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "20",
+    "scheduledMeetings": "10",
+    "attendanceRate": "51%",
+    "completedClasses": "3",
+    "classCompletionRate": "33%",
+    "graduatedStudents": "19",
+    "children": []
+  },
+  {
+    "year": "2022",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "25",
+    "scheduledMeetings": "17",
+    "attendanceRate": "75%",
+    "completedClasses": "5",
+    "classCompletionRate": "45%",
+    "graduatedStudents": "32",
+    "children": []
+  },
+  {
+    "year": "2023",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "10",
+    "scheduledMeetings": "15",
+    "attendanceRate": "65%",
+    "completedClasses": "4",
+    "classCompletionRate": "49%",
+    "graduatedStudents": "29",
+    "children": []
+  }
+]

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -4,7 +4,7 @@ import Icon from "../../pb_icon/_icon"
 import Title from "../../pb_title/_title"
 import BreadCrumbItem from '../_bread_crumb_item'
 
-const Link = (props) => <BreadCrumbItem {...props} />
+const LinkSection = (props) => <BreadCrumbItem {...props} />
 const BreadCrumbsDefault = (props) => {
   return (
     <BreadCrumbs
@@ -35,7 +35,7 @@ const BreadCrumbsDefault = (props) => {
           size="1x"
           {...props}
       />
-      <Link
+      <LinkSection
           {...props}
           href="/users"
       >
@@ -46,20 +46,20 @@ const BreadCrumbsDefault = (props) => {
             text="Users"
             {...props}
         />
-      </Link>
+      </LinkSection>
       <Icon
           icon="user"
           size="1x"
           {...props}
       />
-      <Link {...props}>
+      <LinkSection {...props}>
         <Title
             size="4"
             tag="span"
             text="User"
             {...props}
         />
-      </Link>
+      </LinkSection>
     </BreadCrumbs>
   )
 }

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -11,6 +11,13 @@ $pb_button_sizes: (
   "lg":   ($font_large - 2px),
 );
 
+// Icon-only: fixed square hit targets (not derived from font padding).
+$pb_button_icon_only_dimensions: (
+  "sm": 35px,
+  "md": 40px,
+  "lg": 45px,
+);
+
 // Base button class
 .pb_button_kit {
   @include pb_button;
@@ -113,32 +120,26 @@ $pb_button_sizes: (
     }
   }
 
-  // Icon-only button (icon prop set, no text) - square with equal padding
-  // Rails: uses .pb_button_icon_only class
-  // React: when pb_button_content is empty (no text). Do not match when content has
-  // text + icon (e.g. "Exit Fullscreen" + FA icon) which can include empty spans.
+  // Icon-only button (icon prop set, no text) — fixed squares; icon scales via font-size from size prop.
+  // Rails: .pb_button_icon_only; React: class or :has(...) when label is empty.
+  // Rails uses a truly empty .pb_button_content; React wraps text in a child span (may be empty).
   &.pb_button_icon_only,
   &:has(.pb_button_content:empty) {
     aspect-ratio: 1;
-    min-width: auto;
-    width: auto;
-    height: auto;
-    padding: $pb_button_v_padding !important;
-    min-height: ($pb_button_v_padding * 2) + $font_small;
-    
-    &.pb_button_size_sm {
-      padding: $font_smaller !important;
-      min-height: ($font_smaller * 2) + $font_smaller;
-    }
-    
-    &.pb_button_size_md {
-      padding: $font_small !important;
-      min-height: ($font_small * 2) + $font_small;
-    }
-    
-    &.pb_button_size_lg {
-      padding: ($font_large - 2px) !important;
-      min-height: (($font_large - 2px) * 2) + ($font_large - 2px);
+    box-sizing: border-box;
+    $pb_button_icon_only_default: map-get($pb_button_icon_only_dimensions, "md");
+    width: $pb_button_icon_only_default;
+    min-width: $pb_button_icon_only_default;
+    height: $pb_button_icon_only_default;
+    min-height: $pb_button_icon_only_default;
+    padding: 0 !important;
+    @each $name, $dim in $pb_button_icon_only_dimensions {
+      &.pb_button_size_#{$name} {
+        width: $dim;
+        min-width: $dim;
+        height: $dim;
+        min-height: $dim;
+      }
     }
 
     // Remove margins from icons

data/app/pb_kits/playbook/pb_button/button.rb

@@ -73,8 +73,10 @@ module Playbook
         emoji_regex.match?(icon)
       end
 
+      # Icon-only = icon with no label. Label may come from `text` or from a block (e.g. CopyButton);
+      # block content must not be treated as icon-only when `text` is unset.
       def icon_only?
-        icon.present? && text.blank? && variant != "reaction"
+        icon.present? && text.blank? && children.blank? && variant != "reaction"
       end
 
       def classname

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -310,4 +310,34 @@ describe('DatePicker Kit', () => {
     expect(label).toBeInTheDocument()
     expect(kit).not.toHaveTextContent("*")
   })
+
+  test('Last month quickpick includes the correct last day of previous month', async () => {
+    const testId = 'datepicker-last-month'
+    render(
+      <DatePicker
+          allowInput
+          data={{ testid: testId }}
+          mode="range"
+          pickerId="date-picker-last-month"
+          placeholder="mm/dd/yyyy to mm/dd/yyyy"
+          selectionType="quickpick"
+      />
+    )
+  
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('mm/dd/yyyy to mm/dd/yyyy')
+  
+    fireEvent(input, new MouseEvent('click', { bubbles: true, cancelable: true }))
+  
+    const lastMonth = within(kit).getByText('Last month')
+    fireEvent(lastMonth, new MouseEvent('click', { bubbles: true, cancelable: true }))
+  
+    await waitFor(() => {
+      expect(input).toHaveValue(
+        DateTime.getPreviousMonthStartDate(new Date()).formatDate() +
+        " to " +
+        DateTime.getPreviousMonthEndDate(new Date()).formatDate()
+      )
+    })
+  })
 })

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

@@ -16,7 +16,12 @@ export default class PbDialog extends PbEnhancedElement {
     this.domContentLoadedHandler = () => this.setupDialog()
     this.turboFrameLoadHandler = () => this.setupDialog()
     
-    window.addEventListener("DOMContentLoaded", this.domContentLoadedHandler)
+    // If DOM is already loaded, setup immediately; otherwise wait for DOMContentLoaded
+    if (document.readyState === "loading") {
+      window.addEventListener("DOMContentLoaded", this.domContentLoadedHandler)
+    } else {
+      this.setupDialog()
+    }
     window.addEventListener("turbo:frame-load", this.turboFrameLoadHandler)
 
     // Code for custom_event_type setup (can take multiple events in a string separated by commas)

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

@@ -22,7 +22,12 @@ export default class PbDraggable extends PbEnhancedElement {
     this.dragZoneType  = "";
     this.dragZoneColor = "";
 
-    document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
+    // If DOM is already loaded, bind immediately; otherwise wait for DOMContentLoaded
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
+    } else {
+      this.bindEventListeners();
+    }
   }
 
   setState(newState) {

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react"
-import { render, screen, fireEvent } from "../utilities/test-utils"
+import { render, screen, fireEvent, waitFor } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
-
+import DateTime from "../pb_kit/dateTime.ts"
 
 const testId = 'dropdown'
 
@@ -778,3 +778,52 @@ test("requiredIndicator prop renders asterisk when true", () => {
   expect(label).toBeInTheDocument();
   expect(kit).toHaveTextContent("*");
 });
+
+describe("quickpick Last Month range when current month is shorter than the previous month", () => {
+  const quickpickTestId = "dropdown-quickpick-last-month-march"
+
+  const formatDate = (date) => {
+    const month = (date.getMonth() + 1).toString().padStart(2, "0")
+    const day = date.getDate().toString().padStart(2, "0")
+    const year = date.getFullYear()
+    return `${month}/${day}/${year}`
+  }
+
+  beforeEach(() => {
+    jest.setSystemTime(new Date(2026, 3, 15, 12, 0, 0))
+  })
+
+  afterEach(() => {
+    jest.setSystemTime()
+  })
+
+  test("selecting Last Month matches DateTime previous-month range (full March when today is in April)", async () => {
+    const onSelect = jest.fn()
+    const now = new Date()
+
+    render(
+      <Dropdown
+          data={{ testid: quickpickTestId }}
+          onSelect={onSelect}
+          variant="quickpick"
+      />
+    )
+
+    const kit = screen.getByTestId(quickpickTestId)
+    const lastMonthOption = Array.from(kit.querySelectorAll(".pb_dropdown_option_list")).find(
+      (el) => el.textContent === "Last Month"
+    )
+
+    expect(lastMonthOption).toBeTruthy()
+    fireEvent.click(lastMonthOption)
+
+    await waitFor(() => {
+      expect(onSelect).toHaveBeenCalled()
+    })
+
+    const [startDate, endDate] = onSelect.mock.calls[0][0].value
+
+    expect(formatDate(startDate)).toBe(formatDate(DateTime.getPreviousMonthStartDate(now)))
+    expect(formatDate(endDate)).toBe(formatDate(DateTime.getPreviousMonthEndDate(now)))
+  })
+})

data/app/pb_kits/playbook/pb_empty_state/_empty_state.tsx

@@ -12,8 +12,6 @@ import Flex from "../pb_flex/_flex"
 import FlexItem from "../pb_flex/_flex_item"
 import Image from "../pb_image/_image"
 import computer from "./docs/default_image/utils"
-import thisIsFineImageUrl from "./docs/default_image/this_is_fine.svg?url"
-import travoltaLostImageUrl from "./docs/default_image/travolta_lost.gif?url"
 
 type EventHandler = (React.MouseEventHandler<HTMLElement>)
 
@@ -25,7 +23,6 @@ type EmptyStateProps = {
   description?: string,
   header?: string,
   id?: string,
-  /** Built-in illustrations: `default`, `this_is_fine`, `travolta_lost`, or a custom image URL */
   image?: string,
   linkButton?: string,
   onLinkButtonClick?: EventHandler,
@@ -137,22 +134,6 @@ const EmptyState = (props: EmptyStateProps) => {
       return `data:image/svg+xml,${encodedSvg}`
     }
 
-    const resolvePresetImage = (): { alt: string, url: string } | null => {
-      if (!image) return null
-      if (image === "default") {
-        return { alt: "Empty state illustration", url: getSvgAsDataUrl() }
-      }
-      if (image === "this_is_fine") {
-        return { alt: "This is fine illustration", url: thisIsFineImageUrl }
-      }
-      if (image === "travolta_lost") {
-        return { alt: "Confused reaction illustration", url: travoltaLostImageUrl }
-      }
-      return { alt: "Empty state image", url: image }
-    }
-
-    const presetImage = resolvePresetImage()
-
     const layout = (
       <div {...ariaProps}
           {...dataProps}
@@ -167,11 +148,17 @@ const EmptyState = (props: EmptyStateProps) => {
             vertical="center"
         >
 
-          { presetImage ? (
+          { image && image === 'default' ? (
+            <Image
+                alt="test"
+                htmlOptions={{ width: configs.imageWidth, height: "auto", alignment: "start" }}
+                url={getSvgAsDataUrl()}
+            />
+          ) : image && image ? (
             <Image
-                alt={presetImage.alt}
+                alt="test"
                 htmlOptions={{ width: configs.imageWidth, height: "auto", alignment: "start" }}
-                url={presetImage.url}
+                url={image}
             />
           ) : null}
 

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

@@ -1,14 +1,12 @@
 examples:
   rails:
   - empty_state_default: Default
-  - empty_state_presets: Illustration presets
   - empty_state_size: Size
   - empty_state_orientation: Orientation
   - empty_state_alignment: Alignment
 
   react:
   - empty_state_default: Default
-  - empty_state_presets: Illustration presets
   - empty_state_size: Size
   - empty_state_orientation: Orientation
   - empty_state_alignment: Alignment

data/app/pb_kits/playbook/pb_empty_state/docs/index.js

@@ -1,5 +1,4 @@
 export { default as EmptyStateDefault } from './_empty_state_default.jsx'
-export { default as EmptyStatePresets } from './_empty_state_presets.jsx'
 export { default as EmptyStateOrientation } from './_empty_state_orientation.jsx'
 export { default as EmptyStateSize } from './_empty_state_size.jsx'
 export { default as EmptyStateAlignment } from './_empty_state_alignment.jsx'

data/app/pb_kits/playbook/pb_empty_state/empty_state.html.erb

@@ -1,8 +1,6 @@
 <%= pb_content_tag do %>
   <%= pb_rails("flex", props: { align: flex_align, orientation: config[:flex_direction], padding_left: padding_size, padding_right: padding_size, vertical: "center", classname: config[:scss_class], max_width: "100%" }) do %>
-    <% if resolved_image_url.present? %>
-      <%= pb_rails("image", props: { url: resolved_image_url, alt: image_alt_text, html_options: { width: config[:image_width], height: "auto", alignment: "start" } }) %>
-    <% end %>
+    <%= pb_rails("image", props: { url: image == "default" ? default_image_data_uri : image, alt: "Empty State Image", html_options: { width: config[:image_width], height: "auto", alignment: "start" } }) %>
     <%= pb_rails("flex/flex_item") do %>
       <%= pb_rails("title", props: { text: object.header, size: config[:title_size], padding_bottom: config[:title_padding], text_align: alignment }) %>
       <% if size == "sm" %>

data/app/pb_kits/playbook/pb_empty_state/empty_state.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require "base64"
-
 module Playbook
   module PbEmptyState
     class EmptyState < Playbook::KitBase
@@ -106,47 +104,6 @@ module Playbook
         "data:image/svg+xml,#{encoded}"
       end
 
-      def resolved_image_url
-        case image
-        when "default"
-          default_image_data_uri
-        when "this_is_fine"
-          svg_preset_data_uri("this_is_fine.svg")
-        when "travolta_lost"
-          gif_preset_data_uri("travolta_lost.gif")
-        when nil, ""
-          nil
-        else
-          image
-        end
-      end
-
-      def image_alt_text
-        case image
-        when "this_is_fine"
-          "This is fine illustration"
-        when "travolta_lost"
-          "Confused reaction illustration"
-        when "default"
-          "Empty state illustration"
-        else
-          "Empty state image"
-        end
-      end
-
-      def svg_preset_data_uri(filename)
-        path = File.join(__dir__, "docs", "default_image", filename)
-        svg = File.read(path)
-        "data:image/svg+xml,#{ERB::Util.url_encode(svg)}"
-      end
-
-      def gif_preset_data_uri(filename)
-        path = File.join(__dir__, "docs", "default_image", filename)
-        binary = File.binread(path)
-        b64 = Base64.strict_encode64(binary)
-        "data:image/gif;base64,#{b64}"
-      end
-
       def padding_size
         size == "sm" ? "xs" : "xl"
       end

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -25,6 +25,136 @@ $icon_colors: map-merge($merge_kits8, $accessible_status_icon_background_colors)
   }
 }
 
+.pb_playbook_icon {
+  display: inline-block;
+  line-height: 1;
+
+  &::before {
+    width: 1em;
+    height: 1em;
+  }
+
+  &.svg_inverse::before {
+    background: #fff;
+  }
+
+  &.svg_border {
+    border-color: #eee;
+    border-radius: .1em;
+    border-style: solid;
+    border-width: .08em;
+    padding: .2em .25em .15em;
+  }
+
+  &.svg_fw {
+    text-align: center;
+    width: 1.25em;
+  }
+
+  &.pull_left {
+    float: left;
+    margin-right: .3em;
+  }
+
+  &.pull_right {
+    float: right;
+    margin-left: .3em;
+  }
+
+  &.svg_xs {
+    font-size: 0.75em;
+  }
+
+  &.svg_sm {
+    font-size: 0.875em;
+  }
+
+  &.svg_lg {
+    font-size: 1.25em;
+  }
+
+  &.svg_1x {
+    font-size: 1em;
+  }
+
+  &.svg_2x {
+    font-size: 2em;
+  }
+
+  &.svg_3x {
+    font-size: 3em;
+  }
+
+  &.svg_4x {
+    font-size: 4em;
+  }
+
+  &.svg_5x {
+    font-size: 5em;
+  }
+
+  &.svg_6x {
+    font-size: 6em;
+  }
+
+  &.svg_7x {
+    font-size: 7em;
+  }
+
+  &.svg_8x {
+    font-size: 8em;
+  }
+
+  &.svg_9x {
+    font-size: 9em;
+  }
+
+  &.svg_10x {
+    font-size: 10em;
+  }
+
+  &.rotate_90 {
+    transform: rotate(90deg);
+  }
+
+  &.rotate_180 {
+    transform: rotate(180deg);
+  }
+
+  &.rotate_270 {
+    transform: rotate(270deg);
+  }
+
+  &.flip_horizontal {
+    transform: scaleX(-1);
+  }
+
+  &.flip_vertical {
+    transform: scaleY(-1);
+  }
+
+  &.flip_horizontal.flip_vertical {
+    transform: scaleX(-1) scaleY(-1);
+  }
+
+  &.pulse {
+    animation-name: pb_icon_spin;
+    animation-direction: normal;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: steps(8);
+  }
+
+  &.spin {
+    animation-name: pb_icon_spin;
+    animation-delay: 0s;
+    animation-direction: normal;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  }
+}
+
 // Rails custom icon styles
 svg.pb_custom_icon {
   width: 1em;