✨ RSP-631: Datepicker range styles added #13
Conversation
✨ RSP-631: Datepicker range styles added
GarthDB
changed the title
| hr { | ||
| background-color: var(--spectrum-textfield-placeholder-text-color); | ||
| border: 0; | ||
| margin: 15px 0px; |
There was a problem hiding this comment.
Do not use hard pixel values as they will not scale
There was a problem hiding this comment.
It would get converted to rems, but do you mean using the scaling tokens from dna?
There was a problem hiding this comment.
That’s correct it should be driven by DNA size tokens
| border: 0; | ||
| margin: 15px 0px; | ||
| height: 1px; | ||
| width: 10px; |
There was a problem hiding this comment.
@NateBaldwinDesign Should this be an actual em dash added with the :before pseudo-selector instead?
| background-color: var(--spectrum-textfield-placeholder-text-color); | ||
| border: 0; | ||
| margin: 15px 0px; | ||
| height: 1px; |
There was a problem hiding this comment.
use var(--spectrum-alias-border-size-thin)
| width: 10px; | ||
| position: absolute; | ||
| top: 0; | ||
| left: calc(50% - 27px); /*22px half button width and 5px hald of HR width*/ |
There was a problem hiding this comment.
also should be calculated using spectrum tokens rather than pixels so that it scales properly
| /* Inputs */ | ||
| .spectrum-InputGroup-field { | ||
| width: 100px; | ||
| min-width: 100px; |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
@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?
| width: 100px; | ||
| min-width: 100px; | ||
| &:nth-of-type(1) { | ||
| padding-right: 12px; |
There was a problem hiding this comment.
use var(--spectrum-global-dimension-size-150)
| padding-right: 12px; | ||
| } | ||
| &:nth-of-type(2) { | ||
| padding-left: 12px; |
There was a problem hiding this comment.
use var(--spectrum-global-dimension-size-150)
| &.spectrum-InputGroup--quiet { | ||
| border-bottom: 1px solid var(--spectrum-textfield-border-color); | ||
| hr { | ||
| left: calc(50% - 21px); /*22px half button width and 5px hald of HR width*/ |
There was a problem hiding this comment.
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
):
| } | ||
| /** Quiet **/ | ||
| &.spectrum-InputGroup--quiet { | ||
| border-bottom: 1px solid var(--spectrum-textfield-border-color); |
There was a problem hiding this comment.
Can't this be inherited from quiet textfields? @lazd ?
|
Possible duplicate of #53 |
|
Closing as the work has moved to #53 |
No description provided.