Skip to content

Remove keys and deprecated modules from expansion panel samples #854

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

Open
wants to merge 1 commit into
base: vnext
Choose a base branch
from
Open

Remove keys and deprecated modules from expansion panel samples #854

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
19 changes: 8 additions & 11 deletions samples/layouts/expansion-panel/component-customization/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ExpansionPanelCustomization.css';
import { IgrExpansionPanel, IgrButton, IgrButtonModule, IgrExpansionPanelModule } from 'igniteui-react';
import { IgrExpansionPanel, IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();
IgrExpansionPanelModule.register();

export default class ExpansionPanelComponentCustomization extends React.Component<any, any> {

constructor(props: any) {
Expand All @@ -22,16 +19,16 @@ export default class ExpansionPanelComponentCustomization extends React.Componen
return (
<div className="container sample">
<IgrExpansionPanel onClosed={this.onExpansionPanelClosed} onOpened={this.onExpansionPanelOpened} indicatorPosition="end">
<h1 key="epTitle" slot="title">Golden Retriever</h1>
<h3 key="epSubtitle" slot="subtitle">Medium-large gun dog</h3>
<div key="epIndicator" slot="indicator">{this.state.expansionText}</div>
<img key="epImg" height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt=""></img>
<span key="epSpan">The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
<h1 slot="title">Golden Retriever</h1>
<h3 slot="subtitle">Medium-large gun dog</h3>
<div slot="indicator">{this.state.expansionText}</div>
<img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt=""></img>
<span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span>
<IgrButton key="epBtn" href="https://en.wikipedia.org/wiki/Golden_Retriever" variant="outlined" target="_blank">
<span key="btnSpan">Read more</span>
<IgrButton href="https://en.wikipedia.org/wiki/Golden_Retriever" variant="outlined" target="_blank">
<span>Read more</span>
</IgrButton>
</IgrExpansionPanel>
</div>
Expand Down
12 changes: 5 additions & 7 deletions samples/layouts/expansion-panel/properties-and-events/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ExpansionPanelPropsAndEvents.css';
import { IgrExpansionPanel, IgrExpansionPanelModule } from 'igniteui-react';
import { IgrExpansionPanel } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrExpansionPanelModule.register();

export default class ExpansionPanelPropertiesAndEvents extends React.Component<any, any> {

constructor(props: any) {
Expand All @@ -21,10 +19,10 @@ export default class ExpansionPanelPropertiesAndEvents extends React.Component<a
return (
<div className="container sample center">
<IgrExpansionPanel onClosed={this.onExpansionPanelClosed} onOpened={this.onExpansionPanelOpened}>
<h1 key="epTitle" slot="title">Golden Retriever</h1>
<h3 key="epSubtitle" className={this.state.subtitleClass} slot="subtitle">Medium-large gun dog</h3>
<div key="epIndicator" slot="indicator">{this.state.expansionText}</div>
<span key="epSpan">The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
<h1 slot="title">Golden Retriever</h1>
<h3 className={this.state.subtitleClass} slot="subtitle">Medium-large gun dog</h3>
<div slot="indicator">{this.state.expansionText}</div>
<span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span>
Expand Down
17 changes: 7 additions & 10 deletions samples/layouts/expansion-panel/styling/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ExpansionPanelStyling.css';
import { IgrExpansionPanel, IgrButton, IgrButtonModule, IgrExpansionPanelModule } from 'igniteui-react';
import { IgrExpansionPanel, IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();
IgrExpansionPanelModule.register();

export default class ExpansionPanelStyling extends React.Component<any, any> {

constructor(props: any) {
Expand All @@ -18,15 +15,15 @@ export default class ExpansionPanelStyling extends React.Component<any, any> {
return (
<div className="container sample">
<IgrExpansionPanel indicatorPosition="end">
<h1 key="epTitle" slot="title">Golden Retriever</h1>
<h3 key="epSubtitle" slot="subtitle">Medium-large gun dog</h3>
<img key="epImg" height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt=""></img>
<span key="epSpan">The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
<h1 slot="title">Golden Retriever</h1>
<h3 slot="subtitle">Medium-large gun dog</h3>
<img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt=""></img>
<span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span>
<IgrButton key="epBtn" href="https://en.wikipedia.org/wiki/Golden_Retriever" variant="contained" target="_blank">
<span key="btnCaption">Read more</span>
<IgrButton href="https://en.wikipedia.org/wiki/Golden_Retriever" variant="contained" target="_blank">
<span>Read more</span>
</IgrButton>
</IgrExpansionPanel>
</div>
Expand Down
10 changes: 4 additions & 6 deletions samples/layouts/expansion-panel/usage/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ExpansionPanelUsage.css';
import { IgrExpansionPanel, IgrExpansionPanelModule } from 'igniteui-react';
import { IgrExpansionPanel } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrExpansionPanelModule.register();

export default class ExpansionPanelUsage extends React.Component<any, any> {

constructor(props: any) {
Expand All @@ -17,9 +15,9 @@ export default class ExpansionPanelUsage extends React.Component<any, any> {
return (
<div className="container sample">
<IgrExpansionPanel>
<h1 key="epTitle" slot="title">Golden Retriever</h1>
<h3 key="epSubtitle" slot="subtitle">Medium-large gun dog</h3>
<span key="epSpan">The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
<h1 slot="title">Golden Retriever</h1>
<h3 slot="subtitle">Medium-large gun dog</h3>
<span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span>
Expand Down