This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 833
Device manager: generic settings subsection component (PSG-636) #9147
Merged
Merged
Changes from all commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
519804c
add feature_new_device_manager labs flag
ee85051
add generic settings tab container
3f77c9e
settingstab section styles
67d45d7
add session manager tab to user settings
fee302d
add sessions tab case to UserSettingDialog test
c24f403
fussy import ordering
3dee437
remove posthog tracking
05edc11
Merge branch 'develop' into psg-636/device-manager-labs-flag
bd37259
i18n
de282ac
Merge branch 'develop' into psg-636/device-manager-labs-flag
04ec71c
Merge branch 'develop' into psg-636/device-manager-labs-flag
6410c89
add generic settings subsection component
9437c20
Merge branch 'develop' into psg-636/device-man-sections
3042530
Merge branch 'develop' into psg-636/device-man-sections
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
res/css/components/views/settings/shared/_SettingsSubsection.pcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
/* | ||
Copyright 2022 The Matrix.org Foundation C.I.C. | ||
|
||
Licensed under the Apache License, Version 2.0 (the "License"); | ||
you may not use this file except in compliance with the License. | ||
You may obtain a copy of the License at | ||
|
||
http://www.apache.org/licenses/LICENSE-2.0 | ||
|
||
Unless required by applicable law or agreed to in writing, software | ||
distributed under the License is distributed on an "AS IS" BASIS, | ||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
See the License for the specific language governing permissions and | ||
limitations under the License. | ||
*/ | ||
|
||
.mx_SettingsSubsection { | ||
width: 100%; | ||
box-sizing: border-box; | ||
} | ||
|
||
.mx_SettingsSubsection_heading { | ||
padding-bottom: $spacing-8; | ||
} | ||
|
||
.mx_SettingsSubsection_description { | ||
width: 100%; | ||
box-sizing: inherit; | ||
line-height: $font-24px; | ||
margin-bottom: $spacing-32; | ||
color: $secondary-content; | ||
} | ||
|
||
.mx_SettingsSubsection_content { | ||
width: 100%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
src/components/views/settings/shared/SettingsSubsection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
/* | ||
Copyright 2022 The Matrix.org Foundation C.I.C. | ||
|
||
Licensed under the Apache License, Version 2.0 (the "License"); | ||
you may not use this file except in compliance with the License. | ||
You may obtain a copy of the License at | ||
|
||
http://www.apache.org/licenses/LICENSE-2.0 | ||
|
||
Unless required by applicable law or agreed to in writing, software | ||
distributed under the License is distributed on an "AS IS" BASIS, | ||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
See the License for the specific language governing permissions and | ||
limitations under the License. | ||
*/ | ||
|
||
import React from "react"; | ||
|
||
import Heading from "../../typography/Heading"; | ||
|
||
export interface SettingsSubsectionProps { | ||
heading: string; | ||
description?: string | React.ReactNode; | ||
children?: React.ReactNode; | ||
} | ||
|
||
const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children }) => ( | ||
<div className="mx_SettingsSubsection"> | ||
<Heading className="mx_SettingsSubsection_heading" size='h3'>{ heading }</Heading> | ||
{ !!description && <div className="mx_SettingsSubsection_description">{ description }</div> } | ||
<div className="mx_SettingsSubsection_content"> | ||
{ children } | ||
</div> | ||
</div> | ||
); | ||
|
||
export default SettingsSubsection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
test/components/views/settings/shared/SettingsSubsection-test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
/* | ||
Copyright 2022 The Matrix.org Foundation C.I.C. | ||
|
||
Licensed under the Apache License, Version 2.0 (the "License"); | ||
you may not use this file except in compliance with the License. | ||
You may obtain a copy of the License at | ||
|
||
http://www.apache.org/licenses/LICENSE-2.0 | ||
|
||
Unless required by applicable law or agreed to in writing, software | ||
distributed under the License is distributed on an "AS IS" BASIS, | ||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
See the License for the specific language governing permissions and | ||
limitations under the License. | ||
*/ | ||
|
||
import React from 'react'; | ||
import { render } from '@testing-library/react'; | ||
|
||
import SettingsSubsection from '../../../../../src/components/views/settings/shared/SettingsSubsection'; | ||
|
||
describe('<SettingsSubsection />', () => { | ||
const defaultProps = { | ||
heading: 'Test', | ||
children: <div>test settings content</div>, | ||
}; | ||
const getComponent = (props = {}): React.ReactElement => | ||
(<SettingsSubsection {...defaultProps} {...props} />); | ||
|
||
it('renders without description', () => { | ||
const { container } = render(getComponent()); | ||
expect(container).toMatchSnapshot(); | ||
}); | ||
|
||
it('renders with plain text description', () => { | ||
const { container } = render(getComponent({ description: 'This describes the subsection' })); | ||
expect(container).toMatchSnapshot(); | ||
}); | ||
|
||
it('renders with react element description', () => { | ||
const description = <p>This describes the section <a href='/#'>link</a></p>; | ||
const { container } = render(getComponent({ description })); | ||
expect(container).toMatchSnapshot(); | ||
}); | ||
}); |
81 changes: 81 additions & 0 deletions
81
test/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`<SettingsSubsection /> renders with plain text description 1`] = ` | ||
<div> | ||
<div | ||
class="mx_SettingsSubsection" | ||
> | ||
<h3 | ||
class="mx_Heading_h3 mx_SettingsSubsection_heading" | ||
> | ||
Test | ||
</h3> | ||
<div | ||
class="mx_SettingsSubsection_description" | ||
> | ||
This describes the subsection | ||
</div> | ||
<div | ||
class="mx_SettingsSubsection_content" | ||
> | ||
<div> | ||
test settings content | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
`; | ||
|
||
exports[`<SettingsSubsection /> renders with react element description 1`] = ` | ||
<div> | ||
<div | ||
class="mx_SettingsSubsection" | ||
> | ||
<h3 | ||
class="mx_Heading_h3 mx_SettingsSubsection_heading" | ||
> | ||
Test | ||
</h3> | ||
<div | ||
class="mx_SettingsSubsection_description" | ||
> | ||
<p> | ||
This describes the section | ||
<a | ||
href="/#" | ||
> | ||
link | ||
</a> | ||
</p> | ||
</div> | ||
<div | ||
class="mx_SettingsSubsection_content" | ||
> | ||
<div> | ||
test settings content | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
`; | ||
|
||
exports[`<SettingsSubsection /> renders without description 1`] = ` | ||
<div> | ||
<div | ||
class="mx_SettingsSubsection" | ||
> | ||
<h3 | ||
class="mx_Heading_h3 mx_SettingsSubsection_heading" | ||
> | ||
Test | ||
</h3> | ||
<div | ||
class="mx_SettingsSubsection_content" | ||
> | ||
<div> | ||
test settings content | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
`; |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
or some sort of way to know who to track down if for some reason the TODO sits there for decades :)
alternative would be an issue link: "TODO: Implement as part of [link]"
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 one is already done in my next open PR #9151, but will do for future