Skip to content

Commit

Permalink
fix: Switching Carbon tabs can cause content to scroll off-viewport
Browse files Browse the repository at this point in the history 
Fixes #6014
  • Loading branch information
@starpit
starpit committed Nov 7, 2020
1 parent 1ad0af8 commit 8aac990
Show file tree
Hide file tree
Showing 13 changed files with 123 additions and 138 deletions.
168 changes: 83 additions & 85 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
"pty:nodejs": "npm run pty:rebuild node",
"link": "bash -c \"if [ $OSTYPE != msys ]; then CLIENT=${CLIENT-default}; CLIENT_HOME=$(cd ./node_modules/@kui-shell/client && pwd) ./packages/builder/bin/seticon.js; fi\"",
"update": "ncu -u -x \"@types/yargs-parser,husky,electron,spectron,@types/webdriverio\" && for i in plugins/*; do (cd $i && ncu -u -x electron,spectron,@types/webdriverio,chokidar,d3,elkjs,xtermjs,strip-ansi && rm -rf node_modules); done && rm -rf node_modules/ package-lock.json && npm install",
"postinstall": "npm rebuild node-sass && npm run compile && npx kui-hack-carbon",
"postinstall": "npm rebuild node-sass && npm run compile",
"open": "electron . shell",
"start": "WATCH_ARGS='open' npm run watch"
},
Expand Down
19 changes: 0 additions & 19 deletions packages/builder/bin/hackCarbon.sh
View file

This file was deleted.

