diff --git a/src/framework/ui/select/select.component.tsx b/src/framework/ui/select/select.component.tsx index d13f75fbb..6d1cfe7c6 100644 --- a/src/framework/ui/select/select.component.tsx +++ b/src/framework/ui/select/select.component.tsx @@ -81,7 +81,7 @@ export type SelectElement = React.ReactElement; interface State { visible: boolean; - menuWidth: number; + optionsListWidth: number; } /** @@ -437,7 +437,7 @@ class SelectComponent extends React.Component { public state: State = { visible: false, - menuWidth: 0, + optionsListWidth: 0, }; private strategy: SelectionStrategy; @@ -520,7 +520,7 @@ class SelectComponent extends React.Component { private onControlMeasure = (result: MeasureResult): void => { const width: number = result[MEASURED_CONTROL_TAG].size.width; - this.setState({ menuWidth: width }); + this.setState({ optionsListWidth: width }); }; private getComponentStyle = (source: StyleType): StyleType => { @@ -537,7 +537,7 @@ class SelectComponent extends React.Component { const iconStyles: StyleType = allWithPrefix(source, 'icon'); const textStyles: StyleType = allWithPrefix(source, 'text'); const placeholderStyles: StyleType = allWithPrefix(source, 'placeholder'); - const menuStyles: StyleType = allWithPrefix(source, 'menu'); + const optionsListStyles: StyleType = allWithPrefix(source, 'optionsList'); const labelStyle: StyleType = allWithPrefix(source, 'label'); const outlineStyles: StyleType = allWithPrefix(source, 'outline'); @@ -577,11 +577,11 @@ class SelectComponent extends React.Component { padding: outlineStyles.outlinePadding, borderRadius: outlineStyles.outlineBorderRadius, }, - menu: { - maxHeight: menuStyles.menuMaxHeight, - borderRadius: menuStyles.menuBorderRadius, - borderColor: menuStyles.menuBorderColor, - borderWidth: menuStyles.menuBorderWidth, + optionsList: { + maxHeight: optionsListStyles.optionsListMaxHeight, + borderRadius: optionsListStyles.optionsListBorderRadius, + borderColor: optionsListStyles.optionsListBorderColor, + borderWidth: optionsListStyles.optionsListBorderWidth, }, label: { color: labelStyle.labelColor, @@ -641,16 +641,16 @@ class SelectComponent extends React.Component { ); }; - private renderMenuElement = (style: StyleType): SelectOptionsListElement => { + private renderOptionsListElement = (style: StyleType): SelectOptionsListElement => { const { appearance, selectedOption, ...restProps } = this.props; - const additionalMenuStyle: StyleType = { width: this.state.menuWidth }; + const additionalOptionsListStyle: StyleType = { width: this.state.optionsListWidth }; return ( @@ -695,7 +695,7 @@ class SelectComponent extends React.Component { const { label } = this.props; return [ - this.renderMenuElement(style.menu), + this.renderOptionsListElement(style.optionsList), isValidString(label) && this.renderLabelElement(style.label), this.renderControlElement(), ]; @@ -703,10 +703,10 @@ class SelectComponent extends React.Component { public render(): SelectElement { const { themedStyle, style } = this.props; - const { visible, menuWidth } = this.state; + const { visible, optionsListWidth } = this.state; const componentStyle: StyleType = this.getComponentStyle(themedStyle); - const [menuElement, labelElement, controlElement] = this.renderComponentChildren(componentStyle); - const additionalMenuStyle: StyleType = { maxWidth: menuWidth }; + const [optionsListElement, labelElement, controlElement] = this.renderComponentChildren(componentStyle); + const additionalOptionsListStyle: StyleType = { maxWidth: optionsListWidth }; return ( @@ -714,8 +714,8 @@ class SelectComponent extends React.Component { {controlElement} @@ -741,7 +741,7 @@ const styles = StyleSheet.create({ width: 0, height: 6, }, - menu: { + optionsList: { flexGrow: 0, }, outlineContainer: { diff --git a/src/framework/ui/support/tests/mapping.json b/src/framework/ui/support/tests/mapping.json index 682b5ab39..6c01226d8 100644 --- a/src/framework/ui/support/tests/mapping.json +++ b/src/framework/ui/support/tests/mapping.json @@ -2274,16 +2274,16 @@ "iconMarginHorizontal": { "type": "number" }, - "menuMaxHeight": { + "optionsListMaxHeight": { "type": "number" }, - "menuBorderRadius": { + "optionsListBorderRadius": { "type": "number" }, - "menuBorderColor": { + "optionsListBorderColor": { "type": "string" }, - "menuBorderWidth": { + "optionsListBorderWidth": { "type": "number" }, "labelColor": { @@ -2351,10 +2351,10 @@ "appearances": { "default": { "mapping": { - "menuMaxHeight": 220, - "menuBorderRadius": 4, - "menuBorderColor": "border-basic-color-4", - "menuBorderWidth": 1, + "optionsListMaxHeight": 220, + "optionsListBorderRadius": 4, + "optionsListBorderColor": "border-basic-color-4", + "optionsListBorderWidth": 1, "borderRadius": 4, "borderWidth": 1, "paddingHorizontal": 8,