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

CSS Modules: Facepile #1128

Merged
merged 8 commits into from
Feb 27, 2017
Merged

CSS Modules: Facepile #1128

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c6f8b19
Converting to module css
aleksandrjPersonal Feb 22, 2017
d3e6eb5
Merge branch 'module-css-updates' into algemb/css_Facepile
micahgodbolt Feb 24, 2017
b649f17
Init fix for persona add button, need to fix persona first
micahgodbolt Feb 24, 2017
589e8f0
Merge branch 'module-css-updates' into algemb/css_Facepile
micahgodbolt Feb 27, 2017
6ddb538
Merge branch 'module-css-updates' into algemb/css_Facepile
micahgodbolt Feb 27, 2017
ba2e12d
Refactored facepile to use onRenderIcon of persona
micahgodbolt Feb 27, 2017
d1ffb18
CLeanup and fix tests
micahgodbolt Feb 27, 2017
ab0a32d
Update Facepile.scss
micahgodbolt Feb 27, 2017
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
102 changes: 50 additions & 52 deletions packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,65 @@
@import '../../common/common';

:global {
.ms-Facepile {
position: relative;
width: auto;
}

.ms-Facepile-clear {
clear: both;
}
.root {
position: relative;
width: auto;
}

.ms-Facepile-itemButton {
@include focus-outline();
position: relative;
text-align: center;
@include float(left);
padding: 0;
@include margin-right(4px);
margin-bottom: 4px;
border-radius: 50%;
vertical-align: top;
.clear {
clear: both;
}

.ms-Persona-details {
flex: 1 0 auto;
}
}
.itemButton {
@include focus-outline();
position: relative;
text-align: center;
@include float(left);
padding: 0;
@include margin-right(4px);
margin-bottom: 4px;
border-radius: 50%;
vertical-align: top;

button.ms-Facepile-itemButton {
display: inline;
background: none;
padding: 0;
cursor: pointer;
border: none;
:global(.ms-Persona-details) {
flex: 1 0 auto;
}
}

button.ms-Facepile-addButton {
font-size: $ms-font-size-m;
color: $ms-color-white;
background-color: $ms-color-themePrimary;

&:hover, &:focus {
background-color: $ms-color-themeDark;
}
button.itemButton {
display: inline;
background: none;
padding: 0;
cursor: pointer;
border: none;
}

&:active {
background-color: $ms-color-themeDarker;
}
button.addButton {
font-size: $ms-font-size-m;
color: $ms-color-white;
background-color: $ms-color-themePrimary;

&:disabled,
&.is-disabled {
background-color: $ms-color-neutralTertiaryAlt;
}
&:hover, &:focus {
background-color: $ms-color-themeDark;
}

button.ms-Facepile-overflowButton {
font-size: $ms-font-size-m;
color: $ms-color-neutralSecondary;
background-color: $ms-color-neutralLight;
&:active {
background-color: $ms-color-themeDarker;
}

button.ms-Facepile-descriptiveOverflowButton {
font-size: $ms-font-size-s;
color: $ms-color-neutralSecondary;
background-color: $ms-color-neutralLight;
&:disabled,
&.isDisabled {
Copy link
Member

Choose a reason for hiding this comment

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

i'm not sure isDisabled is used.

background-color: $ms-color-neutralTertiaryAlt;
}
}

button.overflowButton {
font-size: $ms-font-size-m;
color: $ms-color-neutralSecondary;
background-color: $ms-color-neutralLight;
}

button.descriptiveOverflowButton {
font-size: $ms-font-size-s;
color: $ms-color-neutralSecondary;
background-color: $ms-color-neutralLight;
}
65 changes: 36 additions & 29 deletions packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* tslint:disable:no-unused-variable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as ReactTestUtils from 'react-addons-test-utils';
/* tslint:enable:no-unused-variable */
import { mount, shallow } from 'enzyme';
import { setRTL } from '../../Utilities';
Expand Down Expand Up @@ -37,53 +38,58 @@ describe('Facepile', () => {
});

it('renders with only add button if no personas found and addButtonProps are not null', () => {
const wrapper = shallow(
const wrapper = ReactTestUtils.renderIntoDocument(
<Facepile
personas={ [] }
addButtonProps={ {} }
showAddButton={ true }
/>);
let addButton = wrapper.find('.ms-Icon--AddFriend');
/>);
let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);

let addButton = facepile.querySelectorAll('.ms-Icon--AddFriend');
expect(addButton).to.have.length(1, 'Add button should render');
let buttons = wrapper.find('.ms-Facepile-itemButton');
let buttons = facepile.querySelectorAll('.ms-Facepile-itemButton');
expect(buttons).to.have.length(1, 'Only one button should be rendered');
});

it('renders chevron overflow button if overflowButtonProps are not null and OverflowButtonType equals downArrow', () => {
const wrapper = shallow(
const wrapper = ReactTestUtils.renderIntoDocument(
<Facepile
personas={ [] }
overflowButtonProps={ {} }
overflowButtonType={ OverflowButtonType.downArrow }
/>);
let overflowButton = wrapper.find('.ms-Icon--ChevronDown');
/>);
let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
let overflowButton = facepile.querySelectorAll('.ms-Icon--ChevronDown');
expect(overflowButton).to.have.length(1, 'Overflow button should render');
let buttons = wrapper.find('.ms-Facepile-itemButton');
let buttons = facepile.querySelectorAll('.ms-Facepile-itemButton');
expect(buttons).to.have.length(1, 'Only one button should be rendered');
});

it('renders more overflow button if overflowButtonProps are not null as OverflowButtonType equals more', () => {
const wrapper = shallow(
const wrapper = ReactTestUtils.renderIntoDocument(
<Facepile
personas={ [] }
overflowButtonProps={ {} }
overflowButtonType={ OverflowButtonType.more }
/>);
let overflowButton = wrapper.find('.ms-Icon--More');
/>);
let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
let overflowButton = facepile.querySelectorAll('.ms-Icon--More');
expect(overflowButton).to.have.length(1, 'Overflow button should render');
let buttons = wrapper.find('.ms-Facepile-itemButton');
let buttons = facepile.querySelectorAll('.ms-Facepile-itemButton');
expect(buttons).to.have.length(1, 'Only one button should be rendered');
});

it('renders without descriptive overflow button if overflowButtonProps are not null and maximum personas are not exceeded', () => {
const wrapper = shallow(
const wrapper = ReactTestUtils.renderIntoDocument(
<Facepile personas={ [] }
overflowButtonProps={ {} }
overflowButtonType={ OverflowButtonType.descriptive }
/>);
let overflowButton = wrapper.find('.ms-Facepile-descriptiveOverflowButton');
/>);
let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
let overflowButton = facepile.querySelectorAll('.ms-Facepile-descriptiveOverflowButton');
expect(overflowButton).to.have.length(0, 'Overflow button should not render');
let buttons = wrapper.find('.ms-Facepile-itemButton');
let buttons = facepile.querySelectorAll('.ms-Facepile-itemButton');
expect(buttons).to.have.length(0, 'No buttons should be rendered');
});

Expand All @@ -95,7 +101,7 @@ describe('Facepile', () => {
maxDisplayablePersonas={ 5 }
overflowButtonProps={ {} }
overflowButtonType={ OverflowButtonType.descriptive }
/>);
/>);
let overflowButton = wrapper.find('.ms-Facepile-descriptiveOverflowButton');
expect(overflowButton).to.have.length(1, 'Overflow button should render');
let buttons = wrapper.find('.ms-Facepile-itemButton');
Expand All @@ -107,7 +113,7 @@ describe('Facepile', () => {
<Facepile
personas={ facepilePersonas.concat(facepilePersonas, facepilePersonas, facepilePersonas) }
maxDisplayablePersonas={ 2 }
/>);
/>);
let buttons = wrapper.find('.ms-Facepile-itemButton');
expect(buttons).to.have.length(2, 'Only two buttons should be rendered');
});
Expand All @@ -124,30 +130,31 @@ describe('Facepile', () => {
const wrapper = mount(
<Facepile
personas={ personas }
/>);
/>);
let buttons = wrapper.find('.ms-Facepile-itemButton');
expect(buttons).to.have.length(1, 'Clickable Persona should render');
buttons.simulate('click');
expect(clicked).to.be.equal(1, 'Persona should have been clickable');
});

it('personas and buttons render default size if not specified', () => {
const wrapper = shallow(
const wrapper = ReactTestUtils.renderIntoDocument(
<Facepile
personas={ facepilePersonas }
addButtonProps={ {} }
showAddButton={ true }
overflowButtonProps={ {} }
overflowButtonType={ OverflowButtonType.downArrow }
/>);
let addButton = wrapper.find('.ms-Persona.ms-Persona--xs.ms-Facepile-addButton.ms-Facepile-itemButton');
/>);
let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
let addButton = facepile.querySelectorAll('.ms-Facepile-addButton .ms-Persona.ms-Persona--xs');
expect(addButton).to.have.length(1, 'Add button should render');
let faces = wrapper.find(Persona);
let faces = facepile.querySelectorAll('.ms-Facepile-person');
expect(faces).to.have.length(facepilePersonas.length, 'personas should render');
wrapper.find(Persona).forEach((node) => {
expect(node.html()).to.contain('ms-Persona--xs');
});
let overflowButton = wrapper.find('.ms-Persona.ms-Persona--xs.ms-Facepile-overflowButton.ms-Facepile-itemButton');
for (let i = 0; i < faces.length; ++i) {
expect(faces[i].innerHTML).to.have.string('ms-Persona--xs');
}
let overflowButton = facepile.querySelectorAll('.ms-Facepile-overflowButton .ms-Persona--xs');
expect(overflowButton).to.have.length(1, 'Overflow button should render');
});

Expand All @@ -157,7 +164,7 @@ describe('Facepile', () => {
<Facepile
personas={ facepilePersonas }
personaSize={ PersonaSize.extraExtraSmall }
/>);
/>);
let faces = wrapper.find(Persona);
expect(faces).to.have.length(facepilePersonas.length, 'XXSmall personas should render');
wrapper.find(Persona).forEach((node) => {
Expand All @@ -169,7 +176,7 @@ describe('Facepile', () => {
<Facepile
personas={ facepilePersonas }
personaSize={ PersonaSize.small }
/>);
/>);
faces = wrapper.find(Persona);
expect(faces).to.have.length(facepilePersonas.length, 'Small personas should render');
wrapper.find(Persona).forEach((node) => {
Expand Down
Loading