-
Notifications
You must be signed in to change notification settings - Fork 8.3k
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
[Discover] Deangularize Skip to bottom button #69811
[Discover] Deangularize Skip to bottom button #69811
Conversation
Pinging @elastic/kibana-app (Team:KibanaApp) |
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.
Code LGTM, this is a great debut in the discover world 🥇 . nice 👁️ for detail. About the styling for small screen, don't think we need adaption here, button won't be necessary or will be solved differently once data grid will be the center of Discover, which will take some time. #67259.
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 @dej611! Quick design pass for you.
<EuiButton onClick={onClick} iconType="arrowDown" className="dscSkipButton"> | ||
<FormattedMessage id="discover.skipToBottomButtonLabel" defaultMessage="Skip to bottom" /> | ||
</EuiButton> |
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.
EUI actually has an EuiSkipLink precisely for this use case that would be useful here without needing the extra CSS to push it off screen as EuiSkipLink will automatically hide/show when tabbing to it. I would also make the text more descriptive than "bottom".
<EuiButton onClick={onClick} iconType="arrowDown" className="dscSkipButton"> | |
<FormattedMessage id="discover.skipToBottomButtonLabel" defaultMessage="Skip to bottom" /> | |
</EuiButton> | |
<EuiSkipLink size="s" onClick={onClick} className="dscSkipButton" destinationId=""> | |
<FormattedMessage id="discover.skipToBottomButtonLabel" defaultMessage="Skip to table" /> | |
</EuiSkipLink> |
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.
Sounds good. I looked in the button section without searching for Skip
effectively in the doc. Good suggestion, I'm going to use it.
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.
nice, didn't know this component 👍
left: -10000px; | ||
top: $euiSizeXS; |
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.
Then this would simply become.
left: -10000px; | |
top: $euiSizeXS; | |
right: $euiSizeXS; | |
top: $euiSizeXS; |
And you can delete everything below this.
Pushed suggestion fixes. The Safari fix in this PR has been removed and rather fixed up the line on the EUI |
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.
A couple last suggestions
@@ -100,16 +100,6 @@ discover-app { | |||
|
|||
.dscSkipButton { | |||
position: absolute; | |||
left: -10000px; | |||
right: $euiSizeXS; |
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.
right: $euiSizeXS; | |
right: $euiSizeM; |
@@ -141,7 +130,7 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1> | |||
on-remove-column="removeColumn" | |||
></doc-table> | |||
|
|||
<a tabindex="0" id="discoverBottomMarker"></a> | |||
<a tabindex="0" id="discoverBottomMarker">​</a> |
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.
This symbol actually adds a line of whitespace, is this intended?
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.
Yes. From my tests Safari won't scroll to the marker if empty. For this reason I had to add this empty space character to the node.
<I18nProvider> | ||
<EuiSkipLink | ||
size="s" | ||
iconType="arrowDown" |
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.
We usually reserve the arrow icons to indicate popovers or disclosure style content not directional. I think it can be omitted entirely.
iconType="arrowDown" |
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.
Ah ok. I've set it to match the previous button, but if that is not longer required I'll remove it.
2db9cbf
to
5a35009
Compare
@elasticmachine merge upstream |
@elasticmachine merge upstream |
checked again, still LGTM 👍 |
💚 Build SucceededBuild metrics
History
To update your PR or re-run it, just comment with: |
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.
LGTM! Safari and TS fixes for EuiSkipLink will get updated with the latest EUI
Co-authored-by: Elastic Machine <[email protected]>
…ata-streams * 'master' of github.com:elastic/kibana: (50 commits) [Logs UI] [Alerting] "Group by" functionality (elastic#68250) [Discover] Deangularize Skip to bottom button (elastic#69811) Implement recursive plugin discovery (elastic#68811) Use ts-expect-error in platform code (elastic#69883) [SIEM][Detection Engine][Lists] Moves getQueryFilter to common folder for use by both front and backend [Ingest Manager][SECURITY SOLUTION] adjust config reassign link and add roundtrip to Reassignment flow (elastic#70208) [Security][Lists] Add API functions and react hooks for value list APIs (elastic#69603) [ILM] Fix bug when clearing priority field (elastic#70154) [Platform][Security] Updates cluster_manager ignorePaths to include security scripts (elastic#70139) [IngestManager] Allow to filter agent by packages (elastic#69731) [code coverage] exclude folders: test_helpers, tests_bundle (elastic#70199) [Metrics UI] UX improvements for saved views (elastic#69910) [APM] docs: unique transaction troubleshooting (elastic#69831) Cross cluster search functional test with minimun privileges assigned to the test_user (elastic#70007) [Maps] choropleth layer wizard (elastic#69699) Make custom errors by extending Error (elastic#69966) [Ingest Manager] Support updated package output structure (elastic#69864) Resolver test coverage (elastic#70246) Async Discover search test (elastic#64388) [ui-shared-deps] include styled-components (elastic#69322) ... # Conflicts: # x-pack/plugins/snapshot_restore/server/types.ts
…bana into alerting/consumer-based-rbac * 'alerting/consumer-based-rbac' of github.com:gmmorris/kibana: (49 commits) [Discover] Deangularize Skip to bottom button (elastic#69811) Implement recursive plugin discovery (elastic#68811) Use ts-expect-error in platform code (elastic#69883) [SIEM][Detection Engine][Lists] Moves getQueryFilter to common folder for use by both front and backend [Ingest Manager][SECURITY SOLUTION] adjust config reassign link and add roundtrip to Reassignment flow (elastic#70208) [Security][Lists] Add API functions and react hooks for value list APIs (elastic#69603) [ILM] Fix bug when clearing priority field (elastic#70154) [Platform][Security] Updates cluster_manager ignorePaths to include security scripts (elastic#70139) [IngestManager] Allow to filter agent by packages (elastic#69731) [code coverage] exclude folders: test_helpers, tests_bundle (elastic#70199) [Metrics UI] UX improvements for saved views (elastic#69910) [APM] docs: unique transaction troubleshooting (elastic#69831) Cross cluster search functional test with minimun privileges assigned to the test_user (elastic#70007) [Maps] choropleth layer wizard (elastic#69699) Make custom errors by extending Error (elastic#69966) [Ingest Manager] Support updated package output structure (elastic#69864) Resolver test coverage (elastic#70246) Async Discover search test (elastic#64388) [ui-shared-deps] include styled-components (elastic#69322) SECURITY-ENDPOINT: add host properties (elastic#70238) ...
Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>
Summary
This PR contains the following features/fixes:
dscSkipButton
classNote: To test on Safari make sure to enable Tab behaviour in
Preferences > Advanced > Press Tab to highlight...
Updated screenshots
Desktop:
Smartphone:
Tablet:
Checklist
Delete any items that are not applicable to this PR.