feat(Provider): set scrollbar styles (#1223)

* feat(Provider): set scrollbar styles * fix CI * add changelog entries * revert comment * move styles to Teams theme
microsoft · Apr 16, 2019 · fe9cbf3 · fe9cbf3
1 parent dfd13c1
commit fe9cbf3
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,6 +36,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - 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))
 - [Teams Theme] Export missing read-aloud icon in Teams Theme @joheredi ([#1225](https://github.com/stardust-ui/react/pull/1225))
+- 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)

diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
@@ -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 = {

diff --git a/docs/src/examples/components/Provider/Types/ProviderExampleScrollbar.tsx b/docs/src/examples/components/Provider/Types/ProviderExampleScrollbar.tsx
@@ -0,0 +1,10 @@
+import { Image } from '@stardust-ui/react'
+import * as React from 'react'
+
+const ProviderExampleScrollbar = () => (
+  <div style={{ height: '100px', overflow: 'scroll' }}>
+    <Image src="public/images/leaves/4.png" />
+  </div>
+)
+
+export default ProviderExampleScrollbar
diff --git a/docs/src/examples/components/Provider/Types/index.tsx b/docs/src/examples/components/Provider/Types/index.tsx
@@ -1,15 +1,22 @@
 import * as React from 'react'
+
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection'
 
 const Types = () => (
-  <ExampleSection title="Types">
-    <ComponentExample
-      title="Theme"
-      description="A Provider defines the theme for your components."
-      examplePath="components/Provider/Types/ProviderExample"
-    />
-  </ExampleSection>
+  <>
+    <ExampleSection title="Types">
+      <ComponentExample
+        title="Theme"
+        description="A Provider defines the theme for your components."
+        examplePath="components/Provider/Types/ProviderExample"
+      />
+    </ExampleSection>
+    <NonPublicSection title="Types for visual tests">
+      <ComponentExample examplePath="components/Provider/Types/ProviderExampleScrollbar" />
+    </NonPublicSection>
+  </>
 )
 
 export default Types
diff --git a/packages/react/src/lib/handleRef.ts b/packages/react/src/lib/handleRef.ts
@@ -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
   }
 }
 

diff --git 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
@@ -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
@@ -0,0 +1,31 @@
+import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types'
+import { ProviderBoxVariables } from './providerBoxVariables'
+
+export default {
+  root: ({
+    variables: v,
+  }: ComponentStyleFunctionParam<never, ProviderBoxVariables>): 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
@@ -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<ProviderBoxVariables> => ({
+  scrollbarHeight: pxToRem(16),
+  scrollbarWidth: pxToRem(16),
+
+  scrollbarThumbBackgroundColor: siteVariables.gray06,
+  scrollbarThumbBorderRadius: pxToRem(9),
+  scrollbarThumbBorderSize: pxToRem(4),
+
+  scrollbarThumbHoverBackgroundColor: siteVariables.gray04,
+  scrollbarThumbHoverBorderSize: pxToRem(2),
+})