Select component props passthrough (#670)

- 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.

Author: sean-mckenna

CHANGELOG.md

@@ -57,6 +57,11 @@
 
 - Upgrade dependencies #450
 
+## 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))

packages/react-components/source/react/library/select/Select.js

@@ -380,6 +380,11 @@ class Select extends Component {
       style,
       type,
       value,
+      actionLabel,
+      onChange,
+      onFilter,
+      onBlur: onBlurProp,
+      ...restProps
     } = this.props;
 
     let input;
@@ -411,6 +416,7 @@ class Select extends Component {
             }}
             onChange={onValueChange}
             autoComplete="off"
+            {...restProps}
           />
         );
         break;
@@ -431,6 +437,7 @@ class Select extends Component {
               ref={button => {
                 this.button = button;
               }}
+              {...restProps}
             />
             <input
               type="hidden"

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.

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));
   }
 

packages/react-components/source/scss/library/components/forms/_input.scss

@@ -98,7 +98,7 @@
     padding-left: 31px;
   }
 
-  .rc-input-icon.trailing ~ .rc-input {
+  .rc-input:has(+ .rc-input-icon.trailing) {
     padding-right: 31px;
   }
 
@@ -125,7 +125,7 @@
       right: $puppet-common-spacing-base * 4 - 1;
     }
 
-    .rc-input-icon.trailing ~ .rc-input {
+    .rc-input:has(+ .rc-input-icon.trailing) {
       padding-right: $puppet-common-spacing-base * 10 - 1;
     }
   }