sebnitu / vrembem / 22318114755

92%

main: 100%

push

github

Add new modifier config options to Flex and Grid components (#2665)

This PR primarily improves the configurability of flex and grid layout components by introducing modifier config options. These are set via the config module and give more control over how modifiers output their styles including the introduction of the default key to set base component styles. Documentation has also been updated to reflect all these changes.

**Changes include**

- `flex` `grid` - Gap modifiers now use `0` for setting the gap to `0` instead of the `none` key.
- `flex` - Added multiple new modifier config maps to handle output of the following modifiers:
  - `flex_wrap_[key]` - Now handled by `flex-wrap` config option.
  - `flex_direction_[key]` - Now handled by `flex-direction` config option.
  - `flex_items_[keu]` - Now handled by `flex-items` config option.
- `flex` - The `flex-[key]` utility has been refactored to `flex-item-[key]` which better aligns it with `flex_items_[key]` modifiers and removes any potential confusion and conflicts with the base `flex` component.
- `flex` - Wrap modifier has been standardized to use `wrap` modifier base along with provided key values. This means that to disable wrapping of flex, you would use `flex_wrap_no` instead of `flex_nowrap`. Further flex utilities may be added later.
- `flex-item-[key]` - This utility has been moved into it's own file (previously was defined along with `flex_items_[key]` modifier.
- `flex` - Now sets the `flex-flow` shorthand property to provide both the flex direction and wrap default values.
- `grid` - New `grid-flow` config option added to better handle the output of `grid_flow_[key]` modifiers.
- `core` - The `bem` mixin now correctly checks for empty string values to prevent outputting delimiters when no value is provided.

583 of 652 branches covered (89.42%)

Branch coverage included in aggregate %.

939 of 999 relevant lines covered (93.99%)

31.68 hits per line