feat(scrollbars): add windows 95 scrollbars

#5

Author: arturbien

src/Checkbox/Checkbox.js

@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components';
 import { createHatchedBackground } from '../common';
 
 import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
-import Cutout from '../Cutout/Cutout';
+import { StyledCutout } from '../Cutout/Cutout';
 import { StyledListItem } from '../ListItem/ListItem';
 import {
   size,
@@ -22,7 +22,7 @@ const sharedCheckboxStyles = css`
   justify-content: space-around;
   margin-right: 0.5rem;
 `;
-const StyledCheckbox = styled(Cutout)`
+const StyledCheckbox = styled(StyledCutout)`
   ${sharedCheckboxStyles}
   width: ${size}px;
   height: ${size}px;

src/ColorInput/ColorInput.stories.js

@@ -14,9 +14,14 @@ const Wrapper = styled.div`
   #cutout {
     background: ${({ theme }) => theme.canvas};
     display: inline-block;
+  }
+  .content {
     padding: 1rem;
-    & > span {
-      margin-left: 1rem;
+    & > div {
+      margin: 1rem 0;
+    }
+
+    & > div > span {
       margin-right: 0.5rem;
     }
   }
@@ -43,10 +48,16 @@ Default.story = {
 
 export const Flat = () => (
   <Cutout id='cutout'>
-    <span>enabled: </span>
-    <ColorInput variant='flat' defaultValue='#00f' />
-    <span>disabled: </span>
-    <ColorInput variant='flat' disabled defaultValue='#00f' />
+    <div className='content'>
+      <div>
+        <span>enabled: </span>
+        <ColorInput variant='flat' defaultValue='#00f' />
+      </div>
+      <div>
+        <span>disabled: </span>
+        <ColorInput variant='flat' disabled defaultValue='#00f' />
+      </div>
+    </div>
   </Cutout>
 );
 

src/Cutout/Cutout.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import propTypes from 'prop-types';
 import styled from 'styled-components';
-import { insetShadow } from '../common';
+import { insetShadow, createScrollbars } from '../common';
 
-const StyledCutout = styled.div`
+export const StyledCutout = styled.div`
   position: relative;
   box-sizing: border-box;
   padding: 2px;
@@ -14,7 +14,7 @@ const StyledCutout = styled.div`
   border-top-color: ${({ theme }) => theme.borderDark};
   border-right-color: ${({ theme }) => theme.borderLightest};
   border-bottom-color: ${({ theme }) => theme.borderLightest};
-
+  line-height: 1.5;
   &:before {
     position: absolute;
     left: 0;
@@ -35,11 +35,20 @@ const StyledCutout = styled.div`
   }
 `;
 
+const Content = styled.div`
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 4px;
+  overflow: auto;
+  ${createScrollbars()}
+`;
+
 const Cutout = React.forwardRef(function Cutout(props, ref) {
   const { children, ...otherProps } = props;
   return (
     <StyledCutout ref={ref} {...otherProps}>
-      {children}
+      <Content>{children}</Content>
     </StyledCutout>
   );
 });

src/Cutout/Cutout.stories.js

@@ -11,16 +11,19 @@ export const Default = () => (
   <Window>
     <WindowContent>
       <Cutout style={{ width: '300px', height: '200px' }}>
-        <h1
-          style={{
-            fontFamily: 'times new roman',
-            textAlign: 'center',
-            fontSize: '3rem',
-            marginTop: '0.5rem'
-          }}
-        >
-          React95
-        </h1>
+        <div>
+          <p style={{ width: 400 }}>
+            React95 is the best UI library ever created
+          </p>
+          <p>React95 is the best UI library ever created</p>
+          <p>React95 is the best UI library ever created</p>
+          <p>React95 is the best UI library ever created</p>
+          <p>React95 is the best UI library ever created</p>
+          <p>React95 is the best UI library ever created</p>
+          <p>React95 is the best UI library ever created</p>
+          <p>React95 is the best UI library ever created</p>
+          <p>React95 is the best UI library ever created</p>
+        </div>
       </Cutout>
     </WindowContent>
   </Window>

src/LoadingIndicator/LoadingIndicator.js

@@ -3,14 +3,14 @@ import propTypes from 'prop-types';
 
 import styled, { keyframes, css } from 'styled-components';
 
-import Cutout from '../Cutout/Cutout';
+import { StyledCutout } from '../Cutout/Cutout';
 
 const Wrapper = styled.div`
   display: inline-block;
   height: 15px;
   width: 100%;
 `;
-const ProgressCutout = styled(Cutout)`
+const ProgressCutout = styled(StyledCutout)`
   width: 100%;
   height: 100%;
   width: 100%;

src/NumberField/NumberField.stories.js

@@ -14,7 +14,7 @@ const Wrapper = styled.div`
     background: ${({ theme }) => theme.canvas};
     padding: 2rem;
     width: 300px;
-    & > * {
+    & > div > * {
       margin-bottom: 1rem;
     }
   }

src/Progress/Progress.js

@@ -3,15 +3,15 @@ import propTypes from 'prop-types';
 
 import styled, { css } from 'styled-components';
 
-import Cutout from '../Cutout/Cutout';
+import { StyledCutout } from '../Cutout/Cutout';
 import { blockSizes } from '../common/system';
 
 const Wrapper = styled.div`
   display: inline-block;
   height: ${blockSizes.md};
   width: 100%;
 `;
-const ProgressCutout = styled(Cutout)`
+const ProgressCutout = styled(StyledCutout)`
   width: 100%;
   height: 100%;
   width: 100%;

src/Radio/Radio.js

@@ -3,7 +3,7 @@ import propTypes from 'prop-types';
 
 import styled, { css } from 'styled-components';
 import { createFlatBoxStyles } from '../common';
-import Cutout from '../Cutout/Cutout';
+import { StyledCutout } from '../Cutout/Cutout';
 import { StyledListItem } from '../ListItem/ListItem';
 
 import {
@@ -23,7 +23,7 @@ const sharedCheckboxStyles = css`
   margin-right: 0.5rem;
 `;
 // had to overwrite box-shadow for StyledCheckbox since the default made checkbox too dark
-const StyledCheckbox = styled(Cutout)`
+const StyledCheckbox = styled(StyledCutout)`
 ${sharedCheckboxStyles}
 background: ${({ theme, isDisabled }) =>
   isDisabled ? theme.material : theme.canvas};

src/Radio/Radio.stories.js

@@ -19,7 +19,7 @@ const Wrapper = styled.div`
     color: ${({ theme }) => theme.materialText};
     padding: 1rem;
     width: 300px;
-    & > p {
+    & p {
       margin-bottom: 2rem;
     }
   }

src/Select/Select.js

@@ -440,9 +440,8 @@ const Select = React.forwardRef(function Select(props, ref) {
             onKeyDown={handleKeyDown}
             ref={dropdownRef}
             role='listbox'
-            shadow={shadow}
             style={
-              menuMaxHeight && { overflow: 'scroll', maxHeight: menuMaxHeight }
+              menuMaxHeight && { overflow: 'auto', maxHeight: menuMaxHeight }
             }
             tabIndex={0}
             variant={variant}