Merge pull request #878 from lumapps/chore/flexbox-add-styles

chore(flexbox): adding options to valign and halign props to handle spacing more precisely

CHANGELOG.md

@@ -12,18 +12,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   New `Text` component.
 -   New `Heading` component. The component comes with a `HeadingProvider` that allows the `Heading` component to automatically use the correct heading level depending on the nested providers.
 -   New `useHeadingLevel` hook to get the current heading level.
+-   FlexBox: new options added for `vAlign` and `hAlign` props (`space-between`, `space-evenly` and `space-around`).
 
 ### Changed
 
-- Slideshow: Improve accessibility by adding `tablist` / `tab` roles to slideshow pagination and `tabpanel` role to slide groups. These elements are linked together using `aria-controls` attribute.
-- Slideshow: Added the `slideGroupLabel` prop to set a label on each slide groups. The prop should be a function that receives the group position starting from 1 and the total number of groups.
-- Slideshow: Slides grouped together are now wrapper inside individual divs.
-- SlideshowControls: Added the `paginationItemProps` prop to set custom props to each pagination item. The prop should be a function that receives the item index.
-- SlideshowControls: The bullets now use the "roving tab index" pattern to have only the current slide focusable and navigate using the left/right arrows.
+-   Slideshow: Improve accessibility by adding `tablist` / `tab` roles to slideshow pagination and `tabpanel` role to slide groups. These elements are linked together using `aria-controls` attribute.
+-   Slideshow: Added the `slideGroupLabel` prop to set a label on each slide groups. The prop should be a function that receives the group position starting from 1 and the total number of groups.
+-   Slideshow: Slides grouped together are now wrapper inside individual divs.
+-   SlideshowControls: Added the `paginationItemProps` prop to set custom props to each pagination item. The prop should be a function that receives the item index.
+-   SlideshowControls: The bullets now use the "roving tab index" pattern to have only the current slide focusable and navigate using the left/right arrows.
 
 ### Fixed
 
-- Slideshow: Avoid slides that are not displayed to be focusable and read by a screen reader.
+-   Slideshow: Avoid slides that are not displayed to be focusable and read by a screen reader.
 
 ## [3.0.1][] - 2022-09-21
 

packages/lumx-core/src/scss/components/flex-box/_index.scss

@@ -52,6 +52,22 @@
     justify-content: flex-end;
 }
 
+.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-space-between,
+.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-space-between {
+    justify-content: space-between;
+}
+
+.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-space-around, 
+.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-space-around {
+    justify-content: space-around;
+}
+
+.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-space-evenly,
+.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-space-evenly
+ {
+    justify-content: space-evenly;
+}
+
 /* Wrap
    ========================================================================== */
 

packages/lumx-react/src/components/flex-box/FlexBox.stories.tsx

@@ -19,8 +19,32 @@ const flexViewKnobConfigs: Array<
     ['noShrink', boolean],
     ['wrap', boolean],
     ['gap', select, [DEFAULT_PROPS.gap, Size.tiny, Size.regular, Size.medium, Size.big, Size.huge]],
