@financial-times/o3-form 0.7.2 → 0.8.0

package/README.md

@@ -457,6 +457,8 @@ import {CheckBoxGroup, CheckBoxItem} from '@financial-times/o3-form/cjs'; // or
 
 A dropdown select input for choosing one option from a list.
 
+**HTML**
+
 ```html
 <div class="o3-form-field">
   <label
@@ -493,6 +495,8 @@ A dropdown select input for choosing one option from a list.
 </div>
 ```
 
+**TSX**
+
 ```tsx
 import {SelectInput} from '@financial-times/o3-form';
 
@@ -508,6 +512,55 @@ import {SelectInput} from '@financial-times/o3-form';
 </SelectInput>
 ```
 
+#### Short Text Input
+
+Select input supports width control for shorter inputs:
+
+```html
+<div class="o3-form-field">
+  <label
+          class="o3-form-field__label"
+          for="o3-form-select-input-_3564083419195512"
+  >
+    Title
+  </label>
+  <div class="o3-form-select-input__container o3-form-select-input--short-3">
+    <select
+            id="o3-form-select-input-_3564083419195512"
+            class="o3-form o3-form-select-input"
+            required=""
+            aria-required="true"
+            maxlength="0"
+            type="select"
+    >
+      <option value="American Express">American Express</option>
+      <option value="Visa Debit">Visa Debit</option>
+      <option value="Visa Credit">Visa Credit</option>
+      <option value="Mastercard Debit">Mastercard Debit</option>
+      <option value="Mastercard Credit">Mastercard Credit</option>
+    </select>
+  </div>
+  <div class="o3-form-feedback o3-form-feedback__undefined">
+    <span class="o3-form-feedback__undefined-message"></span>
+  </div>
+</div>
+```
+
+**TSX**
+
+```tsx
+import {SelectInput} from '@financial-times/o3-form';
+
+<SelectInput
+ label="Title"
+ length="3"
+>
+  <option value="Mr">Mr</option>
+  <option value="Mrs">Mrs</option>
+  <option value="Mx>">Mx</option>
+</SelectInput>
+```
+
 ## Contact
 
 If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o3-editorial-typography/issues), visit [#origami-support](https://financialtimes.slack.com/messages/origami-support/) or email [Origami Support](mailto:origami-support@ft.com).

package/cjs/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CheckBoxProps, F as FormFieldsetProps } from './index-B5zd_nrf.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-1UM0FDHf.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

package/cjs/Error-summary.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as ErrorSummaryProps } from './index-B5zd_nrf.js';
+import { E as ErrorSummaryProps } from './index-1UM0FDHf.js';
 
 declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/PasswordInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PasswordInputProps } from './index-B5zd_nrf.js';
+import { P as PasswordInputProps } from './index-1UM0FDHf.js';
 
 declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, forgotPasswordLink, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RadioButtonProps, F as FormFieldsetProps } from './index-B5zd_nrf.js';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-1UM0FDHf.js';
 
 declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
 declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;

package/cjs/SelectInput.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SelectInputProps } from './index-B5zd_nrf.js';
+import { S as SelectInputProps } from './index-1UM0FDHf.js';
 
-declare const SelectInput: ({ label, feedback, description, disabled, attributes, inputId, optional, children, }: SelectInputProps) => react_jsx_runtime.JSX.Element;
+declare const SelectInput: ({ label, feedback, description, disabled, attributes, inputId, optional, children, length, }: SelectInputProps) => react_jsx_runtime.JSX.Element;
 
 export { SelectInput };

package/cjs/SelectInput.js

@@ -10,7 +10,8 @@ const SelectInput = ({
   attributes,
   inputId,
   optional,
-  children
+  children,
+  length
 }) => {
   const id = inputId || uniqueId("_");
   const inputClasses = ["o3-form", "o3-form-select-input"];
@@ -25,18 +26,24 @@ const SelectInput = ({
       description,
       inputId: id,
       optional,
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "o3-form-select-input__container", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "select",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
         {
-          ...attributes,
-          id,
-          disabled,
-          className: inputClasses.join(" "),
-          required: !optional,
-          "aria-required": !optional,
-          children
+          className: `o3-form-select-input__container ${length ? `o3-form-select-input--short-${length}` : ""}`,
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "select",
+            {
+              ...attributes,
+              id,
+              disabled,
+              className: inputClasses.join(" "),
+              required: !optional,
+              "aria-required": !optional,
+              children
+            }
+          )
         }
-      ) })
+      )
     }
   );
 };

