Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

feat(Provider): set scrollbar styles #1223

Merged
merged 6 commits into from
Apr 16, 2019
Merged

feat(Provider): set scrollbar styles #1223

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
23f3c87
feat(Provider): set scrollbar styles
layershifter Apr 15, 2019
b08a2de
fix CI
layershifter Apr 15, 2019
e405e70
add changelog entries
layershifter Apr 15, 2019
ec8c127
revert comment
layershifter Apr 15, 2019
4859379
move styles to Teams theme
layershifter Apr 15, 2019
588da2c
Merge branches 'feat/style-scrollbar' and 'master' of https://github.…
layershifter Apr 16, 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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Add file video icon on `Icon` component @luzhon ([#1205](https://github.com/stardust-ui/react/pull/1250))
- Export `call-missed-line` icon in Teams theme @96andrei ([#1203](https://github.com/stardust-ui/react/pull/1203))
- Add `pointing` prop to `Popup` ([#1198](https://github.com/stardust-ui/react/pull/1198))
- Add styles for scrollbar to `ProviderBox` in Teams Theme ([#1223](https://github.com/stardust-ui/react/pull/1223))

<!--------------------------------[ v0.27.0 ]------------------------------- -->
## [v0.27.0](https://github.com/stardust-ui/react/tree/v0.27.0) (2019-04-10)
Expand Down
22 changes: 0 additions & 22 deletions docs/src/components/Sidebar/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,28 +133,6 @@ class Sidebar extends React.Component<any, any> {
left: 0,
padding: 0,
maxHeight: '100vh',

'::-webkit-scrollbar': {
'-webkit-appearance': 'none',
height: '10px',
width: '10px',
},
'::-webkit-scrollbar-track': {
background: 'rgba(255, 255, 255, 0.1)',
borderRadius: 0,
},
'::-webkit-scrollbar-thumb': {
cursor: 'pointer',
borderRadius: '5px',
background: 'rgba(255, 255, 255, 0.25)',
transition: 'color 0.2s ease',
},
'::-webkit-scrollbar-thumb:window-inactive': {
background: 'rgba(255, 255, 255, 0.15)',
},
'::-webkit-scrollbar-thumb:hover': {
background: 'rgba(255, 255, 255, 0.35)',
},
}

const menuSectionStyles: ICSSInJSStyle = {
Expand Down
5 changes: 2 additions & 3 deletions packages/react/src/lib/handleRef.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,8 @@ const handleRef = <N>(ref: React.Ref<N>, node: N) => {
}

if (ref !== null && typeof ref === 'object') {
// @ts-ignore The `current` property is defined as readonly, however it's a valid way because
// `ref` is a mutable object
ref.current = node
// The `current` property is defined as readonly, however it's a valid way because `ref` is a mutable object
;(ref as React.MutableRefObject<N>).current = node
Copy link
Contributor

Choose a reason for hiding this comment

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

Is the ; cruft?

Copy link
Member Author

Choose a reason for hiding this comment

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

Nope and this is sad: prettier/prettier#4630 😭

Copy link
Member Author

Choose a reason for hiding this comment

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

image
https://stardust-ui.github.io/react/shorthand-props
The same case, actually 😨

Copy link
Contributor

Choose a reason for hiding this comment

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

Ok, just to mention I hate this, especially that we are not using ; at all... Sad day for me :D

Copy link
Contributor

Choose a reason for hiding this comment

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

Even worse with the provided example, it is used in our guides... :\

}
}

Expand Down
30 changes: 28 additions & 2 deletions packages/react/src/themes/base/components/Provider/providerBoxStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,35 @@
import { ICSSInJSStyle } from '../../../types'
import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types'
import { ProviderBoxVariables } from './providerBoxVariables'

export default {
root: ({ variables: v }): ICSSInJSStyle => ({
root: ({
variables: v,
}: ComponentStyleFunctionParam<never, ProviderBoxVariables>): ICSSInJSStyle => ({
background: v.background,
color: v.color,
textAlign: 'left',

'& ::-webkit-scrollbar': {
height: v.scrollbarHeight,
width: v.scrollbarWidth,

':disabled': {
display: 'none',
},
},
'& ::-webkit-scrollbar-thumb': {
borderRadius: v.scrollbarThumbBorderRadius,
border: `solid ${v.scrollbarThumbBorderSize} transparent`,
backgroundClip: 'content-box',
backgroundColor: v.scrollbarThumbBackgroundColor,

':hover': {
backgroundColor: v.scrollbarThumbHoverBackgroundColor,
border: `solid ${v.scrollbarThumbHoverBorderSize} transparent`,
},
},
'& ::-webkit-scrollbar-track': {
background: 'transparent',
},
}),
}
22 changes: 22 additions & 0 deletions packages/react/src/themes/base/components/Provider/providerBoxVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,31 @@
import { pxToRem } from '../../../../lib'

export interface ProviderBoxVariables {
background: string
color: string

scrollbarHeight: string
scrollbarWidth: string

scrollbarThumbBackgroundColor: string
scrollbarThumbBorderRadius: string
scrollbarThumbBorderSize: string

scrollbarThumbHoverBackgroundColor: string
scrollbarThumbHoverBorderSize: string
}

export default (siteVariables): ProviderBoxVariables => ({
background: siteVariables.bodyBackground,
color: siteVariables.bodyColor,

scrollbarHeight: pxToRem(16),
scrollbarWidth: pxToRem(16),

scrollbarThumbBackgroundColor: siteVariables.gray06,
Copy link
Contributor

Choose a reason for hiding this comment

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

Oops, base theme doesn't have gray06 and gray04 :S

Copy link
Member Author

@layershifter layershifter Apr 15, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Definitely, I initially overlooked the path of styles, now they are in correct place.

P.S. Motivation to add them only to Teams theme:

  • one of the frequent questions in SUI: "How I can disable custom scrollbars?"
  • this feature is not cross-browser

Copy link
Contributor

Choose a reason for hiding this comment

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

I would really love to see this as part of base theme, but I see your points. Let's think about this in the future. The base theme's provider should have custom scrollbar by default, at least in my opinion. Agreed that we should have way of enabling or disabling this behavior as well. The main reason for this is that, I don't see much different ways of defining the scrollbar, more over we can customize it trough it's variables.

scrollbarThumbBorderRadius: pxToRem(9),
scrollbarThumbBorderSize: pxToRem(4),

scrollbarThumbHoverBackgroundColor: siteVariables.gray04,
scrollbarThumbHoverBorderSize: pxToRem(2),
})