Open geospatialem opened 2 years ago
Note: explore if a "subtle" and "loud" (... with better names) could work, or if a single state such as the bordered example above is best. Note that users can always customize both the indicator and the action active state through css vars, so that may be a justification for a single one)...
const action = document.querySelector('calcite-action').shadowRoot
action.querySelector('.button').setAttribute('style','padding:0.5em;')
is it can help?
Also to explore: using foreground-current for the active state
Description
One of three issues stemmed from #4813.
Determine if there is a need for differing styles to further emphasize an
active
state. Currently a light gray state is provided in light mode, and dark gray for dark mode. Could additional context be provided to users?Acceptance Criteria
active
state vs other states in theaction
component, and possibly across componentsactive
state across componentsactive
state across componentsRelevant Info
This issue surfaced from discussion of the
action
component, which has a similar appearance when in an active state that is depicted on the :focus/:active/:hover states.So it isn't clear if the active state is true, or not when focused. While the indicator attribute can be used alongside, there should be more visual prominence that the action is in an
:active
state.cc @macandcheese
Which Component
Specifically with
action
, but could impact other components.Example Use Case
Example with
action
: https://codepen.io/geospatialem/pen/QWmWdoQ.