From 23f3c87feb1ef1bf1e32eeaee9da713138d4239f Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 15 Apr 2019 16:28:25 +0300 Subject: [PATCH 1/5] feat(Provider): set scrollbar styles --- docs/src/components/Sidebar/Sidebar.tsx | 22 -------------- .../components/Provider/providerBoxStyles.ts | 30 +++++++++++++++++-- .../Provider/providerBoxVariables.ts | 22 ++++++++++++++ 3 files changed, 50 insertions(+), 24 deletions(-) diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx index 5ca2a476e1..c1ed9e61fc 100644 --- a/docs/src/components/Sidebar/Sidebar.tsx +++ b/docs/src/components/Sidebar/Sidebar.tsx @@ -133,28 +133,6 @@ class Sidebar extends React.Component { 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 = { diff --git a/packages/react/src/themes/base/components/Provider/providerBoxStyles.ts b/packages/react/src/themes/base/components/Provider/providerBoxStyles.ts index 82fc7b6d3c..6f0b9335ae 100644 --- a/packages/react/src/themes/base/components/Provider/providerBoxStyles.ts +++ b/packages/react/src/themes/base/components/Provider/providerBoxStyles.ts @@ -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): 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', + }, }), } diff --git a/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts b/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts index efe2a7e2fe..98f0e23ebb 100644 --- a/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts +++ b/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts @@ -1,9 +1,31 @@ +import { pxToRem } from 'src/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, + scrollbarThumbBorderRadius: pxToRem(9), + scrollbarThumbBorderSize: pxToRem(4), + + scrollbarThumbHoverBackgroundColor: siteVariables.gray04, + scrollbarThumbHoverBorderSize: pxToRem(2), }) From b08a2de509d2500d6dbf8c635ef52810ad99bee8 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 15 Apr 2019 16:39:28 +0300 Subject: [PATCH 2/5] fix CI --- packages/react/src/lib/handleRef.ts | 4 +--- .../themes/base/components/Provider/providerBoxVariables.ts | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react/src/lib/handleRef.ts b/packages/react/src/lib/handleRef.ts index f94086a3b8..d390f5eb21 100644 --- a/packages/react/src/lib/handleRef.ts +++ b/packages/react/src/lib/handleRef.ts @@ -21,9 +21,7 @@ const handleRef = (ref: React.Ref, 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 + ;(ref as React.MutableRefObject).current = node } } diff --git a/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts b/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts index 98f0e23ebb..476d70b2fb 100644 --- a/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts +++ b/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts @@ -1,4 +1,4 @@ -import { pxToRem } from 'src/lib' +import { pxToRem } from '../../../../lib' export interface ProviderBoxVariables { background: string From e405e70938703b671f2e2104c797f7305bd5caf9 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 15 Apr 2019 16:40:41 +0300 Subject: [PATCH 3/5] add changelog entries --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3b63ffcd8e..ffd81adfda 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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](https://github.com/stardust-ui/react/tree/v0.27.0) (2019-04-10) From ec8c12720104388fc0523e46bb570faafb0bf563 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 15 Apr 2019 16:44:11 +0300 Subject: [PATCH 4/5] revert comment --- packages/react/src/lib/handleRef.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/lib/handleRef.ts b/packages/react/src/lib/handleRef.ts index d390f5eb21..1e39aa57c0 100644 --- a/packages/react/src/lib/handleRef.ts +++ b/packages/react/src/lib/handleRef.ts @@ -21,6 +21,7 @@ const handleRef = (ref: React.Ref, node: N) => { } if (ref !== null && typeof ref === 'object') { + // The `current` property is defined as readonly, however it's a valid way because `ref` is a mutable object ;(ref as React.MutableRefObject).current = node } } From 4859379c961bef0419cda7e18dee34cfe1ad3e8b Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 15 Apr 2019 17:01:54 +0300 Subject: [PATCH 5/5] move styles to Teams theme --- .../components/Provider/providerBoxStyles.ts | 30 ++---------------- .../Provider/providerBoxVariables.ts | 22 ------------- .../react/src/themes/teams/componentStyles.ts | 2 ++ .../src/themes/teams/componentVariables.ts | 2 ++ .../components/Provider/providerBoxStyles.ts | 31 +++++++++++++++++++ .../Provider/providerBoxVariables.ts | 26 ++++++++++++++++ 6 files changed, 63 insertions(+), 50 deletions(-) create mode 100644 packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts create mode 100644 packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts diff --git a/packages/react/src/themes/base/components/Provider/providerBoxStyles.ts b/packages/react/src/themes/base/components/Provider/providerBoxStyles.ts index 6f0b9335ae..82fc7b6d3c 100644 --- a/packages/react/src/themes/base/components/Provider/providerBoxStyles.ts +++ b/packages/react/src/themes/base/components/Provider/providerBoxStyles.ts @@ -1,35 +1,9 @@ -import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' -import { ProviderBoxVariables } from './providerBoxVariables' +import { ICSSInJSStyle } from '../../../types' export default { - root: ({ - variables: v, - }: ComponentStyleFunctionParam): ICSSInJSStyle => ({ + root: ({ variables: v }): 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', - }, }), } diff --git a/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts b/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts index 476d70b2fb..efe2a7e2fe 100644 --- a/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts +++ b/packages/react/src/themes/base/components/Provider/providerBoxVariables.ts @@ -1,31 +1,9 @@ -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, - scrollbarThumbBorderRadius: pxToRem(9), - scrollbarThumbBorderSize: pxToRem(4), - - scrollbarThumbHoverBackgroundColor: siteVariables.gray04, - scrollbarThumbHoverBorderSize: pxToRem(2), }) diff --git a/packages/react/src/themes/teams/componentStyles.ts b/packages/react/src/themes/teams/componentStyles.ts index 9a92c697cc..72ab0a889d 100644 --- a/packages/react/src/themes/teams/componentStyles.ts +++ b/packages/react/src/themes/teams/componentStyles.ts @@ -54,6 +54,8 @@ export { default as MenuDivider } from './components/Menu/menuDividerStyles' export { default as Popup } from './components/Popup/popupStyles' export { default as PopupContent } from './components/Popup/popupContentStyles' +export { default as ProviderBox } from './components/Provider/providerBoxStyles' + export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemStyles' export { default as Segment } from './components/Segment/segmentStyles' diff --git a/packages/react/src/themes/teams/componentVariables.ts b/packages/react/src/themes/teams/componentVariables.ts index 82a6706dd6..7e034e308e 100644 --- a/packages/react/src/themes/teams/componentVariables.ts +++ b/packages/react/src/themes/teams/componentVariables.ts @@ -48,6 +48,8 @@ export { default as MenuDivider } from './components/Menu/menuDividerVariables' export { default as Popup } from './components/Popup/popupVariables' export { default as PopupContent } from './components/Popup/popupContentVariables' +export { default as ProviderBox } from './components/Provider/providerBoxVariables' + export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemVariables' export { default as Reaction } from './components/Reaction/reactionVariables' diff --git a/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts b/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts new file mode 100644 index 0000000000..875ce33deb --- /dev/null +++ b/packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts @@ -0,0 +1,31 @@ +import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' +import { ProviderBoxVariables } from './providerBoxVariables' + +export default { + root: ({ + variables: v, + }: ComponentStyleFunctionParam): ICSSInJSStyle => ({ + '& ::-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', + }, + }), +} diff --git a/packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts b/packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts new file mode 100644 index 0000000000..79153d63dd --- /dev/null +++ b/packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts @@ -0,0 +1,26 @@ +import { pxToRem } from '../../../../lib' +import { ProviderBoxVariables as BaseProviderBoxVariables } from '../../../base/components/Provider/providerBoxVariables' + +export interface ProviderBoxVariables extends BaseProviderBoxVariables { + scrollbarHeight: string + scrollbarWidth: string + + scrollbarThumbBackgroundColor: string + scrollbarThumbBorderRadius: string + scrollbarThumbBorderSize: string + + scrollbarThumbHoverBackgroundColor: string + scrollbarThumbHoverBorderSize: string +} + +export default (siteVariables): Partial => ({ + scrollbarHeight: pxToRem(16), + scrollbarWidth: pxToRem(16), + + scrollbarThumbBackgroundColor: siteVariables.gray06, + scrollbarThumbBorderRadius: pxToRem(9), + scrollbarThumbBorderSize: pxToRem(4), + + scrollbarThumbHoverBackgroundColor: siteVariables.gray04, + scrollbarThumbHoverBorderSize: pxToRem(2), +})