-    ['hAlign', select, [DEFAULT_PROPS.hAlign, Alignment.center, Alignment.top, Alignment.bottom]],
-    ['vAlign', select, [DEFAULT_PROPS.vAlign, Alignment.center, Alignment.right, Alignment.left]],
+    [
+        'hAlign',
+        select,
+        [
+            DEFAULT_PROPS.hAlign,
+            Alignment.center,
+            Alignment.top,
+            Alignment.bottom,
+            Alignment.spaceAround,
+            Alignment.spaceBetween,
+            Alignment.spaceEvenly,
+        ],
+    ],
+    [
+        'vAlign',
+        select,
+        [
+            DEFAULT_PROPS.vAlign,
+            Alignment.center,
+            Alignment.right,
+            Alignment.left,
+            Alignment.spaceAround,
+            Alignment.spaceBetween,
+            Alignment.spaceEvenly,
+        ],
+    ],
     ['orientation', select, [undefined, Orientation.horizontal, Orientation.vertical]],
     [
         'marginAuto',
@@ -69,13 +93,27 @@ export const Flex = () => (
 const hAlign = (prefix?: string) =>
     select(
         `${prefix ? `${prefix}: ` : ''}Horizontal align`,
-        [Alignment.center, Alignment.top, Alignment.bottom],
+        [
+            Alignment.center,
+            Alignment.top,
+            Alignment.bottom,
+            Alignment.spaceAround,
+            Alignment.spaceBetween,
+            Alignment.spaceEvenly,
+        ],
         Alignment.center,
     );
 const vAlign = (prefix?: string) =>
     select(
         `${prefix ? `${prefix}: ` : ''}Vertical align`,
-        [Alignment.center, Alignment.left, Alignment.right],
+        [
+            Alignment.center,
+            Alignment.left,
+            Alignment.right,
+            Alignment.spaceAround,
+            Alignment.spaceBetween,
+            Alignment.spaceEvenly,
+        ],
         Alignment.center,
     );
 
@@ -179,3 +217,21 @@ export const Align = () => (
         <FlexBox style={{ height: 'fit-content' }}>Some text</FlexBox>
     </FlexBox>
 );
+
+export const Distribution = () => (
+    <FlexBox
+        style={{
+            width: `${number('width (px)', 720)}px`,
+            height: `${number('height (px)', 300)}px`,
+            border: '1px solid red',
+        }}
+        orientation={orientation()}
+        gap={gapSize()}
+        vAlign={vAlign()}
+        hAlign={hAlign()}
+    >
+        <Button>Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+    </FlexBox>
+);

packages/lumx-react/src/components/flex-box/FlexBox.tsx

@@ -1,12 +1,15 @@
-import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';
+import { Alignment, Orientation } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import classNames from 'classnames';
 import castArray from 'lodash/castArray';
 import React, { forwardRef, ReactNode } from 'react';
-import { Size } from '..';
+import { HorizontalAlignment, Size, VerticalAlignment } from '..';
 
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
 export type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
+type SpaceAlignment = Extract<Alignment, 'space-between' | 'space-evenly' | 'space-around'>;
+export type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;
+export type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
 
 /**
  * Defines the props of the component.
@@ -19,15 +22,15 @@ export interface FlexBoxProps extends GenericProps {
     /** Gap space between flexbox items. */
     gap?: GapSize;
     /** Flex horizontal alignment. */
-    hAlign?: VerticalAlignment;
+    hAlign?: FlexVerticalAlignment;
     /** Whether the "auto margin" is enabled all around or not. */
     marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];
     /** Whether the "content shrink" is disabled or not. */
     noShrink?: boolean;
     /** Flex direction. */
     orientation?: Orientation;
     /** Flex vertical alignment. */
-    vAlign?: HorizontalAlignment;
+    vAlign?: FlexHorizontalAlignment;
     /** Whether the "flex wrap" is enabled or not. */
     wrap?: boolean;
 }

packages/lumx-react/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap

@@ -40,6 +40,41 @@ Array [
 ]
 `;
 
+exports[`<FlexBox> Snapshots and structure should render story 'Distribution' 1`] = `
+<div
+  className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-center lumx-flex-box--h-align-center lumx-flex-box--gap-regular"
+  style={
+    Object {
+      "border": "1px solid red",
+      "height": "300px",
+      "width": "720px",
+    }
+  }
+>
+  <Button
+    emphasis="high"
+    size="m"
+    theme="light"
+  >
+    Button 1
+  </Button>
+  <Button
+    emphasis="high"
+    size="m"
+    theme="light"
+  >
+    Button 2
+  </Button>
+  <Button
+    emphasis="high"
+    size="m"
+    theme="light"
+  >
+    Button 3
+  </Button>
+</div>
+`;
+
 exports[`<FlexBox> Snapshots and structure should render story 'Flex' 1`] = `
 Array [
   <div

packages/lumx-react/src/components/index.ts

@@ -11,6 +11,7 @@ export const Alignment = {
     right: 'right',
     spaceAround: 'space-around',
     spaceBetween: 'space-between',
+    spaceEvenly: 'space-evenly',
     start: 'start',
     top: 'top',
 } as const;