This repository has been archived by the owner on Mar 4, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 55
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Provider): set scrollbar styles (#1223)
* feat(Provider): set scrollbar styles * fix CI * add changelog entries * revert comment * move styles to Teams theme
- Loading branch information
1 parent
dfd13c1
commit fe9cbf3
Showing
9 changed files
with
88 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
docs/src/examples/components/Provider/Types/ProviderExampleScrollbar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 31 additions & 0 deletions
31
packages/react/src/themes/teams/components/Provider/providerBoxStyles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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', | ||
}, | ||
}), | ||
} |
26 changes: 26 additions & 0 deletions
26
packages/react/src/themes/teams/components/Provider/providerBoxVariables.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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), | ||
}) |