package/cjs/TextInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TextInputProps } from './index-B5zd_nrf.js';
+import { T as TextInputProps } from './index-1UM0FDHf.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/fieldComponents/Feedback.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as FeedbackProps } from '../index-B5zd_nrf.js';
+import { a as FeedbackProps } from '../index-1UM0FDHf.js';
 
 declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/fieldComponents/FormField.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as FormFieldProps, F as FormFieldsetProps } from '../index-B5zd_nrf.js';
+import { b as FormFieldProps, F as FormFieldsetProps } from '../index-1UM0FDHf.js';
 
 declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
 declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;

package/cjs/{index-B5zd_nrf.d.ts → index-1UM0FDHf.d.ts}

@@ -17,6 +17,7 @@ interface SelectInputProps {
     children?: React.JSX.Element[];
     inputId?: string;
     label?: string;
+    length?: 1 | 3;
     description?: string;
     optional?: boolean;
     error?: boolean;

package/cjs/index.d.ts

@@ -5,6 +5,7 @@ export { CheckBox, CheckBoxGroup, CheckBoxItem } from './CheckBox.js';
 export { RadioButtonGroup, RadioButtonItem } from './RadioButton.js';
 export { ErrorSummary } from './Error-summary.js';
 export { PasswordInput } from './PasswordInput.js';
+export { SelectInput } from './SelectInput.js';
 export { TextInput } from './TextInput.js';
 import 'react/jsx-runtime';
-import './index-B5zd_nrf.js';
+import './index-1UM0FDHf.js';

package/cjs/index.js

@@ -5,4 +5,5 @@ var _CheckBox = require('./CheckBox'); _createStarExport(_CheckBox);
 var _RadioButton = require('./RadioButton'); _createStarExport(_RadioButton);
 var _Errorsummary = require('./Error-summary'); _createStarExport(_Errorsummary);
 var _PasswordInput = require('./PasswordInput'); _createStarExport(_PasswordInput);
+var _SelectInput = require('./SelectInput'); _createStarExport(_SelectInput);
 var _TextInput = require('./TextInput'); _createStarExport(_TextInput);

package/css/main.css

@@ -11,7 +11,7 @@
   display: flex;
   flex-direction: column;
   font-family: var(--o3-font-family-metric);
-  gap: var(--o3-spacing-xs);
+  gap: var(--o3-spacing-3xs);
 }
 .o3-form-field:where(fieldset) {
   margin: 0;
@@ -397,7 +397,6 @@ input[class*=o3-form-text-input][type=text]:disabled {
   position: relative;
   --o3-grid-columns-to-span-count: 4;
   max-width: var(--o3-grid-columns-to-span-width, 100%);
-  margin-top: var(--o3-spacing-3xs);
 }
 .o3-password-input__container input {
   width: 100%;
@@ -454,6 +453,14 @@ input[class*=o3-form-text-input][type=text]:disabled {
   -webkit-appearance: none;
   appearance: none;
 }
+.o3-form-select-input__container.o3-form-select-input--short-1 {
+  --_o3-form-select-input-max-width: calc(1.8em + 48px);
+  max-width: var(--_o3-form-select-input-max-width);
+}
+.o3-form-select-input__container.o3-form-select-input--short-3 {
+  --_o3-form-select-input-max-width: calc(2.5em + 48px);
+  max-width: var(--_o3-form-select-input-max-width);
+}
 .o3-form-select-input__container {
   position: relative;
   display: inline-block;

package/esm/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CheckBoxProps, F as FormFieldsetProps } from './index-B5zd_nrf.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-1UM0FDHf.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

package/esm/Error-summary.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as ErrorSummaryProps } from './index-B5zd_nrf.js';
+import { E as ErrorSummaryProps } from './index-1UM0FDHf.js';
 
 declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
 

package/esm/PasswordInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PasswordInputProps } from './index-B5zd_nrf.js';
+import { P as PasswordInputProps } from './index-1UM0FDHf.js';
 
 declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, forgotPasswordLink, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RadioButtonProps, F as FormFieldsetProps } from './index-B5zd_nrf.js';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-1UM0FDHf.js';
 
 declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
 declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;

package/esm/SelectInput.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SelectInputProps } from './index-B5zd_nrf.js';
+import { S as SelectInputProps } from './index-1UM0FDHf.js';
 
-declare const SelectInput: ({ label, feedback, description, disabled, attributes, inputId, optional, children, }: SelectInputProps) => react_jsx_runtime.JSX.Element;
+declare const SelectInput: ({ label, feedback, description, disabled, attributes, inputId, optional, children, length, }: SelectInputProps) => react_jsx_runtime.JSX.Element;
 
 export { SelectInput };

package/esm/SelectInput.js

@@ -10,7 +10,8 @@ const SelectInput = ({
   attributes,
   inputId,
   optional,
-  children
+  children,
+  length
 }) => {
   const id = inputId || uniqueId("_");
   const inputClasses = ["o3-form", "o3-form-select-input"];
@@ -25,18 +26,24 @@ const SelectInput = ({
       description,
       inputId: id,
       optional,
-      children: /* @__PURE__ */ jsx("div", { className: "o3-form-select-input__container", children: /* @__PURE__ */ jsx(
-        "select",
+      children: /* @__PURE__ */ jsx(
+        "div",
         {
-          ...attributes,
-          id,
-          disabled,
-          className: inputClasses.join(" "),
-          required: !optional,
-          "aria-required": !optional,
-          children
+          className: `o3-form-select-input__container ${length ? `o3-form-select-input--short-${length}` : ""}`,
+          children: /* @__PURE__ */ jsx(
+            "select",
+            {
+              ...attributes,
+              id,
+              disabled,
+              className: inputClasses.join(" "),
+              required: !optional,
+              "aria-required": !optional,
+              children
+            }
+          )
         }
-      ) })
+      )
     }
   );
 };

package/esm/TextInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TextInputProps } from './index-B5zd_nrf.js';
+import { T as TextInputProps } from './index-1UM0FDHf.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/fieldComponents/Feedback.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as FeedbackProps } from '../index-B5zd_nrf.mjs';
+import { a as FeedbackProps } from '../index-1UM0FDHf.mjs';
 
 declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
 

package/esm/fieldComponents/FormField.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as FormFieldProps, F as FormFieldsetProps } from '../index-B5zd_nrf.mjs';
+import { b as FormFieldProps, F as FormFieldsetProps } from '../index-1UM0FDHf.mjs';
 
 declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
 declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;

package/esm/{index-B5zd_nrf.d.ts → index-1UM0FDHf.d.ts}

@@ -17,6 +17,7 @@ interface SelectInputProps {
     children?: React.JSX.Element[];
     inputId?: string;
     label?: string;
+    length?: 1 | 3;
     description?: string;
     optional?: boolean;
     error?: boolean;

package/esm/index.d.ts

@@ -5,6 +5,7 @@ export { CheckBox, CheckBoxGroup, CheckBoxItem } from './CheckBox.js';
 export { RadioButtonGroup, RadioButtonItem } from './RadioButton.js';
 export { ErrorSummary } from './Error-summary.js';
 export { PasswordInput } from './PasswordInput.js';
+export { SelectInput } from './SelectInput.js';
 export { TextInput } from './TextInput.js';
 import 'react/jsx-runtime';
-import './index-B5zd_nrf.js';
+import './index-1UM0FDHf.js';

package/esm/index.js

@@ -5,4 +5,5 @@ export * from "./CheckBox";
 export * from "./RadioButton";
 export * from "./Error-summary";
 export * from "./PasswordInput";
+export * from "./SelectInput";
 export * from "./TextInput";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o3-form",
-	"version": "0.7.2",
+	"version": "0.8.0",
 	"description": "Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI",
 	"keywords": [
 		"form",