Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[PLAY-1603] Add color hover docs and fix background hover #3874

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+154 −7
Open

[PLAY-1603] Add color hover docs and fix background hover #3874

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions playbook-website/app/javascript/components/VisualGuidelines/Examples/Hover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,22 @@ const Hover = ({ example }: { example: string }) => (
</tr>
</thead>
<tbody>
<tr>
<td>
<Pill
text="color"
textTransform="none"
variant="warning"
/>
</td>
<td>
<Pill
text="${color}"
textTransform="none"
variant="warning"
/>
</td>
</tr>
<tr>
<td>
<Pill
Expand Down Expand Up @@ -199,6 +215,12 @@ const Hover = ({ example }: { example: string }) => (
gap="sm"
wrap
>
<Card padding="xs" >
<Body
text="Text Color"
hover={{ color: 'data_1' }}
/>
</Card>
<Card
hover={{ background: 'success_subtle' }}
padding="xs"
Expand Down
7 changes: 6 additions & 1 deletion playbook-website/app/views/pages/code_snippets/hover_jsx.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,9 @@
hover={{ background: "success_subtle" }}
label='Anna Black'
message='How can we assist you today?'
/>
/>

<Body
hover={{ color: "success" }}
text='Hover to change color'
/>
6 changes: 3 additions & 3 deletions playbook/app/pb_kits/playbook/utilities/_hover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

@mixin hover-color-classes($colors-list) {
@each $name, $color in $colors-list {
.hover_background_#{"" + $name}:hover {
.hover_background-#{"" + $name}:hover {
background-color: $color !important;
transition: background-color $transition-speed ease;
}
.hover_color_#{"" + $name}:hover {
.hover_color-#{"" + $name}:hover {
color: $color !important;
transition: color $transition-speed ease;
}
Expand Down Expand Up @@ -48,4 +48,4 @@
@include hover-color-classes($hover_colors);
@include hover-color-classes($border_colors);
@include hover-color-classes($text_colors);
@include hover-color-classes($category_colors);
@include hover-color-classes($category_colors);
4 changes: 2 additions & 2 deletions playbook/app/pb_kits/playbook/utilities/globalProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,9 +213,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.color ? `hover_color-${hover.color } ` : '';
return css;
},

Expand Down
79 changes: 79 additions & 0 deletions playbook/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import React from 'react';
import { render, screen } from '../../test-utils';
import Body from '../../../pb_body/_body';

const testSubject = 'body';

test('Hover Props: returns proper class name', () => {
const testIdColor = `${testSubject}-hover-color-red`;
render(
<Body
data={{ testid: testIdColor }}
hover={{ color: 'red' }}
text="Hi"
/>
);

let kit = screen.getByTestId(testIdColor);
let expectedClassName = `hover_color-red`;
expect(kit).toHaveClass(expectedClassName);

const testIdBackground = `${testSubject}-hover-background-blue`;
render(
<Body
data={{ testid: testIdBackground }}
hover={{ background: 'blue' }}
text="Hi"
/>
);

kit = screen.getByTestId(testIdBackground);
expectedClassName = `hover_background-blue`;
expect(kit).toHaveClass(expectedClassName);

const testIdShadow = `${testSubject}-hover-shadow-deep`;
render(
<Body
data={{ testid: testIdShadow }}
hover={{ shadow: 'deep' }}
text="Hi"
/>
);

kit = screen.getByTestId(testIdShadow);
expectedClassName = `hover_shadow_deep`;
expect(kit).toHaveClass(expectedClassName);

const testIdScale = `${testSubject}-hover-scale`;
render(
<Body
data={{ testid: testIdScale }}
hover={{ scale: 'xl' }}
text="Test"
/>
);

kit = screen.getByTestId(testIdScale);
expectedClassName = `hover_scale_xl`;
expect(kit).toHaveClass(expectedClassName);

const testIdMultiple = `${testSubject}-hover-multiple`;
render(
<Body
data={{ testid: testIdMultiple }}
hover={{
color: 'green',
background: 'error',
shadow: 'deeper',
scale: 'xl',
}}
text="Hi"
/>
);

kit = screen.getByTestId(testIdMultiple);
expect(kit).toHaveClass('hover_color-green');
expect(kit).toHaveClass('hover_background-error');
expect(kit).toHaveClass('hover_shadow_deeper');
expect(kit).toHaveClass('hover_scale_xl');
});
2 changes: 1 addition & 1 deletion playbook/lib/playbook/hover.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ def hover_props
if responsive
value.each do |key, val|
if %i[background color].include?(key)
css += "#{prefix}_#{key}_#{val} " if hover_attributes.include?(key.to_s)
css += "#{prefix}_#{key}-#{val} " if hover_attributes.include?(key.to_s)
elsif hover_attributes.include?(key.to_s) && send("hover_#{key}_values").include?(val.to_s)
css += "#{prefix}_#{key}_#{val} "
end
Expand Down
41 changes: 41 additions & 0 deletions playbook/spec/playbook/global_props/hover_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# frozen_string_literal: true

require_relative "../../../app/pb_kits/playbook/pb_body/body"

RSpec.describe Playbook::PbBody::Body do
subject { Playbook::PbBody::Body }

describe "#classname" do
it "returns correct hover classnames", :aggregate_failures do
%w[deep deeper deepest].each do |value|
instance = subject.new({ hover: { shadow: value } })
expect(instance.classname).to include("hover_shadow_#{value}")
end

%w[sm md lg].each do |value|
instance = subject.new({ hover: { scale: value } })
expect(instance.classname).to include("hover_scale_#{value}")
end

%w[red blue green].each do |value|
instance = subject.new({ hover: { background: value } })
expect(instance.classname).to include("hover_background-#{value}")

instance = subject.new({ hover: { color: value } })
expect(instance.classname).to include("hover_color-#{value}")
end

hover_props = {
shadow: "deep",
scale: "sm",
background: "red",
color: "blue",
}
instance = subject.new({ hover: hover_props })
expect(instance.classname).to include("hover_shadow_deep")
expect(instance.classname).to include("hover_scale_sm")
expect(instance.classname).to include("hover_background-red")
expect(instance.classname).to include("hover_color-blue")
end
end
end
Loading