Skip to content

Fixed and updated calls of Primary/Default buttons for Chat, Calling and Storybook #883

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
alcail merged 14 commits into from
Oct 7, 2021
Merged

Fixed and updated calls of Primary/Default buttons for Chat, Calling and Storybook #883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a63ee77
fixed and updated Primary/Default button for Chat
alcail Oct 5, 2021
da17e3d
fixed and updated Primary/Default Btns for Calling
alcail Oct 5, 2021
956e1ac
updated Button calls in Storybooks
alcail Oct 5, 2021
df7821e
Updated Default button of Chat header in Sample
alcail Oct 5, 2021
6727fa9
Updated Storybook snapshots
alcail Oct 5, 2021
83b697e
came back to className and styles for buttons
alcail Oct 5, 2021
ce46b48
Change files
alcail Oct 5, 2021
2d1b129
re-updated Storybook snapshots after merging
alcail Oct 5, 2021
5489faf
Update @internal-storybook-836a5c69-51d1-40c1-8579-cb4f47a81330.json
alcail Oct 5, 2021
9b3c40d
removed margin-top of button added from rebasing
alcail Oct 6, 2021
c20143e
Update js bundle automation snapshots
github-actions[bot] Oct 6, 2021
9bf4027
Update js bundle automation snapshots
github-actions[bot] Oct 6, 2021
77c600c
Update composite automation snapshots
github-actions[bot] Oct 7, 2021
27b55b2
Merge branch 'main' into alcail/a11yChatButtonsAquaticHCMode
alcail Oct 7, 2021
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
7 changes: 7 additions & 0 deletions change/@internal-react-components-f6169beb-2f2b-40e5-b4fd-9b4a19d43395.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "updated call of Primary/Default buttons",
"packageName": "@internal/react-components",
"email": "alcail@microsoft.com",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions change/@internal-react-composites-429287a1-8f4d-4b6c-969a-f0c04175ed49.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "updated call of Primary/Default buttons",
"packageName": "@internal/react-composites",
"email": "alcail@microsoft.com",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions change/@internal-storybook-836a5c69-51d1-40c1-8579-cb4f47a81330.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "updated call of Primary/Default buttons",
"packageName": "@internal/storybook",
"email": "alcail@microsoft.com",
"dependentChangeType": "none"
}
12 changes: 8 additions & 4 deletions packages/react-components/src/components/MessageThread.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
newMessageButtonContainerStyle,
messageThreadContainerStyle,
chatStyle,
buttonWithIconStyles,
newMessageButtonStyle,
messageStatusContainerStyle,
noMessageStatusStyle,
Expand Down Expand Up @@ -184,10 +185,13 @@ export interface JumpToNewMessageButtonProps {
const DefaultJumpToNewMessageButton = (props: JumpToNewMessageButtonProps): JSX.Element => {
const { onClick } = props;
return (
<PrimaryButton className={newMessageButtonStyle} onClick={onClick}>
<Icon iconName="Down" className={DownIconStyle} />
{NEW_MESSAGES}
</PrimaryButton>
<PrimaryButton
className={newMessageButtonStyle}
styles={buttonWithIconStyles}
text={NEW_MESSAGES}
Copy link
Copy Markdown
Member

@JamesBurnside JamesBurnside Oct 6, 2021

Choose a reason for hiding this comment

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

(unrelated to this PR) This needs moved to the locale strings

Copy link
Copy Markdown
Contributor Author

@alcail alcail Oct 6, 2021

Choose a reason for hiding this comment

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

will assigned a task for myself to that after

onClick={onClick}
onRenderIcon={() => <Icon iconName="Down" className={DownIconStyle} />}
/>
);
};

Expand Down
11 changes: 10 additions & 1 deletion packages/react-components/src/components/styles/MessageThread.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import { CSSProperties } from 'react';
import { ComponentSlotStyle } from '@fluentui/react-northstar';
import { mergeStyles } from '@fluentui/react';
import { IButtonStyles, mergeStyles } from '@fluentui/react';

/**
* @private
Expand Down Expand Up @@ -145,6 +145,15 @@ export const newMessageButtonStyle = mergeStyles({
width: 'fit-content'
});

/**
* @private
*/
export const buttonWithIconStyles: IButtonStyles = {
textContainer: {
display: 'contents'
Copy link
Copy Markdown
Contributor

@prprabhu-ms prprabhu-ms Oct 7, 2021

Choose a reason for hiding this comment

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

Could you double check if this works well with a11y? MDN says that child elements' aria tags might be skipped: https://developer.mozilla.org/en-US/docs/Web/CSS/display#box

Copy link
Copy Markdown
Contributor Author

@alcail alcail Oct 7, 2021

Choose a reason for hiding this comment

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

verified buttons are indeed well named through narrator and accessibility tags (see 'Name'). Thanks for asking to check that and reading about A11y :)
image

}
};

