-
Notifications
You must be signed in to change notification settings - Fork 9
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.
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
date stacked component initial commit #373
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @josephgknox ,
I have a couple comments for you!
@kerri-augenstein has provided designs, which can be seen at https://www.figma.com/file/Kmd4utmJFPRMVeCFEEBQhLtx/Stanford-Design-Library?node-id=2264%3A3774 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for your great work on this, Joe! Just a few comments and questions.
max-width: 105px; | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should these max-widths be limited to the styleguide's rendering? Don't we want a max-width on the actual rendering?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I thought a little about this one, and wasn't sure if the max-width should be tied to the component itself or just the style guide for display purposes only. I wondered if the components use case might dictate what width someone wants to set for it. That said, we might actually want a sensible default established; one that they can then override. I'll move this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I do think the widths are inherent in the component. But maybe we could do this styling with a placeholder so people can override if necessary?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That is a really good question. My initial knee jerk reaction is to leave components at 100% width with the idea that they will be used either in some sort of container or by a developer in which they could then set the widths. What are other style guides doing? Are they using atomic design principles? Are they applying widths to every level (atom -> organism)? I am sure somebody has gone through some learning lessons on this already and it would be good of us to find out.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<div class="su-date-day">{{ day_of_month }}</div> | ||
{% endif %} | ||
|
||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we want to change the container from a <div>
to a <time datetime="...">
? (See <time>
on MDN.) In that case we might also want a year. The year wouldn't (necessarily) render in the browser, but bots could recognize the actual date.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll explore this more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That looks handy. It appears it doesn't have IE support and we should still support IE 11 so my question is what would it look like in IE11? My guess is that it isn't supported but probably looks 100% fine and should be usable. I have been tricked before however.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
caniuse > Known issues says:
While the
time
anddata
elements can be used and work fine in all browsers, currently only Firefox and Edge 14+ recognize them officially asHTMLTimeElement
andHTMLDataElement
objects.
In fact, we use it on news.stanford.edu. Go to any story on that site and inspect the date the story was published - it's a <time>
tag. We should of course test it in IE, but it should be fine.
I'm not at all clear on how much benefit it offers, but I'd still lean towards using <time datetime="...">
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think it's meaningful to just have {{ month_of_year}}
or {{ day_of_motnh }}
in the datetime
attribute - see MDN. You could end up with datetime="9"
. What would that mean?
I think we should do our best to provide the most specific datetime possible, even if that mean requiring data that doesn't render visually. I think we should at least have datetime="{{ year }}-{{ month_of_year}}-{{ day_of_month }}"
, which requires a year, even though no year renders visually. (Of course we'd need logic to build the string based on what data we actually have - we don't want dangling dashes.) We might also add some logic to include the time, if provided.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How about now?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ideally it would be nice to have just one <time>
tag. Also, datetime
with just the month alone might not be valid without a year attached? (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time). I'm fine with the current version though, except maybe only emit one datetime
attribute so it doesn't repeat, if we're using 2 <time>
tags? Other than that GTG.
Update: For the case when either month or day is empty, maybe omit the datetime entirely since that wouldn't be valid anyway?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤔 hmmm. Perhaps we go back to the <span>
tag for safety. I know it would be more semantic/accessible if the field used <time>
but if we are to allow for a mix and match approach, I wouldn't want to have tag switching on the component as that could leave to confusing UI or behaviors if they alternated in a list or something.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's true....if you're anticipating cases that either the day or month might be missing, then <span>
is a safer choice, since a valid time tag would require both a month and a day 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, back to plain ol' span until we come up with a better solution.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
GTG
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I left a comment about the <time>
tag - if we could have <span>
nested inside <time>
perhaps we could go with the approach I suggested? Everything else looks good, we could get the colors from the color map later after master is merged into this branch 👍
core/src/scss/components/date-stacked/_date-stacked--no-background.scss
Outdated
Show resolved
Hide resolved
@yvonnetangsu Have a look and punch the green button when you are happy with the state of this PR. |
GTG - merging! |
* master: date stacked component initial commit (#373) Add a variant for Card where the whole card is a link and add option to turn headline into a link (#444) Create Masthead component (#439) Link variants (#450) # Conflicts: # core/src/scss/utilities/mixins/link/_external-link.scss - resolved using master # core/src/scss/utilities/mixins/shadow/_box-shadow.scss - manually resolved
* date stacked component initial commit * CC FIXUP * CC FIXUP * clean up * updated default styles for component based on new design * no bg variant * styleguide responsiveness * max width and BEM FIXUP * incorporate time tag * Update date-stacked.twig * fixup! color maps * fixup! build. * Update date-stacked.twig
READY FOR REVIEW
Summary
Needed By (Date)
Urgency
Steps to Test
Affected Projects or Products
Associated Issues and/or People
See Also