playbook_ui 14.7.0.pre.alpha.revert3916revert3893PBNTR667railstypeaheadformintegration4523 → 14.7.0.pre.alpha.spacingquickchange4482

data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
-import { render, fireEvent, screen } from '../utilities/test-utils';
+import { render, cleanup, fireEvent, screen } from '../utilities/test-utils';
 import { Drawer, Button } from 'playbook-ui';
-import { waitFor } from '@testing-library/react';
 
 const size = 'sm';
 
@@ -12,10 +11,9 @@ function DrawerTest({ props }) {
 
   return (
     <>
-    <Button onClick={open}>{'Open Drawer'}</Button>
+      <Button onClick={open}>{'Open Drawer'}</Button>
       <Drawer
           className="wrapper"
-          id="drawer-id"
           onClose={close}
           opened={isOpen}
           placement="left"
@@ -29,17 +27,24 @@ function DrawerTest({ props }) {
   );
 }
 
+afterEach(cleanup);
+
 test('renders with the right border class when border prop is right', async () => {
   render(<DrawerTest props={{ border: 'right' }} />);
 
   fireEvent.click(screen.getByText('Open Drawer'));
 
-  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
+  const drawer = await screen.findByRole('dialog');
+  expect(drawer).toHaveClass('drawer_border_right');
+});
 
-  const container = document.getElementById('drawer-id');
-  const drawer = container.querySelector('#drawer-id .pb_drawer');
+test('renders with the left border class when border prop is left', async () => {
+  render(<DrawerTest props={{ border: 'left' }} />);
 
-  expect(drawer).toHaveClass('drawer_border_right');
+  fireEvent.click(screen.getByText('Open Drawer'));
+
+  const drawer = await screen.findByRole('dialog');
+  expect(drawer).toHaveClass('drawer_border_left');
 });
 
 test('renders with the full border class when border prop is full', async () => {
@@ -47,10 +52,7 @@ test('renders with the full border class when border prop is full', async () =>
 
   fireEvent.click(screen.getByText('Open Drawer'));
 
-  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
-
-  const container = document.getElementById('drawer-id');
-  const drawer = container.querySelector('#drawer-id .pb_drawer');
+  const drawer = await screen.findByRole('dialog');
   expect(drawer).toHaveClass('drawer_border_full');
 });
 
@@ -59,10 +61,7 @@ test('does not have a border class when border prop is none', async () => {
 
   fireEvent.click(screen.getByText('Open Drawer'));
 
-  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
-
-  const container = document.getElementById('drawer-id');
-  const drawer = container.querySelector('#drawer-id .pb_drawer');
+  const drawer = await screen.findByRole('dialog');
   expect(drawer).not.toHaveClass('drawer_border_right');
   expect(drawer).not.toHaveClass('drawer_border_left');
   expect(drawer).not.toHaveClass('drawer_border_full');
@@ -73,9 +72,6 @@ test('renders the correct size class for a large drawer', async () => {
 
   fireEvent.click(screen.getByText('Open Drawer'));
 
-  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
-
-  const container = document.getElementById('drawer-id');
-  const drawer = container.querySelector('#drawer-id .pb_drawer');
+  const drawer = await screen.findByRole('dialog');
   expect(drawer).toHaveClass('pb_drawer pb_drawer_lg_left');
 });

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

@@ -23,7 +23,7 @@
 %>
 
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
-  <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
+  <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
@@ -92,7 +92,7 @@
     const selectedUserData = JSON.parse(selectedUserJSON)
 
     // set the input field's value
-    event.target.querySelector('input[name=example_typeahead]').value = selectedUserData.login
+    event.target.querySelector('input[name=example_user]').value = selectedUserData.login
 
     // log the selected option's dataset
     console.log('The selected user data:')

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

@@ -1,5 +1,5 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
-  <%= form.text_field :example_text_field_loading, props: { label: true } %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -22,74 +22,23 @@
 %>
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
-  <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
-  <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
-  <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
-  <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
-  <%= form.password_field :example_password_field_validation, props: { label: true, required: true } %>
-  <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
-  <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
-  <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
-  <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.text_field :example_text_field, props: { label: true, required: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
+  <%= form.email_field :example_email_field, props: { label: true, required: true } %>
+  <%= form.number_field :example_number_field, props: { label: true, required: true } %>
+  <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
+  <%= form.password_field :example_password_field, props: { label: true, required: true } %>
+  <%= form.url_field :example_url_field, props: { label: true, required: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true } %>
+  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
+  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
-  <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
+  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
 <% end %>
-
-<!-- form.typeahead user results example template -->
-<template data-typeahead-example-result-option>
-  <%= pb_rails("user", props: {
-    name: tag(:slot, name: "name"),
-    orientation: "horizontal",
-    align: "left",
-    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
-    avatar: true
-    }) %>
-</template>
-
-<!-- form.typeahead JS example implementation -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return
-
-    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
-      .then(response => response.json())
-      .then((result) => {
-        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
-
-        event.detail.setResults((result.items || []).map((user) => {
-          const wrapper = resultOptionTemplate.content.cloneNode(true)
-          wrapper.children[0].dataset.user = JSON.stringify(user)
-          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
-          wrapper.querySelector('img').dataset.src = user.avatar_url
-          return wrapper
-        }))
-      })
-  })
-
-
-  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
-    if (!event.target.dataset.typeaheadExample2) return
-
-    const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
-    const selectedUserData = JSON.parse(selectedUserJSON)
-
-    // set the input field's value
-    event.target.querySelector('input[name=example_typeahead_validation]').value = selectedUserData.login
-
-    // log the selected option's dataset
-    console.log('The selected user data:')
-    console.dir(selectedUserData)
-
-    // do even more with the data later - TBD
-    event.target.dataset.user = selectedUserJSON
-  })
-<% end %>

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

@@ -8,12 +8,6 @@ $icon_margin: $space_xs/2;
 $icon_height: 28px;
 $height_from_top: $icon_height/2 - $connector_width/2;
 
-// Add gap variables
-$gap_xs: $height_from_top + $space_xs;
-$gap_sm: $height_from_top + $space_sm;
-$gap_md: $height_from_top + $space_md;
-$gap_lg: $height_from_top + $space_lg;
-
 @mixin pb_timeline_line_solid($width, $height, $margin) {
     width: $width;
     height: $height;
@@ -162,7 +156,7 @@ $gap_lg: $height_from_top + $space_lg;
                         }
                     }
                 }