/**
* @private
*/
Expand Down
12 changes: 8 additions & 4 deletions packages/react-composites/src/composites/CallComposite/Error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
endCallContainerStyle,
endCallTitleStyle,
buttonStyle,
buttonWithIconStyles,
mainStackTokens,
buttonsStackTokens,
upperStackTokens,
Expand Down Expand Up @@ -36,10 +37,13 @@ export function Error(props: ErrorProps): JSX.Element {
<Stack tokens={upperStackTokens}>
<div className={endCallTitleStyle}>{title}</div>
<Stack horizontal tokens={buttonsStackTokens}>
<PrimaryButton className={buttonStyle} onClick={props.rejoinHandler}>
<Video20Filled primaryFill="currentColor" className={videoCameraIconStyle} />
{rejoinCall}
</PrimaryButton>
<PrimaryButton
className={buttonStyle}
styles={buttonWithIconStyles}
text={rejoinCall}
Copy link
Copy Markdown
Member

@JamesBurnside JamesBurnside Oct 6, 2021

Choose a reason for hiding this comment

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

Also moved to locale strings file (maybe worth filing a bug with these instances in them)

onClick={props.rejoinHandler}
onRenderIcon={() => <Video20Filled className={videoCameraIconStyle} />}
/>
</Stack>
<div className={bottomStackFooterStyle}>
{props.reason ? (
Expand Down
10 changes: 5 additions & 5 deletions packages/react-composites/src/composites/CallComposite/StartCallButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import { PrimaryButton, mergeStyles } from '@fluentui/react';
import React from 'react';
import { buttonStyle, videoCameraIconStyle } from './styles/StartCallButton.styles';
import { buttonStyle, buttonWithIconStyles, videoCameraIconStyle } from './styles/StartCallButton.styles';
import { Video20Filled } from '@fluentui/react-icons';
import { useLocale } from '../localization';

Expand All @@ -28,10 +28,10 @@ export const StartCallButton = (props: StartCallButtonProps): JSX.Element => {
data-ui-id="call-composite-start-call-button"
disabled={isDisabled}
className={mergeStyles(buttonStyle, props.className)}
styles={buttonWithIconStyles}
text={locale.strings.call.startCallButtonText}
onClick={onClickHandler}
>
<Video20Filled primaryFill="currentColor" className={videoCameraIconStyle} />
{locale.strings.call.startCallButtonText}
</PrimaryButton>
onRenderIcon={() => <Video20Filled className={videoCameraIconStyle} />}
/>
);
};
11 changes: 10 additions & 1 deletion packages/react-composites/src/composites/CallComposite/styles/Error.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { IStackTokens, mergeStyles } from '@fluentui/react';
import { IButtonStyles, IStackTokens, mergeStyles } from '@fluentui/react';

/**
* @private
Expand Down Expand Up @@ -63,6 +63,15 @@ export const buttonStyle = mergeStyles({
padding: 0
});

/**
* @private
*/
export const buttonWithIconStyles: IButtonStyles = {
textContainer: {
display: 'contents'
}
};

/**
* @private
*/
Expand Down
11 changes: 10 additions & 1 deletion packages/react-composites/src/composites/CallComposite/styles/StartCallButton.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { mergeStyles } from '@fluentui/react';
import { IButtonStyles, mergeStyles } from '@fluentui/react';

/**
* @private
Expand All @@ -21,3 +21,12 @@ export const buttonStyle = mergeStyles({
width: '100%',
maxWidth: '18.75rem'
});

/**
* @private
*/
export const buttonWithIconStyles: IButtonStyles = {
textContainer: {
display: 'contents'
}
};
Binary file modified ...allComposite.test.ts-snapshots/call-configuration-page-Desktop-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ite.test.ts-snapshots/call-configuration-page-Mobile-Android-Portrait-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...st.ts-snapshots/call-configuration-page-camera-enabled-Desktop-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...pshots/call-configuration-page-camera-enabled-Mobile-Android-Portrait-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ts-snapshots/call-configuration-page-with-call-details-Desktop-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ots/call-configuration-page-with-call-details-Mobile-Android-Portrait-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...on.test.ts-snapshots/localized-call-configuration-page-Desktop-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s-snapshots/localized-call-configuration-page-Mobile-Android-Portrait-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ingComposite.test.ts-snapshots/meeting-pre-join-screen-Desktop-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ite.test.ts-snapshots/meeting-pre-join-screen-Mobile-Android-Portrait-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 3 additions & 4 deletions packages/storybook/.storybook/ThemeToolTipWithPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,13 @@ export const ThemeToolTipWithPanel = (props: { active: boolean }): JSX.Element =
/>
<Stack horizontal tokens={{ childrenGap: '1rem' }}>
<DefaultButton
text={'Clear'}
onClick={() => {
setTextValue('');
setError('');
}}
>
Clear
</DefaultButton>
<DefaultButton onClick={() => validateThenUpdate()}>Apply</DefaultButton>
/>
<DefaultButton text={'Apply'} onClick={() => validateThenUpdate()} />
</Stack>
</Stack>
</Panel>
Expand Down
23 changes: 13 additions & 10 deletions packages/storybook/stories/Examples/IncomingCallAlerts/IncomingCallAlertsDocs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,12 +91,16 @@ const IncomingCallToast = (props: IncomingCallToastProps): JSX.Element => {
</Stack>

<Stack horizontal tokens={{ childrenGap: 10 }}>
<DefaultButton onClick={() => onClickReject()} className={incomingCallRejectButtonStyle}>
<CallEnd20Filled primaryFill="currentColor" />
</DefaultButton>
<DefaultButton onClick={() => onClickAccept()} className={incomingCallAcceptButtonStyle}>
<Call20Filled primaryFill="currentColor" />
</DefaultButton>
<DefaultButton
className={incomingCallRejectButtonStyle}
onClick={() => onClickReject()}
onRenderIcon={() => <CallEnd20Filled />}
/>
<DefaultButton
className={incomingCallAcceptButtonStyle}
onClick={() => onClickAccept()}
onRenderIcon={() => <Call20Filled />}
/>
</Stack>
</Stack>
);
Expand Down Expand Up @@ -212,11 +216,10 @@ const IncomingCallModal = (props: WithTheme<IncomingCallModalProps>): JSX.Elemen

<DialogFooter>
<DefaultButton
onClick={() => onClickVideoToggle()}
style={{ background: palette.neutralLighterAlt, border: 'none' }}
>
{showLocalVideo ? <CallVideoIcon size="small" /> : <CallVideoOffIcon size="small" />}
</DefaultButton>
onClick={() => onClickVideoToggle()}
onRenderIcon={() => (showLocalVideo ? <CallVideoIcon size="small" /> : <CallVideoOffIcon size="small" />)}
/>

<DefaultButton
onClick={() => onClickAccept()}
Expand Down
33 changes: 19 additions & 14 deletions packages/storybook/stories/Examples/IncomingCallAlerts/components/IncomingCallAlerts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,16 @@ export const IncomingCallToast = (props: IncomingCallToastProps): JSX.Element =>
</Stack>

<Stack horizontal tokens={{ childrenGap: 10 }}>
<DefaultButton onClick={() => onClickReject()} className={incomingCallRejectButtonStyle}>
<CallEnd20Filled primaryFill="currentColor" />
</DefaultButton>
<DefaultButton onClick={() => onClickAccept()} className={incomingCallAcceptButtonStyle}>
<Call20Filled primaryFill="currentColor" />
</DefaultButton>
<DefaultButton
className={incomingCallRejectButtonStyle}
onClick={() => onClickReject()}
onRenderIcon={() => <CallEnd20Filled />}
/>
<DefaultButton
className={incomingCallAcceptButtonStyle}
onClick={() => onClickAccept()}
onRenderIcon={() => <Call20Filled />}
/>
</Stack>
</Stack>
);
Expand Down Expand Up @@ -149,15 +153,16 @@ export const IncomingCallModal = (props: IncomingCallModalProps): JSX.Element =>

<DialogFooter>
<DefaultButton
onClick={() => onClickVideoToggle()}
style={{ background: palette.neutralLighterAlt, border: 'none' }}
>
{showLocalVideo ? (
<Video20Filled primaryFill="currentColor" />
) : (
<VideoOff20Filled primaryFill="currentColor" />
)}
</DefaultButton>
onClick={() => onClickVideoToggle()}
onRenderIcon={() =>
showLocalVideo ? (
<Video20Filled primaryFill="currentColor" />
) : (
<VideoOff20Filled primaryFill="currentColor" />
)
}
/>

<DefaultButton
onClick={() => onClickAccept()}
Expand Down
7 changes: 6 additions & 1 deletion samples/Calling/src/app/styles/EndCall.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { IStackTokens, mergeStyles } from '@fluentui/react';
import { IButtonStyles, IStackTokens, mergeStyles } from '@fluentui/react';

export const mainStackTokens: IStackTokens = {
childrenGap: '1rem'
Expand Down Expand Up @@ -34,6 +34,11 @@ export const buttonStyle = mergeStyles({
fontSize: '0.875rem', // 14px
padding: 0
});
export const buttonWithIconStyles: IButtonStyles = {
textContainer: {
display: 'contents'
}
};
export const videoCameraIconStyle = mergeStyles({
marginRight: '0.375rem',
fontSize: '1.375rem'
Expand Down
8 changes: 7 additions & 1 deletion samples/Calling/src/app/styles/Footer.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { IStackStyles, IStackTokens, ITextFieldStyles, mergeStyles } from '@fluentui/react';
import { IButtonStyles, IStackStyles, IStackTokens, ITextFieldStyles, mergeStyles } from '@fluentui/react';

export const paneFooterStyles: IStackStyles = {
root: {
Expand Down Expand Up @@ -42,6 +42,12 @@ export const copyLinkButtonStyle = mergeStyles({
width: '90%'
});

export const buttonWithIconStyles: IButtonStyles = {
textContainer: {
display: 'contents'
}
};

export const copyIconStyle = mergeStyles({
marginRight: '0.5em'
});
21 changes: 14 additions & 7 deletions samples/Calling/src/app/views/CallError.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
endCallContainerStyle,
endCallTitleStyle,
buttonStyle,
buttonWithIconStyles,
mainStackTokens,
buttonsStackTokens,
upperStackTokens,
Expand Down Expand Up @@ -41,13 +42,19 @@ export const CallError = (props: CallErrorProps): JSX.Element => {
{title}
</Text>
<Stack horizontal tokens={buttonsStackTokens}>
<PrimaryButton className={buttonStyle} onClick={props.rejoinHandler}>
<Video20Filled className={videoCameraIconStyle} primaryFill="currentColor" />
{rejoinCall}
</PrimaryButton>
<DefaultButton className={buttonStyle} onClick={props.homeHandler}>
{goHomePage}
</DefaultButton>
<PrimaryButton
className={buttonStyle}
styles={buttonWithIconStyles}
text={rejoinCall}
onClick={props.rejoinHandler}
onRenderIcon={() => <Video20Filled className={videoCameraIconStyle} primaryFill="currentColor" />}
/>
<DefaultButton
className={buttonStyle}
styles={buttonWithIconStyles}
text={goHomePage}
onClick={props.homeHandler}
/>
</Stack>
<div className={bottomStackFooterStyle}>
{props.reason ? (
Expand Down
21 changes: 14 additions & 7 deletions samples/Calling/src/app/views/EndCall.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
endCallContainerStyle,
endCallTitleStyle,
buttonStyle,
buttonWithIconStyles,
mainStackTokens,
buttonsStackTokens,
upperStackTokens,
Expand Down Expand Up @@ -42,13 +43,19 @@ export const EndCall = (props: EndCallProps): JSX.Element => {
{leftCall}
</Text>
<Stack horizontal wrap tokens={buttonsStackTokens}>
<PrimaryButton className={buttonStyle} onClick={props.rejoinHandler}>
<Video20Filled className={videoCameraIconStyle} primaryFill="currentColor" />
{rejoinCall}
</PrimaryButton>
<DefaultButton className={buttonStyle} onClick={props.homeHandler}>
{goHomePage}
</DefaultButton>
<PrimaryButton
className={buttonStyle}
styles={buttonWithIconStyles}
text={rejoinCall}
onClick={props.rejoinHandler}
onRenderIcon={() => <Video20Filled className={videoCameraIconStyle} />}
/>
<DefaultButton
className={buttonStyle}
styles={buttonWithIconStyles}
text={goHomePage}
onClick={props.homeHandler}
/>
</Stack>
<div className={bottomStackFooterStyle}>
<Link href={feedbackLink}>Give Feedback</Link>&nbsp;on this sample app at Microsoft Q&amp;A
Expand Down
Loading
⚡