@jsenv/navi 0.9.1 → 0.9.2

package/dist/jsenv_navi.js

@@ -22296,6 +22296,7 @@ const FormBasic = forwardRef((props, ref) => {
   const {
     readOnly,
     loading,
+    style,
     children,
     ...rest
   } = props;
@@ -22312,9 +22313,14 @@ const FormBasic = forwardRef((props, ref) => {
       loading
     };
   }, [loading]);
+  const {
+    all
+  } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle(all, style);
   return jsx("form", {
     ...rest,
     ref: innerRef,
+    style: innerStyle,
     onReset: e => {
       // browser would empty all fields to their default values (likely empty/unchecked)
       // we want to reset to the last known external state instead
@@ -28230,12 +28236,13 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   }
 `;
 const Text = ({
-  children,
   color,
   bold,
   italic,
   underline,
+  size,
   style,
+  children,
   ...rest
 }) => {
   const {
@@ -28246,6 +28253,7 @@ const Text = ({
     color,
     fontWeight: bold ? "bold" : undefined,
     fontStyle: italic ? "italic" : undefined,
+    fontSize: size,
     textDecoration: underline ? "underline" : undefined
   }, style);
   return jsx("span", {
@@ -28255,23 +28263,21 @@ const Text = ({
     children: children
   });
 };
-const alignYMapping = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end"
-};
 const Icon = ({
-  alignY,
+  color,
+  size,
   style,
   children,
   ...rest
 }) => {
-  const innerStyle = {
-    ...style
-  };
-  if (alignY !== "center") {
-    innerStyle["--align-y"] = alignYMapping[alignY];
-  }
+  const {
+    all
+  } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle({
+    ...all,
+    color,
+    fontSize: size
+  }, style);
   return jsx("span", {
     ...rest,
     className: "navi_icon",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",

package/src/components/field/form.jsx

@@ -25,6 +25,8 @@ import {
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
+import { useLayoutStyle } from "../layout/use_layout_style.js";
+import { withPropsStyle } from "../props_composition/with_props_style.js";
 import { collectFormElementValues } from "./collect_form_element_values.js";
 import {
   useActionEvents,
@@ -75,7 +77,7 @@ export const Form = forwardRef((props, ref) => {
 
 const FormBasic = forwardRef((props, ref) => {
   const uiStateController = useContext(UIStateControllerContext);
-  const { readOnly, loading, children, ...rest } = props;
+  const { readOnly, loading, style, children, ...rest } = props;
   const innerRef = useRef();
   useImperativeHandle(ref, () => innerRef.current);
 
@@ -90,10 +92,14 @@ const FormBasic = forwardRef((props, ref) => {
     return { loading };
   }, [loading]);
 
+  const { all } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle(all, style);
+
   return (
     <form
       {...rest}
       ref={innerRef}
+      style={innerStyle}
       onReset={(e) => {
         // browser would empty all fields to their default values (likely empty/unchecked)
         // we want to reset to the last known external state instead

package/src/components/text/text.jsx

@@ -25,12 +25,13 @@ import.meta.css = /* css */ `
 `;
 
 export const Text = ({
-  children,
   color,
   bold,
   italic,
   underline,
+  size,
   style,
+  children,
   ...rest
 }) => {
   const { all } = useLayoutStyle(rest);
@@ -40,6 +41,7 @@ export const Text = ({
       color,
       fontWeight: bold ? "bold" : undefined,
       fontStyle: italic ? "italic" : undefined,
+      fontSize: size,
       textDecoration: underline ? "underline" : undefined,
     },
     style,
@@ -52,16 +54,16 @@ export const Text = ({
   );
 };
 
-const alignYMapping = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-};
-export const Icon = ({ alignY, style, children, ...rest }) => {
-  const innerStyle = { ...style };
-  if (alignY !== "center") {
-    innerStyle["--align-y"] = alignYMapping[alignY];
-  }
+export const Icon = ({ color, size, style, children, ...rest }) => {
+  const { all } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle(
+    {
+      ...all,
+      color,
+      fontSize: size,
+    },
+    style,
+  );
 
   return (
     <span {...rest} className="navi_icon" style={innerStyle}>