Skip to content

chore(Drawer): Updated example name to be applicable for dark theme" #9254

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
merged 2 commits into from
Jun 8, 2023
+35 −35
Merged

chore(Drawer): Updated example name to be applicable for dark theme" #9254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a5b1ce3
chore(Drawer): Updated example name to be applicable for dark theme
Jun 7, 2023
cffd274
fix lint versions
Jun 7, 2023
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
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Drawer/examples/Drawer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ section: components
```ts file="DrawerResizableOnInline.tsx"
```

### Panel with light-200 background
### Panel with secondary background

```ts file="DrawerLightGray.tsx"
```ts file="DrawerSecondaryBackground.tsx"
```
64 changes: 32 additions & 32 deletions ...nents/Drawer/examples/DrawerLightGray.tsx → ...er/examples/DrawerSecondaryBackground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import {
DrawerColorVariant
} from '@patternfly/react-core';

export const DrawerLightGray: React.FunctionComponent = () => {
export const DrawerSecondaryBackground: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = React.useState(false);
const [panelGray, setPanelGray] = React.useState(true);
const [contentGray, setContentGray] = React.useState(false);
const [sectionGray, setSectionGray] = React.useState(false);
const [panelSecondary, setPanelSecondary] = React.useState(true);
const [contentSecondary, setContentSecondary] = React.useState(false);
const [sectionSecondary, setSectionSecondary] = React.useState(false);

const drawerRef = React.useRef<HTMLDivElement>();
const drawerRef = React.useRef<HTMLSpanElement>(null);

const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
Expand All @@ -33,20 +33,20 @@ export const DrawerLightGray: React.FunctionComponent = () => {
setIsExpanded(false);
};

const togglePanelGray = (checked: boolean) => {
setPanelGray(checked);
const togglePanelSecondary = (checked: boolean) => {
setPanelSecondary(checked);
};

const toggleSectionGray = (checked: boolean) => {
setSectionGray(checked);
const toggleSectionSecondary = (checked: boolean) => {
setSectionSecondary(checked);
};

const toggleContentGray = (checked: boolean) => {
setContentGray(checked);
const toggleContentSecondary = (checked: boolean) => {
setContentSecondary(checked);
};

const panelContent = (
<DrawerPanelContent colorVariant={panelGray ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
<DrawerPanelContent colorVariant={panelSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
<DrawerHead>
<span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
drawer-panel
Expand All @@ -64,39 +64,39 @@ export const DrawerLightGray: React.FunctionComponent = () => {
return (
<React.Fragment>
<Checkbox
label="Gray panel"
isChecked={panelGray}
onChange={(_event, checked) => togglePanelGray(checked)}
aria-label="Gray panel checkbox"
id="toggle-gray-panel"
name="toggle-gray-panel"
label="Secondary panel"
isChecked={panelSecondary}
onChange={(_event, checked) => togglePanelSecondary(checked)}
aria-label="Secondary panel checkbox"
id="toggle-secondary-panel"
name="toggle-secondary-panel"
/>
<Checkbox
label="Gray content"
isChecked={contentGray}
onChange={(_event, checked) => toggleContentGray(checked)}
aria-label="Gray content checkbox"
id="toggle-gray-content"
name="toggle-gray-content"
label="Secondary content"
isChecked={contentSecondary}
onChange={(_event, checked) => toggleContentSecondary(checked)}
aria-label="Secondary content checkbox"
id="toggle-secondary-content"
name="toggle-secondary-content"
/>
<Checkbox
label="Gray section"
isChecked={sectionGray}
onChange={(_event, checked) => toggleSectionGray(checked)}
aria-label="Gray section checkbox"
id="toggle-gray-section"
name="toggle-gray-section"
label="Secondary section"
isChecked={sectionSecondary}
onChange={(_event, checked) => toggleSectionSecondary(checked)}
aria-label="Secondary section checkbox"
id="toggle-secondary-section"
name="toggle-secondary-section"
/>
<br />
<Button aria-expanded={isExpanded} onClick={onClick}>
Toggle drawer
</Button>
<Drawer isExpanded={isExpanded} onExpand={onExpand}>
<DrawerSection colorVariant={sectionGray ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
<DrawerSection colorVariant={sectionSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
drawer-section
</DrawerSection>
<DrawerContent
colorVariant={contentGray ? DrawerColorVariant.light200 : DrawerColorVariant.default}
colorVariant={contentSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}
panelContent={panelContent}
>
<DrawerContentBody>{drawerContent}</DrawerContentBody>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-integration/demo-app-ts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"serve:demo-app": "node scripts/serve"
},
"dependencies": {
"@patternfly/react-core": "^5.0.0-prerelease.2",
"@patternfly/react-core": "^5.0.0-prerelease.3",
"react": "^18",
"react-dom": "^18",
"react-router": "^5.3.3",
Expand Down