@junyiacademy/ui-test 0.0.5 → 0.0.9

package/declarations/libs/ui/src/lib/select/OutlinedSelect.d.ts

@@ -4,12 +4,11 @@ export interface OutlinedSelectProps {
     color?: 'primary' | 'secondary';
     size?: 'medium' | 'small';
     width?: number | 'auto';
-    selectPaperMaxHeight?: number | 'auto';
+    paperMaxHeight?: number | 'auto';
     error?: boolean;
     hasLabel?: boolean;
     hasShrink?: boolean;
     placeholder: string;
-    hasHelperText?: boolean;
     helperText?: string;
     value?: unknown;
     disabled?: boolean;
@@ -19,5 +18,5 @@ export interface OutlinedSelectProps {
     };
     children?: React.ReactNode;
 }
-declare const OutlinedSelect: ({ color, size, width, selectPaperMaxHeight, error, hasLabel, hasShrink, placeholder, hasHelperText, helperText, value, disabled, SelectProps, OutlinedInputProps, children, }: OutlinedSelectProps) => JSX.Element;
+declare const OutlinedSelect: ({ color, size, width, paperMaxHeight, error, hasLabel, hasShrink, placeholder, helperText, value, disabled, SelectProps, OutlinedInputProps, children, }: OutlinedSelectProps) => JSX.Element;
 export default OutlinedSelect;

package/declarations/libs/ui/src/lib/select/StandardSelect.d.ts

