libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

Adjusts toolbar help menu items (#65)

Browse source 
* Adjusts toolbar help menu items

* remove workaround css for dropdown description text

* fixes formatting

* capitalize menu item

* revert change in variable name
This commit is contained in:
Sarah Rambacher 2020-09-08 14:54:21 -04:00 committed by GitHub
parent 8fa720438e
commit bc38db7dbb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 192 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/PageHeader.tsx
View file

@ -61,12 +61,7 @@ const ServerInfoDropdownItem = () => {
const HelpDropdownItem = () => {
const { t } = useTranslation();
const help = t("Help");
return (
<DropdownItem>
<HelpIcon />
{` ${help}`}
</DropdownItem>
);
return <DropdownItem icon={<HelpIcon />}>{`${help}`}</DropdownItem>;
};
const kebabDropdownItems = [

46
src/components/help-enabler/HelpHeader.tsx
View file

@ -3,6 +3,8 @@ import {
Dropdown,
DropdownItem,
DropdownToggle,
Split,
SplitItem,
Switch,
Text,
TextVariants,
@ -10,8 +12,6 @@ import {
import { Trans, useTranslation } from "react-i18next";
import { HelpIcon, ExternalLinkAltIcon } from "@patternfly/react-icons";
import style from "./help-header.module.css";
type HelpProps = {
children: ReactNode;
};
@ -46,30 +46,34 @@ export const HelpHeader = () => {
const dropdownItems = [
<DropdownItem key="link" id="link">
{t("Documentation") + " "}
<ExternalLinkAltIcon />
<Split>
<SplitItem isFilled>{t("Documentation")}</SplitItem>
<SplitItem>
<ExternalLinkAltIcon />
</SplitItem>
</Split>
</DropdownItem>,
<DropdownItem
key="enable"
id="enable"
component="div"
className={style.helpDropdownItem}
description={
<Trans>
This toggle will enable / disable part of the help info in the
console. Includes any help text, links and popovers.
</Trans>
}
>
{t("Enable help mode") + " "}
<Switch
id="enableHelp"
aria-label="Help is enabled"
isChecked={help.enabled}
onChange={() => help.toggleHelp()}
/>
<div>
<Text component={TextVariants.small} className={style.helpText}>
<Trans>
This toggle will enable / disable part of the help info in the
console. Includes any help text, links and popovers.
</Trans>
</Text>
</div>
<Split>
<SplitItem isFilled>{t("Enable help mode")}</SplitItem>
<SplitItem>
<Switch
id="enableHelp"
aria-label="Help is enabled"
isChecked={help.enabled}
onChange={() => help.toggleHelp()}
/>
</SplitItem>
</Split>
</DropdownItem>,
];
return (

280
src/components/help-enabler/__snapshots__/HelpHeader.test.tsx.snap
View file

@ -47,78 +47,104 @@ exports[`<HelpHeader /> enable help 1`] = `
class="pf-c-dropdown__menu-item"
tabindex="-1"
>
Documentation
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
<div
class="pf-l-split"
>
<path
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
transform=""
/>
</svg>
<div
class="pf-l-split__item pf-m-fill"
>
Documentation
</div>
<div
class="pf-l-split__item"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
transform=""
/>
</svg>
</div>
</div>
</a>
</li>
<li
id="enable"
role="menuitem"
>
<div
class="pf-c-dropdown__menu-item"
<a
aria-disabled="false"
class="pf-c-dropdown__menu-item pf-m-description"
tabindex="-1"
>
Enable help mode
<label
class="pf-c-switch"
data-ouia-component-id="6"
data-ouia-component-type="PF4/Switch"
data-ouia-safe="true"
for="enableHelp"
<div
class="pf-c-dropdown__menu-item-main"
>
<input
aria-label="Help is enabled"
checked=""
class="pf-c-switch__input"
id="enableHelp"
type="checkbox"
/>
<span
class="pf-c-switch__toggle"
<div
class="pf-l-split"
>
<div
aria-hidden="true"
class="pf-c-switch__toggle-icon"
class="pf-l-split__item pf-m-fill"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
transform=""
/>
</svg>
Enable help mode
</div>
</span>
</label>
<div>
<small
class=""
data-pf-content="true"
>
This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
</small>
<div
class="pf-l-split__item"
>
<label
class="pf-c-switch"
data-ouia-component-id="6"
data-ouia-component-type="PF4/Switch"
data-ouia-safe="true"
for="enableHelp"
>
<input
aria-label="Help is enabled"
checked=""
class="pf-c-switch__input"
id="enableHelp"
type="checkbox"
/>
<span
class="pf-c-switch__toggle"
>
<div
aria-hidden="true"
class="pf-c-switch__toggle-icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
transform=""
/>
</svg>
</div>
</span>
</label>
</div>
</div>
</div>
</div>
<div
class="pf-c-dropdown__menu-item-description"
>
This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
</div>
</a>
</li>
</ul>
</div>
@ -177,78 +203,104 @@ exports[`<HelpHeader /> open dropdown 1`] = `
class="pf-c-dropdown__menu-item"
tabindex="-1"
>
Documentation
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
<div
class="pf-l-split"
>
<path
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
transform=""
/>
</svg>
<div
class="pf-l-split__item pf-m-fill"
>
Documentation
</div>
<div
class="pf-l-split__item"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
transform=""
/>
</svg>
</div>
</div>
</a>
</li>
<li
id="enable"
role="menuitem"
>
<div
class="pf-c-dropdown__menu-item"
<a
aria-disabled="false"
class="pf-c-dropdown__menu-item pf-m-description"
tabindex="-1"
>
Enable help mode
<label
class="pf-c-switch"
data-ouia-component-id="3"
data-ouia-component-type="PF4/Switch"
data-ouia-safe="true"
for="enableHelp"
<div
class="pf-c-dropdown__menu-item-main"
>
<input
aria-label="Help is enabled"
checked=""
class="pf-c-switch__input"
id="enableHelp"
type="checkbox"
/>
<span
class="pf-c-switch__toggle"
<div
class="pf-l-split"
>
<div
aria-hidden="true"
class="pf-c-switch__toggle-icon"
class="pf-l-split__item pf-m-fill"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
transform=""
/>
</svg>
Enable help mode
</div>
</span>
</label>
<div>
<small
class=""
data-pf-content="true"
>
This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
</small>
<div
class="pf-l-split__item"
>
<label
class="pf-c-switch"
data-ouia-component-id="3"
data-ouia-component-type="PF4/Switch"
data-ouia-safe="true"
for="enableHelp"
>
<input
aria-label="Help is enabled"
checked=""
class="pf-c-switch__input"
id="enableHelp"
type="checkbox"
/>
<span
class="pf-c-switch__toggle"
>
<div
aria-hidden="true"
class="pf-c-switch__toggle-icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
transform=""
/>
</svg>
</div>
</span>
</label>
</div>
</div>
</div>
</div>
<div
class="pf-c-dropdown__menu-item-description"
>
This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
</div>
</a>
</li>
</ul>
</div>

9
src/components/help-enabler/help-header.module.css
View file

@ -1,9 +0,0 @@
.helpDropdownItem {
background-color: transparent;
}
.helpText {
overflow-wrap: break-word;
white-space: normal;
}