diff --git a/CHANGELOG.md b/CHANGELOG.md index de9ce57b53..2a29795410 100644 --- 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](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 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/docs/src/examples/components/Provider/Types/ProviderExampleScrollbar.tsx b/docs/src/examples/components/Provider/Types/ProviderExampleScrollbar.tsx new file mode 100644 index 0000000000..08f3e928c5 --- /dev/null +++ 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 = () => ( +
+ +
+) + +export default ProviderExampleScrollbar diff --git a/docs/src/examples/components/Provider/Types/index.tsx b/docs/src/examples/components/Provider/Types/index.tsx index 57b5e357df..0f8722922f 100644 --- 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 = () => ( - - - + <> + + + + + + + ) export default Types diff --git a/packages/react/src/lib/handleRef.ts b/packages/react/src/lib/handleRef.ts index f94086a3b8..1e39aa57c0 100644 --- a/packages/react/src/lib/handleRef.ts +++ b/packages/react/src/lib/handleRef.ts @@ -21,9 +21,8 @@ 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 + // 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 } } 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), +})