From 3cd80e6de68c48b6865ed198f674377fa9a2e5f7 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Tue, 10 Oct 2023 18:00:08 +0200 Subject: [PATCH] Feat(web): Introduce Placement dictionary and use it in `Dropdown` and `Tooltip` #DS-923 --- docs/DICTIONARIES.md | 35 ++-- .../src/scss/components/Dropdown/README.md | 26 +-- .../scss/components/Dropdown/_Dropdown.scss | 32 ++-- .../components/Dropdown/_DropdownWrapper.scss | 4 +- .../src/scss/components/Dropdown/_theme.scss | 2 + .../src/scss/components/Dropdown/index.html | 8 +- .../web/src/scss/components/Tooltip/README.md | 15 +- .../src/scss/components/Tooltip/_Tooltip.scss | 118 +++--------- .../components/Tooltip/_TooltipWrapper.scss | 4 +- .../src/scss/components/Tooltip/_theme.scss | 4 + .../src/scss/components/Tooltip/_tools.scss | 6 +- .../src/scss/components/Tooltip/index.html | 126 +++++++++++++ .../web/src/scss/settings/_dictionaries.scss | 9 +- .../web/src/scss/tools/_dictionaries.scss | 50 +++++- packages/web/src/scss/tools/_list.scss | 17 ++ packages/web/src/scss/tools/_placement.scss | 168 ++++++++++++++++++ packages/web/src/scss/tools/_string.scss | 46 ++++- 17 files changed, 519 insertions(+), 151 deletions(-) create mode 100644 packages/web/src/scss/tools/_list.scss create mode 100644 packages/web/src/scss/tools/_placement.scss diff --git a/docs/DICTIONARIES.md b/docs/DICTIONARIES.md index 609dba06f2..88343b62a8 100644 --- a/docs/DICTIONARIES.md +++ b/docs/DICTIONARIES.md @@ -7,19 +7,19 @@ This project uses `dictionaries` to unify props between different components. - A given property is not a dictionary by itself. The property is contained in the dictionary. That is, the Action Primary Default color is contained in the Action Primary dictionary entry. - Products can extend their dictionaries. -## List of dictionaries +## List of Dictionaries -- [Size](#size) +- [Alignment](#alignment) - [Color](#color) +- [Placement](#placement) +- [Size](#size) - [Validation](#validation) -- [Alignment](#alignment) -### Size +### Alignment -| Dictionary | Values | Code name | -| ------------- | ------------------------------------ | ------------ | -| Size | `small`, `medium`, `large` | Size | -| Size Extended | Size Dictionary + `xsmall`, `xlarge` | SizeExtended | +| Dictionary | Values | Code name | +| ---------- | ------------------------- | ---------- | +| AlignmentX | `left`, `center`, `right` | AlignmentX | ### Color @@ -30,14 +30,21 @@ This project uses `dictionaries` to unify props between different components. | Emotion Color | `success`, `informative`, `warning`, `danger` | EmotionColor | | Text Color | `primary`, `secondary`, `primary-inverted`, `secondary-inverted` | TextColor | +### Placement + +| Dictionary | Values | Code name | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | +| Placement | `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `left`, `left-top`, `left-bottom`, `right`, `right-top`, `right-bottom` | Placement | + +### Size + +| Dictionary | Values | Code name | +| ------------- | ------------------------------------ | ------------ | +| Size | `small`, `medium`, `large` | Size | +| Size Extended | Size Dictionary + `xsmall`, `xlarge` | SizeExtended | + ### Validation | Dictionary | Values | Code name | | ---------- | ------------------------------ | ---------- | | Validation | `success`, `warning`, `danger` | Validation | - -### Alignment - -| Dictionary | Values | Code name | -| ---------- | ------------------------- | ---------- | -| AlignmentX | `left`, `center`, `right` | AlignmentX | diff --git a/packages/web/src/scss/components/Dropdown/README.md b/packages/web/src/scss/components/Dropdown/README.md index 099d22760c..37cbd51701 100644 --- a/packages/web/src/scss/components/Dropdown/README.md +++ b/packages/web/src/scss/components/Dropdown/README.md @@ -13,7 +13,7 @@ > Button as anchor -
+
+
+
+
+
``` -## Align +## Placement + +Dropdown implements the [Placement Dictionary][dictionary-placement] for placement. The dictionary values are used as CSS +modifiers in the camelCase format: `Dropdown--top`, `Dropdown--rightTop`, `Dropdown--leftBottom`, etc. -Dropdown content can be vertically aligned with `.Dropdown--top` or `.Dropdown--bottom` and horizontally `.Dropdown--left` or `.Dropdown--right` side of parent. +### ⚠️ DEPRECATION NOTICE + +Current class combinations (`Dropdown--top.Dropdown--left`, `.Dropdown--top.Dropdown--right`, +`.Dropdown--bottom.Dropdown--left`, `.Dropdown--bottom.Dropdown--right`) will be removed in the next major release. ## JavaScript @@ -275,3 +277,5 @@ myDropdownEl.addEventListener('hidden.dropdown', () => { dropdown.hide(); ``` + +[dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement diff --git a/packages/web/src/scss/components/Dropdown/_Dropdown.scss b/packages/web/src/scss/components/Dropdown/_Dropdown.scss index e0b891b1e9..fad83e9390 100644 --- a/packages/web/src/scss/components/Dropdown/_Dropdown.scss +++ b/packages/web/src/scss/components/Dropdown/_Dropdown.scss @@ -1,10 +1,12 @@ @use 'sass:map'; @use '../../tools/breakpoint'; +@use '../../tools/dictionaries'; +@use '../../tools/placement'; @use 'theme' as theme; .Dropdown { - position: absolute; - z-index: 1; + @include placement.child(); + display: none; width: max-content; padding: theme.$padding; @@ -27,20 +29,26 @@ display: block; } -.Dropdown--top { - bottom: 100%; - margin-bottom: theme.$offset; +@include dictionaries.generate-placements( + $class-name: 'Dropdown', + $dictionary-values: theme.$placement-dictionary, + $offset: theme.$offset +); + +// @deprecated The class combination will be removed in the next major version. +// Migration: delete all placement class combinations below. +.Dropdown--top.Dropdown--left { + @include placement.child-variant($prefix: 'dropdown', $placement: 'top-left', $offset: theme.$offset); } -.Dropdown--right { - right: 0; +.Dropdown--top.Dropdown--right { + @include placement.child-variant($prefix: 'dropdown', $placement: 'top-right', $offset: theme.$offset); } -.Dropdown--bottom { - top: 100%; - margin-top: theme.$offset; +.Dropdown--bottom.Dropdown--left { + @include placement.child-variant($prefix: 'dropdown', $placement: 'bottom-left', $offset: theme.$offset); } -.Dropdown--left { - left: 0; +.Dropdown--bottom.Dropdown--right { + @include placement.child-variant($prefix: 'dropdown', $placement: 'bottom-right', $offset: theme.$offset); } diff --git a/packages/web/src/scss/components/Dropdown/_DropdownWrapper.scss b/packages/web/src/scss/components/Dropdown/_DropdownWrapper.scss index f36b0cfdb5..e98e1846de 100644 --- a/packages/web/src/scss/components/Dropdown/_DropdownWrapper.scss +++ b/packages/web/src/scss/components/Dropdown/_DropdownWrapper.scss @@ -1,3 +1,5 @@ +@use '../../tools/placement'; + .DropdownWrapper { - position: relative; + @include placement.parent(); } diff --git a/packages/web/src/scss/components/Dropdown/_theme.scss b/packages/web/src/scss/components/Dropdown/_theme.scss index 451c44c51f..e623ec67c2 100644 --- a/packages/web/src/scss/components/Dropdown/_theme.scss +++ b/packages/web/src/scss/components/Dropdown/_theme.scss @@ -1,4 +1,5 @@ @use '@tokens' as tokens; +@use '../../settings/dictionaries'; $breakpoints: tokens.$breakpoints; $offset: tokens.$space-400; @@ -6,3 +7,4 @@ $padding: tokens.$space-600; $border-radius: tokens.$radius-200; $background: tokens.$background-basic; $shadow: tokens.$shadow-100; +$placement-dictionary: dictionaries.$placement; diff --git a/packages/web/src/scss/components/Dropdown/index.html b/packages/web/src/scss/components/Dropdown/index.html index 86f7b13a09..53786e22b8 100644 --- a/packages/web/src/scss/components/Dropdown/index.html +++ b/packages/web/src/scss/components/Dropdown/index.html @@ -13,7 +13,7 @@

Basic usage with default align

> Button as anchor -
+

Usage with align to top right

> Button as anchor -
+

Usage with disabled auto close

> Button as anchor -
+

Longer content

> Button as anchor -
+
+
Tooltip on right
@@ -172,7 +172,7 @@ purpose. When controlling Tooltip position with JavaScript, use `data-spirit-placement` attribute instead of CSS modifiers (`Tooltip--top` etc.) to set Tooltip -placement. Supported values are `top`, `bottom`, `left`, and `right`. +placement. All [Placement Dictionary][dictionary-placement] values are supported. ```html
@@ -228,4 +228,5 @@ tooltip.hide(); ``` [example]: https://spirit-design-system-demo.netlify.app/src/scss/components/tooltip/#advanced-positioning +[dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement [floating-ui]: https://floating-ui.com diff --git a/packages/web/src/scss/components/Tooltip/_Tooltip.scss b/packages/web/src/scss/components/Tooltip/_Tooltip.scss index ce2dc9e081..f6ce698c92 100644 --- a/packages/web/src/scss/components/Tooltip/_Tooltip.scss +++ b/packages/web/src/scss/components/Tooltip/_Tooltip.scss @@ -1,10 +1,12 @@ -// 1. Although it seems pointless, having the arrow as a standalone HTML element has a purpose: the arrow can be +// 1. Although it may seem pointless, having the arrow as a standalone HTML element has a purpose: the arrow can be // precisely positioned in sticky tooltips, e.g. with Floating UI: // https://floating-ui.com -// 2. Reset positioning for controlled variant. -// 3. Shift Tooltip so there is space for the arrow between Tooltip and reference element. +// +// 2. Reuse already generated custom properties to allow overriding the arrow appearance live in the browser. @use 'sass:math'; +@use '../../tools/dictionaries'; +@use '../../tools/placement'; @use '../../tools/reset'; @use '../../tools/svg'; @use '../../tools/typography'; @@ -12,10 +14,9 @@ @use 'tools'; .Tooltip { + @include placement.child(); @include typography.generate(theme.$typography); - position: absolute; - z-index: 1; width: max-content; max-width: theme.$max-width; padding: theme.$padding; @@ -29,18 +30,23 @@ word-wrap: break-word; @media (prefers-reduced-motion: no-preference) { - transition-property: opacity, visibility, transform; + transition-property: opacity, visibility, scale; transition-duration: theme.$transition-duration; } } // 1. .Tooltip__arrow { - position: absolute; - width: theme.$arrow-width; - height: theme.$arrow-height; - background-image: svg.escape(theme.$arrow-shape); - transform-origin: center bottom; + @include placement.arrow( + $prefix: 'tooltip', + $width: theme.$arrow-width, + $height: theme.$arrow-height, + $corner-offset: theme.$arrow-corner-offset + ); + + width: var(--tooltip-arrow-width); // 2. + height: var(--tooltip-arrow-height); // 2. + background: no-repeat center/cover svg.escape(theme.$arrow-shape); } .Tooltip__close { @@ -59,59 +65,12 @@ max-width: calc(#{theme.$max-width} + #{theme.$gap} + #{theme.$close-button-size}); } -// Sides -.Tooltip--top { - bottom: 100%; - left: 50%; - transform: translate(-50%, #{-1 * theme.$arrow-height}) scale(var(--tooltip-scale, 1)); - transform-origin: bottom center; -} - -.Tooltip--bottom { - top: 100%; - left: 50%; - transform: translate(-50%, #{theme.$arrow-height}) scale(var(--tooltip-scale, 1)); - transform-origin: top center; -} - -.Tooltip--left { - top: 50%; - right: 100%; - transform: translate(#{-1 * theme.$arrow-height}, -50%) scale(var(--tooltip-scale, 1)); - transform-origin: right center; -} - -.Tooltip--right { - top: 50%; - left: 100%; - transform: translate(#{theme.$arrow-height}, -50%) scale(var(--tooltip-scale, 1)); - transform-origin: left center; -} - -// Arrows -.Tooltip--top > .Tooltip__arrow { - top: 100%; - left: 50%; - transform: translate(-50%, -100%) rotateZ(180deg); -} - -.Tooltip--bottom > .Tooltip__arrow { - bottom: 100%; - left: 50%; - transform: translate(-50%, 0) rotateZ(0); -} - -.Tooltip--left > .Tooltip__arrow { - top: 50%; - left: 100%; - transform: translate(-50%, -100%) rotateZ(90deg); -} - -.Tooltip--right > .Tooltip__arrow { - top: 50%; - right: 100%; - transform: translate(50%, -100%) rotateZ(-90deg); -} +@include dictionaries.generate-placements( + $class-name: 'Tooltip', + $dictionary-values: theme.$placement-dictionary, + $offset: theme.$arrow-height, + $has-arrow: true +); // Controlled visibility .Tooltip.is-hidden { @@ -124,30 +83,11 @@ // Controlled placement .Tooltip[data-spirit-placement] { - inset: unset; // 2. + @include placement.child-controlled($prefix: 'tooltip'); } -// stylelint-disable scss/at-extend-no-missing-placeholder -- We know what we are doing here. (Do we?) -.Tooltip[data-spirit-placement='top'] { - @extend .Tooltip--top; - - transform: translate(0, #{-1 * theme.$arrow-height}); // 3. -} - -.Tooltip[data-spirit-placement='bottom'] { - @extend .Tooltip--bottom; - - transform: translate(0, #{theme.$arrow-height}); // 3. -} - -.Tooltip[data-spirit-placement='left'] { - @extend .Tooltip--left; - - transform: translate(#{-1 * theme.$arrow-height}, 0); // 3. -} - -.Tooltip[data-spirit-placement='right'] { - @extend .Tooltip--right; - - transform: translate(#{theme.$arrow-height}, 0); // 3. -} +@include dictionaries.generate-controlled-placements( + $class-name: 'Tooltip', + $dictionary-values: theme.$placement-dictionary, + $data-attribute: 'data-spirit-placement' +); diff --git a/packages/web/src/scss/components/Tooltip/_TooltipWrapper.scss b/packages/web/src/scss/components/Tooltip/_TooltipWrapper.scss index 5c6e5757a9..9d69e6c0e7 100644 --- a/packages/web/src/scss/components/Tooltip/_TooltipWrapper.scss +++ b/packages/web/src/scss/components/Tooltip/_TooltipWrapper.scss @@ -1,3 +1,5 @@ +@use '../../tools/placement'; + .TooltipWrapper { - position: relative; + @include placement.parent(); } diff --git a/packages/web/src/scss/components/Tooltip/_theme.scss b/packages/web/src/scss/components/Tooltip/_theme.scss index c61ba44690..6be8dcf3fa 100644 --- a/packages/web/src/scss/components/Tooltip/_theme.scss +++ b/packages/web/src/scss/components/Tooltip/_theme.scss @@ -1,4 +1,5 @@ @use '@tokens' as tokens; +@use '../../settings/dictionaries'; @use '../../settings/transitions'; $max-width: 18rem; @@ -15,5 +16,8 @@ $transition-scale-ratio: transitions.$scale-ratio-small-objects; $arrow-shape: url('data:image/svg+xml,'); $arrow-width: 13px; $arrow-height: 8px; +$arrow-corner-offset: tokens.$space-500; $close-button-size: tokens.$space-700; + +$placement-dictionary: dictionaries.$placement; diff --git a/packages/web/src/scss/components/Tooltip/_tools.scss b/packages/web/src/scss/components/Tooltip/_tools.scss index b0829f9ae2..dca7937402 100644 --- a/packages/web/src/scss/components/Tooltip/_tools.scss +++ b/packages/web/src/scss/components/Tooltip/_tools.scss @@ -1,15 +1,13 @@ @use 'theme'; %hidden { - --tooltip-scale: #{theme.$transition-scale-ratio}; - visibility: hidden; opacity: 0; + scale: theme.$transition-scale-ratio; } %visible { - --tooltip-scale: 1; - visibility: visible; opacity: 1; + scale: 1; } diff --git a/packages/web/src/scss/components/Tooltip/index.html b/packages/web/src/scss/components/Tooltip/index.html index 4de52476cd..fb9e41ed89 100644 --- a/packages/web/src/scss/components/Tooltip/index.html +++ b/packages/web/src/scss/components/Tooltip/index.html @@ -1,5 +1,131 @@ {{#> layout/plain }} +
+ +

Placements

+ +
+ +
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ +
+
Click the dots!
+
+ Hello! + +
+
+ +
+
+
+ + + +
+
+

Static Tooltip (No Interaction)

diff --git a/packages/web/src/scss/settings/_dictionaries.scss b/packages/web/src/scss/settings/_dictionaries.scss index c4b8a8542b..f1351aa463 100644 --- a/packages/web/src/scss/settings/_dictionaries.scss +++ b/packages/web/src/scss/settings/_dictionaries.scss @@ -1,9 +1,14 @@ @use 'sass:list'; @use '@tokens' as tokens; -$size: small, medium, large; -$size-extended: list.join($size, (xsmall, xlarge)); +$_placement-sides: top, bottom, left, right; +$_placement-side-corners: top-left, top-right, bottom-left, bottom-right, left-top, left-bottom, right-top, right-bottom; +$_size-extended: xsmall, xlarge; + $action-colors: primary, secondary, tertiary, inverted; $action-link-colors: primary, secondary, inverted; $emotion-colors: success, informative, warning, danger; +$placement: list.join($_placement-sides, $_placement-side-corners); +$size: small, medium, large; +$size-extended: list.join($size, $_size-extended); $text-colors: primary, secondary, primary-inverted, secondary-inverted; diff --git a/packages/web/src/scss/tools/_dictionaries.scss b/packages/web/src/scss/tools/_dictionaries.scss index 0d9f075ac7..0b7431b3b0 100644 --- a/packages/web/src/scss/tools/_dictionaries.scss +++ b/packages/web/src/scss/tools/_dictionaries.scss @@ -1,6 +1,8 @@ @use 'sass:map'; @use 'sass:string'; @use '@tokens' as tokens; +@use './placement'; +@use './string' as spirit-string; @use './typography'; // Function to get the tokens map from the dictionary value name @@ -88,15 +90,15 @@ .#{$class-name}--#{$dictionary-value}#{$child-selector} { @each $property-name, $property-value in $config { $value: -get-property-value($dictionary-value, $property-name, $property-value, $overrides); - $class-name-lowercase: if( + $prefix: if( $custom-variable-name, $custom-variable-name, - string.to-lower-case($class-name) + spirit-string.convert-pascal-case-to-kebab-case($class-name) ); - --#{$class-name-lowercase}-#{$property-name}: #{$value}; + --#{$prefix}-#{$property-name}: #{$value}; - #{$property-name}: var(--#{$class-name-lowercase}-#{$property-name}); + #{$property-name}: var(--#{$prefix}-#{$property-name}); } @if $states { @@ -145,6 +147,46 @@ } } +// Mixin to generate placement classes based on a dictionary +// Parameters are: +// * $class-name: the name of the component class to generate +// * $dictionary-values: map of the placements to generate +// * $offset: offset of child from its parent, typically for an arrow +// * $has-arrow: whether the component has an arrow +@mixin generate-placements($class-name, $dictionary-values, $offset: 0, $has-arrow: false) { + $prefix: spirit-string.convert-pascal-case-to-kebab-case($class-name); + + @each $placement in $dictionary-values { + $placement-modifier: spirit-string.convert-kebab-case-to-camel-case($placement); + + .#{$class-name}--#{$placement-modifier} { + @include placement.child-variant($prefix, $placement, $offset); + } + + @if $has-arrow { + .#{$class-name}--#{$placement-modifier} > .#{$class-name}__arrow { + @include placement.arrow-variant($prefix, placement.inverse($placement, $main-axis-only: true)); + } + } + } +} + +// Mixin to generate controlled placement classes based on a dictionary +// Parameters are: +// * $class-name: the name of the component class to generate +// * $dictionary-values: map of the placements to generate +// * $data-attribute: the data attribute to use for the controlled placement +@mixin generate-controlled-placements($class-name, $dictionary-values, $data-attribute) { + @each $placement in $dictionary-values { + $placement-modifier: spirit-string.convert-kebab-case-to-camel-case($placement); + + .#{$class-name}[#{$data-attribute}='#{$placement-modifier}'] { + // stylelint-disable scss/at-extend-no-missing-placeholder -- We are extending classes created by generate-placements(). + @extend .#{$class-name}--#{$placement-modifier}; + } + } +} + // Mixin to generate size classes based on a config // Parameters are: // * $class-name: the name of the component class to generate diff --git a/packages/web/src/scss/tools/_list.scss b/packages/web/src/scss/tools/_list.scss new file mode 100644 index 0000000000..87c292e942 --- /dev/null +++ b/packages/web/src/scss/tools/_list.scss @@ -0,0 +1,17 @@ +@use 'sass:list'; + +// Converts a list to a string with a separator +// Example: to-string((1, 2, 3), '-') will return '1-2-3' +@function to-string($list, $separator: ' ') { + $string: ''; + + @for $i from 1 through length($list) { + $string: $string + list.nth($list, $i); + + @if $i < length($list) { + $string: $string + $separator; + } + } + + @return $string; +} diff --git a/packages/web/src/scss/tools/_placement.scss b/packages/web/src/scss/tools/_placement.scss new file mode 100644 index 0000000000..60b0d5d44e --- /dev/null +++ b/packages/web/src/scss/tools/_placement.scss @@ -0,0 +1,168 @@ +// 1. The placement logic works as follows: +// +// 1. The parent element is positioned relatively. +// 2. The child element is positioned absolutely into the corresponding position using the inset map. +// 3. The child element is then translated: +// a) using the `--placement-offset` custom property to make space for an arrow or just to add an offset, +// b) using the `--placement-offset-orthogonal` custom property to center the child element. +// +// 2. When using a positioning library, e.g. Floating UI, the placement offset is controlled by the library. +// +// In this case, `inset` is set to `unset` because the library will look after it. Also, the +// `--placement-offset-orthogonal` custom property is reset to 0 because the library will center the child element, +// using the absolute position. +// +// See https://floating-ui.com + +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:string'; +@use 'list' as spirit-list; + +$_arrow-rotate-map: ( + top: 0deg, + top-left: 0deg, + top-right: 0deg, + bottom: 180deg, + bottom-left: 180deg, + bottom-right: 180deg, + left: -90deg, + left-top: -90deg, + left-bottom: -90deg, + right: 90deg, + right-top: 90deg, + right-bottom: 90deg, +); + +// 1.2 +$_inset-map: ( + top: auto auto 100% 50%, + top-left: auto auto 100% 0, + top-right: auto 0 100% auto, + bottom: 100% auto auto 50%, + bottom-left: 100% auto auto 0, + bottom-right: 100% 0 auto auto, + left: 50% 100% auto auto, + left-top: 0 100% auto auto, + left-bottom: auto 100% 0 auto, + right: 50% auto auto 100%, + right-top: 0 auto auto 100%, + right-bottom: auto auto 0 100%, +); + +$_placement-inverse-map: ( + top: bottom, + bottom: top, + left: right, + right: left, +); + +@function -get-arrow-translate-map($prefix) { + @return ( + top: -50% 0%, + top-left: var(--#{$prefix}-arrow-corner-offset) 0%, + top-right: calc(-1 * var(--#{$prefix}-arrow-corner-offset)) 0%, + bottom: -50% -100%, + bottom-left: var(--#{$prefix}-arrow-corner-offset) -100%, + bottom-right: calc(-1 * var(--#{$prefix}-arrow-corner-offset)) -100%, + left: 50% -100%, + left-top: calc(var(--#{$prefix}-arrow-width) / 2) + calc( + var(--#{$prefix}-arrow-width) / 2 - var(--#{$prefix}-arrow-height) + + var(--#{$prefix}-arrow-corner-offset) + ), + left-bottom: calc(var(--#{$prefix}-arrow-width) / 2) + calc(var(--#{$prefix}-arrow-width) / -2 - var(--#{$prefix}-arrow-corner-offset)), + right: -50% -100%, + right-top: calc(var(--#{$prefix}-arrow-width) / -2) + calc( + var(--#{$prefix}-arrow-width) / 2 - var(--#{$prefix}-arrow-height) + + var(--#{$prefix}-arrow-corner-offset) + ), + right-bottom: calc(var(--#{$prefix}-arrow-width) / -2) + calc(var(--#{$prefix}-arrow-width) / -2 - var(--#{$prefix}-arrow-corner-offset)) + ); +} + +// 1.3 +@function -get-child-translate-map($prefix) { + @return ( + top: var(--#{$prefix}-offset-orthogonal, -50%) calc(-1 * var(--#{$prefix}-offset, 0)), + top-left: var(--#{$prefix}-offset-orthogonal, 0) calc(-1 * var(--#{$prefix}-offset, 0)), + top-right: var(--#{$prefix}-offset-orthogonal, 0) calc(-1 * var(--#{$prefix}-offset, 0)), + bottom: var(--#{$prefix}-offset-orthogonal, -50%) var(--#{$prefix}-offset, 0), + bottom-left: var(--#{$prefix}-offset-orthogonal, 0) var(--#{$prefix}-offset, 0), + bottom-right: var(--#{$prefix}-offset-orthogonal, 0) var(--#{$prefix}-offset, 0), + left: calc(-1 * var(--#{$prefix}-offset, 0)) var(--#{$prefix}-offset-orthogonal, -50%), + left-top: calc(-1 * var(--#{$prefix}-offset, 0)) var(--#{$prefix}-offset-orthogonal, 0), + left-bottom: calc(-1 * var(--#{$prefix}-offset, 0)) var(--#{$prefix}-offset-orthogonal, 0), + right: var(--#{$prefix}-offset, 0) var(--#{$prefix}-offset-orthogonal, -50%), + right-top: var(--#{$prefix}-offset, 0) var(--#{$prefix}-offset-orthogonal, 0), + right-bottom: var(--#{$prefix}-offset, 0) var(--#{$prefix}-offset-orthogonal, 0) + ); +} + +// Function to return an inverse placement name +// Example: inverse('top') will return 'bottom' +// Example: inverse('top-left') will return 'bottom-right' +// Example: inverse('top-left', true) will return 'bottom-left' +// Example: inverse('top-left', true, false) will return 'bottom left' +@function inverse($placement, $main-axis-only: false, $hyphenate: true) { + $hyphen: '-'; + $placement-chunks: string.split($placement, $hyphen); + $placement-inverse-chunks: (); + $join-with: if($hyphenate, $hyphen, ' '); + + @for $i from 1 through list.length($placement-chunks) { + $chunk: list.nth($placement-chunks, $i); + $new-chunk: null; + + @if $main-axis-only and $i > 1 { + $new-chunk: $chunk; + } @else { + $new-chunk: map.get($_placement-inverse-map, $chunk); + } + + $placement-inverse-chunks: list.append($placement-inverse-chunks, $new-chunk); + } + + @return spirit-list.to-string($placement-inverse-chunks, $join-with); +} + +@mixin parent() { + position: relative; // 1.1 +} + +@mixin child($z-index: 1) { + position: absolute; // 1.2 + z-index: $z-index; +} + +@mixin child-variant($prefix, $placement, $offset: 0) { + --#{$prefix}-offset: #{$offset}; // 1.3.a + + inset: map.get($_inset-map, $placement); // 1.2 + translate: map.get(-get-child-translate-map($prefix), $placement); // 1.3 + transform-origin: string.unquote(inverse($placement, $hyphenate: false)); +} + +@mixin child-controlled($prefix) { + --#{$prefix}-offset-orthogonal: 0; // 2. + + inset: unset; // 2. +} + +@mixin arrow($prefix, $width, $height, $corner-offset) { + --#{$prefix}-arrow-width: #{$width}; + --#{$prefix}-arrow-height: #{$height}; + --#{$prefix}-arrow-corner-offset: #{$corner-offset}; + + position: absolute; // 1.2 + transform-origin: bottom center; +} + +@mixin arrow-variant($prefix, $placement) { + inset: map.get($_inset-map, $placement); // 1.2 + translate: map.get(-get-arrow-translate-map($prefix), $placement); // 1.3 + rotate: z map.get($_arrow-rotate-map, $placement); +} diff --git a/packages/web/src/scss/tools/_string.scss b/packages/web/src/scss/tools/_string.scss index 523af7d2a4..6da8598266 100644 --- a/packages/web/src/scss/tools/_string.scss +++ b/packages/web/src/scss/tools/_string.scss @@ -1,7 +1,49 @@ -// Author: Kitty Giraudel - @use 'sass:string'; +// Convert kebab-case to camelCase +// Example: convert-kebab-case-to-camel-case('top-left') will return 'topLeft' +@function convert-kebab-case-to-camel-case($string) { + $camel-case: string.slice($string, 1); // Remove the first hyphen + + @for $i from 1 through string.length($camel-case) { + $char: string.slice($camel-case, $i, $i); + + @if $char == '-' { + $next-char: string.slice($camel-case, $i + 1, $i + 1); + $camel-case: string.insert($camel-case, string.to-upper-case($next-char), $i + 2); + $camel-case: string.slice($camel-case, 1, $i - 1) + string.slice($camel-case, $i + 2); + } + } + + @return $camel-case; +} + +// Convert PascalCase to kebab-case +// Example: convert-pascal-case-to-kebab-case('TopLeft') will return 'top-left' +@function convert-pascal-case-to-kebab-case($string) { + $kebab-case: ''; + + @for $i from 1 through string.length($string) { + $char: string.slice($string, $i, $i); + + @if $i == 1 { + $kebab-case: string.to-lower-case($char); + } @else { + @if string.to-upper-case($char) == $char { + $kebab-case: $kebab-case + '-' + string.to-lower-case($char); + } @else { + $kebab-case: $kebab-case + $char; + } + } + } + + @return $kebab-case; +} + +// Replace all occurrences of a string with another string +// Example: replace('top-left', '-', '') will return 'topleft' +// Author: Kitty Giraudel +// See: https://kittygiraudel.com/2014/01/13/string-replacement-function-in-sass/ @function replace($string, $search, $replace: '') { $index: string.index($string, $search);