feat(layout): add overflow utility

Adds the overflow utility to support the overflow utility upstream
feature.

Author: bpas247

src/Box.tsx

@@ -70,6 +70,9 @@ type UserSelect = typeof userSelectValues[number];
 const peValues = ['none', 'auto'] as const;
 type Pe = typeof peValues[number];
 
+const overflowValues = ['auto', 'hidden'] as const;
+type Overflow = typeof overflowValues[number];
+
 const generateBreakpoint = (
   bsPrefix: string,
   currentBreakpoint: string | true,
@@ -214,6 +217,9 @@ const utilities: Record<string, (utilityValue: any) => string> = {
   pe(option: Pe) {
     return `pe-${option}`;
   },
+  overflow(option: Overflow) {
+    return `overflow-${option}`;
+  },
 };
 
 const propTypes = {
@@ -293,6 +299,8 @@ const propTypes = {
   userSelect: PropTypes.oneOf(userSelectValues),
   pe: PropTypes.oneOf(peValues),
 
+  overflow: PropTypes.oneOf(overflowValues),
+
   /**
    *
    * add `d-print-{display}` className on the element
@@ -381,6 +389,8 @@ export type BoxProps = AsProp &
     userSelect: UserSelect;
     pe: Pe;
 
+    overflow: Overflow;
+
     className: string;
     print: Display;
     visible: boolean;
@@ -447,6 +457,7 @@ const Box = (React.forwardRef(
       floatRight,
       floatNone,
       userSelect,
+      overflow,
       pe,
       print,
       visible,
@@ -512,6 +523,7 @@ const Box = (React.forwardRef(
       floatNone,
       userSelect,
       pe,
+      overflow,
     };
     const finalClassName = classNames(
       ...Object.entries(utilityProps)

test/BoxSpec.js

@@ -125,4 +125,8 @@ describe('<Box>', () => {
     const component = shallow(<Box pe="auto" />);
     component.find('div').hasClass('pe-auto').should.equal(true);
   });
+  it('Should have overflow utility', () => {
+    const component = shallow(<Box overflow="hidden" />);
+    component.find('div').hasClass('overflow-hidden').should.equal(true);
+  });
 });