Skip to content

Commit

Permalink
chore: Upgrade catalog to MDC Web v4.0 (#279)
Browse files Browse the repository at this point in the history
  • Loading branch information
@abhiomkar
abhiomkar authored Nov 13, 2019
1 parent aeb1e65 commit cf22146
Show file tree
Hide file tree
Showing 21 changed files with 756 additions and 1,929 deletions.
8 changes: 0 additions & 8 deletions config/webpack.styles.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,16 +89,8 @@ const webpackLoaders = [
// except for the assets used for the theme.
{
test: /\.scss$/,
exclude: /ThemeCatalog\.scss$/i,
loader: mainExtractTextPlugin.extract(scssLoaders),
},
// This loader is used to compile just the theme scss assets into a
// separate css file. This ensures that the theme styles don't conflict
// with the main app styles.
{
test: /ThemeCatalog\.scss$/i,
use: themeExtractTextPlugin.extract(scssLoaders),
}
];

const webpackPlugins = [
Expand Down
1,229 changes: 638 additions & 591 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 @@ -41,7 +41,7 @@
"html-webpack-exclude-assets-plugin": "0.0.7",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"material-components-web": "^3.2.0",
"material-components-web": "^4.0.0",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
Expand Down
8 changes: 8 additions & 0 deletions src/ButtonCatalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,19 @@ export class ButtonHeroLegacy extends Component {
return (
<div className='hero-button-container'>
<button className='hero-button mdc-button' ref={this.initRipple} onClick={this.clickEvent}>
<span className='mdc-button__ripple'></span>
<span className='mdc-button__label'>Text</span>
</button>
<button className='hero-button mdc-button mdc-button--raised' ref={this.initRipple} onClick={this.clickEvent}>
<span className='mdc-button__ripple'></span>
<span className='mdc-button__label'>Raised</span>
</button>
<button className='hero-button mdc-button mdc-button--unelevated' ref={this.initRipple} onClick={this.clickEvent}>
<span className='mdc-button__ripple'></span>
<span className='mdc-button__label'>Unelevated</span>
</button>
<button className='hero-button mdc-button mdc-button--outlined' ref={this.initRipple} onClick={this.clickEvent}>
<span className='mdc-button__ripple'></span>
<span className='mdc-button__label'>Outlined</span>
</button>
</div>
Expand Down Expand Up @@ -82,6 +86,7 @@ class ButtonHero extends Component {

return (
<button className={className} ref={this.initRipple}>
<span className='mdc-button__ripple'></span>
{this.props.config.options.label.value}
</button>
);
Expand All @@ -104,12 +109,15 @@ class ButtonDemos extends Component {
<div>
<h3 className='mdc-typography--subtitle1'>{title}</h3>
<button className={`demo-button mdc-button ${variantClass}`} ref={this.initRipple}>
<span className='mdc-button__ripple'></span>
<span className='mdc-button__label'>Default</span>
</button>
<button className={`demo-button mdc-button mdc-button--dense ${variantClass}`} ref={this.initRipple}>
<span className='mdc-button__ripple'></span>
<span className='mdc-button__label'>Dense</span>
</button>
<button className={`demo-button mdc-button ${variantClass}`} ref={this.initRipple}>
<span className='mdc-button__ripple'></span>
<i className='material-icons mdc-button__icon'>favorite</i>
<span className='mdc-button__label'>Icon</span>
</button>
Expand Down
1 change: 1 addition & 0 deletions src/CardCatalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ class CardActionButton extends Component {
<button
ref={(surfaceEl) => this.ripple = surfaceEl && new MDCRipple(surfaceEl)}
className='mdc-button mdc-card__action mdc-card__action--button'>
<span className='mdc-button__ripple'></span>
{this.props.text}
</button>
);
Expand Down
12 changes: 10 additions & 2 deletions src/CheckboxCatalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export class CheckboxHero extends Component {
render() {
return (
<div>
<div className='mdc-checkbox demo-checkbox' ref={this.initCheckbox}>
<div className='mdc-checkbox mdc-checkbox--selected demo-checkbox' ref={this.initCheckbox}>
<input type='checkbox'
defaultChecked={true}
className='mdc-checkbox__native-control'/>
Expand All @@ -46,6 +46,7 @@ export class CheckboxHero extends Component {
</svg>
<div className='mdc-checkbox__mixedmark'></div>
</div>
<div className='mdc-checkbox__ripple'></div>
</div>

<div className='mdc-checkbox demo-checkbox' ref={this.initCheckbox}>
Expand All @@ -61,6 +62,7 @@ export class CheckboxHero extends Component {
</svg>
<div className='mdc-checkbox__mixedmark'></div>
</div>
<div className='mdc-checkbox__ripple'></div>
</div>
</div>
);
Expand All @@ -79,10 +81,15 @@ class CheckboxDemos extends Component {
}

renderCheckboxVariant(title, inputRefCallback) {
let classes = '';
if (title !== 'Unchecked') {
classes = 'mdc-checkbox--selected';
}

return (
<div>
<h3 className='mdc-typography--subtitle1'>{title}</h3>
<div className='mdc-checkbox demo-checkbox' ref={this.initCheckbox}>
<div className={`mdc-checkbox ${classes} demo-checkbox`} ref={this.initCheckbox}>
<input type='checkbox'
className='mdc-checkbox__native-control'
ref={inputRefCallback}/>
Expand All @@ -96,6 +103,7 @@ class CheckboxDemos extends Component {
</svg>
<div className='mdc-checkbox__mixedmark'></div>
</div>
<div className='mdc-checkbox__ripple'></div>
</div>
</div>
);
Expand Down
18 changes: 11 additions & 7 deletions src/ChipsCatalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,12 @@ export class ChipsHero extends Component {

renderChip(text) {
return (
<div className='mdc-chip' tabIndex='0'>
<div className='mdc-chip' role='row'>
<div class='mdc-chip__ripple'></div>
<div className='mdc-chip__text'>{text}</div>
<span role='gridcell'>
<span role='button' tabIndex='0' class='mdc-chip__text'>Chip Two</span>
</span>
</div>
);
}
Expand All @@ -43,7 +47,7 @@ export class ChipsHero extends Component {
}
}
return (
<div className='mdc-chip-set' ref={initChipSet}>
<div className='mdc-chip-set' role='grid' ref={initChipSet}>
{this.renderChip('Chip One')}
{this.renderChip('Chip Two')}
{this.renderChip('Chip Three')}
Expand All @@ -65,7 +69,7 @@ class ChipsDemos extends Component {

renderIcon(name, classes) {
return (
<i className={`material-icons mdc-chip__icon ${classes}`}>
<i className={`material-icons mdc-chip__icon mdc-chip__icon--leading ${classes}`}>
{name}
</i>
);
Expand All @@ -84,20 +88,20 @@ class ChipsDemos extends Component {
// For choice and action chips
renderChip(text, classes, leadingIcon) {
return (
<div className={`mdc-chip ${classes}`} tabIndex='0'>
<div className={`mdc-chip ${classes}`} role='row'>
{leadingIcon ? leadingIcon : ''}
<div className='mdc-chip__text'>{text}</div>
<span role='button' tabIndex='0' class='mdc-chip__text'>{text}</span>
</div>
);
}

// For filter chips
renderFilterChip(text, classes, leadingIcon) {
return (
<div className={`mdc-chip ${classes}`} tabIndex='0'>
<div className={`mdc-chip ${classes}`} role='row'>
{leadingIcon}
{this.renderFilterCheckmark()}
<div className='mdc-chip__text'>{text}</div>
<span role='button' tabIndex='0' class='mdc-chip__text'>{text}</span>
</div>
);
}
Expand Down
3 changes: 0 additions & 3 deletions src/ComponentSidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,9 +187,6 @@ class ComponentSidebar extends Component {
}, {
content: 'Text Field',
url: '/text-field',
}, {
content: 'Theme',
url: '/theme',
}, {
content: 'Top App Bar',
url: '/top-app-bar',
Expand Down
1 change: 1 addition & 0 deletions src/DataTableCatalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ const Checkbox = (props) => {
</svg>
<div className='mdc-checkbox__mixedmark'></div>
</div>
<div className='mdc-checkbox__ripple'></div>
</div>
);
};
Expand Down
1 change: 1 addition & 0 deletions src/FabCatalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ class Fab extends Component {
if(fabEl) { this.ripple = new MDCRipple(fabEl); }
}}
>
<div className='mdc-fab__ripple'></div>
{children}
</button>
);
Expand Down
2 changes: 2 additions & 0 deletions src/ListCatalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ class ListItem extends Component {
</svg>
<div className='mdc-checkbox__mixedmark'></div>
</div>
<div className='mdc-checkbox__ripple'></div>
</div>
)
}
Expand All @@ -114,6 +115,7 @@ class ListItem extends Component {
<div className='mdc-radio__outer-circle'/>
<div className='mdc-radio__inner-circle'/>
</div>
<div className='mdc-radio__ripple '></div>
</div>
)
}
Expand Down
1 change: 1 addition & 0 deletions src/RadioButtonCatalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ export class Radio extends Component {
<div className='mdc-radio__outer-circle'/>
<div className='mdc-radio__inner-circle'/>
</div>
<div className='mdc-radio__ripple'></div>
</div>
)
}
Expand Down
4 changes: 0 additions & 4 deletions src/Routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import SnackbarCatalog from './SnackbarCatalog';
import SwitchCatalog from './SwitchCatalog';
import TabsCatalog from './TabsCatalog';
import TextFieldCatalog from './TextFieldCatalog';
import ThemeCatalog from './ThemeCatalog';
import TopAppBarCatalog from './TopAppBarCatalog';
import TypographyCatalog from './TypographyCatalog';

Expand Down Expand Up @@ -97,9 +96,6 @@ const routesList = [{
}, {
urlPath: 'text-field',
Component: TextFieldCatalog,
}, {
urlPath: 'theme',
Component: ThemeCatalog,
}, {
urlPath: 'top-app-bar',
Component: TopAppBarCatalog,
Expand Down
Loading

0 comments on commit cf22146

Please sign in to comment.