Skip to content

Fix control bar button label styling. Fix screenshare button hover and checked styling.#1178

Merged
JamesBurnside merged 12 commits intomainfrom
jaburnsi/screenshare-btn-hover-fix
Nov 30, 2021
Merged

Fix control bar button label styling. Fix screenshare button hover and checked styling.#1178
JamesBurnside merged 12 commits intomainfrom
jaburnsi/screenshare-btn-hover-fix

Conversation

@JamesBurnside
Copy link
Copy Markdown
Member

@JamesBurnside JamesBurnside commented Nov 29, 2021

What

  1. Fix background color and label of screenshare button
  • NOTE: MOVED STYLING FROM COMPOSITES TO COMPONENT
  1. Fix our control bar buttons so that the label can be styled correctly
  • Simplified our label code - removed our custom label rendering logic, please review

Why

https://skype.visualstudio.com/SPOOL/_workitems/edit/2633102

How Tested

  • Locally tested:

    • image
    • image
    • image
    • image
  • Will check UI tests once they complete.

  • Tested keyboard nav

    • @alcail please comment any extra accessibility tests to check

);
};

const screenshareButtonStyles = (theme: Theme): IButtonStyles => ({
Copy link
Copy Markdown
Member Author

@JamesBurnside JamesBurnside Nov 29, 2021

Choose a reason for hiding this comment

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

NOTE: Now in components and not composites so our customers get this behavior

onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon}
/>
>
{props.showLabel ? labelText : <></>}
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

NOTE: No longer using a custom render function (so get the styling from props correctly)

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@alcail
Copy link
Copy Markdown
Contributor

alcail commented Nov 29, 2021

Awesome.
I just checked to make sure that when focused on (navigated to through keyboard) the outline is indeed white and Narrator indeed says "Stop sharing button", and perfect :)

@github-actions
Copy link
Copy Markdown
Contributor

@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Moved code",
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.

Can we be specific in this comment about which code was removed?
Helps when we go over the combined changelog later.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This is a no-op for this package (nothing changes from the perspective of the composites package) so type is 'none'. When the changelog is generated it omits these

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.

Oh cool. Didn't know that.

const screenshareButtonStyles = (theme: Theme): IButtonStyles => ({
rootChecked: {
background: theme.palette.themePrimary,
color: DefaultPalette.white,
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.

curious about the usage of DefaultPalette for color instead of theme?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I left this as is (this code was just moved from one file to another) but also curious on this too if anyone knows why default palette is used

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.

I think @PorterNan worked on this originally.

@JamesBurnside
Copy link
Copy Markdown
Member Author

Awesome. I just checked to make sure that when focused on (navigated to through keyboard) the outline is indeed white and Narrator indeed says "Stop sharing button", and perfect :)

Confirmed both, thanks!

@JamesBurnside JamesBurnside enabled auto-merge (squash) November 30, 2021 01:05
@github-actions
Copy link
Copy Markdown
Contributor

@JamesBurnside JamesBurnside merged commit 80ddf49 into main Nov 30, 2021
@JamesBurnside JamesBurnside deleted the jaburnsi/screenshare-btn-hover-fix branch November 30, 2021 01:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants