diff --git a/src/components/c3GraphCard/tests/__snapshots__/c3GraphCard.test.js.snap b/src/components/c3GraphCard/tests/__snapshots__/c3GraphCard.test.js.snap index 03085cf83..246c67ad3 100644 --- a/src/components/c3GraphCard/tests/__snapshots__/c3GraphCard.test.js.snap +++ b/src/components/c3GraphCard/tests/__snapshots__/c3GraphCard.test.js.snap @@ -109,6 +109,7 @@ exports[`C3GraphCard Component should render a non-connected component: non-conn className="" id="generatedid-" isDisabled={false} + isToggleText={true} name={null} onSelect={[Function]} options={ @@ -134,6 +135,7 @@ exports[`C3GraphCard Component should render a non-connected component: non-conn } placeholder="t(curiosity-graph.dropdownPlaceholder)" selectedOptions="daily" + toggleIcon={null} variant="single" /> @@ -195,6 +197,7 @@ exports[`C3GraphCard Component should render multiple states: fulfilled 1`] = ` className="" id="generatedid-" isDisabled={false} + isToggleText={true} name={null} onSelect={[Function]} options={ @@ -220,6 +223,7 @@ exports[`C3GraphCard Component should render multiple states: fulfilled 1`] = ` } placeholder="t(curiosity-graph.dropdownPlaceholder)" selectedOptions="daily" + toggleIcon={null} variant="single" /> @@ -343,6 +347,7 @@ exports[`C3GraphCard Component should render multiple states: pending 1`] = ` className="" id="generatedid-" isDisabled={false} + isToggleText={true} name={null} onSelect={[Function]} options={ @@ -368,6 +373,7 @@ exports[`C3GraphCard Component should render multiple states: pending 1`] = ` } placeholder="t(curiosity-graph.dropdownPlaceholder)" selectedOptions="daily" + toggleIcon={null} variant="single" /> diff --git a/src/components/form/__tests__/__snapshots__/select.test.js.snap b/src/components/form/__tests__/__snapshots__/select.test.js.snap index df6e93ed5..d7cc1222d 100644 --- a/src/components/form/__tests__/__snapshots__/select.test.js.snap +++ b/src/components/form/__tests__/__snapshots__/select.test.js.snap @@ -146,6 +146,87 @@ exports[`Select Component should allow selected options to match value or title: `; +exports[`Select Component should disable toggle text: disabled text 1`] = ` + +`; + exports[`Select Component should render a basic component: basic dropdown 1`] = `
); + expect(component).toMatchSnapshot('disabled text'); + }); }); diff --git a/src/components/form/select.js b/src/components/form/select.js index 4b61e9768..21d95a2fd 100644 --- a/src/components/form/select.js +++ b/src/components/form/select.js @@ -170,7 +170,7 @@ class Select extends React.Component { */ render() { const { options, selected, isExpanded } = this.state; - const { ariaLabel, className, isDisabled, placeholder, variant } = this.props; + const { ariaLabel, className, isDisabled, isToggleText, placeholder, toggleIcon, variant } = this.props; const pfSelectOptions = {}; @@ -187,13 +187,14 @@ class Select extends React.Component { */ return ( @@ -215,8 +216,9 @@ class Select extends React.Component { /** * Prop types. * - * @type {{name: string, options: object, selectedOptions: (number|string|Array), variant: (object|string), - * className: string, id: string, isDisabled: boolean, placeholder: string, ariaLabel: string, + * @type {{isToggleText: boolean, toggleIcon: Node|Function, name: string, options: object, + * selectedOptions: (number|string|Array), variant: (object|string), className: string, + * id: string, isDisabled: boolean, placeholder: string, ariaLabel: string, * onSelect: Function}} */ Select.propTypes = { @@ -224,6 +226,7 @@ Select.propTypes = { className: PropTypes.string, id: PropTypes.string, isDisabled: PropTypes.bool, + isToggleText: PropTypes.bool, name: PropTypes.string, onSelect: PropTypes.func, options: PropTypes.oneOfType([ @@ -242,28 +245,31 @@ Select.propTypes = { }), PropTypes.object ]), - selectedOptions: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]), placeholder: PropTypes.string, + selectedOptions: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]), + toggleIcon: PropTypes.element, variant: PropTypes.oneOf([...Object.values(SelectVariant)]) }; /** * Default props. * - * @type {{name: null, options: Array, selectedOptions: null, variant: SelectVariant.single, - * className: string, id: string, isDisabled: boolean, placeholder: string, - * ariaLabel: string, onSelect: Function}} + * @type {{isToggleText: boolean, toggleIcon: null, name: null, options: Array, selectedOptions: null, + * variant: SelectVariant.single, className: string, id: string, isDisabled: boolean, + * placeholder: string, ariaLabel: string, onSelect: Function}} */ Select.defaultProps = { ariaLabel: 'Select option', className: '', id: helpers.generateId(), isDisabled: false, + isToggleText: true, name: null, onSelect: helpers.noop, options: [], - selectedOptions: null, placeholder: 'Select option', + selectedOptions: null, + toggleIcon: null, variant: SelectVariant.single }; diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap index e43a5925f..661293ad6 100644 --- a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap +++ b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap @@ -77,6 +77,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec className="" id="generatedid-" isDisabled={false} + isToggleText={true} name={null} onSelect={[Function]} options={ @@ -102,6 +103,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec } placeholder="t(curiosity-graph.dropdownPlaceholder)" selectedOptions="daily" + toggleIcon={null} variant="single" /> @@ -184,6 +186,7 @@ exports[`GraphCard Component should render multiple states: error with 403 statu className="" id="generatedid-" isDisabled={false} + isToggleText={true} name={null} onSelect={[Function]} options={ @@ -209,6 +212,7 @@ exports[`GraphCard Component should render multiple states: error with 403 statu } placeholder="t(curiosity-graph.dropdownPlaceholder)" selectedOptions="daily" + toggleIcon={null} variant="single" /> @@ -287,6 +291,7 @@ exports[`GraphCard Component should render multiple states: error with 500 statu className="" id="generatedid-" isDisabled={false} + isToggleText={true} name={null} onSelect={[Function]} options={ @@ -312,6 +317,7 @@ exports[`GraphCard Component should render multiple states: error with 500 statu } placeholder="t(curiosity-graph.dropdownPlaceholder)" selectedOptions="daily" + toggleIcon={null} variant="single" /> @@ -390,6 +396,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = ` className="" id="generatedid-" isDisabled={false} + isToggleText={true} name={null} onSelect={[Function]} options={ @@ -415,6 +422,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = ` } placeholder="t(curiosity-graph.dropdownPlaceholder)" selectedOptions="daily" + toggleIcon={null} variant="single" /> @@ -493,6 +501,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = ` className="" id="generatedid-" isDisabled={false} + isToggleText={true} name={null} onSelect={[Function]} options={ @@ -518,6 +527,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = ` } placeholder="t(curiosity-graph.dropdownPlaceholder)" selectedOptions="daily" + toggleIcon={null} variant="single" /> diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap index cbdcc079c..1c37e668f 100644 --- a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap +++ b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap @@ -51,6 +51,7 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri className="" id="generatedid-" isDisabled={false} + isToggleText={true} name={null} onSelect={[Function]} options={ @@ -67,6 +68,7 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri } placeholder="Select option" selectedOptions="cores" + toggleIcon={null} variant="single" /> @@ -125,6 +127,7 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = ` className="" id="generatedid-" isDisabled={false} + isToggleText={true} name={null} onSelect={[Function]} options={ @@ -141,6 +144,7 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = ` } placeholder="Select option" selectedOptions="cores" + toggleIcon={null} variant="single" /> @@ -199,6 +203,7 @@ exports[`OpenshiftView Component should render a non-connected component: non-co className="" id="generatedid-" isDisabled={false} + isToggleText={true} name={null} onSelect={[Function]} options={ @@ -215,6 +220,7 @@ exports[`OpenshiftView Component should render a non-connected component: non-co } placeholder="Select option" selectedOptions="cores" + toggleIcon={null} variant="single" /> diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap index ae6408309..78d949573 100644 --- a/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap +++ b/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap @@ -30,6 +30,7 @@ exports[`Toolbar Component should render a non-connected component: non-connecte className="" id="generatedid-" isDisabled={false} + isToggleText={true} name={null} onSelect={[Function]} options={ @@ -54,6 +55,7 @@ exports[`Toolbar Component should render a non-connected component: non-connecte } placeholder="t(curiosity-toolbar.slaPlaceholder)" selectedOptions={Array []} + toggleIcon={null} variant="single" /> diff --git a/src/styles/_form.scss b/src/styles/_form.scss new file mode 100644 index 000000000..ffe9c9a3f --- /dev/null +++ b/src/styles/_form.scss @@ -0,0 +1,11 @@ +.curiosity-toolbar { + .curiosity-select__no-toggle-text { + span.pf-c-select__toggle-arrow { + margin-left: var(--pf-c-select__toggle-arrow--MarginRight); + } + + span.pf-c-select__toggle-text { + display: none; + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 033c07d34..4943f31e1 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -15,3 +15,4 @@ @import 'tour'; @import 'skeleton'; @import 'table'; +@import 'form';