Drawer (molecule) fullscreen size

[andresin87]

Actually the drawer only have 1 size ("m") and needs to have another one like fullScreen.

We have 2 different aproaches of taking the opening and close transitions:

• keyframes : 1513 demo
• transform3d: 1512 demo

The finally desired result is a feature that uses the duration @s-ui/theme defined tokens:

// Duration Tokens --------------------
// Naming
$duration-none: 0 !default;
$duration-fast: 100ms !default;
$duration-normal: 300ms !default;
$duration-slow: 500ms !default;

// Aliases to follow the Emmet naming convention
$dur-none: $duration-none;
$dur-fast: $duration-fast;
$dur-normal: $duration-normal;
$dur-slow: $duration-slow;

on a drawer sass map in _settings.sass (molecule/drawer/src):

$dur-molecule-drawer: (
  'none': $dur-none, // 0
  'fast': $dur-fast, // 100ms
  'normal': $dur-normal, // 300ms
  'slow': $dur-slow
);

this token is overwriteable by any single vertical and it can also be extended with extra-values.

same for sizes:

$s-molecule-drawer: (
  'm': actual value,
  'fullscreen': '100%'
);

loop on each possible value to get all different configurations (position - 4, size - 2 and duration - 4) 32 finally results.

[andresin87]

We figure out that the position is flickering in 3d model when the position is changed by prop We realise there is no UX guideline which changes the position of a drawer (only its isOpen behavior). We will create a major which changes the moleculeDrawer placement prop and it will be an uncontrolled prop being called initialPlacement only configurable in the mounting lifecycle.

For the demo workarond we are going to re-mount the drawer on each placement changes in order to get a new configured one and re-mount the drawer at any placement change will create a new dom element removing the transform flickering consequently.

the unique vertical actually using the drawer is coches so its an easy transition for this major. The unique change is to find the drawers and replace placement prop for initialPlacement

[andresin87]

@ferransimon and @andresin87 (me) are working on it

[nucliweb]

Yes, I prefer to use a transition instead of keyframe here.

Remember to do a POC with translateX and translateY, really we don't need the translate3d in this case.

[nucliweb]

As I commented in the SUI Weekly meeting, there is the possibility that we need, in some cases, two drawers at the same time.

For example, a drawer (from the right) with information of the current page related, and another drawer (from the left) with actions.

In this case, we'll don't have a problem with the z-index, in the case that we need a right and top drawer we'll have a problem with an overlap. But I think that this is an antipattern, so don't pay attention to this vai the moment.

[andresin87]

POC:

• placement --> initialPlacement (initial settings, not posible to change the position)
• 260px only --> size: [auto, m, full]
• 1s --> duration: [none, fast, normal, slow]
• body --> targetRef: change the location where the drawer is placed and targets to.
• transitions:
  • keyframes removed.
  • style-inline removed.
  • passed to scss with transformX or transformY (wip)

1532

[andresin87]

@nucliweb

[nucliweb]

Looks good for me, great job

[andresin87]

• transitions:
  • keyframes removed.
  • style-inline removed.
  • passed to scss with transformX or transformY (wip)
• compound components:
  • MoleculeDrawer
  • MoleculeDrawerOverlay
• Avoid circular imports. config contants moved to settings
• animationDuration (targets the SCSS sui-theme variables)

// Duration Tokens --------------------
// Naming
$duration-none: 0 !default;
$duration-fast: 100ms !default;
$duration-normal: 300ms !default;
$duration-slow: 500ms !default;

• multiple sizes:
  • auto: (default)
  • M (260px – old)
  • FILL: fullscreen
• target (refs the element where the drawer point to)
  Feature/drawer full screen2 #1555