From f4344467608ae6e1de019e557dbfbde8b804bc19 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 3 Nov 2021 10:27:37 -0700 Subject: [PATCH 01/10] react-select component structure --- packages/react-select/.babelrc.json | 3 + packages/react-select/.eslintrc.json | 4 + packages/react-select/.npmignore | 29 +++++ packages/react-select/.storybook/main.js | 12 ++ packages/react-select/.storybook/preview.js | 3 + .../react-select/.storybook/tsconfig.json | 9 ++ packages/react-select/CHANGELOG.json | 4 + packages/react-select/CHANGELOG.md | 1 + packages/react-select/LICENSE | 15 +++ packages/react-select/README.md | 9 ++ packages/react-select/Spec.md | 53 ++++++++ .../bundle-size/Select.fixture.js | 7 + .../react-select/config/api-extractor.json | 4 + .../config/api-extractor.local.json | 5 + packages/react-select/config/tests.js | 7 + packages/react-select/etc/react-select.api.md | 3 + packages/react-select/jest.config.js | 21 +++ packages/react-select/just.config.ts | 3 + packages/react-select/package.json | 66 ++++++++++ packages/react-select/src/Select.ts | 1 + .../react-select/src/common/isConformant.ts | 17 +++ .../src/components/Select/Select.stories.tsx | 85 ++++++++++++ .../src/components/Select/Select.test.tsx | 18 +++ .../src/components/Select/Select.tsx | 18 +++ .../src/components/Select/Select.types.ts | 25 ++++ .../src/components/Select/index.ts | 5 + .../src/components/Select/renderSelect.tsx | 17 +++ .../src/components/Select/useSelect.ts | 38 ++++++ .../src/components/Select/useSelectStyles.ts | 121 ++++++++++++++++++ packages/react-select/src/index.ts | 1 + packages/react-select/tsconfig.json | 18 +++ 31 files changed, 622 insertions(+) create mode 100644 packages/react-select/.babelrc.json create mode 100644 packages/react-select/.eslintrc.json create mode 100644 packages/react-select/.npmignore create mode 100644 packages/react-select/.storybook/main.js create mode 100644 packages/react-select/.storybook/preview.js create mode 100644 packages/react-select/.storybook/tsconfig.json create mode 100644 packages/react-select/CHANGELOG.json create mode 100644 packages/react-select/CHANGELOG.md create mode 100644 packages/react-select/LICENSE create mode 100644 packages/react-select/README.md create mode 100644 packages/react-select/Spec.md create mode 100644 packages/react-select/bundle-size/Select.fixture.js create mode 100644 packages/react-select/config/api-extractor.json create mode 100644 packages/react-select/config/api-extractor.local.json create mode 100644 packages/react-select/config/tests.js create mode 100644 packages/react-select/etc/react-select.api.md create mode 100644 packages/react-select/jest.config.js create mode 100644 packages/react-select/just.config.ts create mode 100644 packages/react-select/package.json create mode 100644 packages/react-select/src/Select.ts create mode 100644 packages/react-select/src/common/isConformant.ts create mode 100644 packages/react-select/src/components/Select/Select.stories.tsx create mode 100644 packages/react-select/src/components/Select/Select.test.tsx create mode 100644 packages/react-select/src/components/Select/Select.tsx create mode 100644 packages/react-select/src/components/Select/Select.types.ts create mode 100644 packages/react-select/src/components/Select/index.ts create mode 100644 packages/react-select/src/components/Select/renderSelect.tsx create mode 100644 packages/react-select/src/components/Select/useSelect.ts create mode 100644 packages/react-select/src/components/Select/useSelectStyles.ts create mode 100644 packages/react-select/src/index.ts create mode 100644 packages/react-select/tsconfig.json diff --git a/packages/react-select/.babelrc.json b/packages/react-select/.babelrc.json new file mode 100644 index 00000000000000..b51a5457ced106 --- /dev/null +++ b/packages/react-select/.babelrc.json @@ -0,0 +1,3 @@ +{ + "plugins": ["module:@fluentui/babel-make-styles", "annotate-pure-calls", "@babel/transform-react-pure-annotations"] +} diff --git a/packages/react-select/.eslintrc.json b/packages/react-select/.eslintrc.json new file mode 100644 index 00000000000000..ceea884c70dccc --- /dev/null +++ b/packages/react-select/.eslintrc.json @@ -0,0 +1,4 @@ +{ + "extends": ["plugin:@fluentui/eslint-plugin/react"], + "root": true +} diff --git a/packages/react-select/.npmignore b/packages/react-select/.npmignore new file mode 100644 index 00000000000000..fa2d3a7f5111ca --- /dev/null +++ b/packages/react-select/.npmignore @@ -0,0 +1,29 @@ +.cache/ +.storybook/ +.vscode/ +bundle-size/ +config/ +coverage/ +e2e/ +etc/ +node_modules/ +src/ +temp/ +__fixtures__ +__mocks__ +__tests__ + +*.api.json +*.log +*.spec.* +*.stories.* +*.test.* +*.yml + +# config files +*config.* +*rc.* +.editorconfig +.eslint* +.git* +.prettierignore diff --git a/packages/react-select/.storybook/main.js b/packages/react-select/.storybook/main.js new file mode 100644 index 00000000000000..ec377d98606fa9 --- /dev/null +++ b/packages/react-select/.storybook/main.js @@ -0,0 +1,12 @@ +const rootMain = require('../../../.storybook/main'); + +module.exports = /** @type {Pick} */ ({ + stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'], + addons: [...rootMain.addons], + webpackFinal: (config, options) => { + const localConfig = { ...rootMain.webpackFinal(config, options) }; + + return localConfig; + }, + previewHead: rootMain.previewHead, +}); diff --git a/packages/react-select/.storybook/preview.js b/packages/react-select/.storybook/preview.js new file mode 100644 index 00000000000000..b52409294c3304 --- /dev/null +++ b/packages/react-select/.storybook/preview.js @@ -0,0 +1,3 @@ +import * as rootPreview from '../../../.storybook/preview'; + +export const decorators = [...rootPreview.decorators]; diff --git a/packages/react-select/.storybook/tsconfig.json b/packages/react-select/.storybook/tsconfig.json new file mode 100644 index 00000000000000..3bd9adcd2ee05e --- /dev/null +++ b/packages/react-select/.storybook/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true + }, + "exclude": ["../**/*.test.ts", "../**/*.test.js", "../**/*.test.tsx", "../**/*.test.jsx"], + "include": ["../src/**/*", "*.js"] +} diff --git a/packages/react-select/CHANGELOG.json b/packages/react-select/CHANGELOG.json new file mode 100644 index 00000000000000..02419e13c36754 --- /dev/null +++ b/packages/react-select/CHANGELOG.json @@ -0,0 +1,4 @@ +{ + "name": "@fluentui/react-select", + "entries": [] +} diff --git a/packages/react-select/CHANGELOG.md b/packages/react-select/CHANGELOG.md new file mode 100644 index 00000000000000..0652ab0f4e7540 --- /dev/null +++ b/packages/react-select/CHANGELOG.md @@ -0,0 +1 @@ +# Change Log - @fluentui/react-select diff --git a/packages/react-select/LICENSE b/packages/react-select/LICENSE new file mode 100644 index 00000000000000..cda7b6794f831b --- /dev/null +++ b/packages/react-select/LICENSE @@ -0,0 +1,15 @@ +@fluentui/react-select + +Copyright (c) Microsoft Corporation + +All rights reserved. + +MIT License + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-select/README.md b/packages/react-select/README.md new file mode 100644 index 00000000000000..0ab27288c85752 --- /dev/null +++ b/packages/react-select/README.md @@ -0,0 +1,9 @@ +# @fluentui/react-select + +**React Select components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)** + +The Select component provides a styled wrapper around the native `` element, and inherits the native semantics and keyboard interactivity. diff --git a/packages/react-select/bundle-size/Select.fixture.js b/packages/react-select/bundle-size/Select.fixture.js new file mode 100644 index 00000000000000..b45292b75d6a2e --- /dev/null +++ b/packages/react-select/bundle-size/Select.fixture.js @@ -0,0 +1,7 @@ +import { Select } from '@fluentui/react-select'; + +console.log(Select); + +export default { + name: 'Select', +}; diff --git a/packages/react-select/config/api-extractor.json b/packages/react-select/config/api-extractor.json new file mode 100644 index 00000000000000..f890ae360b7f7f --- /dev/null +++ b/packages/react-select/config/api-extractor.json @@ -0,0 +1,4 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json" +} diff --git a/packages/react-select/config/api-extractor.local.json b/packages/react-select/config/api-extractor.local.json new file mode 100644 index 00000000000000..c2ea401c1c3685 --- /dev/null +++ b/packages/react-select/config/api-extractor.local.json @@ -0,0 +1,5 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "./api-extractor.json", + "mainEntryPointFilePath": "/dist//src/index.d.ts" +} diff --git a/packages/react-select/config/tests.js b/packages/react-select/config/tests.js new file mode 100644 index 00000000000000..3882d3702ddc99 --- /dev/null +++ b/packages/react-select/config/tests.js @@ -0,0 +1,7 @@ +/** Jest test setup file. */ + +const { configure } = require('enzyme'); +const Adapter = require('enzyme-adapter-react-16'); + +// Configure enzyme. +configure({ adapter: new Adapter() }); diff --git a/packages/react-select/etc/react-select.api.md b/packages/react-select/etc/react-select.api.md new file mode 100644 index 00000000000000..0f6cd58fc2c736 --- /dev/null +++ b/packages/react-select/etc/react-select.api.md @@ -0,0 +1,3 @@ +## API Report File for "@fluentui/react-select" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). diff --git a/packages/react-select/jest.config.js b/packages/react-select/jest.config.js new file mode 100644 index 00000000000000..bb97b75b793a43 --- /dev/null +++ b/packages/react-select/jest.config.js @@ -0,0 +1,21 @@ +// @ts-check + +/** + * @type {jest.InitialOptions} + */ +module.exports = { + displayName: 'react-select', + preset: '../../jest.preset.js', + globals: { + 'ts-jest': { + tsConfig: '/tsconfig.json', + diagnostics: false, + }, + }, + transform: { + '^.+\\.tsx?$': 'ts-jest', + }, + coverageDirectory: './coverage', + setupFilesAfterEnv: ['./config/tests.js'], + snapshotSerializers: ['@fluentui/jest-serializer-make-styles'], +}; diff --git a/packages/react-select/just.config.ts b/packages/react-select/just.config.ts new file mode 100644 index 00000000000000..bcc7d9d264037c --- /dev/null +++ b/packages/react-select/just.config.ts @@ -0,0 +1,3 @@ +import { preset } from '@fluentui/scripts'; + +preset(); diff --git a/packages/react-select/package.json b/packages/react-select/package.json new file mode 100644 index 00000000000000..8eddeffafadf38 --- /dev/null +++ b/packages/react-select/package.json @@ -0,0 +1,66 @@ +{ + "name": "@fluentui/react-select", + "version": "9.0.0-beta.0", + "description": "Fluent UI React Select component", + "private": true, + "main": "lib-commonjs/index.js", + "module": "lib/index.js", + "typings": "lib/index.d.ts", + "sideEffects": false, + "repository": { + "type": "git", + "url": "https://github.com/microsoft/fluentui" + }, + "license": "MIT", + "scripts": { + "build": "just-scripts build", + "bundle-size": "bundle-size measure", + "clean": "just-scripts clean", + "code-style": "just-scripts code-style", + "just": "just-scripts", + "lint": "just-scripts lint", + "start": "yarn storybook", + "test": "jest", + "docs": "api-extractor run --config=config/api-extractor.local.json --local", + "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-select/src && yarn docs", + "bundle:storybook": "just-scripts storybook:build", + "storybook": "start-storybook" + }, + "devDependencies": { + "@fluentui/babel-make-styles": "9.0.0-beta.2", + "@fluentui/eslint-plugin": "*", + "@fluentui/jest-serializer-make-styles": "9.0.0-beta.2", + "@fluentui/react-conformance": "*", + "@fluentui/react-conformance-make-styles": "9.0.0-beta.2", + "@fluentui/scripts": "^1.0.0", + "@types/enzyme": "3.10.3", + "@types/enzyme-adapter-react-16": "1.0.3", + "@types/react": "16.9.42", + "@types/react-dom": "16.9.10", + "@types/react-test-renderer": "^16.0.0", + "enzyme": "~3.10.0", + "enzyme-adapter-react-16": "^1.15.0", + "react": "16.8.6", + "react-dom": "16.8.6", + "react-test-renderer": "^16.3.0" + }, + "dependencies": { + "@fluentui/react-make-styles": "9.0.0-beta.2", + "@fluentui/react-utilities": "9.0.0-beta.2", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "@types/react-dom": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0", + "react-dom": ">=16.8.0 <18.0.0" + }, + "beachball": { + "tag": "beta", + "disallowedChangeTypes": [ + "major", + "minor", + "patch" + ] + } +} diff --git a/packages/react-select/src/Select.ts b/packages/react-select/src/Select.ts new file mode 100644 index 00000000000000..e8124f76739fbb --- /dev/null +++ b/packages/react-select/src/Select.ts @@ -0,0 +1 @@ +export * from './components/Select/index'; diff --git a/packages/react-select/src/common/isConformant.ts b/packages/react-select/src/common/isConformant.ts new file mode 100644 index 00000000000000..a07566835d1e7c --- /dev/null +++ b/packages/react-select/src/common/isConformant.ts @@ -0,0 +1,17 @@ +import { isConformant as baseIsConformant } from '@fluentui/react-conformance'; +import type { IsConformantOptions, TestObject } from '@fluentui/react-conformance'; +import makeStylesTests from '@fluentui/react-conformance-make-styles'; + +export function isConformant( + testInfo: Omit, 'componentPath'> & { componentPath?: string }, +) { + const defaultOptions: Partial> = { + asPropHandlesRef: true, + componentPath: module!.parent!.filename.replace('.test', ''), + disabledTests: ['has-docblock'], + skipAsPropTests: true, + extraTests: makeStylesTests as TestObject, + }; + + baseIsConformant(defaultOptions, testInfo); +} diff --git a/packages/react-select/src/components/Select/Select.stories.tsx b/packages/react-select/src/components/Select/Select.stories.tsx new file mode 100644 index 00000000000000..415c4931bc718d --- /dev/null +++ b/packages/react-select/src/components/Select/Select.stories.tsx @@ -0,0 +1,85 @@ +/// +import * as React from 'react'; +import { makeStyles } from '@fluentui/react-make-styles'; +import { Select } from './Select'; +import { getNativeElementProps, useId } from '@fluentui/react-utilities'; +import { SelectProps } from './Select.types'; +import { ArgTypes } from '@storybook/react'; + +const useStyles = makeStyles({ + container: { + display: 'flex', + flexDirection: 'column', + gap: '1em', + padding: '1em', + }, +}); + +export const SelectExamples = ( + args: Partial & React.SelectHTMLAttributes & { storyFilledBackground: boolean }, +) => { + const styles = useStyles(); + const selectId1 = useId(); + const selectId2 = useId(); + // pass native select props to the internal select element and custom props to the root + const { storyFilledBackground, ...rest } = args; + const selectProps = getNativeElementProps('select', rest, ['size']); + const props: Partial = { select: selectProps }; + for (const prop of Object.keys(rest) as (keyof SelectProps)[]) { + if (!(selectProps as Partial)[prop]) { + props[prop] = rest[prop]; + } + } + + return ( +
+
+ + +
+

