fix: add className property to ListInput

bluecatengineering · Aug 7, 2024 · 806d9c9 · 806d9c9
1 parent dc3953d
commit 806d9c9
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 1 deletion.
diff --git a/packages/pelagos/__tests__/listInput/ListInput-test.js b/packages/pelagos/__tests__/listInput/ListInput-test.js
@@ -33,6 +33,14 @@ describe('ListInput', () => {
 			expect(wrapper.getElement()).toMatchSnapshot();
 		});
 
+		it('renders expected elements when className is set', () => {
+			const wrapper = shallow(
+				<ListInput id="test" className="TestClass" label="Test" list={[{id: '0', name: 'test'}]} />
+			);
+			expect(wrapper.getElement()).toMatchSnapshot();
+			expect(useRandomId.mock.calls).toEqual([['test']]);
+		});
+
 		it('renders expected elements when error is set', () => {
 			const wrapper = shallow(
 				<ListInput

diff --git a/packages/pelagos/__tests__/listInput/__snapshots__/ListInput-test.js.snap b/packages/pelagos/__tests__/listInput/__snapshots__/ListInput-test.js.snap
@@ -184,3 +184,49 @@ exports[`ListInput rendering renders expected elements when the list is empty 1`
   </div>
 </div>
 `;
+
+exports[`ListInput rendering renders expected elements when className is set 1`] = `
+<div
+  className="ListInput TestClass"
+>
+  <div
+    aria-live="assertive"
+    className="sr-only"
+  />
+  <LabelLine
+    error={false}
+    htmlFor="random-id"
+    id="random-id-label"
+    text="Test"
+  />
+  <ComboBox
+    aria-describedby="random-id-helper"
+    autoSelect={true}
+    error={false}
+    getSuggestions={[Function]}
+    id="random-id"
+    onChange={[Function]}
+    onEnter={[Function]}
+    onTextChange={[Function]}
+    text=""
+  />
+  <FieldHelper
+    id="random-id-helper"
+  />
+  <ListEntries
+    className="ListInput__list"
+    highlightKey={null}
+    id="random-id-grid"
+    list={
+      [
+        {
+          "id": "0",
+          "name": "test",
+        },
+      ]
+    }
+    onHighlightClear={[Function]}
+    onRemoveClick={[Function]}
+  />
+</div>
+`;
diff --git a/packages/pelagos/src/listInput/ListInput.js b/packages/pelagos/src/listInput/ListInput.js
@@ -15,6 +15,7 @@ import './ListInput.less';
 /** An input box for a list of values. */
 const ListInput = ({
 	id,
+	className,
 	label,
 	required,
 	emptyText,
@@ -152,7 +153,7 @@ const ListInput = ({
 	const helperId = `${id}-helper`;
 	const errorId = `${id}-error`;
 	return (
-		<div className="ListInput">
+		<div className={`ListInput${className ? ` ${className}` : ''}`}>
 			<div className="sr-only" aria-live="assertive" ref={liveRef} />
 			<LabelLine id={labelId} htmlFor={id} text={label} required={required} error={!!error} />
 			<ComboBox
@@ -195,6 +196,8 @@ const ListInput = ({
 ListInput.propTypes = {
 	/** The component id. */
 	id: PropTypes.string,
+	/** The component class name(s). */
+	className: PropTypes.string,
 	/** The label text. */
 	label: PropTypes.string,
 	/** Whether the field is required. */