playbook_ui 14.14.0.pre.alpha.revert4339revert4242play1633displaytitle6456 → 14.14.0.pre.rc.0

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

@@ -10,4 +10,3 @@ export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
 export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
 export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
 export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
-export { default as BarGraphPbStyles } from './_bar_graph_pb_styles.jsx'

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, forwardRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -24,7 +24,7 @@ type CheckboxProps = {
   value?: string,
 } & GlobalProps
 
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
+const Checkbox = (props: CheckboxProps): React.ReactElement => {
   const {
     aria = {},
     checked = false,
@@ -44,15 +44,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     value = '',
   } = props
 
-  const internalRef = useRef<HTMLInputElement>(null)
-  const setRefs = (el: HTMLInputElement) => {
-    internalRef.current = el
-    if (typeof ref === 'function') {
-      ref(el)
-    } else if (ref) {
-      (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
-    }
-  }
+  const checkRef = useRef(null)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -64,9 +56,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
   )
 
   useEffect(() => {
-    if (internalRef.current) {
-      internalRef.current.checked = checked
-      internalRef.current.indeterminate = indeterminate
+    if (checkRef.current) {
+      checkRef.current.checked = checked
+      checkRef.current.indeterminate = indeterminate
     }
   }, [indeterminate, checked])
 
@@ -80,7 +72,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
         disabled={disabled}
         name={name}
         onChange={onChange}
-        ref={setRefs}
+        ref={checkRef}
         tabIndex={tabIndex}
         type="checkbox"
         value={value}
@@ -127,7 +119,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
       </Body>
     </label>
   )
-})
+}
 
-Checkbox.displayName = "Checkbox"
 export default Checkbox

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -106,19 +106,3 @@ test('has disabled attribute', () => {
   const input = kit.querySelector('input')
   expect(input).toHaveAttribute('disabled')
 }) 
-
-test('has ref in the input element', () => {
-  const ref = React.createRef()
-    render(
-      <Checkbox
-          data={{ testid: testId }}
-          name="checkbox-name"
-          ref={ref}
-          text="Checkbox"
-          value="check-box value"
-      />
-  )
-
-  expect(ref.current).not.toBeNull()
-  expect(ref.current?.tagName).toBe('INPUT')
-})

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

@@ -11,7 +11,6 @@ examples:
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
-  - checkbox_react_hook: React Hook Form
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
@@ -22,4 +21,4 @@ examples:
     - checkbox_error_swift: Default w/ Error
     - checkbox_indeterminate_swift: Indeterminate Checkbox
     - checkbox_props_swift: ""
-    
+    

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

@@ -1,6 +1,5 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
-export { default as CheckboxReactHook } from './_checkbox_react_hook.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -21,7 +21,6 @@ type CurrencyProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label?: string,
-  nullDisplay?: string,
   size?: 'sm' | 'md' | 'lg',
   symbol?: string,
   variant?: 'default' | 'light' | 'bold',
@@ -50,7 +49,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     unit,
     className,
     label = '',
-    nullDisplay = '',
     size = 'sm',
     symbol = '$',
     variant = 'default',
@@ -120,57 +118,44 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         id={id}
     >
       <Caption dark={dark}>{label}</Caption>
+
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          nullDisplay && !amount ? (
-            <div>{nullDisplay}</div>
-          ) : (
-            <>
-              <div>{handleNegative}{symbol}</div>
-              <div>{getAmount}</div>
-              <div>
-                {getAbbreviation}
-                {unit ? unit : getDecimalValue}
-              </div>
-            </>
-          )
+          <>
+            <div>{handleNegative}{symbol}</div>
+            <div>{getAmount}</div>
+            <div>
+              {getAbbreviation}
+              {unit ? unit : getDecimalValue}
+            </div>
+          </>
         ) : (
-          nullDisplay && !amount ? (
+          <>
+            <Body
+                className="dollar_sign"
+                color="light"
+                dark={dark}
+            >
+              {handleNegative}{symbol}
+            </Body>
+
             <Title
                 className="pb_currency_value"
                 dark={dark}
                 size={sizes[size]}
-          >
-            {nullDisplay}
-          </Title>
-          ) : (
-            <>
-              <Body
-                  className="dollar_sign"
-                  color="light"
-                  dark={dark}
-              >
-                {handleNegative}{symbol}
-              </Body>
-      
-              <Title
-                  className="pb_currency_value"
-                  dark={dark}
-                  size={sizes[size]}
-              >
-                {getAmount}
-              </Title>
-      
-              <Body
-                  className="unit"
-                  color="light"
-                  dark={dark}
-              >
-                {getAbbreviation}
-                {unit ? unit : getDecimalValue}
-              </Body>
-            </>
-          )
+            >
+              {getAmount}
+            </Title>
+
+            <Body
+                className="unit"
+                color="light"
+                dark={dark}
+            >
+              {getAbbreviation}
+              {unit ? unit : getDecimalValue}
+            </Body>
+          </>
         )}
       </div>
     </div>

data/app/pb_kits/playbook/pb_currency/currency.html.erb