+ Some text with + + inline select +

+
+ + +
+
+ ); +}; + +const argTypes: ArgTypes = { + size: { defaultValue: 'medium', control: { type: 'radio', options: ['small', 'medium', 'large'] } }, + appearance: { + defaultValue: 'outline', + control: { type: 'radio', options: ['filledDarker', 'filledLighter', 'underline', 'outline'] }, + }, +}; + +export default { + title: 'Components/Select', + component: Select, + argTypes, +}; diff --git a/packages/react-select/src/components/Select/Select.test.tsx b/packages/react-select/src/components/Select/Select.test.tsx new file mode 100644 index 00000000000000..5e9576f36516d8 --- /dev/null +++ b/packages/react-select/src/components/Select/Select.test.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { Select } from './Select'; +import { isConformant } from '../../common/isConformant'; + +describe('Select', () => { + isConformant({ + Component: Select, + displayName: 'Select', + }); + + // TODO add more tests here, and create visual regression tests in /apps/vr-tests + + it('renders the default state', () => { + const result = render(` element */ + select: IntrinsicShorthandProps<'select'>; + /** the icon, typically a down arrow */ + icon: IntrinsicShorthandProps<'span'>; +}; + +export interface SelectCommons { + /** + * Matches the Input sizes + * @default 'medium' + */ + size?: 'small' | 'medium' | 'large'; + inline?: boolean; + /** @default 'outline' */ + appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter'; +} + +export type SelectProps = ComponentProps & Partial; + +export type SelectState = ComponentState & SelectCommons; diff --git a/packages/react-select/src/components/Select/index.ts b/packages/react-select/src/components/Select/index.ts new file mode 100644 index 00000000000000..8db1ab454a2735 --- /dev/null +++ b/packages/react-select/src/components/Select/index.ts @@ -0,0 +1,5 @@ +export * from './Select'; +export * from './Select.types'; +export * from './renderSelect'; +export * from './useSelect'; +export * from './useSelectStyles'; diff --git a/packages/react-select/src/components/Select/renderSelect.tsx b/packages/react-select/src/components/Select/renderSelect.tsx new file mode 100644 index 00000000000000..b1ac26ab2d4243 --- /dev/null +++ b/packages/react-select/src/components/Select/renderSelect.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { getSlots } from '@fluentui/react-utilities'; +import { selectShorthandProps } from './useSelect'; +import type { SelectSlots, SelectState } from './Select.types'; + +/** + * Render the final JSX of Select + */ +export const renderSelect = (state: SelectState) => { + const { slots, slotProps } = getSlots(state, selectShorthandProps); + return ( + + {slotProps.root.children} + + + ); +}; diff --git a/packages/react-select/src/components/Select/useSelect.ts b/packages/react-select/src/components/Select/useSelect.ts new file mode 100644 index 00000000000000..bf4e9d76f4dc2d --- /dev/null +++ b/packages/react-select/src/components/Select/useSelect.ts @@ -0,0 +1,38 @@ +import * as React from 'react'; +import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import type { SelectProps, SelectSlots, SelectState } from './Select.types'; + +/** + * Array of all shorthand properties listed as the keys of SelectSlots + */ +export const selectShorthandProps: (keyof SelectSlots)[] = ['select', 'icon', 'root']; + +/** + * Create the state required to render Select. + * + * The returned state can be modified with hooks such as useSelectStyles, + * before being passed to renderSelect. + * + * @param props - props from this instance of Select + * @param ref - reference to root HTMLSelectElement of Select + */ +export const useSelect = (props: SelectProps, ref: React.Ref): SelectState => { + const { select, icon, size, appearance, inline } = props; + + return { + size, + appearance, + inline, + components: { + root: 'span', + select: 'select', + icon: 'span', + }, + select: resolveShorthand(select, { required: true }), + icon: resolveShorthand(icon, { required: true }), + root: getNativeElementProps('span', { + ref, + ...props, + }), + }; +}; diff --git a/packages/react-select/src/components/Select/useSelectStyles.ts b/packages/react-select/src/components/Select/useSelectStyles.ts new file mode 100644 index 00000000000000..c7fc95c2d4dfbc --- /dev/null +++ b/packages/react-select/src/components/Select/useSelectStyles.ts @@ -0,0 +1,121 @@ +import { makeStyles, mergeClasses } from '@fluentui/react-make-styles'; +import type { SelectState } from './Select.types'; +import type { Theme } from '@fluentui/react-theme'; + +// TODO(sharing) use theme values once available +const horizontalSpacing = { + xxs: '2px', + xs: '4px', + sNudge: '6px', + s: '8px', + mNudge: '10px', + m: '12px', +}; +const contentSizes = { + // TODO: borrowed this from Input, should be in the theme somewhere? + body1: (theme: Theme) => ({ + fontSize: theme.fontSizeBase300, + lineHeight: theme.lineHeightBase300, + }), + caption1: (theme: Theme) => ({ + fontSize: theme.fontSizeBase200, + lineHeight: theme.lineHeightBase200, + }), + // eslint-disable-next-line @typescript-eslint/naming-convention + 400: (theme: Theme) => ({ + fontSize: theme.fontSizeBase400, + lineHeight: theme.lineHeightBase400, + }), +}; +// TODO: borrowed this from Input (Select has the same size in design comps) +// Should be in the theme somewhere? +const fieldHeights = { + small: '24px', + medium: '32px', + large: '40px', +}; +const borderRadius = (theme: Theme) => theme.borderRadiusMedium; + +// TODO: borrowed this from Input, should be in the theme somewhere? +// Form fields share the same size/appearance variants/font sizes +const backgroundColors = { + /** for outline/filledLighter */ + filledLighter: (theme: Theme) => theme.colorNeutralBackground1, + filledDarker: (theme: Theme) => theme.colorNeutralBackground3, + /** for underline */ + transparent: (theme: Theme) => theme.colorTransparentBackground, +}; + +const useRootStyles = makeStyles({ + base: theme => ({ + fontFamily: theme.fontFamilyBase, + boxSizing: 'border-box', + '*, *:before, *:after': { + boxSizing: 'border-box', + }, + }), +}); + +const useSelectElementStyles = makeStyles({ + base: theme => ({ + padding: `0 ${horizontalSpacing.xxs}`, + color: theme.colorNeutralForeground1, + borderRadios: borderRadius, + + ':focus-visible': { + outline: '2px solid transparent', + }, + }), + small: theme => ({ + height: fieldHeights.small, + ...contentSizes.caption1(theme), + }), + medium: theme => ({ + height: fieldHeights.medium, + ...contentSizes.body1(theme), + }), + large: theme => ({ + height: fieldHeights.large, + padding: `0 ${horizontalSpacing.sNudge}`, + ...contentSizes[400](theme), + }), + outline: theme => ({ + // This is set on selectWrapper but doesn't inherit + background: backgroundColors.filledLighter(theme), + }), + underline: theme => ({ + background: backgroundColors.transparent(theme), + }), + filledLighter: theme => ({ + background: backgroundColors.filledLighter(theme), + }), + filledDarker: theme => ({ + background: backgroundColors.filledDarker(theme), + }), + disabled: theme => ({ + color: theme.colorNeutralForegroundDisabled, + background: theme.colorTransparentBackground, + }), +}); + +/** + * Apply styling to the Select slots based on the state + */ +export const useSelectStyles = (state: SelectState): SelectState => { + const { size = 'medium', appearance = 'outline' } = state; + const disabled = state.select.disabled; + const rootStyles = useRootStyles(); + const selectStyles = useSelectElementStyles(); + + state.root.className = mergeClasses(rootStyles.base, state.root.className); + + state.select.className = mergeClasses( + selectStyles.base, + selectStyles[size], + selectStyles[appearance], + disabled && selectStyles.disabled, + state.select.className, + ); + + return state; +}; diff --git a/packages/react-select/src/index.ts b/packages/react-select/src/index.ts new file mode 100644 index 00000000000000..7868ecbae29d8f --- /dev/null +++ b/packages/react-select/src/index.ts @@ -0,0 +1 @@ +export * from './Select'; diff --git a/packages/react-select/tsconfig.json b/packages/react-select/tsconfig.json new file mode 100644 index 00000000000000..851c909e1eadf8 --- /dev/null +++ b/packages/react-select/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../tsconfig.base.json", + "include": ["src"], + "compilerOptions": { + "target": "ES5", + "module": "CommonJS", + "lib": ["es5", "dom"], + "outDir": "dist", + "jsx": "react", + "declaration": true, + "experimentalDecorators": true, + "importHelpers": true, + "noUnusedLocals": true, + "preserveConstEnums": true, + "types": ["jest", "custom-global", "inline-style-expand-shorthand"], + "isolatedModules": true + } +} From 67373dcd09dd7f05ab817c4803f4ace1094581a9 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 9 Nov 2021 17:05:58 -0800 Subject: [PATCH 02/10] spec --- packages/react-select/Spec.md | 240 ++++++++++++++++-- .../src/components/Select/Select.types.ts | 4 + .../src/components/Select/useSelectStyles.ts | 20 +- 3 files changed, 223 insertions(+), 41 deletions(-) diff --git a/packages/react-select/Spec.md b/packages/react-select/Spec.md index 34d37d859d27b3..29cf862cbd2b06 100644 --- a/packages/react-select/Spec.md +++ b/packages/react-select/Spec.md @@ -2,52 +2,242 @@ ## Background -_Description and use cases of this component_ +The Select component allows users to select one value from a predefined set of values. It does so by providing a styled wrapper around the HTML `` +- Native-feeling cross platform UX (particularly on mobile) is a primary concern +- Performance, accessibility, and bundle size are primary concerns + +Combobox is recommended if any of the following are needed: + +- Filtering or freeform text input +- Virtualization +- Control over styling the dropdown and options +- Multiple selection ## Prior Art -_Include background research done for this component_ +The [Open UI research on Select](https://open-ui.org/components/select.research) combines both the ideas of the proposed Fluent Combobox and Select. There is also an [Open UI draft describing the select element](https://open-ui.org/components/select). + +### Comparison of v8 and v0 + +`@fluentui/react` has three different controls that are different flavors of select/combobox: + +- [Combobox](https://developer.microsoft.com/en-us/fluentui#/controls/web/combobox): an editable combobox with a textfield and dropdown listbox +- [Dropdown](https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown): a non-editable combobox with dropdown listbox +- [Pickers](https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers): an editable combobox with greater customization, particularly in displaying selected items + +`@fluentui/react-northstar` has one combobox control: -- _Link to Open UI research_ -- _Link to comparison of v7 and v0_ -- _Link to GitHub epic issue for the converged component_ +- [Dropdown](https://fluentsite.z22.web.core.windows.net/0.51.2/components/dropdown/definition): either an editable or non-editable combobox with a tag-like approach to selected items + +### Functional variations across v8 and v0 components + +The main functional variants in existing components are as follows: + +- Editable vs. non-editable: editable comboboxes have a textbox and allow the user to type, which optionally filters the listbox +- Within editable comboboxes: freeform text input and filtering on input are optional +- Within editable comboboxes: When a typed value does not match an option, it can be cleared or preserved on blur +- Single vs. multiselect +- Within multiselect: selected options may be presented as text within the combobox value, pills, or a custom render. + +### Dropdown options variations across v8 and v0 Components + +- Options may have an icon, image, text + description, or entirely custom render +- Options may be grouped with a group header and divider +- There may be a "load more results" action +- Within multiselect: There may be a "Select all" option ## Sample Code -_Provide some representative example code that uses the proposed API for the component_ +Default/standard Select: + +```tsx + + +``` + +Select with grouped options: + +```tsx + + +``` + +Inline Select with appearance and size set: + +```tsx + + +``` + +Disabled Select with second option selected: + +```tsx + + +``` ## Variants -_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._ +### Layout + +- Block (default) +- Inline + +### Size + +- Small +- Medium (default) +- Large + +### Appearance + +- Filled darker +- Filled lighter +- Outline (default) +- Transparent + +### Unsupported Select variants + +#### Multiple Selection + +The Select component does not support multi-select, and does not support the native `multiselect` attribute. Multiple selection is instead provided through the Combobox component. This is because the native `` over using the native element directly. + +#### Size attribute + +For similar reasons to `multiple`, the native `size` attribute is not supported out of the box. It also has very limited styling support, and therefore also has little benefit over the native ``. ## API -_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_ +From [Select.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-select/src/components/Select/Select.types.ts) -## Structure +### Slots -- _**Public**_ -- _**Internal**_ -- _**DOM** - how the component will be rendered as HTML elements_ +In this component, `select` is the primary slot. Since `select` is primary, `root` is a separate explicit slot to customize the wrapper. -## Migration +```ts +export type SelectSlots = { + /** Root of the component, renders as a ``. */ + root: IntrinsicShorthandProps<'span'>; + /** The actual `` element. The only children that are supported in practice are the `` and ` - - - -``` - -Select with grouped options: - -```tsx - - -``` - -Inline Select with appearance and size set: - -```tsx - - -``` - -Disabled Select with second option selected: - -```tsx - - -``` - -## Variants - -### Layout - -- Block (default) -- Inline - -### Size - -- Small -- Medium (default) -- Large - -### Appearance - -- Filled darker -- Filled lighter -- Outline (default) -- Transparent - -### Unsupported Select variants - -#### Multiple Selection - -The Select component does not support multi-select, and does not support the native `multiselect` attribute. Multiple selection is instead provided through the Combobox component. This is because the native `` over using the native element directly. - -#### Size attribute - -For similar reasons to `multiple`, the native `size` attribute is not supported out of the box. It also has very limited styling support, and therefore also has little benefit over the native ``. - -## API - -From [Select.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-select/src/components/Select/Select.types.ts) - -### Slots - -In this component, `select` is the primary slot. Since `select` is primary, `root` is a separate explicit slot to customize the wrapper. - -```ts -export type SelectSlots = { - /** Root of the component, renders as a ``. */ - root: IntrinsicShorthandProps<'span'>; - /** The actual `` element. The only children that are supported in practice are the `` and `