-
Notifications
You must be signed in to change notification settings - Fork 3
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
Simplify attribute naming conventions #202
Comments
Double check nested duplicate ID |
@sreidthomas , I thought we could break down this issue (and #201, #205) between the two of us depending on the component. I marked off which components I'll work on in this spreadsheet: https://is.gd/ETzUCF. It'll help us avoid merge conflicts if we break down the work this way per component. |
Thank you. You might have a nice head start. I am still trying to get the close button for the alert component positioned right. Just playing around with the solution I have. I may need to change something. |
No stress, take your time :) |
I think offcanvasHeader.js is a good one to start with:
None of these are global attributes or standard element attributes but they are using the data- prefix so I would have to shorten these: data-parent-id ===> parent-id would these have to be shortened too @maxatdetroit ?:
|
|
Is your feature request related to a problem? Please describe.
Many of our components re-declare and rename global attributes or standard element attributes with custom names. For example
data-disable
is intended to behave like thedisabled
HTML attribute.Also, many of our components use the
data-*
custom attribute naming convention. As discussed below, this is not necessary and superfluous.Describe the solution you'd like
Go through each of our components, and:
data-
prefixes (e.g.data-id
becomesid
)data-disable
becomesdisabled
)data-
prefixdata-
prefixes (e.g.data-extra-classes
becomesextra-classes
)cod-button
has a size attribute that expects a value ofsm
,md
,lg
butcod-icon
has a size attribute that expects a value ofsmall
,medium
,large
etc. They should both accept the abbreviated version.cod-action-button
has abutton-color
attribute andcod-button
has adata-background-color
attribute but they effectively do the same thing. They should both be namedcolor
and accept values from bootstrap colors (primary, secondary, etc.)cod-container
has adata-background-color
attribute that expectscolor-1
,color-2
etc. instead ofprimary
,secondary
, etc. It should be updated to use bootstrap colors (primary, secondary, etc.).Each time we update component attributes, we'll need to:
Additional Context
It seems we started off using the
data-*
custom attribute naming convention to avoid overwriting existing global/standard HTMLElement attributes and be compatible with future global/standard HTMLElement attributes and enable easier HTML validation (1). However, this seems to be a non-problem for the most part because:The text was updated successfully, but these errors were encountered: