@junyiacademy/ui-test 0.0.13 → 0.0.14

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

@@ -35,9 +35,6 @@ const StyledFormControl = styles_1.styled((_a) => {
             borderColor: theme.palette[color].main,
         },
     },
-    [`& .${classes.outlineInputError}.${classes.outlineInputFocused} .${classes.outlineInputNotchedOutline}`]: {
-        borderColor: `${theme.palette.error.main}`,
-    },
 }));
 const StyledInputLabel = styles_1.styled((_a) => {
     var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
@@ -69,15 +66,20 @@ const StyledInputLabel = styles_1.styled((_a) => {
 }));
 const StyledOutlinedInput = styles_1.styled((props) => (react_1.default.createElement(core_1.OutlinedInput, Object.assign({ classes: {
         root: classes.outlineInputRoot,
-        focused: classes.outlineInputFocused,
         input: classes.outlineInputInput,
+        focused: classes.outlineInputFocused,
         inputMarginDense: classes.outlineInputInputMarginDense,
         notchedOutline: classes.outlineInputNotchedOutline,
         disabled: classes.outlineInputDisabled,
         error: classes.outlineInputError,
     } }, props))))(({ theme }) => ({
-    [`&.${classes.outlineInputRoot}.${classes.outlineInputFocused}`]: {
-        backgroundColor: theme.palette.action.selected,
+    [`&.${classes.outlineInputRoot}`]: {
+        [`&.${classes.outlineInputError}.${classes.outlineInputFocused} .${classes.outlineInputNotchedOutline}`]: {
+            borderColor: `${theme.palette.error.main}`,
+        },
+        [`& .${classes.outlineInputInputMarginDense}`]: {
+            padding: '14.5px 15px 14.5px 12px',
+        },
     },
     [`& .${classes.outlineInputInput}`]: {
         color: theme.palette.text.primary,
@@ -85,9 +87,6 @@ const StyledOutlinedInput = styles_1.styled((props) => (react_1.default.createEl
             background: 'rgba(0,0,0,0)',
         },
     },
-    [`& .${classes.outlineInputInputMarginDense}`]: {
-        padding: '14.5px 15px 14.5px 12px',
-    },
 }));
 const StyledSelect = styles_1.styled((_a) => {
     var { paperMaxHeight: _paperMaxHeight, hasAdornment: _hasAdornment, className } = _a, props = tslib_1.__rest(_a, ["paperMaxHeight", "hasAdornment", "className"]);
@@ -112,7 +111,7 @@ const StyledSelect = styles_1.styled((_a) => {
         left: hasAdornment ? '24px !important' : '70px',
     },
 }));
-const OutlinedSelect = ({ placeholder, helperText, InputProps, SelectProps, children, color = 'primary', size = 'medium', width = 'auto', paperMaxHeight = 'auto', error = false, hasLabel = true, hasShrink = false, value = '', disabled = false, }) => {
+const OutlinedSelect = ({ placeholder, helperText, InputProps, SelectProps, children, color = 'primary', size = 'small', width = 'auto', paperMaxHeight = 'auto', error = false, hasLabel = true, hasShrink = false, value = '', disabled = false, }) => {
     const hasAdornment = !!(InputProps === null || InputProps === void 0 ? void 0 : InputProps.startAdornment);
     const hasHelperText = !!helperText;
     return (react_1.default.createElement(StyledFormControl, { size: size, width: width, disabled: disabled, error: error, color: color },

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

@@ -11,7 +11,6 @@ const classes = {
     inputLabelFocused: `${PREFIX}-inputLabelFocused`,
     inputLabelMarginDense: `${PREFIX}-inputLabelMarginDense`,
     inputLabelError: `${PREFIX}-inputLabelError`,
-    inputRoot: `${PREFIX}-inputRoot`,
     inputFocused: `${PREFIX}-inputFocused`,
     inputInput: `${PREFIX}-input`,
     inputUnderline: `${PREFIX}-inputUnderline`,
@@ -63,8 +62,6 @@ const StyledSelect = styles_1.styled((_a) => {
 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: {
-            root: classes.inputRoot,
-            focused: classes.inputFocused,
             input: classes.inputInput,
             disabled: classes.inputDisabled,
             underline: classes.inputUnderline,
@@ -72,9 +69,6 @@ const StyledInput = styles_1.styled((_a) => {
         } }, props)));
 })(({ color, theme }) => ({
     color: theme.palette.text.primary,
-    [`&.${classes.inputRoot}.${classes.inputFocused}`]: {
-        backgroundColor: theme.palette.action.selected,
-    },
     [`& .${classes.inputInput}`]: {
         ['&:focus']: {
             background: 'rgba(0,0,0,0)',
@@ -91,7 +85,7 @@ const StyledInput = styles_1.styled((_a) => {
         },
     },
 }));
-function StandardSelect({ placeholder, helperText, InputProps, SelectProps, children, color = 'primary', size = 'medium', width = 'auto', paperMaxHeight = 'auto', error = false, hasShrink = false, value = '', disabled = false, }) {
+function StandardSelect({ placeholder, helperText, InputProps, SelectProps, children, color = 'primary', size = 'small', width = 'auto', paperMaxHeight = 'auto', error = false, hasShrink = false, value = '', disabled = false, }) {
     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 },

package/package.json

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

package/src/lib/select/OutlinedSelect.tsx

@@ -46,9 +46,6 @@ const StyledFormControl = styled(
       borderColor: theme.palette[color].main,
     },
   },
-  [`& .${classes.outlineInputError}.${classes.outlineInputFocused} .${classes.outlineInputNotchedOutline}`]: {
-    borderColor: `${theme.palette.error.main}`,
-  },
 }))
 
 interface StyledInputLabelProps {
@@ -95,8 +92,8 @@ const StyledOutlinedInput = styled((props) => (
   <OutlinedInput
     classes={{
       root: classes.outlineInputRoot,
-      focused: classes.outlineInputFocused,
       input: classes.outlineInputInput,
+      focused: classes.outlineInputFocused,
       inputMarginDense: classes.outlineInputInputMarginDense,
       notchedOutline: classes.outlineInputNotchedOutline,
       disabled: classes.outlineInputDisabled,
@@ -105,8 +102,13 @@ const StyledOutlinedInput = styled((props) => (
     {...props}
   />
 ))(({ theme }: StyledOutlinedInputProps) => ({
-  [`&.${classes.outlineInputRoot}.${classes.outlineInputFocused}`]: {
-    backgroundColor: theme.palette.action.selected,
+  [`&.${classes.outlineInputRoot}`]: {
+    [`&.${classes.outlineInputError}.${classes.outlineInputFocused} .${classes.outlineInputNotchedOutline}`]: {
+      borderColor: `${theme.palette.error.main}`,
+    },
+    [`& .${classes.outlineInputInputMarginDense}`]: {
+      padding: '14.5px 15px 14.5px 12px',
+    },
   },
   [`& .${classes.outlineInputInput}`]: {
     color: theme.palette.text.primary,
@@ -114,9 +116,6 @@ const StyledOutlinedInput = styled((props) => (
       background: 'rgba(0,0,0,0)',
     },
   },
-  [`& .${classes.outlineInputInputMarginDense}`]: {
-    padding: '14.5px 15px 14.5px 12px',
-  },
 }))
 
 interface StyledSelectProps {
@@ -164,7 +163,7 @@ export const OutlinedSelect = ({
   SelectProps,
   children,
   color = 'primary',
-  size = 'medium',
+  size = 'small',
   width = 'auto',
   paperMaxHeight = 'auto',
   error = false,

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

@@ -22,12 +22,22 @@ export default {
       options: ['primary', 'secondary'],
       control: { type: 'radio' },
     },
+    variant: {
+      type: { name: 'string', required: false },
+      description: 'The variant to use.',
+      table: {
+        type: { summary: 'standard | outlined' },
+        defaultValue: { summary: 'standard' },
+      },
+      options: ['standard', 'outlined'],
+      control: { type: 'radio' },
+    },
     size: {
       type: { name: 'string', required: false },
       description: `Adjust size`,
       table: {
         type: { summary: 'medium | small' },
-        defaultValue: { summary: 'medium' },
+        defaultValue: { summary: 'small' },
       },
       options: ['small', 'medium'],
       control: { type: 'radio' },
@@ -161,143 +171,8 @@ const StyledInputAdornment = styled(({ disabled: _disabled, ...props }) => (
   },
 }))
 
-// Outlined Select start with here.
-interface OutlinedSelectWithMenuProps {
-  startAdornment?: React.ReactNode
-}
-
-const OutlinedSelectWithMenu = ({
-  startAdornment,
-  ...props
-}: SelectProps & OutlinedSelectWithMenuProps) => {
-  const [item, setItem] = useState<string>('')
-
-  const handleChange = (event) => {
-    setItem(event.target.value)
-  }
-  return (
-    <Select
-      variant='outlined'
-      InputProps={{
-        onChange: (e) => {
-          handleChange(e)
-        },
-        startAdornment,
-      }}
-      value={item}
-      {...props}
-    >
-      <SelectMenuItem width={props.width} value='' disabled>
-        {PLACEHOLDER}
-      </SelectMenuItem>
-      <SelectMenuItem width={props.width} value='Test'>
-        This is a select menu item
-      </SelectMenuItem>
-      <SelectMenuItem width={props.width} value='Example'>
-        Example
-      </SelectMenuItem>
-    </Select>
-  )
-}
-
-const OutlinedValueOnlyStory: Story<SelectProps> = (args) => (
-  <OutlinedSelectWithMenu {...args} />
-)
-
-export const OutlinedValueOnly = OutlinedValueOnlyStory.bind({})
-
-OutlinedValueOnly.args = {
-  color: 'primary',
-  size: 'medium',
-  width: 220,
-  paperMaxHeight: 412,
-  hasLabel: true,
-  placeholder: PLACEHOLDER,
-  helperText: 'Pick your choice',
-  disabled: false,
-  SelectProps: {},
-}
-
-const OutlinedSelectWithError = ({
-  startAdornment,
-  ...props
-}: SelectProps & OutlinedSelectWithMenuProps) => {
-  const [item, setItem] = useState<string>('')
-
-  const handleChange = (event) => {
-    setItem(event.target.value)
-  }
-  return (
-    <Select
-      variant='outlined'
-      InputProps={{
-        onChange: (e) => {
-          handleChange(e)
-        },
-        startAdornment,
-      }}
-      value={item}
-      error={item === ''}
-      helperText={item === '' ? ERROR_PLACEHOLDER : ''}
-      {...props}
-    >
-      <SelectMenuItem width={props.width} value='' disabled>
-        {PLACEHOLDER}
-      </SelectMenuItem>
-      <SelectMenuItem width={props.width} value='Option1'>
-        This is a select menu item
-      </SelectMenuItem>
-      <SelectMenuItem width={props.width} value='Option2'>
-        This is option 2
-      </SelectMenuItem>
-    </Select>
-  )
-}
-
-const OutlinedWithErrorStory: Story<SelectProps> = (args) => (
-  <OutlinedSelectWithError {...args} />
-)
-
-export const OutlinedWithError = OutlinedWithErrorStory.bind({})
-
-OutlinedWithError.args = {
-  color: 'primary',
-  size: 'medium',
-  width: 220,
-  paperMaxHeight: 412,
-  hasLabel: true,
-  placeholder: PLACEHOLDER,
-  disabled: false,
-  SelectProps: {},
-}
-
-const OutlinedWithPrefixStory: Story<SelectProps> = (args) => (
-  <OutlinedSelectWithMenu
-    startAdornment={
-      <StyledInputAdornment position='start' disabled={args.disabled}>
-        <Visibility />
-      </StyledInputAdornment>
-    }
-    {...args}
-  />
-)
-
-export const OutlinedWithPrefix = OutlinedWithPrefixStory.bind({})
-
-OutlinedWithPrefix.args = {
-  color: 'primary',
-  size: 'medium',
-  width: 220,
-  paperMaxHeight: 412,
-  hasLabel: true,
-  placeholder: PLACEHOLDER,
-  helperText: 'Pick your choice',
-  disabled: false,
-  SelectProps: {},
-}
-
 // Standard Select start with here.
-const StandardSelectWithMenu = (props: SelectProps) => {
+const SelectWithMenu = (props: SelectProps) => {
   const [item, setItem] = useState<string>('')
 
   const handleChange = (event) => {
@@ -306,7 +181,6 @@ const StandardSelectWithMenu = (props: SelectProps) => {
 
   return (
     <Select
-      variant='standard'
       value={item}
       SelectProps={{
         onChange: (e) => {
@@ -328,15 +202,16 @@ const StandardSelectWithMenu = (props: SelectProps) => {
   )
 }
 
-const StandardValueOnlyStory: Story<SelectProps> = (args) => (
-  <StandardSelectWithMenu {...args} />
+const ValueOnlyStory: Story<SelectProps> = (args) => (
+  <SelectWithMenu {...args} />
 )
 
-export const StandardValueOnly = StandardValueOnlyStory.bind({})
+export const ValueOnly = ValueOnlyStory.bind({})
 
-StandardValueOnly.args = {
+ValueOnly.args = {
   color: 'primary',
-  size: 'medium',
+  variant: 'standard',
+  size: 'small',
   width: 300,
   paperMaxHeight: 300,
   hasShrink: false,
@@ -345,7 +220,7 @@ StandardValueOnly.args = {
   disabled: false,
 }
 
-const StandardSelectWithError = (props: SelectProps) => {
+const SelectWithError = (props: SelectProps) => {
   const [item, setItem] = useState<string>('')
 
   const handleChange = (event) => {
@@ -354,7 +229,6 @@ const StandardSelectWithError = (props: SelectProps) => {
 
   return (
     <Select
-      variant='standard'
       value={item}
       SelectProps={{
         onChange: (e) => {
@@ -378,15 +252,16 @@ const StandardSelectWithError = (props: SelectProps) => {
   )
 }
 
-const StandardWithErrorStory: Story<SelectProps> = (args) => (
-  <StandardSelectWithError {...args} />
+const WithErrorStory: Story<SelectProps> = (args) => (
+  <SelectWithError {...args} />
 )
 
-export const StandardWithError = StandardWithErrorStory.bind({})
+export const WithError = WithErrorStory.bind({})
 
-StandardWithError.args = {
+WithError.args = {
   color: 'primary',
-  size: 'medium',
+  variant: 'standard',
+  size: 'small',
   width: 300,
   paperMaxHeight: 300,
   hasShrink: false,
@@ -394,8 +269,8 @@ StandardWithError.args = {
   disabled: false,
 }
 
-const StandardWithPrefixStory: Story<SelectProps> = (args) => (
-  <StandardSelectWithMenu
+const WithPrefixStory: Story<SelectProps> = (args) => (
+  <SelectWithMenu
     InputProps={{
       startAdornment: (
         <StyledInputAdornment position='start' disabled={args.disabled}>
@@ -407,11 +282,12 @@ const StandardWithPrefixStory: Story<SelectProps> = (args) => (
   />
 )
 
-export const StandardWithPrefix = StandardWithPrefixStory.bind({})
+export const WithPrefix = WithPrefixStory.bind({})
 
-StandardWithPrefix.args = {
+WithPrefix.args = {
   color: 'primary',
-  size: 'medium',
+  variant: 'standard',
+  size: 'small',
   width: 300,
   paperMaxHeight: 300,
   hasShrink: false,

package/src/lib/select/StandardSelect.tsx

@@ -16,7 +16,6 @@ const classes = {
   inputLabelFocused: `${PREFIX}-inputLabelFocused`,
   inputLabelMarginDense: `${PREFIX}-inputLabelMarginDense`,
   inputLabelError: `${PREFIX}-inputLabelError`,
-  inputRoot: `${PREFIX}-inputRoot`,
   inputFocused: `${PREFIX}-inputFocused`,
   inputInput: `${PREFIX}-input`,
   inputUnderline: `${PREFIX}-inputUnderline`,
@@ -103,8 +102,6 @@ interface StyledInputProps {
 const StyledInput = styled(({ color: _color, ...props }) => (
   <Input
     classes={{
-      root: classes.inputRoot,
-      focused: classes.inputFocused,
       input: classes.inputInput,
       disabled: classes.inputDisabled,
       underline: classes.inputUnderline,
@@ -114,9 +111,6 @@ const StyledInput = styled(({ color: _color, ...props }) => (
   />
 ))(({ color, theme }: StyledInputProps) => ({
   color: theme.palette.text.primary,
-  [`&.${classes.inputRoot}.${classes.inputFocused}`]: {
-    backgroundColor: theme.palette.action.selected,
-  },
   [`& .${classes.inputInput}`]: {
     ['&:focus']: {
       background: 'rgba(0,0,0,0)',
@@ -141,7 +135,7 @@ export function StandardSelect({
   SelectProps,
   children,
   color = 'primary',
-  size = 'medium',
+  size = 'small',
   width = 'auto',
   paperMaxHeight = 'auto',
   error = false,