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

feat(chip): add / modify chip component #181

Merged
merged 14 commits into from
Jul 25, 2019
Merged

feat(chip): add / modify chip component #181

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f337a1f
feat(chip): add the chip component
Apr 17, 2019
7cbbdc5
add micro chips
Jul 18, 2019
a2943d9
starts to improve api for chips
Jul 18, 2019
421ef33
creates chip with icon
Jul 23, 2019
32970e6
adds tests
Jul 23, 2019
9a6c603
removes large svgs, makes edits for rtl support
Jul 24, 2019
63af795
removes icon styles
Jul 24, 2019
91db738
adds keyboard nav support
Jul 24, 2019
f90660d
adds more tets
Jul 24, 2019
b6f2efa
makes var name longer
Jul 24, 2019
6ff5a0f
changes keycode to key bc keycode is deprecated
Jul 24, 2019
9eb0aff
adds hover styles for non mobile
Jul 24, 2019
38fd572
adds rtl story
Jul 25, 2019
6bb2914
small fixes
Jul 25, 2019
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
2 changes: 1 addition & 1 deletion packages/core/src/components/chip/_chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ $ray-chip-height: $ray-spacing-xs * 2 + 1rem;
}
}

&:focus {
.#{$ray-accessibility-class} &:focus {
gmharrison marked this conversation as resolved.
Show resolved Hide resolved
box-shadow: $ray-box-shadow-focus-state;
}
}
Expand Down
47 changes: 41 additions & 6 deletions packages/core/stories/chip.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,19 @@ storiesOf('Chip', module).add('default', () => {
</>
);
});
storiesOf('Chip', module).add('default RTL', () => {
setTimeout(initChip);
return (
<div dir="rtl">
<div tabIndex="1" className="ray-chip">
Neighborhoods
</div>
<div tabIndex="1" className="ray-chip ray-chip--active">
Offices
</div>
</div>
);
});
storiesOf('Chip', module).add('micro', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: you can chain these .add statements

setTimeout(initChip);
return (
Expand Down Expand Up @@ -69,15 +82,37 @@ storiesOf('Chip', module).add('with icon', () => {
</div>
);
});
storiesOf('Chip', module).add('micro', () => {
storiesOf('Chip', module).add('RTL with icon', () => {
setTimeout(initChip);
return (
<div>
<div tabIndex="1" className="ray-chip ray-chip--micro">
Offices
<div dir="rtl">
<div tabIndex="1" className="ray-chip">
<div className="ray-chip__icon-wrapper">
<svg width="10" height="10" viewBox="0 0 10 10">
<rect
width="10"
height="10"
strokeWidth="2"
stroke="#0000FF"
fill="#FFFFFF"
/>
</svg>
<span className="ray-chip__text">Furnished</span>
</div>
</div>
<div tabIndex="1" className="ray-chip ray-chip--micro ray-chip--active">
Offices
<div tabIndex="1" className="ray-chip ray-chip--active">
<div className="ray-chip__icon-wrapper">
<svg width="10" height="10" viewBox="0 0 10 10">
<rect
width="10"
height="10"
strokeWidth="2"
stroke="#0000FF"
fill="#FFFFFF"
/>
</svg>
<span className="ray-chip__text">Offices</span>
</div>
</div>
</div>
);
Expand Down