feat!: add select (custom) component (#965)

.bundlewatchrc.json

@@ -6,11 +6,11 @@
   "files": [
     {
       "path": "./packages/core/dist/castor.css",
-      "maxSize": "5KB"
+      "maxSize": "8KB"
     },
     {
       "path": "./packages/*/prototype.js",
-      "maxSize": "60KB"
+      "maxSize": "70KB"
     }
   ]
 }

.storybook/styles.scss

@@ -11,7 +11,7 @@
     background-color: castor.color('background-main');
     color: castor.color('content-main');
     font-family: 'Helvetica Neue', Tahoma, sans-serif;
-    font-size: 16px;
+    font-size: 1rem;
   }
 
   // unfortunate hack to override background color of the Docs panel

MIGRATION.md

@@ -0,0 +1,8 @@
+# Migration guides
+
+## 1.x to 2.x
+
+### Select native (CSS) - React not impacted
+
+- `.-empty` class on `.ods-select-native` should be now on `.ods-select` instead
+- (NON-BREAKING) `.ods-select-native` no longer needs `.-borderless` class, only its parent `.ods-select` does

docs/helpers/html.ts

@@ -22,8 +22,8 @@ const content = (nodes: unknown[]) => nodes.filter(Boolean).join('\n');
 
 function toAttribute([key, value]: [string, unknown]) {
   if (key === 'style' && typeof value === 'object') value = styleFor(value);
-  if (value === '' || value === true) return key;
-  if (!value) return '';
+  if (value === true) return key;
+  if (value === false || value == null) return '';
 
   return `${key}="${value}"`;
 }

packages/core/src/components/popover/popover.scss

@@ -12,69 +12,87 @@
     position: absolute;
     visibility: hidden;
     z-index: 9999999;
+
+    &.-overlay {
+      /* stylelint-disable-next-line max-nesting-depth */
+      &::before {
+        $inset: 0;
+
+        background-color: helpers.color('background-overlay');
+        bottom: $inset;
+        content: '';
+        display: block;
+        left: $inset;
+        position: fixed;
+        right: $inset;
+        top: $inset;
+        visibility: visible;
+      }
+
+      /* stylelint-disable-next-line max-nesting-depth */
+      .ods-popover {
+        bottom: initial;
+        height: fit-content;
+        left: 50%;
+        max-height: 75%;
+        max-width: 75%;
+        position: fixed;
+        right: initial;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: fit-content;
+      }
+    }
   }
 
   .ods-popover {
     height: fit-content;
-    max-width: helpers.space(50);
+    overflow: auto;
+    overscroll-behavior: contain;
     position: absolute;
     visibility: initial;
     width: max-content;
 
     // position ==========>
-    &.-top--center,
-    &.-top--start,
-    &.-top--end {
+    &:where(.-top--center, .-top--start, .-top--end) {
       @include _position(bottom);
     }
 
-    &.-bottom--center,
-    &.-bottom--start,
-    &.-bottom--end {
+    &:where(.-bottom--center, .-bottom--start, .-bottom--end) {
       @include _position(top);
     }
 
-    &.-left--center,
-    &.-left--start,
-    &.-left--end {
+    &:where(.-left--center, .-left--start, .-left--end) {
       @include _position(right);
     }
 
-    &.-right--center,
-    &.-right--start,
-    &.-right--end {
+    &:where(.-right--center, .-right--start, .-right--end) {
       @include _position(left);
     }
     // <========== position
 
     // alignment ==========>
-    &.-top--center,
-    &.-bottom--center {
+    &:where(.-top--center, .-bottom--center) {
       @include _center(X);
     }
 
-    &.-left--center,
-    &.-right--center {
+    &:where(.-left--center, .-right--center) {
       @include _center(Y);
     }
 
-    &.-top--start,
-    &.-bottom--start {
+    &:where(.-top--start, .-bottom--start) {
       left: 0;
     }
 
-    &.-left--start,
-    &.-right--start {
+    &:where(.-left--start, .-right--start) {
       top: 0;
     }
 
-    &.-top--end,
-    &.-bottom--end {
+    &:where(.-top--end, .-bottom--end) {
       right: 0;
     }
 
-    &.-left--end,
-    &.-right--end {
+    &:where(.-left--end, .-right--end) {
       bottom: 0;
     }
     // <========== alignment
@@ -83,7 +101,7 @@
 
 @mixin _position($side) {
   #{$side}: 100%;
-  margin-#{$side}: helpers.space(1);
+  margin-#{$side}: var(--popover-gap, helpers.space(0.125));
 }
 
 @mixin _center($axis) {