Skip to content

#1302 Callout: Allow callout to specify background color #1403

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

Merged
cschleiden merged 11 commits into from
Apr 21, 2017
Merged

#1302 Callout: Allow callout to specify background color #1403

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b3e5e7e
#1302 Callout: Allow callout to specify beak background color
jechayav Apr 3, 2017
081dee9
#1302 Add changes description
jechayav Apr 3, 2017
0d854df
Merge branch 'master' into users/jechayav/4_3
jechayav Apr 3, 2017
e0a6acb
Merge branch 'master' into users/jechayav/4_3
micahgodbolt Apr 4, 2017
e228ef9
Callout: Allow Callout to specify background color.
jechayav Apr 5, 2017
927a765
#1302 Add change description
jechayav Apr 5, 2017
135adba
Merge branch 'users/jechayav/4_3' of https://github.com/jechayav/offi…
jechayav Apr 5, 2017
8cc6ba7
#1302 remove earlier change description
jechayav Apr 5, 2017
786f5eb
#1302 add backgroundColor props comment
jechayav Apr 5, 2017
2f2b872
Merge branch 'master' into users/jechayav/4_3
micahgodbolt Apr 20, 2017
df08f17
Merge branch 'master' into users/jechayav/4_3
cschleiden Apr 21, 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
10 changes: 10 additions & 0 deletions common/changes/users-jechayav-4_3_2017-04-03-18-22.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "Callout: Allow Callout to specify beak backgroud color.",

@cschleiden cschleiden Apr 4, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit, spelling

"type": "minor"
}
],
"email": "jechayav@microsoft.com"
}
6 changes: 6 additions & 0 deletions packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@ export interface ICalloutProps extends React.Props<Callout | CalloutContent> {
*/
beakWidth?: number;

/**
* The background color of the beak.
* @default #ffffff
*/
beakColor?: string;

@dzearing dzearing Apr 5, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This really seems like a very weird thing to me.

Wouldn't we want to define the entire background color of the callout and make the background and beak match? Why specifically the beak, why "Color" instead of "BackgroundColor"? Why default to white?


/**
* The bounding rectangle for which the contextual menu can appear in.
*/
Expand Down
7 changes: 5 additions & 2 deletions packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
preventDismissOnScroll: false,
isBeakVisible: true,
beakWidth: 16,
beakColor: "#ffffff",

@mikewheaton mikewheaton Apr 4, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@dzearing: Is there any way we can make this value themeable?

gapSpace: 16,
directionalHint: DirectionalHint.bottomAutoEdge
};
Expand Down Expand Up @@ -96,7 +97,8 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
isBeakVisible,
beakStyle,
children,
beakWidth } = this.props;
beakWidth,
beakColor } = this.props;
let { positions } = this.state;
let beakStyleWidth = beakWidth;

Expand All @@ -110,7 +112,8 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
top: positions && positions.beakPosition ? positions.beakPosition.top : BEAK_ORIGIN_POSITION.top,
left: positions && positions.beakPosition ? positions.beakPosition.left : BEAK_ORIGIN_POSITION.left,
height: beakStyleWidth,
width: beakStyleWidth
width: beakStyleWidth,
backgroundColor: beakColor,
};

let directionalClassName = positions && positions.directionalClassName ? `ms-u-${positions.directionalClassName}` : '';
Expand Down