playbook_ui 14.1.0.pre.alpha.PBNTR455ganttchartPOC3569 → 14.1.0.pre.alpha.PBNTR462starratingdefaultvalue3579

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -3,9 +3,10 @@
 @import "../tokens/opacity";
 @import "../tokens/shadows";
 @import "../pb_avatar/avatar";
+@import "../tokens/typography";
 
 $selector: ".pb_form_pill";
-$pb_form_pill_height: 37px;
+$pb_form_pill_height: 27px;
 $form_pill_colors: (
   primary: map-get($status_color_text, "primary"),
   neutral: map-get($status_color_text, "neutral"),
@@ -16,18 +17,24 @@ $form_pill_colors: (
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 calc($space-sm/3);
+  padding: 0 calc($space-md/2);
   height: $pb_form_pill_height;
   border-radius: calc($pb_form_pill_height/2);
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
+  .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
+    font-size: $font_small !important;
+  }
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
       background-color: mix($color_value, $card_light, 10%);
       @if ($color_name == "neutral") {
         background-color: $white;
         border: 1px solid $border_light;
+        .pb_form_pill_icon {
+          color: $text_lt_default;
+        }
       }
       transition: background-color 0.2s ease;
       box-shadow: none;
@@ -51,20 +58,18 @@ $form_pill_colors: (
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
-        padding-left: $space-sm;
-        padding-right: calc($space-sm/2);
+        padding: 0 $space-xs;
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: calc($space-sm/4);
-        padding-right: calc($space-sm/4);
         display: flex;
         align-items: center;
-        // I had to temporarily change height to 27px so new hover state darker background forms a circle not an oval
-        // before size change (ticket 2 of 4) - change back to 100% when $pb_form_pill_height changed to 27px from 37px
-        height: 27px;
-        border-radius: 70px;
+        height: 17px;
+        border-radius: calc(50%);
         cursor: pointer;
+        @if ($color_name == "neutral") {
+          color: $text_lt_default;
+        }
         &:hover {
           background-color: mix($color_value, $card_light, 40%);
           @if ($color_name == "neutral") {
@@ -74,7 +79,7 @@ $form_pill_colors: (
       }
       #{$selector}_tag {
         color: $color_value;
-        padding-left: $space-sm;
+        padding: 0 $space-xs;
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
@@ -92,24 +97,37 @@ $form_pill_colors: (
   .pb_form_pill_icon {
     height: 12px !important;
     width: 12px !important;
+    padding-right: $space_xs;
+    + .pb_form_pill_text, + .pb_form_pill_tag {
+      padding-left: 0;
+    }
   }
   &.small {
-    height: fit-content;
-    height: -moz-fit-content;
+    height: 17px;
+    padding: 0 $space-xs;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
-      font-size: $font_base;
-      font-weight: $regular;
+      font-size: $font_smallest !important;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
       line-height: 1.7;
-      padding-left: $space_xs;
-      padding-right: 2px;
+      padding: 0 $space_xxs;
+    }
+    .pb_form_pill_close {
+      height: 10px;
+      border-radius: calc(50%);
     }
-    [class^=pb_avatar_kit], [class^=pb_avatar_kit] .avatar_wrapper {
-      width: 20px;
-      height: 20px;
-      flex-basis: 20px;
-      &::before { line-height: 21px; }
+    [class^=pb_avatar_kit] .avatar_wrapper {
+      flex-basis: 16px;
+      height: 16px;
+      margin-top: 2px;
+      width: 16px;
+      &::before { line-height: 16.5px; }
+    }
+    .pb_form_pill_icon {
+      padding-right: $space_xxs;
+      + .pb_form_pill_text, + .pb_form_pill_tag {
+        padding-left: 0;
+      }
     }
   }
   &.dark {
@@ -118,7 +136,7 @@ $form_pill_colors: (
       // Primary and Neutral are exceptions to the general rule in the handoff 
       &[class*=_#{$color_name}]  {
       //   background-color: mix($color_value, $card_dark, 10%);
-        // .pb_form_pill_tag {
+        // .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
         //   color: $color_name;
         // }
         // .pb_form_pill_close {
@@ -136,7 +154,7 @@ $form_pill_colors: (
         @if ($color_name == "neutral") {
           background-color: transparent;
           border: 1px solid $border_dark;
-          .pb_form_pill_text, .pb_form_pill_tag {
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
             color: $text_dk_default;
           }
           .pb_form_pill_close {
@@ -157,7 +175,7 @@ $form_pill_colors: (
         }
         @if ($color_name == "primary") {
           background-color: mix($active_dark, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag {
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
             color: $active_dark;
           }
           .pb_form_pill_close {

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -46,6 +46,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   } = props
 
   const iconClass = icon ? "_icon" : ""
+  const closeIconSize = size === "small" ? "xs" : "sm"
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(props),
@@ -69,7 +70,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           <Avatar
               imageUrl={avatarUrl}
               name={name}
-              size="xs"
+              size="xxs"
               status={null}
           />
           <Title
@@ -84,7 +85,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           <Avatar
               imageUrl={avatarUrl}
               name={name}
-              size="xs"
+              size="xxs"
               status={null}
           />
           <Title
@@ -94,6 +95,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           />
           <Icon
               className="pb_form_pill_icon"
+              color={color}
               icon={icon}
           />
         </>
@@ -102,6 +104,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         <>
           <Icon
               className="pb_form_pill_icon"
+              color={color}
               icon={icon}
           />
           <Title
@@ -126,6 +129,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         <Icon
             fixedWidth
             icon="times"
+            size={closeIconSize}
         />
       </div>
     </div>

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

@@ -5,11 +5,11 @@ examples:
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-  # - form_pill_icon: Form Pill Icon
+  - form_pill_icon: Form Pill Icon
 
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-  # - form_pill_icon: Form Pill Icon
+  - form_pill_icon: Form Pill Icon

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,19 +1,19 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
-    <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
+    <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
     <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
     <% if object.icon.present? %>
-      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
     <% end %>
   <% elsif object.text.present? %>
       <% if object.icon.present? %>
-        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
       <% end %>
       <% if object.text.present? %>
         <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
       <% end %>
   <% end %>
   <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
-    <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
+    <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -32,6 +32,10 @@ module Playbook
       def icon_class
         icon ? "icon" : nil
       end
+
+      def close_icon_size
+        size == "small" ? "xs" : "sm"
+      end
     end
   end
 end

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

@@ -28,7 +28,7 @@ type IconProps = {
   data?: {[key: string]: string},
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
-  icon: string | ReactSVGElement,
+  icon?: string | ReactSVGElement,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inverse?: boolean,

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -469,7 +469,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                       <FormPill
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
-                          size="small"
                           text={item.label}
                       />
                     ))
@@ -482,7 +481,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                       <FormPill
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
-                          size="small"
                           text={item.label}
                       />
                     ))

data/app/pb_kits/playbook/pb_pagination/_pagination.scss

@@ -3,36 +3,45 @@
 @import "../tokens/border_radius";
 @import "../tokens/shadows";
 
+
 $pagination_padding: 7px 13px 6px 13px;
 $top_bottom_radius: 0px;
 
+@mixin hover-state {
+  background-color: $active_light !important;
+  color: $primary;
+  border-radius: $border_rad_light;
+}
+
 .pb_pagination {
   display: inline-block;
   border-radius: $border_rad_light;
   border: $border_rad_lightest solid $border_light;
   background-color: $white;
-  padding: $space_xxs 0px !important;
-  li {
+  padding: $space_xs 0px !important;
+  li, .pagination-number {
     display: inline;
-    > a, li > span {
+    > a, li > span, .pagination-number {
     padding: $pagination_padding;
     text-decoration: none;
   }}
-  li:first-child > a, li:first-child > span  {
+  li:first-child > a, li:first-child > span, .pagination-number, .pagination-left {   
+    background-color: $white;
     padding: $pagination_padding;
     border-right: $border_rad_lightest solid $border_light;
     z-index: 2;
     border-top-right-radius: $top_bottom_radius;
     border-bottom-right-radius: $top_bottom_radius;
+    cursor: pointer;
   }
-  li:last-child > a, li:last-child > span {
+  li:last-child > a, li:last-child > span, .pagination-number, .pagination-right {
     padding: $pagination_padding;
     border-left: $border_rad_lightest solid $border_light;
     z-index: 2;
     border-top-left-radius: $top_bottom_radius;
     border-bottom-left-radius: $top_bottom_radius;
   }
-  a {
+  a, .pagination-number {
     color: $text_lt_default;
     font-size: $text_small;
     font-weight: $regular;
@@ -40,9 +49,7 @@ $top_bottom_radius: 0px;
     transition: all $transition_default ease-out;
 
     &:hover {
-      background-color: $active_light;
-      color: $primary;
-      border-radius: $border_rad_light;
+      @include hover-state;
     }
 
     &:focus-visible {
@@ -52,8 +59,8 @@ $top_bottom_radius: 0px;
       transition: none;
     }
   }
-  .active > span {
-    background-color: $primary;
+  .active > span, .pagination-number.active {
+    background-color: $primary !important;
     border-radius: $border_rad_light;
     color: #fff;
     padding: $pagination_padding;
@@ -62,8 +69,37 @@ $top_bottom_radius: 0px;
     font-weight: $bold;
     font-size: $text_small;
   }
-  .disabled > span {
-    padding: $pagination_padding;
+  .disabled {
+    pointer-events: none;
+    opacity: 0.5;        
+    color: grey; 
+
+    & > span {
+      padding: $pagination_padding;
+      font-size: $text_small;
+    }
+  }
+
+  .pagination-right, 
+  .pagination-left {
+    background-color: $white;
+    border-top: none;
+    border-bottom: none;
+    cursor: pointer;
+    padding: 7px 11px 6px;
     font-size: $text_small;
+    
+    &:hover {
+      @include hover-state;
+    }
+  }
+  .pagination-left {
+    border-left: none;
+    margin-right: $space_xxs;
+  }
+
+  .pagination-right {
+    border-right: none;
+    margin-left: $space_xxs;
   }
 }

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -0,0 +1,164 @@
+import React, { useState } from "react";
+import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import Icon from '../pb_icon/_icon';
+
+type PaginationProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  current?: number;
+  onChange?: (pageNumber: number) => void;
+  range?: number;
+  total?: number;
+};
+
+const Pagination = ( props: PaginationProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    htmlOptions = {},
+    id,
+    current = 1,
+    onChange,
+    range = 5,
+    total = 1,
+  } = props
+  const [currentPage, setCurrentPage] = useState(current);
+
+  const handlePageChange = (pageNumber: number) => {
+    if (pageNumber >= 1 && pageNumber <= total) {
+      setCurrentPage(pageNumber);
+      if (onChange) {
+        onChange(pageNumber);
+      }
+    }
+  };
+
+  const renderPageButtons = (): JSX.Element[] => {
+    const buttons: JSX.Element[] = [];
+  
+    // Calculate pagination range with let
+    let rangeStart = Math.max(1, currentPage - Math.floor(range / 2));
+    let rangeEnd = Math.min(total, rangeStart + range - 1);
+  
+    // Adjust range if it's too short to fit the range
+    if (rangeEnd - rangeStart + 1 < range) {
+      if (rangeStart > 1) {
+        rangeStart = Math.max(1, rangeEnd - range + 1);
+      } else {
+        rangeEnd = Math.min(total, rangeStart + range - 1);
+      }
+    }
+
+    // Always display the first page button
+    if (rangeStart > 1) {
+      buttons.push(
+        <li
+            className="pagination-number"
+            key={1}
+            onClick={() => handlePageChange(1)}
+        >
+          1
+        </li>
+      );
+    }
+  
+    // Always display the second page button
+    if (rangeStart > 2) {
+      buttons.push(
+        <li
+            className="pagination-number"
+            key={2}
+            onClick={() => handlePageChange(2)}
+        >
+          2
+        </li>
+      );
+    }
+
+    // Display page buttons within the calculated range
+    for (let i = rangeStart; i <= rangeEnd; i++) {
+      buttons.push(
+        <li
+            className={`pagination-number ${i === currentPage ? "active" : ""}`}
+            key={i}
+            onClick={() => handlePageChange(i)}
+        >
+          {i}
+        </li>
+      );
+    }
+
+    // Always display the second-to-last page button
+    if (rangeEnd < total - 1) {
+      buttons.push(
+        <li
+            className={`pagination-number ${total - 1 === currentPage ? "active" : ""}`}
+            key={total - 1}
+            onClick={() => handlePageChange(total - 1)}
+        >
+          {total - 1}
+        </li>
+      );
+    }
+
+    // Always display the last page button
+    if (rangeEnd < total) {
+      buttons.push(
+        <li
+            className={`pagination-number ${total === currentPage ? "active" : ""}`}
+            key={total}
+            onClick={() => handlePageChange(total)}
+        >
+          {total}
+        </li>
+      );
+    }
+
+    
+    return buttons;
+  };
+  
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const classes = classnames(
+    buildCss('pb_paginate'),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <div 
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+    >
+      <div className="pb_pagination">
+        <li
+            className={`pagination-left ${currentPage === 1 ? 'disabled' : ''}`}
+            onClick={() => handlePageChange(currentPage - 1)}
+        >
+          <Icon icon="chevron-left" />
+        </li>
+        {renderPageButtons()}
+        <li
+            className={`pagination-right ${currentPage === total ? 'disabled' : ''}`}
+            onClick={() => handlePageChange(currentPage + 1)}
+        >
+          <Icon icon="chevron-right" />
+        </li>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Pagination from '../_pagination'
+
+const PaginationDefault = (props) => {
+
+    return (
+      <>
+        <Pagination
+            current={1}
+            range={5}
+            total={10}
+            {...props}
+          />
+      </>
+    )
+}
+
+export default PaginationDefault

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md

@@ -0,0 +1 @@
+The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { Table, Pagination } from 'playbook-ui'
+
+
+import { data } from "./data";
+
+const PaginationPageChange = (props) => {
+
+  const [activePage, setActivePage] = useState(1);
+  const rowsPerPage = 3;
+  const totalPages = Math.ceil(data.length / rowsPerPage);
+
+  const onPageChange = (pageNumber) => {
+    setActivePage(pageNumber);
+  };
+
+  const currentData = data.slice(
+    (activePage - 1) * rowsPerPage,
+    activePage * rowsPerPage
+  );
+
+
+    return (
+      <div className="App">
+      <Table 
+          marginBottom="xs"
+          responsive="none" 
+          size="sm" 
+          {...props}
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{"Column 1"}</Table.Header>
+            <Table.Header>{"Column 2"}</Table.Header>
+            <Table.Header>{"Column 3"}</Table.Header>
+            <Table.Header>{"Column 4"}</Table.Header>
+            <Table.Header>{"Column 5"}</Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {currentData.map((row, index) => (
+            <Table.Row key={index}>
+              {row.map((cell, cellIndex) => (
+                <Table.Cell key={cellIndex}>{cell}</Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+ 
+      <Pagination
+          current={1}
+          onChange={onPageChange}
+          range={5}
+          total={totalPages}
+          {...props}
+      />
+    </div>
+    )
+}
+
+export default PaginationPageChange

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md

@@ -0,0 +1 @@
+You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.

data/app/pb_kits/playbook/pb_pagination/docs/data.js

@@ -0,0 +1,23 @@
+export const data = [
+    ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
+    ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
+    ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
+    ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
+    ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
+    ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
+    ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
+    ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
+    ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
+    ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
+    ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
+    ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
+    ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
+    ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
+    ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
+    ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
+    ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
+    ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
+    ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
+    ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
+  ];
+  

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

@@ -3,4 +3,6 @@ examples:
   rails:
   - pagination_default: Default
   
-  
+  react:
+  - pagination_default: Default
+  - pagination_page_change: Page Change

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

@@ -0,0 +1,2 @@
+export { default as PaginationDefault } from './_pagination_default.jsx'
+export { default as PaginationPageChange } from './_pagination_page_change.jsx'