@odx/ui 3.9.3 → 3.10.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @odx/ui
 
+## 3.10.0
+
+### Minor Changes
+
+- 61c967c: new search bar component
+
 ## 3.9.3
 
 ### Patch Changes

package/core-theme.css

@@ -4385,8 +4385,8 @@ html body .odx-fs-italic {
 }
 
 .odx-header {
-  padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
-  padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  padding-inline-start: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
+  padding-inline-end: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
   min-height: calc(var(--odx-vertical-rythm-base-size) * 2);
@@ -4432,6 +4432,9 @@ html body .odx-fs-italic {
     display: block;
   }
 }
+.odx-header .odx-search-bar:not(:last-child) {
+  margin-inline-end: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+}
 
 .odx-header-navigation {
   background-color: var(--odx-c-background-content);
@@ -5994,6 +5997,71 @@ html body .odx-fs-italic {
   transform: rotateX(180deg);
 }
 
+.odx-search-bar {
+  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
+  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
+  transition-property: background-color, color, outline-color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
+  outline: var(--odx-v-outline-width) solid transparent;
+  outline-offset: calc(-1 * var(--odx-v-outline-width));
+  background-color: var(--odx-input-control-background-color);
+  border-radius: var(--odx-v-border-radius-controls);
+  display: flex;
+  outline-color: var(--odx-input-control-outline-color);
+  overflow: hidden;
+  position: relative;
+}
+.odx-search-bar:focus-within:has(input:focus-visible) {
+  outline-color: var(--odx-c-focus-outline);
+}
+.odx-search-bar:focus-within:has(input:focus-visible) {
+  background-color: var(--odx-c-focus);
+}
+@media (hover: hover){
+.odx-search-bar:focus-within:has(input:focus-visible):hover {
+  background-color: var(--odx-c-focus);
+}
+}
+.odx-search-bar:not(:has(input[odxSearchBarControl])) {
+  display: none;
+}
+.odx-search-bar__prefix {
+  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
+  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
+  height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
+  transition-property: color;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
+  display: inline-flex;
+  align-items: center;
+  padding-inline-start: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  flex: 0 0 auto;
+}
+.odx-search-bar__input {
+  padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+  vertical-align: middle;
+  width: 100%;
+}
+.odx-search-bar__input::-moz-placeholder {
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+  color: var(--odx-input-control-color);
+  opacity: 0.65;
+}
+.odx-search-bar__input::placeholder {
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+  color: var(--odx-input-control-color);
+  opacity: 0.65;
+}
+
 :root {
   --odx-select-max-height: 220px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "3.9.3",
+  "version": "3.10.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/components/header.component.scss

@@ -6,8 +6,8 @@
 @use '../layout/typography' as *;
 
 .odx-header {
-  @include dimensions.padding(math.div(20, 24), 'left');
-  @include dimensions.padding(0.5, 'right');
+  @include dimensions.padding(math.div(20, 24), 'inline-start');
+  @include dimensions.padding(0.5, 'inline-end');
   @include dimensions.min-height(2);
   @include utils.vertical-center-content();
 
@@ -53,4 +53,10 @@
       display: block;
     }
   }
+
+  .odx-search-bar {
+    &:not(:last-child) {
+      margin-inline-end: dimensions.get-size(0.5);
+    }
+  }
 }

package/scss/components/search-bar.component.scss

@@ -0,0 +1,47 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use '../abstract/motion';
+
+.odx-search-bar {
+  @include dimensions.min-height(1.5);
+  @include motion.transition(background-color color outline-color);
+  @include utils.with-outline();
+  @include utils.focus-state(true, true, 'input');
+
+  background-color: var(--odx-input-control-background-color);
+  border-radius: var(--odx-v-border-radius-controls);
+  display: flex;
+  outline-color: var(--odx-input-control-outline-color);
+  overflow: hidden;
+  position: relative;
+
+  &:not(:has(input[odxSearchBarControl])) {
+    display: none;
+  }
+
+  &__prefix {
+    @include dimensions.height(1.5);
+    @include motion.transition(color);
+    @include utils.vertical-center-content(true);
+    @include dimensions.padding(math.div(8, 24), 'inline-start');
+
+    flex: 0 0 auto;
+  }
+
+  &__input {
+    @include dimensions.padding-x(math.div(8, 24));
+    @include typography.font-weight(medium);
+
+    vertical-align: middle;
+    width: 100%;
+
+    &::placeholder {
+      @include typography.font-weight(normal);
+
+      color: var(--odx-input-control-color);
+      opacity: 0.65;
+    }
+  }
+}

package/scss/core.scss

@@ -80,6 +80,7 @@ Layout
 @use 'components/rich-list.component.scss';
 @use 'components/rich-list-item-header.component.scss';
 @use 'components/rich-list-item.component.scss';
+@use 'components/search-bar.component.scss';
 @use 'components/select.component';
 @use 'components/slider.component';
 @use 'components/spinbox.component';