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}

src/Select/Select.stories.js

@@ -8,7 +8,7 @@ const options = [
   { value: 1, label: '⚡ Pikachu' },
   { value: 2, label: '🌿 Bulbasaur' },
   { value: 3, label: '💦 Squirtle' },
-  { value: 4, label: '🔥 Charizard' },
+  { value: 4, label: '🔥 Mega Charizard Y' },
   { value: 5, label: '🎤 Jigglypuff' },
   { value: 6, label: '🛌🏻 Snorlax' },
   { value: 7, label: '⛰ Geodude' }
@@ -27,7 +27,7 @@ const Wrapper = styled.div`
   #default-selects {
     width: 200px;
   }
-  #cutout {
+  #cutout > div {
     width: 250px;
     padding: 1rem;
     background: ${({ theme }) => theme.canvas};
@@ -111,6 +111,7 @@ export const Flat = () => (
             onChange={onChange}
             options={options}
             width='100%'
+            menuMaxHeight={160}
           />
           <Select
             variant='flat'
@@ -152,7 +153,6 @@ export const CustomDisplayFormatting = () => (
     onChange={onChange}
     options={options}
     width={220}
-    menuMaxHeight={100}
   />
 );
 

src/Select/Select.styles.js

@@ -4,10 +4,11 @@ import { StyledButton as Button } from '../Button/Button';
 import {
   shadow as commonShadow,
   createDisabledTextStyles,
-  createFlatBoxStyles
+  createFlatBoxStyles,
+  createScrollbars
 } from '../common';
 import { blockSizes } from '../common/system';
-import Cutout from '../Cutout/Cutout';
+import { StyledCutout } from '../Cutout/Cutout';
 
 const sharedInputContentStyles = css`
   box-sizing: border-box;
@@ -56,7 +57,7 @@ const sharedWrapperStyles = css`
   cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
 `;
 
-export const StyledSelectWrapper = styled(Cutout)`
+export const StyledSelectWrapper = styled(StyledCutout)`
   ${sharedWrapperStyles}
   background: ${({ theme, isDisabled }) =>
     isDisabled ? theme.material : theme.canvas};
@@ -170,7 +171,7 @@ export const StyledDropdownMenu = styled.ul`
   cursor: default;
   z-index: 1;
   cursor: pointer;
-  box-shadow: ${props => (props.shadow ? commonShadow : 'none')};
+  box-shadow: ${commonShadow};
   ${({ variant }) =>
     variant === 'flat'
       ? css`
@@ -183,6 +184,7 @@ export const StyledDropdownMenu = styled.ul`
           width: calc(100% - 2px);
           border: 2px solid ${({ theme }) => theme.borderDarkest};
         `}
+  ${({ variant }) => createScrollbars(variant)}
 `;
 
 export const StyledDropdownMenuItem = styled.li`

src/Slider/Slider.js

@@ -14,7 +14,7 @@ import { clamp, roundValueToStep } from '../common/utils';
 import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
 import useForkRef from '../common/hooks/useForkRef';
 import { useIsFocusVisible } from '../common/hooks/useIsFocusVisible';
-import Cutout from '../Cutout/Cutout';
+import { StyledCutout } from '../Cutout/Cutout';
 
 function percentToValue(percent, min, max) {
   return (max - min) * percent + min;
@@ -135,10 +135,10 @@ const sharedGrooveStyles = () => css`
           width: 100%;
         `}
 `;
-const StyledGroove = styled(Cutout)`
+const StyledGroove = styled(StyledCutout)`
   ${sharedGrooveStyles()}
 `;
-const StyledFlatGroove = styled(Cutout)`
+const StyledFlatGroove = styled(StyledCutout)`
   ${sharedGrooveStyles()}
 
   border-left-color: ${({ theme }) => theme.flatLight};

src/Slider/Slider.stories.js

@@ -19,9 +19,12 @@ const Wrapper = styled.div`
     }
   }
   #cutout {
+    width: 400px;
+  }
+  #cutout > div {
     background: ${({ theme }) => theme.canvas};
     padding: 1rem;
-    width: 400px;
+
     & > * {
       margin-bottom: 2rem;
     }

src/Table/Table.js

@@ -2,7 +2,7 @@ import React from 'react';
 import propTypes from 'prop-types';
 
 import styled from 'styled-components';
-import Cutout from '../Cutout/Cutout';
+import { StyledCutout } from '../Cutout/Cutout';
 
 const StyledTable = styled.table`
   display: table;
@@ -12,7 +12,7 @@ const StyledTable = styled.table`
   font-size: 1rem;
 `;
 
-const StyledCutout = styled(Cutout)`
+const Wrapper = styled(StyledCutout)`
   &:before {
     box-shadow: none;
   }
@@ -22,11 +22,11 @@ const Table = React.forwardRef(function Table(props, ref) {
   const { children, ...otherProps } = props;
 
   return (
-    <StyledCutout>
+    <Wrapper>
       <StyledTable ref={ref} {...otherProps}>
         {children}
       </StyledTable>
-    </StyledCutout>
+    </Wrapper>
   );
 });
 

src/TableBody/TableBody.js

@@ -8,6 +8,7 @@ const StyledTableBody = styled.tbody`
   background: ${({ theme }) => theme.canvas};
   display: table-row-group;
   box-shadow: ${insetShadow};
+  overflow-y: auto;
 `;
 
 const TableBody = React.forwardRef(function TableBody(props, ref) {

src/TextField/TextField.js

@@ -2,9 +2,13 @@ import React from 'react';
 import propTypes from 'prop-types';
 
 import styled, { css } from 'styled-components';
-import { createDisabledTextStyles, createFlatBoxStyles } from '../common';
+import {
+  createDisabledTextStyles,
+  createFlatBoxStyles,
+  createScrollbars
+} from '../common';
 import { blockSizes } from '../common/system';
-import Cutout from '../Cutout/Cutout';
+import { StyledCutout } from '../Cutout/Cutout';
 
 const sharedWrapperStyles = css`
   display: flex;
@@ -13,7 +17,7 @@ const sharedWrapperStyles = css`
   min-height: ${blockSizes.md};
 `;
 
-const Wrapper = styled(Cutout).attrs({
+const Wrapper = styled(StyledCutout).attrs({
   'data-testid': 'variant-default'
 })`
   ${sharedWrapperStyles}
@@ -54,6 +58,7 @@ const StyledTextArea = styled.textarea`
   ${sharedInputStyles}
   padding: 8px;
   resize: none;
+  ${({ variant }) => createScrollbars(variant)}
 `;
 
 const TextField = React.forwardRef(function TextField(props, ref) {