Skip to content

✨ RSP-631: Datepicker range styles added #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

✨ RSP-631: Datepicker range styles added #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5350dd6
RSP-631: Datepicker range styles added
Oct 25, 2018
f1d88d9
Adding yml files
Oct 25, 2018
81d0875
Styley update
Oct 29, 2018
77d22cb
Small update
Oct 31, 2018
8fccbde
Style update
Nov 5, 2018
1ada18c
Merge pull request #634 from end73241/RSP-631
GarthDB Nov 17, 2018
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
11 changes: 11 additions & 0 deletions docs/inputgroup/datepicker-range-quiet.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
name: Date Picker - Range Quiet
description: A date picker uses the input group component to display a field with a button next to it
markup: |
<div aria-disabled="false" aria-invalid="false" class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range" aria-readonly="false" aria-required="false" aria-owns="react-spectrum-2" aria-haspopup="true">
<input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" aria-invalid="false" placeholder="mm/dd/yyyy" name="start" value="2018-10-01">
<hr>
<input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" aria-invalid="false" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
<button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet">
<svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS"><path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path><path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z"></path></svg>
</button>
</div>
11 changes: 11 additions & 0 deletions docs/inputgroup/datepicker-range.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
name: Date Picker - Range
description: A date picker uses the input group component to display a field with a button next to it
markup: |
<div aria-disabled="false" aria-invalid="false" class="spectrum-InputGroup spectrum-Datepicker spectrum-Datepicker--range" aria-readonly="false" aria-required="false" aria-owns="react-spectrum-110" aria-haspopup="true">
<input type="text" class="spectrum-Textfield spectrum-InputGroup-field" aria-invalid="false" placeholder="mm/dd/yyyy" name="start" value="">
<hr>
<input type="text" class="spectrum-Textfield spectrum-InputGroup-field" aria-invalid="false" placeholder="mm/dd/yyyy" name="end" value="">
<button type="button" class="spectrum-FieldButton">
<svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS"><path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z"></path><path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z"></path></svg>
</button>
</div>
10 changes: 9 additions & 1 deletion src/inputgroup/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@
/* topdoc
{{ inputgroup/datepicker-quiet.yml }}
*/
/* topdoc
{{ inputgroup/datepicker-range.yml }}
*/
/* topdoc
{{ inputgroup/datepicker-range-quiet.yml }}
*/

:root {
/* Todo: move to DNA */
Expand All @@ -26,6 +32,7 @@
flex-direction: row;
flex-wrap: nowrap;
min-width: var(--spectrum-component-single-line-width);
border-radius: var(--spectrum-border-radius);

.spectrum-FieldButton {
padding: 0 var(--spectrum-dropdown-padding-x);
Expand All @@ -42,8 +49,9 @@
}

.spectrum-InputGroup--quiet {
border-radius: 0;
.spectrum-FieldButton {
border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
border-radius: var(--spectrum-textfield-padding-top);

position: relative;
padding-right: var(--spectrum-combobox-quiet-fieldbutton-padding-right);
Expand Down
86 changes: 86 additions & 0 deletions src/inputgroup/skin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,3 +86,89 @@
}
}
}

/*
TODO: discuss with other
Way to keep this datapicker related
IN PROGRESS
*/
.spectrum-InputGroup {
&.spectrum-Datepicker {
/** Normal **/
&:not(.spectrum-InputGroup--quiet) {
border: 1px solid var(--spectrum-textfield-border-color);
}
/** Quiet **/
&.spectrum-InputGroup--quiet {
border-bottom: 1px solid var(--spectrum-textfield-border-color);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't this be inherited from quiet textfields? @lazd ?

hr {
left: calc(50% - 21px); /*22px half button width and 5px hald of HR width*/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should not use pixel values or it won't scale properly. Be sure to test locally by swapping themes and scales in order to see this in action (note the location of the

):

image

}
}
/* Border color in different cases: hover, focus, invalid */
&:not(.is-disabled):hover,
&.is-focused {
.spectrum-InputGroup-field::placeholder {
color: var(--spectrum-textfield-placeholder-text-color-hover);
}
hr {
background-color: var(--spectrum-textfield-placeholder-text-color-hover);
}
}
&:not(.is-disabled):not(.is-focused):not(.is-invalid):hover {
border-color: var(--spectrum-textfield-border-color-hover);
}
&.is-focused {
border-color: var(--spectrum-textfield-border-color-down);
}
&.is-invalid:not(.is-focused) {
border-color: var(--spectrum-textfield-border-color-error);
}
&.is-disabled {
hr {
background-color: var(--spectrum-textfield-text-color-disabled);
}
}
/* Single & Range Inputs */
.spectrum-InputGroup-field {
border: 0;
&:focus ~ .spectrum-FieldButton {
border-color: var(--spectrum-textfield-border-color);
box-shadow: none;
}
}
/* Single & Range Button */
.spectrum-FieldButton {
border-top: 0;
border-right: 0;
border-bottom: 0;
}
/* Horisontal line */
/* TODO: Add class to HR */
hr {
background-color: var(--spectrum-textfield-placeholder-text-color);
border: 0;
margin: 15px 0px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do not use hard pixel values as they will not scale

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would get converted to rems, but do you mean using the scaling tokens from dna?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That’s correct it should be driven by DNA size tokens

height: 1px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use var(--spectrum-alias-border-size-thin)

width: 10px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NateBaldwinDesign Should this be an actual em dash added with the :before pseudo-selector instead?

position: absolute;
top: 0;
left: calc(50% - 27px); /*22px half button width and 5px hald of HR width*/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also should be calculated using spectrum tokens rather than pixels so that it scales properly

}
/* Range */
/* TODO: use defined variable for width and padding */
&.spectrum-Datepicker--range {
/* Inputs */
.spectrum-InputGroup-field {
width: 100px;
min-width: 100px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These widths don't seem appropriate. We would hope that the minimum width for each input would relate to the date format being used, which may not be able to be expressed here (fyi @GarthDB )

To that I would suggest leaving this out since textfields default min-width should already be set to 72px.

Ultimately we would hope that the spacing between the HR and the inputs always be the mid-way point, even if the field has a fixed width.
image

Copy link
Contributor

@majornista majornista Dec 14, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NateBaldwinDesign Adjusting the margin of the em dash based on the text width of the first input's value or placeholder requires a javascript method to execute when the value changes. Should we add a utility method to the docs to do this?

&:nth-of-type(1) {
padding-right: 12px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use var(--spectrum-global-dimension-size-150)

}
&:nth-of-type(2) {
padding-left: 12px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use var(--spectrum-global-dimension-size-150)

}
}
}
}
}