Skip to content
This repository has been archived by the owner on Mar 14, 2023. It is now read-only.

Date input and theme fixes #31

Merged
merged 13 commits into from
Jun 26, 2019
Merged

Date input and theme fixes #31

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
65a09d9
increment versions
Jun 24, 2019
b35c5b9
fix dependencies
Jun 24, 2019
18b94f1
see if version updates
Jun 24, 2019
302363a
try from package
Jun 24, 2019
732b827
check version change
Jun 24, 2019
e9cb515
Publish
Jun 24, 2019
61ab392
remove from package
Jun 24, 2019
ebe0126
date input
Jun 25, 2019
5cbd57c
improve styling and clean up code
Jun 26, 2019
bcfc274
add disabled fix and fix button styles
Jun 26, 2019
d50a3b1
main Readme
Jun 26, 2019
9f4731e
remove button supper set
Jun 26, 2019
8ab6388
sort sections
Jun 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add disabled fix and fix button styles
  • Loading branch information
razvan committed Jun 26, 2019
commit bcfc2747085fe062f877717790bc65cff49741b8
23 changes: 21 additions & 2 deletions .storybook/src/components/date-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,22 @@ storiesOf("3.Components | Date Input", module)

return (
<AxisTheme>
<Box>
<Box gap={'medium'}>
<DateInput
value={date}
onChange={setDate}
placeholder={'Select Date'}
/>


<DateInput
disabled
value={date}
onChange={setDate}
placeholder={'Select Date'}
/>


</Box>

</AxisTheme>
Expand All @@ -36,14 +45,24 @@ storiesOf("3.Components | Date Input", module)
return (
<AxisTheme>
<Box align="center" pad="large">
<Box width={'300px'}>
<Box width={'300px'} gap={'medium'}>
<FormField label="Due Date">
<DateInput
value={date}
placeholder={'Select Date'}
onChange={setDate}
/>
</FormField>

<FormField label="Disabled Due Date">
<DateInput
disabled
value={date}
placeholder={'Select Date'}
onChange={setDate}
/>
</FormField>

</Box>

</Box>
Expand Down
3 changes: 3 additions & 0 deletions .storybook/src/theme/grommet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,11 @@ class Components extends Component {
]}
/>
<Button label="Default Button" onClick={() => {}} />
<Button disabled label="Default Button" onClick={() => {}} />
<Button primary label="Primary Button" onClick={() => {}} />
<Button disabled primary label="Primary Button" onClick={() => {}} />
<Button plain label="Plain Button" onClick={() => {}} />
<Button disabled plain label="Plain Button" onClick={() => {}} />
</Box>,
<Box key="input" gap="small">
<Select
Expand Down
20 changes: 13 additions & 7 deletions packages/date-input/src/DateInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,17 @@ import {controlBorderStyle} from "grommet/utils";
import styled, {withTheme} from "styled-components";
import {Close} from "grommet-icons";

const DateTimeTextInput = styled(TextInput)`
cursor: pointer;
`;


const StyledDateInputDropButton = styled(DropButton)`
font-size: inherit;
${DateTimeTextInput} {
${props => props.disabled && 'cursor:default'}
}

${props => !props.plain && controlBorderStyle};
${props =>
props.theme.dateInput &&
Expand All @@ -14,14 +23,10 @@ const StyledDateInputDropButton = styled(DropButton)`
`;


const DateTimeTextInput = styled(TextInput)`
cursor: pointer;
`;


const StyledCalendar = styled(Calendar)`
// Handle multiple sizes
width: 302px;
${props =>
props.theme.dateInput &&
props.theme.dateInput.calendar &&
Expand All @@ -35,7 +40,7 @@ const DropContent = props => {
onClose(date);
}
return (
<Box align="left" pad={'medium'} justify="center">
<Box align="start" pad={'medium'} justify="center">
<StyledCalendar
locale={locale}
daysOfWeek
Expand All @@ -54,7 +59,7 @@ export const DateInput = withTheme((props) => {
const defaultProps = {locale: 'en-US', size: 'small'}

const [open, setOpen] = useState();
const {value, onChange, locale, plain, placeholder, size} = {...props, ...defaultProps};
const {value, onChange, locale, plain, placeholder, size, disabled} = {...props, ...defaultProps};

// if plain is set it is inside a form field most likely and has no border
let padding = {}
Expand All @@ -69,6 +74,7 @@ export const DateInput = withTheme((props) => {

return (
<StyledDateInputDropButton
disabled={disabled}
plain={plain}
open={open}
size={size}
Expand All @@ -92,7 +98,7 @@ export const DateInput = withTheme((props) => {
<Box gap={size} direction={'row'}>

{
value && <Close
value && !disabled && <Close
size={size}
onClick={(ev) => {
ev.stopPropagation();
Expand Down
45 changes: 24 additions & 21 deletions packages/theme/src/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,9 @@ export const axisThemeConfig = deepMerge(base, {
dark: "white"
}
},
size: {
small:'302px',
},
breakpoints: { ...breakpoints },
deviceBreakpoints: {
phone: "small",
Expand Down Expand Up @@ -262,30 +265,30 @@ export const axisThemeConfig = deepMerge(base, {
text-align: center;
font-size: 16px;
line-height: 24px;

${!props.disabled && css`

&:hover {
box-shadow: none;
border-color: ${brandColor};

${!props.primary &&
css`
color: ${brandColor};
`}
}

&:active {
opacity: 0.9;
}

/* CUSTOMIZED PROP: primary
* Changes the hover background color
*/
${props.primary &&
css`
&:hover {
background-color: ${brandColor};

box-shadow: none;
border-color: ${brandColor};

${!props.primary &&
css`
color: ${brandColor};
` ||
css`
background-color: ${brandColor};
`
}
}
`}
&:active {
opacity: 0.9;
}
`}




/* NEW PROP: textAlign
* Sets default text-align to center, and enables changing of it per-button-level
Expand Down