@@ -8,7 +8,6 @@ export interface StandardSelectProps {
     error?: boolean;
     hasShrink?: boolean;
     placeholder: string;
-    hasHelperText?: boolean;
     helperText?: string;
     InputProps?: object & Partial<InputProps>;
     value?: unknown;
@@ -16,5 +15,5 @@ export interface StandardSelectProps {
     SelectProps?: object | Partial<SelectProps>;
     children?: React.ReactNode;
 }
-export declare function StandardSelect({ color, size, width, paperMaxHeight, error, hasShrink, placeholder, hasHelperText, helperText, InputProps, value, SelectProps, disabled, children, }: StandardSelectProps): JSX.Element;
+export declare function StandardSelect({ color, size, width, paperMaxHeight, error, hasShrink, placeholder, helperText, InputProps, value, SelectProps, disabled, children, }: StandardSelectProps): JSX.Element;
 export default StandardSelect;

package/declarations/libs/ui/src/lib/selection-item/SelectionItem.d.ts

@@ -0,0 +1,10 @@
+export interface SelectionItemProps {
+    handleInput: () => {};
+    label1: string;
+    value1: string;
+    label2: string;
+    value2: string;
+    isError: boolean;
+}
+export declare function SelectionItem({ handleInput, label1, value1, label2, value2, isError, }: SelectionItemProps): JSX.Element;
+export default SelectionItem;

package/dist/libs/ui/src/lib/TopicFilter.js

@@ -86,7 +86,7 @@ const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSe
     return (react_1.default.createElement(FiltersWrapper, null, layeredTopicList.map((layeredTopic, layerNumber) => {
         const hasLabel = isFocusedList[layerNumber] || !selectedTopicIds[layerNumber];
         return (react_1.default.createElement(SelectWrapper, { key: layeredTopic.id },
-            react_1.default.createElement(OutlinedSelect_1.default, { size: 'small', width: 220, selectPaperMaxHeight: 412, hasLabel: hasLabel, placeholder: PLACEHOLDER, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
+            react_1.default.createElement(OutlinedSelect_1.default, { size: 'small', width: 220, paperMaxHeight: 412, hasLabel: hasLabel, placeholder: PLACEHOLDER, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : selectedTopicIds[layerNumber]) || '', SelectProps: {
                     'data-testid': `layered-topic-${layerNumber}`,
                 }, OutlinedInputProps: {
                     inputProps: {

package/dist/libs/ui/src/lib/menu-item/SelectMenuItem.js

@@ -7,20 +7,17 @@ const core_1 = require("@material-ui/core");
 // self-defined-components
 const PREFIX = 'JuiSelectMenuItem';
 const classes = {
-    menuItemRoot: `${PREFIX}-menuItem`,
     menuItemSelected: `${PREFIX}-menuItemSelected`,
 };
 const StyledMenuItem = styles_1.styled((_a) => {
     var { width: _width } = _a, props = tslib_1.__rest(_a, ["width"]);
-    return (react_1.default.createElement(core_1.MenuItem, Object.assign({ classes: { root: classes.menuItemRoot, selected: classes.menuItemSelected } }, props)));
+    return (react_1.default.createElement(core_1.MenuItem, Object.assign({ classes: { selected: classes.menuItemSelected } }, props)));
 })(({ width, theme }) => ({
-    [`&.${classes.menuItemRoot}`]: {
-        width: width,
-        whiteSpace: 'unset',
-        color: theme.palette.text.primary,
-    },
+    width: width,
+    whiteSpace: 'unset',
+    color: theme.palette.text.primary,
     [`& .${classes.menuItemSelected}`]: {
-        backgroundColor: '#E0E0E0',
+        backgroundColor: theme.palette.grey[300],
     },
 }));
 const SelectMenuItem = react_1.default.forwardRef((_a, ref) => {

package/dist/libs/ui/src/lib/select/OutlinedSelect.js

@@ -7,14 +7,12 @@ const core_1 = require("@material-ui/core");
 // self-defined-components
 const PREFIX = 'JuiOutlinedSelect';
 const classes = {
-    inputLabelRoot: `${PREFIX}-inputLabel`,
     inputLabelFocused: `${PREFIX}-inputLabelFocused`,
     inputLabelOutlined: `${PREFIX}-inputLabelOutlined`,
     inputLabelMarginDense: `${PREFIX}-inputLabelMarginDense`,
     inputLabelShrink: `${PREFIX}-inputLabelShrink`,
     inputLabelError: `${PREFIX}-inputLabelError`,
     inputLabelDisabled: `${PREFIX}-inputLabelDisabled`,
-    outlineInputRoot: `${PREFIX}-outlineInput`,
     outlineInputInput: `${PREFIX}-input`,
     outlineInputInputMarginDense: `${PREFIX}-inputMarginDense`,
     outlineInputNotchedOutline: `${PREFIX}-notchedOutline`,
@@ -38,7 +36,6 @@ const StyledFormControl = styles_1.styled((_a) => {
 const StyledInputLabel = styles_1.styled((_a) => {
     var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
     return (react_1.default.createElement(core_1.InputLabel, Object.assign({ classes: {
-            root: classes.inputLabelRoot,
             outlined: classes.inputLabelOutlined,
             marginDense: classes.inputLabelMarginDense,
             shrink: classes.inputLabelShrink,
@@ -47,9 +44,7 @@ const StyledInputLabel = styles_1.styled((_a) => {
             error: classes.inputLabelError,
         } }, props)));
 })(({ color, theme }) => ({
-    [`& .${classes.inputLabelRoot}`]: {
-        color: theme.palette.text.secondary,
-    },
+    color: theme.palette.text.secondary,
     [`&.${classes.inputLabelOutlined}`]: {
         [`&:not(.${classes.inputLabelDisabled}) .${classes.inputLabelFocused}`]: {
             color: theme.palette.action.active,
@@ -61,10 +56,6 @@ const StyledInputLabel = styles_1.styled((_a) => {
     [`&.${classes.inputLabelShrink}:not(.${classes.inputLabelError}):not(.${classes.inputLabelDisabled}).${classes.inputLabelFocused}`]: {
         color: theme.palette[color].main,
     },
-    [`&.${classes.inputLabelShrink}.${classes.inputLabelError}:not(.${classes.inputLabelDisabled})`]: {
-        color: theme.palette.error.main,
-    },
-    [`&.${classes.inputLabelMarginDense}`]: {},
     [`&.${classes.inputLabelShrink}`]: {
         backgroundColor: '#ffffff',
         padding: '0 2px',
@@ -76,18 +67,16 @@ const StyledOutlinedInput = styles_1.styled((props) => (react_1.default.createEl
         notchedOutline: classes.outlineInputNotchedOutline,
         disabled: classes.outlineInputDisabled,
         error: classes.outlineInputError,
-    } }, props))))({
+    } }, props))))(({ theme }) => ({
     [`& .${classes.outlineInputInput}`]: {
-        color: 'rgba(0, 0, 0, 0.87)',
+        color: theme.palette.text.primary,
     },
     [`& .${classes.outlineInputInputMarginDense}`]: {
         padding: '14.5px 15px 14.5px 12px',
     },
-    [`&.${classes.outlineInputNotchedOutline}`]: {},
-    [`&.${classes.outlineInputDisabled}`]: {},
-});
+}));
 const StyledSelect = styles_1.styled((_a) => {
-    var { selectPaperMaxHeight: _selectPaperMaxHeight, hasAdornment: _hasAdornment, className } = _a, props = tslib_1.__rest(_a, ["selectPaperMaxHeight", "hasAdornment", "className"]);
+    var { paperMaxHeight: _paperMaxHeight, hasAdornment: _hasAdornment, className } = _a, props = tslib_1.__rest(_a, ["paperMaxHeight", "hasAdornment", "className"]);
     return (react_1.default.createElement(core_1.Select, Object.assign({ MenuProps: {
             disableAutoFocusItem: true,
             anchorOrigin: {
@@ -101,18 +90,18 @@ const StyledSelect = styles_1.styled((_a) => {
             getContentAnchorEl: null,
             classes: { paper: className },
         } }, props)));
-})(({ hasAdornment, selectPaperMaxHeight }) => ({
+})(({ hasAdornment, paperMaxHeight }) => ({
     '&&': {
-        maxHeight: selectPaperMaxHeight,
+        maxHeight: paperMaxHeight,
         left: hasAdornment ? '24px !important' : '70px',
     },
 }));
-const OutlinedSelect = ({ color = 'primary', size = 'medium', width = 'auto', selectPaperMaxHeight = 'auto', error = false, hasLabel = true, hasShrink = false, placeholder, hasHelperText = false, helperText = '', value = '', disabled = false, SelectProps, OutlinedInputProps, children, }) => {
+const OutlinedSelect = ({ color = 'primary', size = 'medium', width = 'auto', paperMaxHeight = 'auto', error = false, hasLabel = true, hasShrink = false, placeholder, helperText = '', value = '', disabled = false, SelectProps, OutlinedInputProps, children, }) => {
     const hasAdornment = !!(OutlinedInputProps === null || OutlinedInputProps === void 0 ? void 0 : OutlinedInputProps.startAdornment);
+    const hasHelperText = !!helperText;
     return (react_1.default.createElement(StyledFormControl, { size: size, width: width, disabled: disabled, error: error, color: color },
-        hasShrink && (react_1.default.createElement(StyledInputLabel, { color: color, variant: 'outlined', shrink: true }, placeholder)),
-        hasLabel && !hasShrink && (react_1.default.createElement(StyledInputLabel, { color: color, variant: 'outlined' }, placeholder)),
-        react_1.default.createElement(StyledSelect, Object.assign({ value: value, selectPaperMaxHeight: selectPaperMaxHeight, hasAdornment: hasAdornment, input: react_1.default.createElement(StyledOutlinedInput, Object.assign({ color: color, label: hasLabel ? placeholder : undefined, disabled: disabled }, OutlinedInputProps)) }, SelectProps), children),
+        hasLabel ? (hasShrink ? (react_1.default.createElement(StyledInputLabel, { color: color, variant: 'outlined', shrink: true }, placeholder)) : (react_1.default.createElement(StyledInputLabel, { color: color, variant: 'outlined' }, placeholder))) : null,
+        react_1.default.createElement(StyledSelect, Object.assign({ value: value, paperMaxHeight: paperMaxHeight, hasAdornment: hasAdornment, input: react_1.default.createElement(StyledOutlinedInput, Object.assign({ color: color, label: hasLabel ? placeholder : undefined, disabled: disabled }, OutlinedInputProps)) }, SelectProps), children),
         hasHelperText && react_1.default.createElement(core_1.FormHelperText, null, helperText)));
 };
 exports.default = OutlinedSelect;

package/dist/libs/ui/src/lib/select/StandardSelect.js

@@ -8,11 +8,9 @@ const core_1 = require("@material-ui/core");
 // self-defined-components
 const PREFIX = 'JuiStandardSelect';
 const classes = {
-    inputLabelRoot: `${PREFIX}-inputLabel`,
     inputLabelFocused: `${PREFIX}-inputLabelFocused`,
     inputLabelMarginDense: `${PREFIX}-inputLabelMarginDense`,
     inputLabelError: `${PREFIX}-inputLabelError`,
-    inputRoot: `${PREFIX}-inputRoot`,
     inputUnderline: `${PREFIX}-inputUnderline`,
     inputError: `${PREFIX}-inputError`,
     inputDisabled: `${PREFIX}-inputDisabled`,
@@ -30,20 +28,17 @@ const StyledFormControl = styles_1.styled((_a) => {
 const StyledInputLabel = styles_1.styled((_a) => {
     var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
     return (react_1.default.createElement(core_1.InputLabel, Object.assign({ classes: {
-            root: classes.inputLabelRoot,
             focused: classes.inputLabelFocused,
             error: classes.inputLabelError,
         } }, props)));
 })(({ color, theme }) => ({
-    [`&.${classes.inputLabelRoot}`]: {
-        color: theme.palette.text.disabled,
-        margin: theme.spacing(0, 10, 1.5, 0),
-        [`&.${classes.inputLabelFocused}`]: {
-            color: theme.palette[color].main,
-        },
-        [`&.${classes.inputLabelError}`]: {
-            color: theme.palette.error.main,
-        },
+    color: theme.palette.text.disabled,
+    margin: theme.spacing(0, 10, 1.5, 0),
+    [`&.${classes.inputLabelFocused}`]: {
+        color: theme.palette[color].main,
+    },
+    [`&.${classes.inputLabelError}`]: {
+        color: theme.palette.error.main,
     },
 }));
 const StyledSelect = styles_1.styled((_a) => {
@@ -67,14 +62,11 @@ const StyledInput = styles_1.styled((_a) => {
     var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
     return (react_1.default.createElement(core_1.Input, Object.assign({ classes: {
             disabled: classes.inputDisabled,
-            root: classes.inputRoot,
             underline: classes.inputUnderline,
             error: classes.inputError,
         } }, props)));
 })(({ color, theme }) => ({
-    [`&.${classes.inputRoot}`]: {
-        color: theme.palette.text.primary,
-    },
+    color: theme.palette.text.primary,
     [`&.${classes.inputUnderline}:not(.${classes.inputDisabled}):not(.${classes.inputError})`]: {
         [`&:after,&:hover:before`]: {
             borderBottomColor: theme.palette[color].main,
@@ -86,8 +78,9 @@ const StyledInput = styles_1.styled((_a) => {
         },
     },
 }));
-function StandardSelect({ color = 'primary', size = 'medium', width = 'auto', paperMaxHeight = 'auto', error = false, hasShrink = false, placeholder, hasHelperText = false, helperText, InputProps, value = '', SelectProps, disabled = false, children, }) {
+function StandardSelect({ color = 'primary', size = 'medium', width = 'auto', paperMaxHeight = 'auto', error = false, hasShrink = false, placeholder, helperText, InputProps, value = '', SelectProps, disabled = false, children, }) {
     const hasAdornment = !!(InputProps === null || InputProps === void 0 ? void 0 : InputProps.startAdornment);
+    const hasHelperText = !!helperText;
     return (react_1.default.createElement(StyledFormControl, { color: color, size: size, width: width, disabled: disabled, error: error },
         hasShrink ? (react_1.default.createElement(StyledInputLabel, { color: color, shrink: true }, placeholder)) : (react_1.default.createElement(StyledInputLabel, { color: color }, placeholder)),
         react_1.default.createElement(StyledSelect, Object.assign({ value: value, paperMaxHeight: paperMaxHeight, hasAdornment: hasAdornment, input: react_1.default.createElement(StyledInput, Object.assign({ color: color }, InputProps)) }, SelectProps), children),

package/dist/libs/ui/src/lib/selection-item/SelectionItem.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionItem = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("@material-ui/core");
+const Radio_1 = require("../radio/Radio");
+function SelectionItem({ handleInput, label1, value1, label2, value2, isError, }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.RadioGroup, { onChange: handleInput },
+            react_1.default.createElement(Radio_1.Radio, { label: label1, value: value1 }),
+            react_1.default.createElement(Radio_1.Radio, { label: label2, value: value2 })),
+        isError && react_1.default.createElement(core_1.FormHelperText, null, "\u8ACB\u9078\u64C7")));
+}
+exports.SelectionItem = SelectionItem;
+exports.default = SelectionItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junyiacademy/ui-test",
-  "version": "0.0.5",
+  "version": "0.0.9",
   "description": "junyiacademy ui library",
   "main": "./dist/libs/ui/src/index.js",
   "typings": "./declarations/libs/ui/src/index.d.ts",

package/src/lib/TopicFilter.tsx

@@ -143,7 +143,7 @@ const TopicFilter = ({
             <OutlinedSelect
               size='small'
               width={220}
-              selectPaperMaxHeight={412}
+              paperMaxHeight={412}
               hasLabel={hasLabel}
               placeholder={PLACEHOLDER}
               value={selectedTopicIds?.[layerNumber] || ''}

package/src/lib/menu-item/SelectMenuItem.tsx

@@ -6,7 +6,6 @@ import { MenuItem, MenuItemProps } from '@material-ui/core'
 const PREFIX = 'JuiSelectMenuItem'
 
 const classes = {
-  menuItemRoot: `${PREFIX}-menuItem`,
   menuItemSelected: `${PREFIX}-menuItemSelected`,
 }
 
@@ -16,18 +15,13 @@ interface StyledMenuItemProps {
 }
 
 const StyledMenuItem = styled(({ width: _width, ...props }) => (
-  <MenuItem
-    classes={{ root: classes.menuItemRoot, selected: classes.menuItemSelected }}
-    {...props}
-  />
+  <MenuItem classes={{ selected: classes.menuItemSelected }} {...props} />
 ))(({ width, theme }: StyledMenuItemProps) => ({
-  [`&.${classes.menuItemRoot}`]: {
-    width: width,
-    whiteSpace: 'unset',
-    color: theme.palette.text.primary,
-  },
+  width: width,
+  whiteSpace: 'unset',
+  color: theme.palette.text.primary,
   [`& .${classes.menuItemSelected}`]: {
-    backgroundColor: '#E0E0E0',
+    backgroundColor: theme.palette.grey[300],
   },
 }))
 

package/src/lib/radio/Radio.stories.tsx

@@ -25,10 +25,11 @@ export default {
       type: { name: 'string', required: false },
       description: 'The position of the label.',
       table: {
-        type: { summary: 'bottom | end | start | top' },
+        type: { summary: 'end' },
         defaultValue: { summary: 'end' },
+        category: 'not comparable with caption',
       },
-      options: ['bottom', 'end', 'start', 'top'],
+      options: ['end'],
       control: { type: 'radio' },
     },
     color: {

package/src/lib/select/OutlinedSelect.stories.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import { Story, Meta } from '@storybook/react'
 import { Theme, styled } from '@material-ui/core/styles'
-import OutlinedSelect, { OutlinedSelectProps } from './OutlinedSelect'
-import SelectMenuItem from '../menu-item/SelectMenuItem'
 import { InputAdornment } from '@material-ui/core'
 import { Visibility } from '@material-ui/icons'
+import OutlinedSelect, { OutlinedSelectProps } from './OutlinedSelect'
+import SelectMenuItem from '../menu-item/SelectMenuItem'
 
 const PLACEHOLDER = '請選擇'
 
@@ -32,7 +32,6 @@ export default {
       },
       options: ['small', 'medium'],
       control: { type: 'radio' },
-      defaultValue: 'medium',
     },
     width: {
       type: { name: 'number', required: false },
@@ -42,7 +41,6 @@ export default {
         defaultValue: { summary: 'auto' },
       },
       control: { type: 'number' },
-      defaultValue: '220',
     },
     paperMaxHeight: {
       type: { name: 'number', required: false },
@@ -52,27 +50,24 @@ export default {
         defaultValue: { summary: 'auto' },
       },
       control: { type: 'number' },
-      defaultValue: '412',
     },
-    hasLabel: {
+    hasInputLabel: {
       type: { name: 'boolean', required: false },
-      description: 'Control the label display state.',
+      description: 'If true, the label is displayed.',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: true },
       },
       control: { type: 'boolean' },
-      defaultValue: true,
     },
     hasShrink: {
       type: { name: 'boolean', required: false },
-      description: 'Control the label always on display.',
+      description: 'If true, the label is displayed and shrunk.',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
       control: { type: 'boolean' },
-      defaultValue: false,
     },
     placeholder: {
       type: { name: 'string', required: true },
@@ -82,7 +77,6 @@ export default {
         defaultValue: { summary: '請選擇' },
       },
       control: { type: 'text' },
-      defaultValue: '請選擇',
     },
     value: {
       type: { name: 'any', required: false },
@@ -111,24 +105,14 @@ export default {
       },
       control: { type: 'boolean' },
     },
-    hasHelperText: {
-      type: { name: 'boolean', required: false },
-      description: 'If true, the helper text will be displayed.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
-    },
     helperText: {
       type: { name: 'string', required: true },
-      description: `The helper text.`,
+      description: `Display the helper text.`,
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: 'Helper text.' },
+        defaultValue: { summary: '' },
       },
       control: { type: 'text' },
-      defaultValue: 'Helper text.',
     },
     SelectProps: {
       type: { name: 'any', required: false },
@@ -179,10 +163,10 @@ const OutlinedSelectWithMenu = (props: OutlinedSelectProps) => {
       <SelectMenuItem width={220} value='' disabled>
         {PLACEHOLDER}
       </SelectMenuItem>
-      <SelectMenuItem width={220} value={'Test'}>
+      <SelectMenuItem width={220} value='Test'>
         This is a select menu item
       </SelectMenuItem>
-      <SelectMenuItem width={220} value={'Example'}>
+      <SelectMenuItem width={220} value='Example'>
         Example
       </SelectMenuItem>
     </OutlinedSelect>
@@ -215,9 +199,8 @@ ValueOnly.args = {
   size: 'medium',
   width: 220,
   paperMaxHeight: 412,
-  hasLabel: true,
+  hasInputLabel: true,
   placeholder: PLACEHOLDER,
-  hasHelperText: false,
   helperText: 'test',
   disabled: false,
   SelectProps: {},
@@ -254,9 +237,8 @@ WithPrefix.args = {
   size: 'medium',
   width: 220,
   paperMaxHeight: 412,
-  hasLabel: true,
+  hasInputLabel: true,
   placeholder: PLACEHOLDER,
-  hasHelperText: false,
   helperText: 'test',
   disabled: false,
   SelectProps: {},

package/src/lib/select/OutlinedSelect.tsx

@@ -14,14 +14,12 @@ import {
 const PREFIX = 'JuiOutlinedSelect'
 
 const classes = {
-  inputLabelRoot: `${PREFIX}-inputLabel`,
   inputLabelFocused: `${PREFIX}-inputLabelFocused`,
   inputLabelOutlined: `${PREFIX}-inputLabelOutlined`,
   inputLabelMarginDense: `${PREFIX}-inputLabelMarginDense`,
   inputLabelShrink: `${PREFIX}-inputLabelShrink`,
   inputLabelError: `${PREFIX}-inputLabelError`,
   inputLabelDisabled: `${PREFIX}-inputLabelDisabled`,
-  outlineInputRoot: `${PREFIX}-outlineInput`,
   outlineInputInput: `${PREFIX}-input`,
   outlineInputInputMarginDense: `${PREFIX}-inputMarginDense`,
   outlineInputNotchedOutline: `${PREFIX}-notchedOutline`,
@@ -57,7 +55,6 @@ interface StyledInputLabelProps {
 const StyledInputLabel = styled(({ color: _color, ...props }) => (
   <InputLabel
     classes={{
-      root: classes.inputLabelRoot,
       outlined: classes.inputLabelOutlined,
       marginDense: classes.inputLabelMarginDense,
       shrink: classes.inputLabelShrink,
@@ -68,9 +65,7 @@ const StyledInputLabel = styled(({ color: _color, ...props }) => (
     {...props}
   />
 ))(({ color, theme }: StyledInputLabelProps) => ({
-  [`& .${classes.inputLabelRoot}`]: {
-    color: theme.palette.text.secondary,
-  },
+  color: theme.palette.text.secondary,
   [`&.${classes.inputLabelOutlined}`]: {
     [`&:not(.${classes.inputLabelDisabled}) .${classes.inputLabelFocused}`]: {
       color: theme.palette.action.active,
@@ -82,16 +77,16 @@ const StyledInputLabel = styled(({ color: _color, ...props }) => (
   [`&.${classes.inputLabelShrink}:not(.${classes.inputLabelError}):not(.${classes.inputLabelDisabled}).${classes.inputLabelFocused}`]: {
     color: theme.palette[color].main,
   },
-  [`&.${classes.inputLabelShrink}.${classes.inputLabelError}:not(.${classes.inputLabelDisabled})`]: {
-    color: theme.palette.error.main,
-  },
-  [`&.${classes.inputLabelMarginDense}`]: {},
   [`&.${classes.inputLabelShrink}`]: {
     backgroundColor: '#ffffff',
     padding: '0 2px',
   },
 }))
 
+interface StyledOutlinedInputProps {
+  theme?: Theme
+}
+
 const StyledOutlinedInput = styled((props) => (
   <OutlinedInput
     classes={{
@@ -103,25 +98,23 @@ const StyledOutlinedInput = styled((props) => (
     }}
     {...props}
   />
-))({
+))(({ theme }: StyledOutlinedInputProps) => ({
   [`& .${classes.outlineInputInput}`]: {
-    color: 'rgba(0, 0, 0, 0.87)',
+    color: theme.palette.text.primary,
   },
   [`& .${classes.outlineInputInputMarginDense}`]: {
     padding: '14.5px 15px 14.5px 12px',
   },
-  [`&.${classes.outlineInputNotchedOutline}`]: {},
-  [`&.${classes.outlineInputDisabled}`]: {},
-})
+}))
 
 interface StyledSelectProps {
-  selectPaperMaxHeight: number | 'auto'
+  paperMaxHeight: number | 'auto'
   hasAdornment: boolean
 }
 
 const StyledSelect = styled(
   ({
-    selectPaperMaxHeight: _selectPaperMaxHeight,
+    paperMaxHeight: _paperMaxHeight,
     hasAdornment: _hasAdornment,
     className,
     ...props
@@ -143,9 +136,9 @@ const StyledSelect = styled(
       {...props}
     />
   )
-)(({ hasAdornment, selectPaperMaxHeight }: StyledSelectProps) => ({
+)(({ hasAdornment, paperMaxHeight }: StyledSelectProps) => ({
   '&&': {
-    maxHeight: selectPaperMaxHeight,
+    maxHeight: paperMaxHeight,
     left: hasAdornment ? '24px !important' : '70px',
   },
 }))
@@ -154,12 +147,11 @@ export interface OutlinedSelectProps {
   color?: 'primary' | 'secondary'
   size?: 'medium' | 'small'
   width?: number | 'auto'
-  selectPaperMaxHeight?: number | 'auto'
+  paperMaxHeight?: number | 'auto'
   error?: boolean
   hasLabel?: boolean
   hasShrink?: boolean
   placeholder: string
-  hasHelperText?: boolean
   helperText?: string
   value?: unknown
   disabled?: boolean
@@ -174,12 +166,11 @@ const OutlinedSelect = ({
   color = 'primary',
   size = 'medium',
   width = 'auto',
-  selectPaperMaxHeight = 'auto',
+  paperMaxHeight = 'auto',
   error = false,
   hasLabel = true,
   hasShrink = false,
   placeholder,
-  hasHelperText = false,
   helperText = '',
   value = '',
   disabled = false,
@@ -188,6 +179,7 @@ const OutlinedSelect = ({
   children,
 }: OutlinedSelectProps) => {
   const hasAdornment = !!OutlinedInputProps?.startAdornment
+  const hasHelperText = !!helperText
   return (
     <StyledFormControl
       size={size}
@@ -196,19 +188,20 @@ const OutlinedSelect = ({
       error={error}
       color={color}
     >
-      {hasShrink && (
-        <StyledInputLabel color={color} variant='outlined' shrink>
-          {placeholder}
-        </StyledInputLabel>
-      )}
-      {hasLabel && !hasShrink && (
-        <StyledInputLabel color={color} variant='outlined'>
-          {placeholder}
-        </StyledInputLabel>
-      )}
+      {hasLabel ? (
+        hasShrink ? (
+          <StyledInputLabel color={color} variant='outlined' shrink>
+            {placeholder}
+          </StyledInputLabel>
+        ) : (
+          <StyledInputLabel color={color} variant='outlined'>
+            {placeholder}
+          </StyledInputLabel>
+        )
+      ) : null}
       <StyledSelect
         value={value}
-        selectPaperMaxHeight={selectPaperMaxHeight}
+        paperMaxHeight={paperMaxHeight}
         hasAdornment={hasAdornment}
         input={
           <StyledOutlinedInput

package/src/lib/select/StandardSelect.stories.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import { Story, Meta } from '@storybook/react'
 import { Theme, styled } from '@material-ui/core/styles'
-import { StandardSelect, StandardSelectProps } from './StandardSelect'
-import SelectMenuItem from '../menu-item/SelectMenuItem'
 import { InputAdornment } from '@material-ui/core'
 import { Visibility } from '@material-ui/icons'
+import { StandardSelect, StandardSelectProps } from './StandardSelect'
+import SelectMenuItem from '../menu-item/SelectMenuItem'
 
 const PLACEHOLDER = '請選擇'
 
@@ -32,7 +32,6 @@ export default {
       },
       options: ['small', 'medium'],
       control: { type: 'radio' },
-      defaultValue: 'medium',
     },
     width: {
       type: { name: 'number', required: false },
@@ -42,7 +41,6 @@ export default {
         defaultValue: { summary: 'auto' },
       },
       control: { type: 'number' },
-      defaultValue: '220',
     },
     paperMaxHeight: {
       type: { name: 'number', required: false },
@@ -52,17 +50,15 @@ export default {
         defaultValue: { summary: 'auto' },
       },
       control: { type: 'number' },
-      defaultValue: '412',
     },
     hasShrink: {
       type: { name: 'boolean', required: false },
-      description: 'Control the label display state.',
+      description: 'If true, the label is displayed and shrunk.',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: true },
       },
       control: { type: 'boolean' },
-      defaultValue: true,
     },
     placeholder: {
       type: { name: 'string', required: true },
@@ -72,7 +68,6 @@ export default {
         defaultValue: { summary: '請選擇' },
       },
       control: { type: 'text' },
-      defaultValue: '請選擇',
     },
     value: {
       type: { name: 'any', required: false },
@@ -101,24 +96,14 @@ export default {
       },
       control: { type: 'boolean' },
     },
-    hasHelperText: {
-      type: { name: 'boolean', required: false },
-      description: 'If true, the helper text will be displayed.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-      control: { type: 'boolean' },
-    },
     helperText: {
       type: { name: 'string', required: true },
-      description: `The helper text.`,
+      description: `Display the helper text.`,
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: 'Helper text.' },
+        defaultValue: { summary: '' },
       },
       control: { type: 'text' },
-      defaultValue: 'Helper text.',
     },
     InputProps: {
       type: { name: 'any', required: false },
@@ -205,7 +190,6 @@ ValueOnly.args = {
   paperMaxHeight: 300,
   hasShrink: false,
   placeholder: PLACEHOLDER,
-  hasHelperText: false,
   helperText: 'test',
   disabled: false,
 }
@@ -232,7 +216,6 @@ WithPrefix.args = {
   paperMaxHeight: 300,
   hasShrink: false,
   placeholder: PLACEHOLDER,
-  hasHelperText: false,
   helperText: 'test',
   disabled: false,
 }

package/src/lib/select/StandardSelect.tsx

@@ -15,11 +15,9 @@ import {
 const PREFIX = 'JuiStandardSelect'
 
 const classes = {
-  inputLabelRoot: `${PREFIX}-inputLabel`,
   inputLabelFocused: `${PREFIX}-inputLabelFocused`,
   inputLabelMarginDense: `${PREFIX}-inputLabelMarginDense`,
   inputLabelError: `${PREFIX}-inputLabelError`,
-  inputRoot: `${PREFIX}-inputRoot`,
   inputUnderline: `${PREFIX}-inputUnderline`,
   inputError: `${PREFIX}-inputError`,
   inputDisabled: `${PREFIX}-inputDisabled`,
@@ -49,22 +47,19 @@ interface StyledInputLabelProps {
 const StyledInputLabel = styled(({ color: _color, ...props }) => (
   <InputLabel
     classes={{
-      root: classes.inputLabelRoot,
       focused: classes.inputLabelFocused,
       error: classes.inputLabelError,
     }}
     {...props}
   />
 ))(({ color, theme }: StyledInputLabelProps) => ({
-  [`&.${classes.inputLabelRoot}`]: {
-    color: theme.palette.text.disabled,
-    margin: theme.spacing(0, 10, 1.5, 0),
-    [`&.${classes.inputLabelFocused}`]: {
-      color: theme.palette[color].main,
-    },
-    [`&.${classes.inputLabelError}`]: {
-      color: theme.palette.error.main,
-    },
+  color: theme.palette.text.disabled,
+  margin: theme.spacing(0, 10, 1.5, 0),
+  [`&.${classes.inputLabelFocused}`]: {
+    color: theme.palette[color].main,
+  },
+  [`&.${classes.inputLabelError}`]: {
+    color: theme.palette.error.main,
   },
 }))
 
@@ -109,16 +104,13 @@ const StyledInput = styled(({ color: _color, ...props }) => (
   <Input
     classes={{
       disabled: classes.inputDisabled,
-      root: classes.inputRoot,
       underline: classes.inputUnderline,
       error: classes.inputError,
     }}
     {...props}
   />
 ))(({ color, theme }: StyledInputProps) => ({
-  [`&.${classes.inputRoot}`]: {
-    color: theme.palette.text.primary,
-  },
+  color: theme.palette.text.primary,
   [`&.${classes.inputUnderline}:not(.${classes.inputDisabled}):not(.${classes.inputError})`]: {
     [`&:after,&:hover:before`]: {
       borderBottomColor: theme.palette[color].main,
@@ -139,7 +131,6 @@ export interface StandardSelectProps {
   error?: boolean
   hasShrink?: boolean
   placeholder: string
-  hasHelperText?: boolean
   helperText?: string
   InputProps?: object & Partial<InputProps>
   value?: unknown
@@ -156,7 +147,6 @@ export function StandardSelect({
   error = false,
   hasShrink = false,
   placeholder,
-  hasHelperText = false,
   helperText,
   InputProps,
   value = '',
@@ -165,6 +155,7 @@ export function StandardSelect({
   children,
 }: StandardSelectProps) {
   const hasAdornment = !!InputProps?.startAdornment
+  const hasHelperText = !!helperText
   return (
     <StyledFormControl
       color={color}

package/src/lib/text-field/TextField.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Story, Meta } from '@storybook/react'
 import { InputAdornment, TextFieldProps } from '@material-ui/core'
 import { Visibility } from '@material-ui/icons'
@@ -77,6 +77,40 @@ ValueOnly.args = {
   label: 'Which UI?',
 }
 
+const TextFieldWithError = (props: TextFieldProps) => {
+  const [value, setValue] = React.useState('')
+  const [isError, setIsError] = React.useState(false)
+
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+
+  useEffect(() => {
+    if (value.length > 3) {
+      setIsError(true)
+      return
+    }
+    setIsError(false)
+    return
+  }, [value])
+
+  return <TextField error={isError} onChange={handleChange} {...props} />
+}
+
+const WithErrorStory: Story<TextFieldProps> = (args) => (
+  <TextFieldWithError {...args} />
+)
+
+export const WithError = WithErrorStory.bind({})
+
+WithError.args = {
+  variant: 'standard',
+  color: 'primary',
+  disabled: false,
+  size: 'small',
+  label: 'No more than 3 words',
+}
+
 const WithSuffixStory: Story<TextFieldProps> = (args) => (
   <TextField
     {...args}