-            }
+            } 
         }
     }
     &[class*=_vertical] {
@@ -272,41 +266,5 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        &[class*=_gap_xs] {
-            [class*=pb_timeline_item_kit] {
-                [class=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        height: $gap_xs !important;
-                    }
-                }
-            }
-        }
-        &[class*=_gap_sm] {
-            [class*=pb_timeline_item_kit] {
-                [class=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        height: $gap_sm !important;
-                    }
-                }
-            }
-        }
-        &[class*=_gap_md] {
-            [class*=pb_timeline_item_kit] {
-                [class=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        height: $gap_md !important;
-                    }
-                }
-            }
-        }
-        &[class*=_gap_lg] {
-            [class*=pb_timeline_item_kit] {
-                [class=pb_timeline_item_step] {
-                    [class=pb_timeline_item_connector] {
-                        height: $gap_lg !important;
-                    }
-                }
-            }
-        }
     }
 }

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

@@ -20,7 +20,6 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
-  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
 } & GlobalProps
 
 const Timeline = ({
@@ -32,16 +31,13 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
-  gap = 'none',
   ...props
 }: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const dateStyle = showDate === true ? '_with_date' : ''
-  const gapStyle = gap === 'none' ? '' : `gap_${gap}`
-  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, gapStyle)
-
+  const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
   return (
     <div
         {...ariaProps}
@@ -60,4 +56,4 @@ Timeline.Step = TimelineStep
 Timeline.Label = TimelineLabel
 Timeline.Detail = TimelineDetail
 
-export default Timeline
+export default Timeline

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

@@ -1,16 +1,14 @@
 examples:
-
+  
   rails:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  - timeline_with_gap: With Gap
-
-
+  
+  
   react:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
-  - timeline_with_gap: With Gap

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

@@ -2,5 +2,3 @@ export { default as TimelineDefault } from './_timeline_default.jsx'
 export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
 export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
-export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
-

data/app/pb_kits/playbook/pb_timeline/timeline.rb

@@ -8,15 +8,9 @@ module Playbook
                          default: "horizontal"
       prop :show_date, type: Playbook::Props::Boolean,
                        default: false
-      prop :gap, type: Playbook::Props::Enum,
-                 values: %w[xs sm md lg none],
-                 default: "none"
 
       def classname
-        generate_classname("pb_timeline_kit",
-                           orientation,
-                           date_class,
-                           gap_class)
+        generate_classname("pb_timeline_kit", orientation, date_class)
       end
 
     private
@@ -24,10 +18,6 @@ module Playbook
       def date_class
         show_date ? "with_date" : nil
       end
-
-      def gap_class
-        gap == "none" ? nil : "gap_#{gap}"
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_timeline/timeline.test.js

@@ -147,26 +147,26 @@ test('should pass id prop', () => {
 test('should have horizontal orientation by default', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit_horizontal')
+    expect(kit).toHaveClass('pb_timeline_kit__horizontal')
 })
 
 test('should pass vertical orientation', () => {
     const props = { orientation: 'vertical' }
     render(<TimelineDefault {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit_vertical')
+    expect(kit).toHaveClass('pb_timeline_kit__vertical')
 })
 
 test('should pass showDate prop', () => {
     const props = { showDate: true }
     render(<TimelineDefault {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
+    expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
 })
 
 test('should pass showDate prop with Children', () => {
     const props = { showDate: true }
     render(<TimelineWithChildren {...props} />)
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
+    expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
 })

data/app/pb_kits/playbook/pb_typeahead/index.ts

@@ -4,12 +4,11 @@ import { debounce } from 'lodash'
 export default class PbTypeahead extends PbEnhancedElement {
   _searchInput: HTMLInputElement
   _resultsElement: HTMLElement
-  _debouncedSearch: () => void
+  _debouncedSearch: Function
   _resultsLoadingIndicator: HTMLElement
   _resultOptionTemplate: HTMLElement
   _resultsOptionCache: Map<string, Array<DocumentFragment>>
   _searchContext: string
-  _validSelection: boolean
 
   static get selector() {
     return '[data-pb-typeahead-kit]'
@@ -20,7 +19,6 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.searchInput.addEventListener('focus', () => this.debouncedSearch())
     this.searchInput.addEventListener('input', () => this.debouncedSearch())
     this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
-    this.element.closest('form')?.addEventListener('submit', (event) => this.handleFormSubmission(event))
   }
 
   handleKeydown(event: KeyboardEvent) {
@@ -88,9 +86,6 @@ export default class PbTypeahead extends PbEnhancedElement {
     const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
-    this._validSelection = true
-    this.removeValidationError()
-
     this.resultsCacheClear()
     this.searchInputClear()
     this.clearResults()
@@ -98,35 +93,6 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
   }
 
-  removeValidationError() {
-    const inputWrapper = this.searchInput.closest('.text_input_wrapper')
-    if (inputWrapper) {
-      const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
-      if (errorMessage) {
-        errorMessage.style.display = 'none'
-      }
-      this.searchInput.classList.remove('error')
-    }
-  }
-
-  showValidationError() {
-    const inputWrapper = this.searchInput.closest('.text_input_wrapper')
-    if (inputWrapper) {
-      const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
-      if (errorMessage) {
-        errorMessage.style.display = 'block'
-      }
-      this.searchInput.classList.add('error')
-    }
-  }
-
-  handleFormSubmission(event: Event) {
-    if (!this._validSelection) {
-      this.showValidationError()
-      event.preventDefault()
-    }
-  }
-
   clearResults() {
     this.resultsElement.innerHTML = ''
   }
@@ -235,7 +201,7 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   toggleResultsLoadingIndicator(visible: boolean) {
-    let visibilityProperty = '0'
+    var visibilityProperty = '0'
     if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -17,14 +17,11 @@
       <%= pb_rails("text_input", props: {
         type: "search",
         input_options: object.input_options,
+        label: object.label,
         name: object.name,
         value: object.value,
         placeholder: object.placeholder,
         margin_bottom: "none",
-        required: object.required,
-        validation: object.validation,
-        label: object.label,
-        id: object.input_options[:id],
       }) %>
       <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
       <% end %>
@@ -36,4 +33,4 @@
       <% end %>
     </template>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -40,10 +40,6 @@ module Playbook
       prop :pill_color, type: Playbook::Props::Enum,
                         values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
                         default: "primary"
-      prop :required, type: Playbook::Props::Boolean,
-                      default: false
-      prop :validation, type: Playbook::Props::HashProp,
-                        default: {}
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -21,47 +21,34 @@
 }
 
 @mixin hover-color-classes($colors-list) {
-    @each $name, $color in $colors-list {
-      .hover_background-#{"" + $name}:hover {
-        background-color: $color !important;
-        transition: background-color $transition-speed ease;
-      }
-      .hover_color-#{"" + $name}:hover {
-        color: $color !important;
-        transition: color $transition-speed ease;
-      }
+  @each $name, $color in $colors-list {
+    .hover_background_#{"" + $name}:hover,
+    .group_hover:hover .group_hover.hover_background_#{"" + $name} {
+      background-color: $color !important;
+      transition: background-color $transition-speed ease;
+    }
+    .hover_color_#{"" + $name}:hover,
+    .group_hover:hover .group_hover.hover_color_#{"" + $name} {
+      color: $color !important;
+      transition: color $transition-speed ease;
     }
-  }
-  
-  @include hover-scale-classes($scales);
-  @include hover-shadow-classes($box_shadows);
-  @include hover-color-classes($product_colors);
-  @include hover-color-classes($status_colors);
-  @include hover-color-classes($data_colors);
-  @include hover-color-classes($shadow_colors);
-  @include hover-color-classes($colors);
-  @include hover-color-classes($interface_colors);
-  @include hover-color-classes($main_colors);
-  @include hover-color-classes($background_colors);
-  @include hover-color-classes($card_colors);
-  @include hover-color-classes($active_colors);
-  @include hover-color-classes($action_colors);
-  @include hover-color-classes($hover_colors);
-  @include hover-color-classes($border_colors);
-  @include hover-color-classes($text_colors);
-  @include hover-color-classes($category_colors);
-
-.hover_visibility {
-  opacity: 0;
-  transition: opacity $transition-speed ease;
-
-  &:hover {
-    opacity: 1;
   }
 }
 
-.group_hover:hover {
-  .group_hover.hover_visibility {
-    opacity: 1;
-  }
-}
+@include hover-scale-classes($scales);
+@include hover-shadow-classes($box_shadows);
+@include hover-color-classes($product_colors);
+@include hover-color-classes($status_colors);
+@include hover-color-classes($data_colors);
+@include hover-color-classes($shadow_colors);
+@include hover-color-classes($colors);
+@include hover-color-classes($interface_colors);
+@include hover-color-classes($main_colors);
+@include hover-color-classes($background_colors);
+@include hover-color-classes($card_colors);
+@include hover-color-classes($active_colors);
+@include hover-color-classes($action_colors);
+@include hover-color-classes($hover_colors);
+@include hover-color-classes($border_colors);
+@include hover-color-classes($text_colors);
+@include hover-color-classes($category_colors);

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -63,8 +63,7 @@ type FlexWrap = {
 type Hover = Shadow & {
   background?: string,
   color?: string,
-  scale?: "sm" | "md" | "lg",
-  visibility?: boolean,
+  scale?: "sm" | "md" | "lg"
 }
 
 type GroupHover  = {
@@ -231,10 +230,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       let css = '';
       if (!hover) return css;
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
-      css += hover.background ? `hover_background-${hover.background } ` : '';
+      css += hover.background ? `hover_background_${hover.background } ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
-      css += hover.color ? `hover_color-${hover.color } ` : '';
-      css += hover.visibility ? `hover_visibility` : '';
+      css += hover.color ? `hover_color_${hover.color } ` : '';
       return css;
   },