Skip to content

fix(dashboard): Anchor link positions #34843

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.

Sign up for GitHub

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

Merged
kgabryje merged 3 commits into from
Aug 26, 2025
Merged

fix(dashboard): Anchor link positions #34843

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2f39e35
fix(dashboard): Anchor link position in Tabs
kgabryje Aug 25, 2025
0ae7c4f
Fix anchor link position in Header component
kgabryje Aug 25, 2025
404d78e
Use theme token for transition duration
kgabryje Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,10 @@ const StyledEditableTitle = styled.span<{
canEdit: boolean;
}>`
&.editable-title {
display: inline-block;
width: 100%;
display: inline;
&.editable-title--editing {
width: 100%;
}

input,
textarea {
Expand Down
11 changes: 9 additions & 2 deletions superset-frontend/src/components/CopyToClipboard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/
import { Component, cloneElement, ReactElement } from 'react';
import { t } from '@superset-ui/core';
import { t, css, SupersetTheme } from '@superset-ui/core';
import copyTextToClipboard from 'src/utils/copy';
import { Tooltip } from '@superset-ui/core/components';
import withToasts from '../MessageToasts/withToasts';
Expand Down Expand Up @@ -104,7 +104,14 @@ class CopyToClip extends Component<CopyToClipboardProps> {
return (
<span css={{ display: 'inline-flex', alignItems: 'center' }}>
{this.props.shouldShowText && this.props.text && (
<span data-test="short-url">{this.props.text}</span>
<span

@mistercrunch mistercrunch Aug 26, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

different ways to do this, but throughout the code base the emerging pattern is to const theme = useTheme() and then you can style={{ marginRigth: ``${theme.sizeUnit}px`` }}. That way types comes directly.

Would be cool to have a css and styled in @superset-ui/core but couldn't make it work easily when I tried

@kgabryje kgabryje Aug 26, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't useTheme here because it's a class component. We could use a withTheme HOC but I think css={theme => ... might be the cleanest here

data-test="short-url"
css={(theme: SupersetTheme) => css`
margin-right: ${theme.sizeUnit}px;
`}
>
{this.props.text}
</span>
)}
{this.renderTooltip('pointer')}
</span>
Expand Down
12 changes: 12 additions & 0 deletions superset-frontend/src/dashboard/components/gridComponents/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,18 @@ const HeaderStyles = styled.div`
font-size: ${theme.fontSizeXXL}px;
}

.anchor-link-container {
display: inline;
line-height: 0;
vertical-align: bottom; /* trick to align the anchor with text */
opacity: 0;
transition: opacity ${theme.motionDurationMid} ease-in-out;
}

&:hover .anchor-link-container {
opacity: 1;
}
Comment on lines +86 to +88

This comment was marked as resolved.

Sign in to view


.dashboard--editing .dashboard-grid & {
&:after {
border: 1px dashed transparent;
Expand Down
19 changes: 16 additions & 3 deletions superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,23 @@ const defaultProps = {

const TabTitleContainer = styled.div`
${({ isHighlighted, theme: { sizeUnit, colorPrimaryBg } }) => `
padding: ${sizeUnit}px ${sizeUnit * 8}px ${sizeUnit}px ${sizeUnit * 2}px;
margin: ${-sizeUnit}px ${sizeUnit * -2}px;
display: inline-flex;
position: relative;
align-items: center;
margin: 0 ${sizeUnit * 2}px;
transition: box-shadow 0.2s ease-in-out;
${isHighlighted && `box-shadow: 0 0 ${sizeUnit}px ${colorPrimaryBg};`}
${isHighlighted ? `box-shadow: 0 0 ${sizeUnit}px ${colorPrimaryBg};` : ''}

.anchor-link-container {
position: absolute;
left: 100%;
Comment on lines +90 to +91

This comment was marked as resolved.

Sign in to view

opacity: 0;
transition: opacity 0.2s ease-in-out;
}

&:hover .anchor-link-container {
opacity: 1;
}
`}
`;

Expand Down