@@ -1,24 +1,17 @@
 <%= pb_content_tag do %>
   <%= pb_rails("caption", props: object.caption_props) %>
+
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
     <% if object.unstyled %>
-      <% if object.null_display && object.amount.blank? %>
-        <div><%= object.null_display %></div>
-      <% else %>
-        <div><%= object.negative_sign %><%= object.symbol %></div>
-        <div><%= object.title_props[:text] %></div>
-        <div><%= object.body_props[:text] %></div>
-      <% end %>
+      <div><%= object.negative_sign %><%= object.symbol %></div>
+      <div><%= object.title_props[:text] %></div>
+      <div><%= object.body_props[:text] %></div>
     <% else %>
-     <% if object.null_display && object.amount.blank? %>
-        <%= pb_rails("title", props: object.title_props) %>
-      <% else %>
-        <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-          <%= object.negative_sign %><%= object.symbol %>
-        <% end %>
-          <%= pb_rails("title", props: object.title_props) %>
-          <%= pb_rails("body", props: object.body_props) %>
+      <%= pb_rails("body", props: object.currency_wrapper_props) do %>
+        <%= object.negative_sign %><%= object.symbol %>
       <% end %>
+      <%= pb_rails("title", props: object.title_props) %>
+      <%= pb_rails("body", props: object.body_props) %>
     <% end %>
   </div>
 <% end %>

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -46,9 +46,6 @@ module Playbook
       prop :comma_separator, type: Playbook::Props::Boolean,
                              default: false
 
-      prop :null_display, type: Playbook::Props::String,
-                          required: false
-
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -68,20 +65,10 @@ module Playbook
         }
       end
 
-      def title_text
-        if null_display
-          null_display
-        elsif swap_negative
-          absolute_amount(abbr_or_format_amount)
-        else
-          abbr_or_format_amount
-        end
-      end
-
       def title_props
         {
           size: size_value,
-          text: title_text,
+          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -158,10 +145,8 @@ module Playbook
           1
         when "md"
           3
-        when "sm"
-          4
         else
-          3
+          4
         end
       end
 

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

@@ -10,7 +10,6 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
-  - currency_null_display: Null Display
   
   react:
   - currency_variants: Variants
@@ -22,7 +21,6 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
-  - currency_null_display: Null Display
 
   swift:
   - currency_size_swift: Size

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

@@ -6,5 +6,4 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
-export { default as CurrencyNegative } from './_currency_negative.jsx'
-export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'
+export { default as CurrencyNegative } from './_currency_negative.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -29,7 +29,6 @@ type DatePickerProps = {
   hideLabel?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  initializeOnce?: boolean,
   inLine?: boolean,
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
@@ -74,7 +73,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     hideLabel = false,
     htmlOptions = {},
     id,
-    initializeOnce = false,
     inLine = false,
     inputAria = {},
     inputData = {},
@@ -136,7 +134,7 @@ useEffect(() => {
     yearRange,
     required: false,
   }, scrollContainer)
-}, initializeOnce ? [] : undefined)
+})
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb

@@ -43,9 +43,9 @@
       <% end %>
     <% end %>
 
-    <%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
+    <%= pb_rails("draggable/draggable_container", props: {tag:"tbody"}) do %>
       <% initial_items.each do |item| %>
-        <%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], tag:"tr"}) do %>
           <%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
           <%= pb_rails("table/table_cell") do %>
             <%= pb_rails("flex", props:{align:"center"}) do %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md

@@ -1,4 +1 @@
-The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
-
-- use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
-- use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here. 
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this, make use of the `tag` prop on the draggable_container to set it to 'tbody' and the same prop on the draggable_item to set that to 'tr'. This will create the functionality seen here. 

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

@@ -4,9 +4,7 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
-  - draggable_with_table_react: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit

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

@@ -2,5 +2,4 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
 export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
-export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
-export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -17,11 +17,10 @@ type DraggableContainerProps = {
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 
 const DraggableContainer = (props: DraggableContainerProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
 
   const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
 
@@ -29,8 +28,6 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
 
-  const Tag: React.ReactElement | any = `${tag}`;
-
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
@@ -39,18 +36,18 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   );
 
   return (
-    <Tag
+    <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={classes}
         id={id}
         key={container}
-        onDragOver={(e: Event) => handleDragOver(e, container)}
+        onDragOver={(e) => handleDragOver(e, container)}
         onDrop={() => handleDrop(container)}
     >
       {children}
-    </Tag>
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -18,11 +18,10 @@ type DraggableItemProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   dragId?: string;
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 
 const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId, tag="div" } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId } = props;
 
   const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
     DraggableContext();
