LearnNewsExamplesServices
Frontmatter
id5262
titleObsolete css class in secondary button
stateClosed
labels
bugstale
assigneestobiu
createdAtFeb 23, 2024, 10:16 AM
updatedAtSep 12, 2024, 4:28 AM
githubUrlhttps://github.com/neomjs/neo/issues/5262
authormxmrtns
commentsCount6
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtSep 12, 2024, 4:28 AM

Obsolete css class in secondary button

Closed v8.1.0 bugstale
mxmrtns
mxmrtns commented on Feb 23, 2024, 10:16 AM

Is this class obsolete? I couldn't figure out what it does as we also have a :active class, which should cover the use case of 'pressed'

https://github.com/neomjs/neo/blob/f5f8bfce6f6daa95c1c77eda8b41bd414dc71225/resources/scss/src/button/Base.scss#L257C1-L259C10

mxmrtns added the bug label on Feb 23, 2024, 10:16 AM
mxmrtns assigned to @mxmrtns on Feb 23, 2024, 10:16 AM
mxmrtns assigned to @tobiu on Feb 23, 2024, 10:16 AM
mxmrtns unassigned from @mxmrtns on Feb 23, 2024, 10:16 AM
tobiu
tobiu Feb 23, 2024, 10:25 AM

Hi Max,

i think we need both, active & pressed states.

one state indicates a mousedown or tap event, the other one indicates an active item.

think of tab header buttons (active tab) or button toggle groups, where one button can be pressed to indicate a navigation state.

@ExtAnimal

mxmrtns
mxmrtns Feb 23, 2024, 10:28 AM

I don't see how there is a difference. :active = mousedown / tap or not?

@tobiu @ExtAnimal

tobiu
tobiu Feb 23, 2024, 10:35 AM

take a look at this one: http://localhost:8080/examples/tab/container/

the "selected" tab header looks different inside the dark theme. a click triggers the ripple effect, but it could just be a different css rule.

mxmrtns
mxmrtns Feb 23, 2024, 10:57 AM

I think I know what you mean and I think we need to align on some semantics

:active pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button. (from mdn docs)

pressed is no actual HTML state and just means the same as :active

selected is what you are referring to in your Tab-Header button. Also it is just a semantic state and not actual HTML

:focus pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key. (from mdn docs)

From my perspective a regular button ... ... can be active (which is the equivalent to being pressed) ... can be focused ... cannot be selected

@tobiu @ExtAnimal

@github-actions - 2024-08-29T02:25:37Z

This issue is stale because it has been open for 90 days with no activity.

  • 2024-08-29T02:25:37Z @github-actions added the stale label

@github-actions - 2024-09-12T02:28:15Z

This issue was closed because it has been inactive for 14 days since being marked as stale.

  • 2024-09-12T02:28:15Z @github-actions closed this issue