@indico-data/design-system 2.33.0 → 2.34.0

package/.storybook/preview-head.html

@@ -9,10 +9,6 @@
     padding: 0.75em 1em;
   }
 
-  input[type='number'] {
-    background-color: revert;
-  }
-
   .sbdocs.sbdocs-content {
     max-width: 1200px;
   }

package/lib/index.css

@@ -530,9 +530,6 @@ a:hover, .link:hover {
   padding-left: var(--pf-padding-2);
   padding-right: var(--pf-padding-2);
 }
-.btn--icon-only.btn--md {
-  height: 32px;
-}
 
 .btn--primary {
   background: var(--pf-button-primary-color);
@@ -1120,6 +1117,101 @@ a:hover, .link:hover {
   margin-bottom: var(--pf-margin-2);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-number-input-background-color: var(--pf-white-color);
+  --pf-number-input-border-color: var(--pf-form-input-border-color);
+  --pf-number-input-text-color: var(--pf-gray-color);
+  --pf-number-input-placeholder-text-color: var(--pf-gray-color-300);
+  --pf-number-input-help-text-color: var(--pf-gray-color-400);
+  --pf-number-input-disabled-background-color: var(--pf-gray-color-100);
+  --pf-number-input-disabled-color: var(--pf-gray-color-400);
+  --pf-number-input-padding: 10px;
+  --pf-number-input-rounded: var(--pf-rounded);
+}
+
+:root [data-theme=dark] {
+  --pf-number-input-background-color: var(--pf-primary-color);
+  --pf-number-input-border-color: var(--pf-form-input-border-color);
+  --pf-number-input-text-color: var(--pf-gray-color-100);
+  --pf-number-input-placeholder-text-color: var(--pf-gray-color-600);
+  --pf-number-input-help-text-color: var(--pf-gray-color-200);
+  --pf-number-input-disabled-background-color: var(--pf-primary-color-200);
+  --pf-number-input-disabled-border-color: var(--pf-gray-color-300);
+  --pf-number-input-disabled-color: var(--pf-gray-color-400);
+}
+
+.number-input {
+  background-color: var(--pf-number-input-background-color);
+  border: var(--pf-border-thin) solid var(--pf-input-border-color);
+  border-radius: var(--pf-number-input-rounded);
+  color: var(--pf-number-input-text-color);
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--pf-size-9);
+  padding-right: var(--pf-number-input-padding);
+  padding-left: var(--pf-number-input-padding);
+}
+.number-input--is-clearable {
+  padding-right: var(--pf-padding-7);
+}
+.number-input--has-icon {
+  padding-left: var(--pf-padding-7);
+}
+.number-input::-moz-placeholder {
+  color: var(--pf-number-input-placeholder-text-color);
+}
+.number-input::placeholder {
+  color: var(--pf-number-input-placeholder-text-color);
+}
+.number-input:focus {
+  border-color: var(--pf-primary-color);
+}
+.number-input.error {
+  border-color: var(--pf-error-color);
+}
+.number-input.success {
+  border-color: var(--pf-success-color);
+}
+.number-input.warning {
+  border-color: var(--pf-warning-color);
+}
+.number-input.info {
+  border-color: var(--pf-info-color);
+}
+.number-input:disabled {
+  background-color: var(--pf-number-input-disabled-background-color);
+  border-color: var(--pf-number-input-disabled-border-color);
+  color: var(--pf-number-input-disabled-color);
+}
+
+.form-control .help-text {
+  margin-top: var(--pf-margin-2);
+  margin-bottom: var(--pf-margin-2);
+  color: var(--pf-number-input-help-text-color);
+  font-size: var(--pf-font-size-subtitle2);
+}
+.form-control .number-input-wrapper {
+  position: relative;
+}
+.form-control .number-input-wrapper .embedded-icon {
+  position: absolute;
+  top: 10px;
+  left: var(--pf-margin-2);
+  color: var(--pf-number-input-text-color);
+}
+.form-control .number-input-wrapper .clearable-icon {
+  position: absolute;
+  top: var(--pf-margin-3);
+  right: var(--pf-margin-2);
+  color: var(--pf-number-input-text-color);
+  cursor: pointer;
+}
+.form-control .form-label {
+  margin-bottom: var(--pf-margin-2);
+}
+
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {

package/lib/index.d.ts

@@ -934,12 +934,10 @@ interface LabelProps {
     label: string;
     name: string;
     isRequired?: boolean;
-}
-interface WithLabelProps extends LabelProps {
     hasHiddenLabel?: boolean;
 }
 
-interface InputProps extends WithLabelProps {
+interface BaseInputProps {
     value?: string | undefined;
     placeholder?: string;
     onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
@@ -951,7 +949,9 @@ interface InputProps extends WithLabelProps {
     className?: string;
     defaultValue?: string;
 }
-declare const LabeledInput: React$1.ForwardRefExoticComponent<Omit<InputProps & React$1.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React$1.RefAttributes<any>>;
+interface InputProps extends BaseInputProps, LabelProps {
+}
+declare const LabeledInput: React$1.ForwardRefExoticComponent<Omit<InputProps & React$1.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React$1.RefAttributes<any>>;
 
 interface RadioProps {
     ref?: React$1.LegacyRef<HTMLInputElement>;
@@ -991,7 +991,7 @@ interface ToggleProps {
 }
 declare const Toggle: React$1.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
-interface TextareaProps extends WithLabelProps {
+interface TextareaProps extends LabelProps {
     ref?: React$1.LegacyRef<HTMLTextAreaElement>;
     placeholder?: string;
     value?: string | undefined;
@@ -1008,9 +1008,9 @@ interface TextareaProps extends WithLabelProps {
     autofocus?: boolean;
     defaultValue?: string;
 }
-declare const LabeledTextarea: React$1.ForwardRefExoticComponent<Omit<Omit<TextareaProps, "ref"> & React$1.RefAttributes<HTMLTextAreaElement> & WithLabelProps, "ref"> & React$1.RefAttributes<any>>;
+declare const LabeledTextarea: React$1.ForwardRefExoticComponent<Omit<Omit<TextareaProps, "ref"> & React$1.RefAttributes<HTMLTextAreaElement> & LabelProps, "ref"> & React$1.RefAttributes<any>>;
 
-interface PasswordInputProps extends WithLabelProps {
+interface PasswordInputProps extends LabelProps {
     ref?: React$1.LegacyRef<HTMLInputElement>;
     value?: string | undefined;
     placeholder?: string;
@@ -1021,7 +1021,7 @@ interface PasswordInputProps extends WithLabelProps {
     hasShowPassword?: boolean;
     defaultValue?: string;
 }
-declare const LabeledPasswordInput: React$1.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React$1.RefAttributes<any>>;
+declare const LabeledPasswordInput: React$1.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React$1.RefAttributes<any>>;
 
 interface SelectProps<OptionType extends SelectOption> extends Props$r<OptionType> {
     options: OptionType[];

package/lib/index.esm.css

@@ -530,9 +530,6 @@ a:hover, .link:hover {
   padding-left: var(--pf-padding-2);
   padding-right: var(--pf-padding-2);
 }
-.btn--icon-only.btn--md {
-  height: 32px;
-}
 
 .btn--primary {
   background: var(--pf-button-primary-color);
@@ -1120,6 +1117,101 @@ a:hover, .link:hover {
   margin-bottom: var(--pf-margin-2);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-number-input-background-color: var(--pf-white-color);
+  --pf-number-input-border-color: var(--pf-form-input-border-color);
+  --pf-number-input-text-color: var(--pf-gray-color);
+  --pf-number-input-placeholder-text-color: var(--pf-gray-color-300);
+  --pf-number-input-help-text-color: var(--pf-gray-color-400);
+  --pf-number-input-disabled-background-color: var(--pf-gray-color-100);
+  --pf-number-input-disabled-color: var(--pf-gray-color-400);
+  --pf-number-input-padding: 10px;
+  --pf-number-input-rounded: var(--pf-rounded);
+}
+
+:root [data-theme=dark] {
+  --pf-number-input-background-color: var(--pf-primary-color);
+  --pf-number-input-border-color: var(--pf-form-input-border-color);
+  --pf-number-input-text-color: var(--pf-gray-color-100);
+  --pf-number-input-placeholder-text-color: var(--pf-gray-color-600);
+  --pf-number-input-help-text-color: var(--pf-gray-color-200);
+  --pf-number-input-disabled-background-color: var(--pf-primary-color-200);
+  --pf-number-input-disabled-border-color: var(--pf-gray-color-300);
+  --pf-number-input-disabled-color: var(--pf-gray-color-400);
+}
+
+.number-input {
+  background-color: var(--pf-number-input-background-color);
+  border: var(--pf-border-thin) solid var(--pf-input-border-color);
+  border-radius: var(--pf-number-input-rounded);
+  color: var(--pf-number-input-text-color);
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--pf-size-9);
+  padding-right: var(--pf-number-input-padding);
+  padding-left: var(--pf-number-input-padding);
+}
+.number-input--is-clearable {
+  padding-right: var(--pf-padding-7);
+}
+.number-input--has-icon {
+  padding-left: var(--pf-padding-7);
+}
+.number-input::-moz-placeholder {
+  color: var(--pf-number-input-placeholder-text-color);
+}
+.number-input::placeholder {
+  color: var(--pf-number-input-placeholder-text-color);
+}
+.number-input:focus {
+  border-color: var(--pf-primary-color);
+}
+.number-input.error {
+  border-color: var(--pf-error-color);
+}
+.number-input.success {
+  border-color: var(--pf-success-color);
+}
+.number-input.warning {
+  border-color: var(--pf-warning-color);
+}
+.number-input.info {
+  border-color: var(--pf-info-color);
+}
+.number-input:disabled {
+  background-color: var(--pf-number-input-disabled-background-color);
+  border-color: var(--pf-number-input-disabled-border-color);
+  color: var(--pf-number-input-disabled-color);
+}
+
+.form-control .help-text {
+  margin-top: var(--pf-margin-2);
+  margin-bottom: var(--pf-margin-2);
+  color: var(--pf-number-input-help-text-color);
+  font-size: var(--pf-font-size-subtitle2);
+}
+.form-control .number-input-wrapper {
+  position: relative;
+}
+.form-control .number-input-wrapper .embedded-icon {
+  position: absolute;
+  top: 10px;
+  left: var(--pf-margin-2);
+  color: var(--pf-number-input-text-color);
+}
+.form-control .number-input-wrapper .clearable-icon {
+  position: absolute;
+  top: var(--pf-margin-3);
+  right: var(--pf-margin-2);
+  color: var(--pf-number-input-text-color);
+  cursor: pointer;
+}
+.form-control .form-label {
+  margin-bottom: var(--pf-margin-2);
+}
+
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {

package/lib/index.esm.js

@@ -20973,7 +20973,7 @@ const Input = React__default.forwardRef((_a, ref) => {
         error: hasErrors,
         'input--has-icon': iconName,
     }, className);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledInput = withLabel(Input);