1 change: 0 additions & 1 deletion packages/builder/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
"url": "git+https://github.com/IBM/kui.git"
},
"bin": {
"kui-hack-carbon": "./bin/hackCarbon.sh",
"kui-pty-rebuild": "./bin/pty-rebuild.sh",
"kui-build-headless": "./dist/headless/build.sh",
"kui-build-electron": "./dist/electron/build.sh",
Expand Down
2 changes: 1 addition & 1 deletion packages/react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"url": "git+https://github.com/IBM/kui.git"
},
"dependencies": {
"@types/carbon__icons-react": "10.17.1",
"@types/carbon__icons-react": "10.20.0",
"react": "16.13.1",
"react-dom": "16.13.1"
},
Expand Down
10 changes: 5 additions & 5 deletions packages/test/src/api/selectors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export const TERMINAL_SIDECAR_WATCHER_BUTTON = `${TOP_TAB_BUTTONS} [data-mode="s

// sidecar toolbar
export const SIDECAR_TOOLBAR = (N: number) =>
`${SIDECAR(N)} .bx--tab-content[aria-hidden="false"] .sidecar-bottom-stripe-toolbar`
`${SIDECAR(N)} .bx--tab-content:not([hidden]) .sidecar-bottom-stripe-toolbar`
export const SIDECAR_TOOLBAR_TEXT = (N: number, type: string) =>
`${SIDECAR_TOOLBAR(N)} .sidecar-toolbar-text[data-type="${type}"] .sidecar-toolbar-text-content`
export const SIDECAR_TOOLBAR_BUTTON = (N: number, mode: string) =>
Expand All @@ -73,20 +73,20 @@ export const SIDECAR_TOOLBAR_BUTTON = (N: number, mode: string) =>

// sidecar alert
export const SIDECAR_ALERT = (N: number, type: string) =>
`${SIDECAR(N)} .bx--tab-content[aria-hidden="false"] .kui--toolbar-alert[data-type="${type}"]`
`${SIDECAR(N)} .bx--tab-content:not([hidden]) .kui--toolbar-alert[data-type="${type}"]`

// terminal alert
export const TERMINAL_ALERT = (type: string) => `.kui--terminal-alert[data-type="${type}"]`

// sidecar tab content, for visible tab
export const SIDECAR_TAB_CONTENT = (N: number) => `${SIDECAR(N)} .bx--tab-content[aria-hidden="false"] .custom-content`
export const SIDECAR_TAB_CONTENT = (N: number) => `${SIDECAR(N)} .bx--tab-content:not([hidden]) .custom-content`
export const SIDECAR_CUSTOM_CONTENT = (N: number) => `${SIDECAR_TAB_CONTENT(N)} .code-highlighting`

// top nav sidecar
export const SIDECAR_MODE_BUTTONS = (N: number) =>
`${SIDECAR(N)} .sidecar-bottom-stripe-mode-bits .sidecar-bottom-stripe-button` // all mode buttons in the bottom stripe
export const _SIDECAR_MODE_BUTTON = (N: number, mode: string) => `${SIDECAR_MODE_BUTTONS(N)}[data-mode="${mode}"]` // specific mode button in the bottom stripe
export const SIDECAR_MODE_BUTTON = (N: number, mode: string) => `${_SIDECAR_MODE_BUTTON(N, mode)} > a` // clickable part of mode button
export const SIDECAR_MODE_BUTTON = (N: number, mode: string) => `${_SIDECAR_MODE_BUTTON(N, mode)} > button` // clickable part of mode button
export const SIDECAR_MODE_BUTTON_SELECTED = (N: number, mode: string) =>
`${_SIDECAR_MODE_BUTTON(N, mode)}.bx--tabs--scrollable__nav-item--selected`

Expand Down Expand Up @@ -288,7 +288,7 @@ export const COMMENTARY_EDITOR_BUTTON_REVERT =
export const COMMENTARY_EDITOR = '.kui--commentary .kui--source-ref-editor'

export const SIDECAR_LAST = `${OUTPUT_LAST} .kui--sidecar.visible:not(.minimized)`
export const SIDECAR_TOOLBAR_LAST = `${SIDECAR_LAST} .bx--tab-content[aria-hidden="false"] .sidecar-bottom-stripe-toolbar`
export const SIDECAR_TOOLBAR_LAST = `${SIDECAR_LAST} .bx--tab-content:not([hidden]) .sidecar-bottom-stripe-toolbar`
export const SIDECAR_TOOLBAR_TEXT_LAST = (type: string) =>
`${SIDECAR_TOOLBAR_LAST} .sidecar-toolbar-text[data-type="${type}"] .sidecar-toolbar-text-content`
export const SIDECAR_TOOLBAR_BUTTON_LAST = (mode: string) =>
Expand Down
2 changes: 1 addition & 1 deletion packages/test/src/api/util.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export const expectArray = (expected: Array<string>, failFast = true, subset = f
/** get the monaco editor text */
export const getValueFromMonaco = async (
res: AppAndCount,
container = `${Selectors.PROMPT_BLOCK_N(res.count)} .bx--tab-content[aria-hidden="false"]`
container = `${Selectors.PROMPT_BLOCK_N(res.count)} .bx--tab-content:not([hidden])`
) => {
const selector = `${container} .monaco-editor-wrapper`
try {
Expand Down
10 changes: 5 additions & 5 deletions plugins/plugin-client-common/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@
"module": "mdist/index.js",
"types": "mdist/index.d.ts",
"dependencies": {
"@carbon/icons-react": "10.19.0",
"@carbon/icons-react": "10.20.0",
"@patternfly/react-core": "4.50.2",
"carbon-components": "10.22.0",
"carbon-components-react": "7.22.0",
"carbon-components": "10.23.2",
"carbon-components-react": "7.23.2",
"carbon-icons": "7.0.7",
"cli-spinners": "^2.4.0",
"cli-spinners": "2.5.0",
"monaco-editor": "0.21.2",
"monaco-editor-webpack-plugin": "2.0.0",
"react-markdown": "5.0.1",
"react-markdown": "5.0.2",
"tmp": "0.2.1"
},
"kui": {
Expand Down
4 changes: 2 additions & 2 deletions plugins/plugin-client-common/src/components/Views/Sidecar/ToolbarButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,11 @@ export default class ToolbarButton<T extends ResourceWithMetadata = ResourceWith
}
data-mode={button.mode}
>
<a role="presentation" href="#" onClick={this._buttonOnclick}>
<button role="presentation" onClick={this._buttonOnclick}>
<span role="tab" title={button.label || button.mode}>
{button.icon ? button.icon : button.label || button.mode}
</span>
</a>
</button>
</span>
)
}
Expand Down
1 change: 0 additions & 1 deletion plugins/plugin-client-common/src/components/Views/Sidecar/TopNavSidecarV2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,6 @@ export default class TopNavSidecar extends BaseSidecar<MultiModalResponse, Histo
>
{this.current.tabs.map((mode: MultiModalMode, idx: number) => (
<Tab
href="#"
key={mode.mode}
id={mode.mode}
className="sidecar-bottom-stripe-button"
Expand Down
18 changes: 9 additions & 9 deletions plugins/plugin-client-common/web/css/static/sidecar-carbon.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
.bx--tabs--scrollable__nav-item:not(.bx--tabs--scrollable__nav-item--selected):not(.bx--tabs--scrollable__nav-item--disabled):not(.bx--tabs--scrollable__nav-item--selected)
.bx--tabs--scrollable__nav-link:focus,
.bx--tabs--scrollable__nav-item:not(.bx--tabs--scrollable__nav-item--selected):not(.bx--tabs--scrollable__nav-item--disabled):not(.bx--tabs--scrollable__nav-item--selected)
a.bx--tabs--scrollable__nav-link:active {
.bx--tabs--scrollable__nav-link:active {
color: var(--color-text-02);
}
.bx--tabs--scrollable__nav-item--selected:not(.bx--tabs--scrollable__nav-item--disabled)
Expand All @@ -35,14 +35,14 @@ body[kui-theme-style] .kui--sidecar {
.bx--tabs,
.bx--tabs .bx--tabs__nav,
.bx--tabs .bx--tabs__nav li,
.bx--tabs .bx--tabs__nav li a {
.bx--tabs .bx--tabs__nav li button {
width: unset;
min-height: unset;
position: unset;
font-size: unset;
}
a.bx--tabs--scrollable__nav-link,
a.bx--tabs--scrollable__nav-link:active {
.bx--tabs--scrollable__nav-link,
.bx--tabs--scrollable__nav-link:active {
outline: none;
width: unset;
min-width: 7rem;
Expand Down Expand Up @@ -81,7 +81,7 @@ body[kui-theme-style] .kui--sidecar {
}
}

body[kui-theme-style] a.bx--tabs--scrollable__nav-link {
body[kui-theme-style] .bx--tabs--scrollable__nav-link {
color: var(--color-text-01);
border-bottom: 2px solid var(--color-base04);
opacity: 0.875;
Expand All @@ -97,17 +97,17 @@ body[kui-theme-style]

@include somewhat-narrow-window {
body[kui-theme-style] .kui--sidecar {
a.bx--tabs--scrollable__nav-link,
a.bx--tabs--scrollable__nav-link:active {
.bx--tabs--scrollable__nav-link,
.bx--tabs--scrollable__nav-link:active {
min-width: 5rem;
}
}
}

@include medium-width-window {
body[kui-theme-style] .kui--sidecar {
a.bx--tabs--scrollable__nav-link,
a.bx--tabs--scrollable__nav-link:active {
.bx--tabs--scrollable__nav-link,
.bx--tabs--scrollable__nav-link:active {
min-width: 6rem;
}
}
Expand Down
19 changes: 13 additions & 6 deletions plugins/plugin-client-common/web/css/static/sidecar-main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,9 +165,15 @@
line-height: 1.5rem;
padding: 0 0.5rem;

a {
button {
padding: 0;
}

a,
button {
color: inherit;
text-decoration: none;
background-color: transparent;
border: none;
&:hover {
cursor: pointer;
[role="tab"] {
Expand All @@ -178,7 +184,6 @@

[role="tab"] {
display: flex;
font-size: 0.875rem;
}
}
.graphical-icon svg {
Expand Down Expand Up @@ -393,7 +398,8 @@
align-items: center;
margin-right: 3px;

a {
a,
button {
padding: 3px;
display: flex;
color: var(--color-text-01);
Expand All @@ -403,12 +409,13 @@
}
}

a.disabled svg {
button.disabled svg {
fill: var(--color-text-02);
}

&:not(.disabled):hover {
a {
a,
button {
background-color: var(--color-table-border1);
svg {
fill: var(--color-text-01);
Expand Down
5 changes: 3 additions & 2 deletions plugins/plugin-client-common/web/css/static/sidecar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ $focus-color: var(--color-brand-03);
}
}

.kui--sidecar-tabs-container > .bx--tabs--scrollable,
.kui--sidecar-tabs-container .bx--tab-content,
.bx--tab-content {
/* TODO @extend .full-height; */
flex: 1;
Expand All @@ -117,7 +117,8 @@ $focus-color: var(--color-brand-03);
/* carbon override */
padding: 0;

&[aria-hidden='true'] {
&[aria-hidden='true'],
&[hidden] {
display: none;
}
}
Expand Down

0 comments on commit 8aac990

Please sign in to comment.