@@ -31,8 +30,6 @@ const DraggableItem = (props: DraggableItemProps) => {
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
 
-  const Tag: React.ReactElement | any = `${tag}`;
-  
   const classes = classnames(
     buildCss("pb_draggable_item"),
     `${isDragging === dragId ? "is_dragging" : ""}`,
@@ -41,7 +38,7 @@ const DraggableItem = (props: DraggableItemProps) => {
   );
 
   return (
-    <Tag
+    <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -54,7 +51,7 @@ const DraggableItem = (props: DraggableItemProps) => {
         onDragStart={() => handleDragStart(dragId, container)}
     >
       {children}
-    </Tag>
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -134,6 +134,14 @@ body.PBDrawer__Body--close {
   transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
 }
 
+.pb_drawer_lg_left.pb_drawer {
+  transform: translateX(-100%);
+}
+
+.pb_drawer_lg_right.pb_drawer {
+  transform: translateX(100%);
+}
+
 .pb_drawer.pb_drawer_after_open {
   pointer-events: auto;
   transform: translate3d(0, 0, 0);
@@ -149,34 +157,6 @@ body.PBDrawer__Body--close {
   animation-duration: $animation-duration;
   outline: none;
 
- &.pb_drawer_within_element_rails {
-    position: relative;
-    width: 100%;
-    display: block;
-    background-color: $white;
-    overflow: hidden;
-
-    // Use max-height for a smooth accordion-like animation
-    max-height: 0;
-    transition: max-height $animation-duration ease-in-out;
-    z-index: 1;
-
-    &.open {
-      max-height: 1000px;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: inherit;
-      z-index: -1;
-    }
-  }
-
   &.pb_drawer_within_element {
     position: relative;
     width: 100%;
@@ -349,10 +329,6 @@ body.PBDrawer__Body--close {
     opacity: 1;
     pointer-events: none;
 
-    & .pb_drawer {
-      pointer-events: auto;
-    }
-
     &_before_close {
       height: 0;
     }

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb

@@ -1,20 +1 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-1", 
-    }) do  %>
-        Test me (Left Drawer)
-    <% end %>
-    
-    
-    <%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-2", 
-        placement: "right"
-    }) do  %>
-        Test me (Right Drawer)
-    <% end %>
-<% end %>
-
+<%= pb_rails("drawer") %>

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

@@ -2,11 +2,6 @@ examples:
   
   rails:
   - drawer_default: Default
-  - drawer_behavior: Push Behavior
-  - drawer_menu: Within Element
-  - drawer_sizes: Sizes
-  - drawer_overlay: Overlay
-  - drawer_borders: Borders 
   
   
   react:

data/app/pb_kits/playbook/pb_drawer/drawer.html.erb

@@ -1,20 +1,12 @@
-<% if within_element %>
-    <%= pb_content_tag(:div, data: {breakpoint: object.breakpoint} ) do %>
-        <%= content %>
-    <% end %>
-<% else %>
-    <div class="pb_drawer_wrapper"
-        id="drawer-wrapper-<%= object.id %>"
-        style="display:none;"
-        data-behavior="<%= object.behavior %>"
-        data-size="<%= object.size %>"
-        data-placement="<%= object.placement %>"
-        data-breakpoint="<%= object.breakpoint %>"
-        >
-        <div class="<%= overlay_classes %>" style="display:none;" id="drawer-overlay-<%= object.id %>"> 
-            <%= pb_content_tag do %>
-                <%= content %>
-            <% end %>
-        </div>
-    </div>
-<% end %>
+<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
+<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
+<%= pb_content_tag(
+    # :div,
+    # aria: object.aria,
+    # class: object.classname,
+    # data: object.data,
+    # id: object.id,
+    # **combined_html_options
+) do %>
+  <span>DRAWER CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/drawer.rb

@@ -2,55 +2,7 @@
 
 module Playbook
   module PbDrawer
-    class Drawer < Playbook::KitBase
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[xs sm md lg xl full],
-                  default: "md"
-      prop :placement, type: Playbook::Props::Enum,
-                       values: %w[left right bottom],
-                       default: "left"
-      prop :behavior, type: Playbook::Props::Enum,
-                      values: %w[floating push],
-                      default: "floating"
-      prop :overlay, type: Playbook::Props::Boolean,
-                     default: true
-      prop :within_element, type: Playbook::Props::Boolean,
-                            default: false
-      prop :border, type: Playbook::Props::Enum,
-                    values: %w[full none right left],
-                    default: "none"
-      prop :breakpoint, type: Playbook::Props::Enum,
-                        values: %w[none xs sm md lg xl],
-                        default: "none"
-
-      def classname
-        generate_classname("pb_drawer pb_drawer_#{size}_#{placement} #{within_class} #{border_classes}")
-      end
-
-      def border_classes
-        case border
-        when "full"
-          "drawer_border-full"
-        when "right"
-          "drawer_border-right"
-        when "left"
-          "drawer_border-left"
-        else
-          ""
-        end
-      end
-
-      def overlay_close
-        !should_close_on_overlay_click ? "overlay_close" : ""
-      end
-
-      def within_class
-        within_element ? "pb_drawer_within_element_rails" : ""
-      end
-
-      def overlay_classes
-        "pb_drawer_#{overlay ? '' : 'no_'}overlay drawer_content_#{placement} pb_drawer_overlay_after_open #{overlay ? '' : 'no-background'}"
-      end
+    class Drawer < ::Playbook::KitBase
     end
   end
 end

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -46,7 +46,6 @@
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
-  <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>