Skip to content

Commit 21862c2

Browse files
ToMESSKaToMESSKa
committed
feat(ui-options,ui-select,ui-simple-select,ui-time-select): rework Select, SimpleSelect and TimeSelect
INSTUI-4807
1 parent c685444 commit 21862c2

28 files changed

Lines changed: 5302 additions & 68 deletions

File tree

‎packages/ui-options/src/Options/v2/Item/styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const generateStyle = (
7171
},
7272
'selected-highlighted': {
7373
background: componentTheme.selectedHighlightedBackground,
74-
color: componentTheme.highlightedLabelColor
74+
color: componentTheme.selectedLabelColor
7575
},
7676
default: {
7777
transition: 'background 200ms'

‎packages/ui-select/package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -77,18 +77,18 @@
7777
"default": "./es/exports/a.js"
7878
},
7979
"./v11_7": {
80-
"src": "./src/exports/a.ts",
81-
"types": "./types/exports/a.d.ts",
82-
"import": "./es/exports/a.js",
83-
"require": "./lib/exports/a.js",
84-
"default": "./es/exports/a.js"
80+
"src": "./src/exports/b.ts",
81+
"types": "./types/exports/b.d.ts",
82+
"import": "./es/exports/b.js",
83+
"require": "./lib/exports/b.js",
84+
"default": "./es/exports/b.js"
8585
},
8686
"./latest": {
87-
"src": "./src/exports/a.ts",
88-
"types": "./types/exports/a.d.ts",
89-
"import": "./es/exports/a.js",
90-
"require": "./lib/exports/a.js",
91-
"default": "./es/exports/a.js"
87+
"src": "./src/exports/b.ts",
88+
"types": "./types/exports/b.d.ts",
89+
"import": "./es/exports/b.js",
90+
"require": "./lib/exports/b.js",
91+
"default": "./es/exports/b.js"
9292
}
9393
}
9494
}

‎packages/ui-select/src/Select/v2/Group/index.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import { Component } from 'react'
26+
import type { SelectGroupProps } from './props'
27+
import { allowedProps } from './props'
28+
29+
/**
30+
---
31+
parent: Select
32+
id: Select.Group
33+
---
34+
@module Group
35+
**/
36+
class Group extends Component<SelectGroupProps> {
37+
static readonly componentId = 'Select.Group'
38+
39+
static allowedProps = allowedProps
40+
41+
static defaultProps = {}
42+
43+
/* istanbul ignore next */
44+
render() {
45+
// this component is only used for prop validation. Select.Group children
46+
// are parsed in Select and rendered as Options components
47+
return null
48+
}
49+
}
50+
51+
export default Group
52+
export { Group }

‎packages/ui-select/src/Select/v2/Group/props.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
import React from 'react'
25+
26+
import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types'
27+
28+
type SelectGroupOwnProps = {
29+
/**
30+
* The label associated with the group options.
31+
*/
32+
renderLabel: Renderable
33+
/**
34+
* Children of type `<SimpleSelect.Option />` that will be considered part of the group.
35+
*/
36+
children?: React.ReactNode // TODO: ChildrenPropTypes.oneOf([Option])
37+
}
38+
39+
type PropKeys = keyof SelectGroupOwnProps
40+
41+
type AllowedPropKeys = Readonly<Array<PropKeys>>
42+
43+
type SelectGroupProps = SelectGroupOwnProps &
44+
OtherHTMLAttributes<SelectGroupOwnProps>
45+
const allowedProps: AllowedPropKeys = ['renderLabel', 'children']
46+
47+
export type { SelectGroupProps }
48+
export { allowedProps }

‎packages/ui-select/src/Select/v2/Option/index.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import { Component } from 'react'
26+
import type { SelectOptionProps } from './props'
27+
import { allowedProps } from './props'
28+
29+
/**
30+
---
31+
parent: Select
32+
id: Select.Option
33+
---
34+
@module Option
35+
**/
36+
class Option extends Component<SelectOptionProps> {
37+
static readonly componentId = 'Select.Option'
38+
39+
static allowedProps = allowedProps
40+
41+
static defaultProps = {
42+
isHighlighted: false,
43+
isSelected: false,
44+
isDisabled: false
45+
}
46+
47+
/* istanbul ignore next */
48+
render() {
49+
// this component is only used for prop validation. Select.Option children
50+
// are parsed in Select and rendered as Options.Item components
51+
return null
52+
}
53+
}
54+
55+
export default Option
56+
export { Option }

‎packages/ui-select/src/Select/v2/Option/props.ts‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/*
2+
* The MIT License (MIT)
3+
*
4+
* Copyright (c) 2015 - present Instructure, Inc.
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in all
14+
* copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import React from 'react'
26+
import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types'
27+
28+
type OptionProps = {
29+
/**
30+
* The id for the option. **Must be globally unique**, it will be translated
31+
* to an `id` prop in the DOM.
32+
*/
33+
id: string
34+
/**
35+
* Whether or not this option is highlighted.
36+
*/
37+
isHighlighted?: boolean
38+
/**
39+
* Whether or not this option is selected.
40+
*/
41+
isSelected?: boolean
42+
/**
43+
* Whether or not this option is disabled.
44+
*/
45+
isDisabled?: boolean
46+
/**
47+
* Content to display as the option label.
48+
*/
49+
children?: React.ReactNode
50+
}
51+
52+
type RenderSelectOptionLabel = Renderable<OptionProps>
53+
54+
type SelectOptionOwnProps = OptionProps & {
55+
/**
56+
* Content to display before the option label, such as an icon.
57+
*/
58+
renderBeforeLabel?: RenderSelectOptionLabel
59+
/**
60+
* Content to display after the option label, such as an icon.
61+
*/
62+
renderAfterLabel?: RenderSelectOptionLabel
63+
}
64+
65+
type PropKeys = keyof SelectOptionOwnProps
66+
67+
type AllowedPropKeys = Readonly<Array<PropKeys>>
68+
69+
type SelectOptionProps = SelectOptionOwnProps &
70+
OtherHTMLAttributes<SelectOptionOwnProps>
71+
const allowedProps: AllowedPropKeys = [
72+
'id',
73+
'isHighlighted',
74+
'isSelected',
75+
'isDisabled',
76+
'renderBeforeLabel',
77+
'renderAfterLabel',
78+
'children'
79+
]
80+
81+
export type { SelectOptionProps, RenderSelectOptionLabel }
82+
export { allowedProps }

0 commit comments

Comments
 (0)