Select component props passthrough

- Allow additional props such as data-testid to be passed to the inner select component. - Add more useful select autocomplete styleguide example. - Set the input icon button loading style to transparent.
puppetlabs · Jun 24, 2024 · 445554e · 445554e
1 parent 0cd0f2f
commit 445554e
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## react-components 5.34.10 (2024-06-24)
+
+- [Select] Pass through additional props to select inner component (by [@sean-mckenna](https://github.com/sean-mckenna))
+- [Button] Remove button loading background colour (by [@sean-mckenna](https://github.com/sean-mckenna))
+
 ## react-components 5.34.9 (2024-04-29)
 
 - [Logo] Adjust Security Compliance Management logo viewBox to match Continuous Delivery (by [@Lukeaber](https://github.com/Lukeaber))

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@puppet/react-components",
-  "version": "5.34.9",
+  "version": "5.34.10",
   "author": "Puppet, Inc.",
   "license": "Apache-2.0",
   "main": "build/library.js",
@@ -91,4 +91,4 @@
     "regenerator-runtime": "^0.13.7",
     "scroll-into-view-if-needed": "^2.2.25"
   }
-}
+}
diff --git a/packages/react-components/source/react/library/input/Input.js b/packages/react-components/source/react/library/input/Input.js
@@ -165,6 +165,7 @@ const Input = ({
     >
       {icon && lIcon}
       {trailingIcon && tIcon}
+      {showTrailingButton && trailingButton}
       <Element
         id={name}
         name={name}
@@ -178,7 +179,6 @@ const Input = ({
         onChange={e => onChange(parseValue(e.target.value), e)}
         {...otherProps}
       />
-      {showTrailingButton && trailingButton}
     </div>
   );
 };

diff --git a/packages/react-components/source/react/library/select/Select.js b/packages/react-components/source/react/library/select/Select.js
@@ -380,6 +380,7 @@ class Select extends Component {
       style,
       type,
       value,
+      ...restProps
     } = this.props;
 
     let input;
@@ -411,6 +412,7 @@ class Select extends Component {
             }}
             onChange={onValueChange}
             autoComplete="off"
+            {...restProps}
           />
         );
         break;
@@ -431,6 +433,7 @@ class Select extends Component {
               ref={button => {
                 this.button = button;
               }}
+              {...restProps}
             />
             <input
               type="hidden"

diff --git a/packages/react-components/source/react/library/select/Select.md b/packages/react-components/source/react/library/select/Select.md
@@ -30,7 +30,7 @@ const options = [
   options={options}
   value={value}
   onChange={newValue => setValue(newValue)}
-/>
+/>;
 ```
 
 ### Nonexistent value
@@ -61,17 +61,23 @@ const isValueInOptions = options.map(option => option.value).includes(value);
     value={value}
     onChange={newValue => setValue(newValue)}
   />
-  {!isValueInOptions && <Alert type="warning" style={{ marginTop: 10 }}>"{value}" is not an option</Alert>}
-</>
+  {!isValueInOptions && (
+    <Alert type="warning" style={{ marginTop: 10 }}>
+      "{value}" is not an option
+    </Alert>
+  )}
+</>;
 ```
 
 ## Variations
 
 ### Autocomplete
 
-With `type` set to `autocomplete`, the `Select` input will accept text and provide filtered menu options accordingly. Full keyboard navigation of the menu options is retained.
+With `type` set to `autocomplete`, the `Select` input will accept text and the menu options can be filtered accordingly. Full keyboard navigation of the menu options is retained.
 
 ```jsx
+const [fieldValue, setFieldValue] = React.useState('');
+
 const options = [
   { value: 'apple', label: 'apple' },
   { value: 'orange', label: 'orange' },
@@ -86,16 +92,30 @@ const options = [
 
 const style = { margin: 10 };
 
+const noResults = [
+  {
+    value: [],
+    label: 'No results found',
+  },
+];
+
+let filteredOptions = [...options];
+if (state.fieldValue !== undefined && state.fieldValue !== '') {
+  filteredOptions = options.filter(options =>
+    options.label.includes(state.fieldValue),
+  );
+}
+
 <div>
   <Select
     name="autocomplete-example"
-    options={options}
+    options={filteredOptions.length === 0 ? noResults : filteredOptions}
     placeholder="Select your fruit"
     style={style}
-    value={state.value1}
-    onChange={value1 => {
-      console.log('New Value:', value1);
-      setState({ value1 });
+    value={state.fieldValue}
+    onChange={fieldValue => {
+      console.log('New Value:', fieldValue);
+      setState({ fieldValue });
     }}
     onBlur={() => {
       console.log('onBlur');
@@ -111,35 +131,40 @@ To render an option group, provide an array of child options as the value for a
 still have labels, and if a parent is disabled, all its child options will be disabled, too.
 
 ```jsx
-const optionsWithGroups = [{
-  label: "Spices",
-  value: [
-    {label: "Cinnamon", value: "cinnamon"},
-    {label: "Coriander", value: "coriander"},
-    {label: "Cumin", value: "cumin"},
-  ]
-}, {
-  label: "Oil",
-  value: "oil"
-}, {
-  label: "Vinegar",
-  value: "vinegar"
-}, {
-  label: "Herbs",
-  disabled: true,
-  value: [
-    {label: "Parsley", value: "parsley"},
-    {label: "Sage", value: "sage"},
-    {label: "Rosemary", value: "rosemary"},
-  ]
-}];
+const optionsWithGroups = [
+  {
+    label: 'Spices',
+    value: [
+      { label: 'Cinnamon', value: 'cinnamon' },
+      { label: 'Coriander', value: 'coriander' },
+      { label: 'Cumin', value: 'cumin' },
+    ],
+  },
+  {
+    label: 'Oil',
+    value: 'oil',
+  },
+  {
+    label: 'Vinegar',
+    value: 'vinegar',
+  },
+  {
+    label: 'Herbs',
+    disabled: true,
+    value: [
+      { label: 'Parsley', value: 'parsley' },
+      { label: 'Sage', value: 'sage' },
+      { label: 'Rosemary', value: 'rosemary' },
+    ],
+  },
+];
 
 <Select
   name="select-option-group-example"
   options={optionsWithGroups}
   value={state.value}
   onChange={value => {
-    setState({value});
+    setState({ value });
   }}
 />;
 ```
@@ -228,6 +253,7 @@ const style = { margin: 10 };
 ```
 
 ## Option properties
+
 ### Disabled options
 
 Use the `disabled` object property to disable a row in a dropdown.

diff --git a/packages/react-components/source/scss/library/components/_button.scss b/packages/react-components/source/scss/library/components/_button.scss
@@ -152,8 +152,7 @@ $puppet-button-padding-vertical: 5px;
     @include button-type-properties(map-get($typedef, hover));
   }
 
-  &:active,
-  &.rc-button-loading {
+  &:active {
     @include button-type-properties(map-get($typedef, active));
   }