fteat: layout flex

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.24",
+  "version": "0.9.25-1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/empty/graphics/EmptyDocuments.tsx

@@ -1,18 +1,20 @@
 import React, { useId } from 'react';
 import { css } from '@emotion/react';
 import { StyleProps } from '../../types';
+import { useStyleProps } from '../../utils';
 
 export const EmptyDocuments = (props: StyleProps) => {
   // Create a unique ID so that more than one gradient def can exist
   // TODO - try to hoist the gradient defs to be global
   const id = useId();
   const linearGradientIdPrefix = `#${id}-linear-gradient`;
+  const { styleProps } = useStyleProps(props);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 140 164"
-      {...props}
+      {...(styleProps as any)}
       css={css`
         .cls-1 {
           isolation: isolate;

src/index.tsx

@@ -31,6 +31,7 @@ export * from './switch';
 export * from './empty';
 export * from './contextualhelp';
 export * from './counter';
+export * from './layout';
 export { theme, designationColors } from './theme';
 // export interface Props extends HTMLAttributes<HTMLDivElement> {
 //   /** custom content, defaults to 'the snozzberries taste like snozzberries' */

src/layout/Flex.tsx

@@ -0,0 +1,105 @@
+import {
+  StyleHandlers,
+  classNames,
+  passthroughStyle,
+  responsiveDimensionValue,
+  useDOMRef,
+  useStyleProps,
+} from '../utils';
+import { DOMProps, DOMRef, FlexStyleProps } from '../types';
+import { filterDOMProps } from '@react-aria/utils';
+import React, { forwardRef, ReactNode } from 'react';
+import { css } from '@emotion/react';
+
+export interface FlexProps extends DOMProps, FlexStyleProps {
+  /** Children of the flex container. */
+  children: ReactNode;
+}
+
+const flexCSS = css`
+  display: flex;
+`;
+
+const flexStyleProps: StyleHandlers = {
+  direction: ['flexDirection', passthroughStyle],
+  wrap: ['flexWrap', flexWrapValue],
+  justifyContent: ['justifyContent', flexAlignValue],
+  alignItems: ['alignItems', flexAlignValue],
+  alignContent: ['alignContent', flexAlignValue],
+};
+
+function Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {
+  let { children, ...otherProps } = props;
+
+  let matchedBreakpoints = ['base'];
+  let { styleProps } = useStyleProps(otherProps);
+  let { styleProps: flexStyle } = useStyleProps(otherProps, flexStyleProps);
+  let domRef = useDOMRef(ref);
+
+  // If no gaps, or native support exists, then we only need to render a single div.
+  let style = {
+    ...styleProps.style,
+    ...flexStyle.style,
+  };
+
+  if (props.gap != null) {
+    style.gap = responsiveDimensionValue(props.gap, matchedBreakpoints);
+  }
+
+  if (props.columnGap != null) {
+    style.columnGap = responsiveDimensionValue(
+      props.columnGap,
+      matchedBreakpoints
+    );
+  }
+
+  if (props.rowGap != null) {
+    style.rowGap = responsiveDimensionValue(props.rowGap, matchedBreakpoints);
+  }
+
+  return (
+    <div
+      css={flexCSS}
+      {...filterDOMProps(otherProps)}
+      className={classNames('flex', styleProps.className)}
+      style={style}
+      ref={domRef}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Normalize 'start' and 'end' alignment values to 'flex-start' and 'flex-end'
+ * in flex containers for browser compatibility.
+ */
+function flexAlignValue(value) {
+  if (value === 'start') {
+    return 'flex-start';
+  }
+
+  if (value === 'end') {
+    return 'flex-end';
+  }
+
+  return value;
+}
+
+/**
+ * Takes a boolean and translates it to flex wrap or nowrap.
+ */
+function flexWrapValue(value: boolean | 'wrap' | 'nowrap') {
+  if (typeof value === 'boolean') {
+    return value ? 'wrap' : 'nowrap';
+  }
+
+  return value;
+}
+
+/**
+ * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
+ * property to define consistent spacing between items.
+ */
+const _Flex = forwardRef(Flex);
+export { _Flex as Flex };

src/layout/index.tsx

@@ -0,0 +1 @@
+export * from './Flex';

src/provider/GlobalStyles.tsx

@@ -1,5 +1,65 @@
 import { Global, css } from '@emotion/react';
 
+/**
+ * Medium size root CSS variables
+ */
+export const mediumRootCSS = css`
+  :root {
+    --ac-global-dimension-scale-factor: 1;
+    --ac-global-dimension-size-0: 0px;
+    --ac-global-dimension-size-10: 1px;
+    --ac-global-dimension-size-25: 2px;
+    --ac-global-dimension-size-30: 2px;
+    --ac-global-dimension-size-40: 3px;
+    --ac-global-dimension-size-50: 4px;
+    --ac-global-dimension-size-65: 5px;
+    --ac-global-dimension-size-75: 6px;
+    --ac-global-dimension-size-85: 7px;
+    --ac-global-dimension-size-100: 8px;
+    --ac-global-dimension-size-115: 9px;
+    --ac-global-dimension-size-125: 10px;
+    --ac-global-dimension-size-130: 11px;
+    --ac-global-dimension-size-150: 12px;
+    --ac-global-dimension-size-160: 13px;
+    --ac-global-dimension-size-175: 14px;
+    --ac-global-dimension-size-185: 15px;
+    --ac-global-dimension-size-200: 16px;
+    --ac-global-dimension-size-225: 18px;
+    --ac-global-dimension-size-250: 20px;
+    --ac-global-dimension-size-275: 22px;
+    --ac-global-dimension-size-300: 24px;
+    --ac-global-dimension-size-325: 26px;
+    --ac-global-dimension-size-350: 28px;
+    --ac-global-dimension-size-400: 32px;
+    --ac-global-dimension-size-450: 36px;
+    --ac-global-dimension-size-500: 40px;
+    --ac-global-dimension-size-550: 44px;
+    --ac-global-dimension-size-600: 48px;
+    --ac-global-dimension-size-650: 52px;
+    --ac-global-dimension-size-675: 54px;
+    --ac-global-dimension-size-700: 56px;
+    --ac-global-dimension-size-750: 60px;
+    --ac-global-dimension-size-800: 64px;
+    --ac-global-dimension-size-900: 72px;
+    --ac-global-dimension-size-1000: 80px;
+    --ac-global-dimension-size-1125: 90px;
+    --ac-global-dimension-size-1200: 96px;
+    --ac-global-dimension-size-1250: 100px;
+    --ac-global-dimension-size-1600: 128px;
+    --ac-global-dimension-size-1700: 136px;
+    --ac-global-dimension-size-1800: 144px;
+    --ac-global-dimension-size-2000: 160px;
+    --ac-global-dimension-size-2400: 192px;
+    --ac-global-dimension-size-2500: 200px;
+    --ac-global-dimension-size-3000: 240px;
+    --ac-global-dimension-size-3400: 272px;
+    --ac-global-dimension-size-3600: 288px;
+    --ac-global-dimension-size-4600: 368px;
+    --ac-global-dimension-size-5000: 400px;
+    --ac-global-dimension-size-6000: 480px;
+  }
+`;
+
 export const globalCSS = css`
   :root {
     --ac-global-dimension-static-size-0: 0px;
@@ -80,14 +140,41 @@ export const globalCSS = css`
     --ac-global-background-color-dark: var(--ac-global-color-gray-900);
     --ac-global-background-color-danger: var(--ac-global-color-danger);
 
+    --ac-global-border-color-default: var(--ac-global-color-gray-100);
     --ac-global-border-color-light: var(--ac-global-color-gray-100);
     --ac-global-border-color-dark: var(--ac-global-color-gray-400);
 
     --ac-global-rounding-small: var(--ac-global-dimension-static-size-50);
     --ac-global-rounding-medium: var(--ac-global-dimension-static-size-100);
+
+    --ac-global-border-size-thin: var(--ac-global-dimension-static-size-10);
+    --ac-global-border-size-thick: var(--ac-global-dimension-static-size-25);
+    --ac-global-border-size-thicker: var(--ac-global-dimension-static-size-50);
+    --ac-global-border-size-thickest: var(
+      --ac-global-dimension-static-size-100
+    );
+    --ac-global-border-offset-thin: var(--ac-global-dimension-static-size-25);
+    --ac-global-border-offset-thick: var(--ac-global-dimension-static-size-50);
+    --ac-global-border-offset-thicker: var(
+      --ac-global-dimension-static-size-100
+    );
+    --ac-global-border-offset-thickest: var(
+      --ac-global-dimension-static-size-200
+    );
+    --ac-global-grid-baseline: var(--ac-global-dimension-static-size-100);
+    --ac-global-grid-gutter-xsmall: var(--ac-global-dimension-static-size-200);
+    --ac-global-grid-gutter-small: var(--ac-global-dimension-static-size-300);
+    --ac-global-grid-gutter-medium: var(--ac-global-dimension-static-size-400);
+    --ac-global-grid-gutter-large: var(--ac-global-dimension-static-size-500);
+    --ac-global-grid-gutter-xlarge: var(--ac-global-dimension-static-size-600);
+    --ac-global-grid-margin-xsmall: var(--ac-global-dimension-static-size-200);
+    --ac-global-grid-margin-small: var(--ac-global-dimension-static-size-300);
+    --ac-global-grid-margin-medium: var(--ac-global-dimension-static-size-400);
+    --ac-global-grid-margin-large: var(--ac-global-dimension-static-size-500);
+    --ac-global-grid-margin-xlarge: var(--ac-global-dimension-static-size-600);
   }
 `;
 
 export function GlobalStyles() {
-  return <Global styles={globalCSS} />;
+  return <Global styles={css(globalCSS, mediumRootCSS)} />;
 }

src/types/core.ts

@@ -91,7 +91,18 @@ export type DimensionValue =
   | (string & {});
 
 export type BorderRadiusValue = 'small' | 'medium';
+export type BorderColorValue = 'default' | 'light' | 'dark';
+export type BorderSizeValue = 'thin' | 'thick' | 'thicker' | 'thickest';
+export type BackgroundColorValue = 'light' | 'dark' | ColorValue;
 
-export type BorderColorValue = 'light' | 'dark';
-
-export type BackgroundColorValue = 'light' | 'dark';
+export type ColorValue =
+  | 'gray-100'
+  | 'gray-200'
+  | 'gray-300'
+  | 'gray-400'
+  | 'gray-500'
+  | 'gray-600'
+  | 'gray-700'
+  | 'gray-800'
+  | 'gray-900'
+  | 'danger';

src/types/index.ts

@@ -15,3 +15,4 @@ export * from './button';
 export * from './style';
 export * from './progress';
 export * from './style';
+export * from './locale';

src/types/locale.ts

@@ -0,0 +1 @@
+export type Direction = 'ltr' | 'rtl';