cozy-ui 121.9.0 → 122.0.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [122.0.0](https://github.com/cozy/cozy-ui/compare/v121.9.0...v122.0.0) (2025-04-03)
+
+
+### Features
+
+* Accept a number as elevation in SearchBar ([280fc63](https://github.com/cozy/cozy-ui/commit/280fc63))
+* Update font size of SearchBar ([60ea8e8](https://github.com/cozy/cozy-ui/commit/60ea8e8))
+
+
+### BREAKING CHANGES
+
+* SearchBar accepts now a number as elevation instead
+of a bool. If you used `elevation={true}` you can use
+`elevation={1}` and if you used `elevation={false}` you can use
+`elevation={0}.` Default value is kept (it was true so it is 1).
+
 # [121.9.0](https://github.com/cozy/cozy-ui/compare/v121.8.0...v121.9.0) (2025-04-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "121.9.0",
+  "version": "122.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/SearchBar/Readme.md

@@ -10,7 +10,7 @@ import Radio from 'cozy-ui/transpiled/react/Radios'
 import FormControl from 'cozy-ui/transpiled/react/FormControl'
 import FormLabel from 'cozy-ui/transpiled/react/FormLabel'
 
-const initialVariants = [{ elevation: true, button: false, customIcon: false, disabledClear: false }]
+const initialVariants = [{ button: false, customIcon: false, disabledClear: false }]
 initialState = { size: 'small' }
 
 ;
@@ -52,7 +52,16 @@ initialState = { size: 'small' }
         </FormControl>
         <Typography className="u-mb-half">Normal</Typography>
         <SearchBar className="u-mb-2"
-          elevation={variant.elevation}
+          elevation={0}
+          size={state.size}
+          disabledClear={variant.disabledClear}
+          type={variant.button ? "button" : "search"}
+          icon={variant.customIcon ? CloudIcon : undefined}
+          label={variant.button ? <Typography color="primary">This is a label</Typography> : undefined}
+        />
+        <Typography className="u-mb-half">With elevation</Typography>
+        <SearchBar className="u-mb-2"
+          elevation={10}
           size={state.size}
           disabledClear={variant.disabledClear}
           type={variant.button ? "button" : "search"}
@@ -62,7 +71,6 @@ initialState = { size: 'small' }
         <Typography className="u-mb-half">Disabled</Typography>
         <SearchBar
           disabled
-          elevation={variant.elevation}
           size={state.size}
           disabledClear={variant.disabledClear}
           type={variant.button ? "button" : "search"}

package/react/SearchBar/index.jsx

@@ -25,6 +25,13 @@ const sizeToPixel = {
   auto: 'auto'
 }
 
+const fontSizeToPixel = {
+  small: 14,
+  medium: 16,
+  large: 16,
+  auto: 16
+}
+
 const radiusBySize = {
   small: 20,
   medium: 24,
@@ -62,6 +69,7 @@ const useStyles = makeStyles(theme => ({
   },
   inputBase: {
     flex: 1,
+    fontSize: ({ size }) => (isTwakeTheme() ? fontSizeToPixel[size] : 16),
     paddingLeft: ({ icon }) => !icon && '1rem'
   },
   buttonBase: {
@@ -181,7 +189,7 @@ const SearchBar = forwardRef(
     return (
       <Paper
         component="form"
-        elevation={elevation ? 1 : 0}
+        elevation={elevation}
         className={cx(className, classes.root, {
           [classes.flat]: !elevation,
           [classes.elevation]: elevation,
@@ -238,7 +246,7 @@ const SearchBar = forwardRef(
 SearchBar.displayName = 'SearchBar'
 
 SearchBar.defaultProps = {
-  elevation: true,
+  elevation: 1,
   icon: MagnifierIcon,
   size: 'small',
   type: 'search',
@@ -266,7 +274,7 @@ SearchBar.propTypes = {
   defaultValue: PropTypes.string,
   disabledClear: PropTypes.bool,
   disabledFocus: PropTypes.bool,
-  elevation: PropTypes.bool,
+  elevation: PropTypes.number,
   placeholder: PropTypes.string,
   label: PropTypes.oneOfType([
     PropTypes.string,

package/transpiled/react/SearchBar/index.js

@@ -32,6 +32,12 @@ var sizeToPixel = {
   large: 56,
   auto: 'auto'
 };
+var fontSizeToPixel = {
+  small: 14,
+  medium: 16,
+  large: 16,
+  auto: 16
+};
 var radiusBySize = {
   small: 20,
   medium: 24,
@@ -71,8 +77,12 @@ var useStyles = makeStyles(function (theme) {
     },
     inputBase: {
       flex: 1,
-      paddingLeft: function paddingLeft(_ref3) {
-        var icon = _ref3.icon;
+      fontSize: function fontSize(_ref3) {
+        var size = _ref3.size;
+        return isTwakeTheme() ? fontSizeToPixel[size] : 16;
+      },
+      paddingLeft: function paddingLeft(_ref4) {
+        var icon = _ref4.icon;
         return !icon && '1rem';
       }
     },
@@ -85,8 +95,8 @@ var useStyles = makeStyles(function (theme) {
     typography: {
       color: 'currentColor',
       opacity: 0.42,
-      paddingLeft: function paddingLeft(_ref4) {
-        var icon = _ref4.icon;
+      paddingLeft: function paddingLeft(_ref5) {
+        var icon = _ref5.icon;
         return !icon && '1rem';
       }
     },
@@ -128,27 +138,27 @@ var useStyles = makeStyles(function (theme) {
     }
   };
 });
-var SearchBar = /*#__PURE__*/forwardRef(function (_ref5, ref) {
+var SearchBar = /*#__PURE__*/forwardRef(function (_ref6, ref) {
   var _cx, _componentsProps$inpu;
 
-  var placeholderProp = _ref5.placeholder,
-      icon = _ref5.icon,
-      size = _ref5.size,
-      type = _ref5.type,
-      labelProp = _ref5.label,
-      componentsProps = _ref5.componentsProps,
-      disabledClear = _ref5.disabledClear,
-      disabledFocus = _ref5.disabledFocus,
-      className = _ref5.className,
-      defaultValue = _ref5.defaultValue,
-      value = _ref5.value,
-      elevation = _ref5.elevation,
-      disabled = _ref5.disabled,
-      onChange = _ref5.onChange,
-      onClear = _ref5.onClear,
-      onFocus = _ref5.onFocus,
-      onBlur = _ref5.onBlur,
-      props = _objectWithoutProperties(_ref5, _excluded);
+  var placeholderProp = _ref6.placeholder,
+      icon = _ref6.icon,
+      size = _ref6.size,
+      type = _ref6.type,
+      labelProp = _ref6.label,
+      componentsProps = _ref6.componentsProps,
+      disabledClear = _ref6.disabledClear,
+      disabledFocus = _ref6.disabledFocus,
+      className = _ref6.className,
+      defaultValue = _ref6.defaultValue,
+      value = _ref6.value,
+      elevation = _ref6.elevation,
+      disabled = _ref6.disabled,
+      onChange = _ref6.onChange,
+      onClear = _ref6.onClear,
+      onFocus = _ref6.onFocus,
+      onBlur = _ref6.onBlur,
+      props = _objectWithoutProperties(_ref6, _excluded);
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
@@ -211,7 +221,7 @@ var SearchBar = /*#__PURE__*/forwardRef(function (_ref5, ref) {
 
   return /*#__PURE__*/React.createElement(Paper, _extends({
     component: "form",
-    elevation: elevation ? 1 : 0,
+    elevation: elevation,
     className: cx(className, classes.root, (_cx = {}, _defineProperty(_cx, classes.flat, !elevation), _defineProperty(_cx, classes.elevation, elevation), _defineProperty(_cx, classes.focused, isFocused && !disabledFocus), _defineProperty(_cx, classes.disabled, disabled), _cx)),
     ref: ref
   }, props), type === 'button' ? /*#__PURE__*/React.createElement(ButtonBase, {
@@ -246,7 +256,7 @@ var SearchBar = /*#__PURE__*/forwardRef(function (_ref5, ref) {
 });
 SearchBar.displayName = 'SearchBar';
 SearchBar.defaultProps = {
-  elevation: true,
+  elevation: 1,
   icon: MagnifierIcon,
   size: 'small',
   type: 'search',
@@ -275,7 +285,7 @@ SearchBar.propTypes = {
   defaultValue: PropTypes.string,
   disabledClear: PropTypes.bool,
   disabledFocus: PropTypes.bool,
-  elevation: PropTypes.bool,
+  elevation: PropTypes.number,
   placeholder: PropTypes.string,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
   disabled: PropTypes.bool,