Skip to content

Commit 8ecf603

Browse files
rishichawdarishichawda
authored
fix(package): Minor improvements on component design and user accessibility
2 parents 00a5f2f + 2d22280 commit 8ecf603

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+20012
-733
lines changed

‎doc/.env.development

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
HOMEPAGE_ROOT_URL_PREFIX='/'

‎doc/.env.production

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
HOMEPAGE_ROOT_URL_PREFIX='/react-lite-ui/'

‎doc/gatsby-browser.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@
77
// You can delete this file if you're not using it
88
exports.onPreRouteUpdate = ({ location }) => {
99
if (window && typeof window.gtag === 'function') {
10-
window.gtag('config', 'UA-41862404-1', { page_path: location.pathname });
10+
if (location.href.indexOf('?') >= 0) {
11+
const component = location.search.substring(1).split('=')[1];
12+
window.gtag('config', 'UA-41862404-1', { page_path: `${location.pathname}/${component}` });
13+
} else {
14+
window.gtag('config', 'UA-41862404-1', { page_path: location.pathname });
15+
}
1116
}
1217
};

‎doc/gatsby-config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
require('dotenv').config({
2+
path: `.env.${process.env.NODE_ENV}`,
3+
});
4+
15
module.exports = {
26
pathPrefix: '/react-lite-ui',
37
siteMetadata: {

‎doc/package-lock.json

Lines changed: 14282 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎doc/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"scripts": {
2424
"build": "gatsby build --prefix-paths",
2525
"develop": "gatsby develop",
26-
"serve": "rm -rf ./cache && rm -rf ./public && gatsby build && gatsby serve",
26+
"serve": "rm -rf ./cache && rm -rf ./public && gatsby build --prefix-paths && gatsby serve",
2727
"format": "prettier --write '**/*.js'",
2828
"test": "echo \"Error: no test specified\" && exit 1"
2929
},

‎doc/src/components/common/componentData/Carousel/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,12 @@ export const componentData = {
3333
type: 'Boolean',
3434
defaultValue: 'true',
3535
description: 'Set boolean for showing / hiding left and right controls.',
36+
},
37+
{
38+
prop: 'pauseOnHover',
39+
type: 'Boolean',
40+
defaultValue: 'true',
41+
description: 'Set boolean to pause the carousel animation on mouse hover.',
3642
}
3743
],
3844
themesData: [

‎doc/src/components/common/componentData/Checkbox/theme.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
}
44

55
:local(.checkbox) {
6-
border-color: #6b76ff;
6+
border-color: #8b104e;
77
.check-item {
8-
border-color: #6b76ff !important;
8+
border-color: #8b104e !important;
99
}
1010
}
1111

1212

1313
:local(.inverted) {
14-
background-color: #0b409c !important;
14+
background-color: #8b104e !important;
1515
.check-item {
16-
border-color: #f18a9b !important;
16+
border-color: #fefefe !important;
1717
}
1818
}

‎doc/src/components/common/componentData/Navbar/index.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -145,10 +145,6 @@ export const componentData = {
145145
146146
render() {
147147
148-
const MenuIcon = () => (
149-
<svg xmlns="http://www.w3.org/2000/svg" height="30px" id="Layer_1" version="1.1" viewBox="0 0 30 30" width="30px"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
150-
);
151-
152148
return (
153149
<div>
154150
<PreviewBlock header="Default Navbar">
@@ -160,7 +156,7 @@ export const componentData = {
160156
<PreviewBlock header="Navbar with leftIcon">
161157
162158
{/* Navbar with icon on left set with leftIcon prop */}
163-
<Navbar leftIcon={<MenuIcon />} title="logo" />
159+
<Navbar leftIcon={match} title="logo" />
164160
165161
</PreviewBlock>
166162
<PreviewBlock header="Flat Navbar (No box shadow)">

‎doc/src/components/common/componentData/Pagination/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,14 @@ export const componentData = {
7878
name: 'dots',
7979
description: 'Class used for displaying dots between ends and current portion.',
8080
},
81+
{
82+
name: 'withNavigation',
83+
description: 'Class used for controlling width of component when navigation buttons are present.',
84+
},
85+
{
86+
name: 'noNavigation',
87+
description: 'Class used for controlling width of component when navigation buttons are not present.',
88+
},
8189
],
8290
basicComponent: `
8391
<Pagination total={10}/>

‎doc/src/components/common/componentData/Snackbar/index.js

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,14 @@ export const componentData = {
5353
name: 'snackbarWrapper',
5454
description: 'Class used for snackbar wrapper element',
5555
},
56+
{
57+
name: 'snackbarContent',
58+
description: 'Class used for snackbar content',
59+
},
60+
{
61+
name: 'close',
62+
description: 'Class used for indefinite snackbar close icon',
63+
},
5664
],
5765
basicComponent: `
5866
class SnackDisplay extends React.Component {
@@ -106,6 +114,7 @@ export const componentData = {
106114
this.openTopSnackbar = this.openTopSnackbar.bind(this);
107115
this.openIndefiniteSnackbar = this.openIndefiniteSnackbar.bind(this);
108116
this.handleSnackClose = this.handleSnackClose.bind(this);
117+
this.handleIndefiniteSnackClose = this.handleIndefiniteSnackClose.bind(this);
109118
}
110119
111120
openBottomSnackbar() {
@@ -134,6 +143,12 @@ export const componentData = {
134143
});
135144
}
136145
146+
handleIndefiniteSnackClose() {
147+
this.setState({
148+
showIndefiniteSnackbar: false,
149+
})
150+
}
151+
137152
render() {
138153
return (
139154
<div>
@@ -176,9 +191,9 @@ export const componentData = {
176191
177192
<Snackbar
178193
active={this.state.showIndefiniteSnackbar}
179-
onClose={this.handleSnackClose}
194+
onClose={this.handleIndefiniteSnackClose}
180195
autoClose={false}>
181-
<span>This is a indefinite snackbar.</span>
196+
<span>This is a indefinite snackbar. Click x to close.</span>
182197
</Snackbar>
183198
184199
</PreviewBlock>

‎doc/src/components/common/componentData/Table/index.js

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,12 @@ export const componentData = {
6464
defaultValue: 'false',
6565
description: 'Prop to be sent, If sorting functionality is required.',
6666
},
67+
{
68+
prop: 'sortByTitle',
69+
type: 'Boolean',
70+
defaultValue: 'false',
71+
description: 'Prop to be sent, If sorting functionality by clicking column header is required.',
72+
},
6773
],
6874
themesData: [
6975
{
@@ -106,6 +112,10 @@ export const componentData = {
106112
name: 'sortArrow',
107113
description: 'Class used for the sorting arrows in table header cells.',
108114
},
115+
{
116+
name: 'sortableTitle',
117+
description: 'Class used for the title when sortByTitle is enabled.',
118+
},
109119
],
110120
basicComponent: `
111121
class Demo extends React.Component {
@@ -163,7 +173,7 @@ export const componentData = {
163173
render() {
164174
const columns = [
165175
{ title: 'Name', key: 'name', colWidth: '150px' },
166-
{ title: 'Default Value', key: 'defaultValue' },
176+
{ title: 'Default Value', key: 'defaultValue', colWidth: '180px' },
167177
{ title: 'Description', key: 'description' },
168178
];
169179
const data = [
@@ -194,12 +204,20 @@ export const componentData = {
194204
},
195205
];
196206
return (
197-
<PreviewElements>
207+
<div>
208+
<PreviewBlock header="Table, Sortable with buttons">
198209
199-
{/* Default table component with sort functionality */}
200-
<Table columns={columns} data={data} sort />
201-
202-
</PreviewElements>
210+
{/* Default table component with sort functionality */}
211+
<Table columns={columns} data={data} sort />
212+
213+
</PreviewBlock>
214+
<PreviewBlock header="Table, sortable by clicking header cell">
215+
216+
{/* Default table component with sort functionality on clicking header */}
217+
<Table columns={columns} data={data} sortByTitle />
218+
219+
</PreviewBlock>
220+
</div>
203221
)
204222
}
205223
}

‎doc/src/components/header.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import theme from './theme.module.scss';
1010
const Header = ({ location }) => (
1111
<Navbar
1212
theme={theme}
13-
className={`navbar${location.pathname !== '/' ? ' navbar-extended' : ' navbar-animated'}`}
13+
className={`navbar${location.pathname !== process.env.HOMEPAGE_ROOT_URL_PREFIX ? ' navbar-extended' : ' navbar-animated'}`}
1414
position="fixed"
1515
flat
1616
title={<Link to="/">React Lite UI</Link>}

‎doc/src/components/styles.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
}
1616

1717
.navbar-extended {
18+
transform: translateY(0) !important;
19+
opacity: 1 !important;
1820
div[class*=innerWrapper] {
1921
max-width: 100vw !important;
2022
}

‎doc/src/images/desktop.svg

Lines changed: 25 additions & 17 deletions
Loading

‎doc/src/images/i-pad-air.svg

Lines changed: 46 additions & 41 deletions
Loading

‎doc/src/images/i-phone-6.svg

Lines changed: 91 additions & 79 deletions
Loading

‎doc/src/pages/documentation.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ class DocumentationPage extends React.Component {
4747
}
4848

4949
onClickComponent = (name, componentData) => {
50+
const { location } = this.props;
5051
navigate(`/documentation?component=${name.toLowerCase()}`);
52+
window.gtag('config', 'UA-41862404-1', { page_path: `${location.pathname}/${name.toLowerCase()}` });
5153
this.setState({
5254
activeComponent: name,
5355
componentData,

‎doc/src/pages/index.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ body {
55
overflow-x: hidden;
66
}
77

8+
.navbar {
9+
transform: translateY(-100%);
10+
opacity: 0;
11+
}
12+
813
.hero-container {
914
display: flex;
1015
width: 100%;

‎doc/src/pages/playground.js

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,29 +52,25 @@ export default class Playground extends Component {
5252
});
5353
}
5454

55-
componentDidUpdate(prevProps) {
56-
const { location } = this.props;
57-
const { currentComponent } = this.state;
58-
if (location.search !== prevProps.location.search) {
59-
navigate(`/playground?component=${currentComponent.toLowerCase()}`);
60-
}
61-
}
62-
6355
// eslint-disable-next-line max-len
6456
getComponentByName = name => componentList.filter(comp => comp.name.toLowerCase() === name.toLowerCase());
6557

6658
changeComponent = ({ label }) => {
59+
const { location } = this.props;
6760
const component = this.getComponentByName(label)[0].componentData;
6861
this.setState({
6962
currentComponent: label,
7063
component,
7164
});
7265
navigate(`/playground?component=${label.toLowerCase()}`);
66+
window.gtag('config', 'UA-41862404-1', { page_path: `${location.pathname}/${label.toLowerCase()}` });
7367
}
7468

7569
navigateBack = () => {
7670
const { prevPage, currentComponent } = this.state;
71+
const { location } = this.props;
7772
navigate(`/${prevPage}?component=${currentComponent.toLowerCase()}`);
73+
window.gtag('config', 'UA-41862404-1', { page_path: `/${location.pathname.replace(new RegExp('/', 'g'), '')}/${currentComponent.toLowerCase()}` });
7874
}
7975

8076
renderPlaygroundNavigation = () => {

‎doc/src/pages/usage.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ class UsagePage extends React.Component {
4747
}
4848

4949
onClickComponent = (name, componentData) => {
50+
const { location } = this.props;
5051
navigate(`/usage?component=${name.toLowerCase()}`);
52+
window.gtag('config', 'UA-41862404-1', { page_path: `${location.pathname}/${name.toLowerCase()}` });
5153
this.setState({
5254
activeComponent: name,
5355
componentData,

‎lib/autocomplete/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ class AutoComplete extends Component {
247247
{item[`${labelKey}`]}
248248
</div>
249249
);
250-
}) : 'No results found!';
250+
}) : <span className={theme['no-results']}>No results found!</span>;
251251
};
252252

253253
render() {

‎lib/autocomplete/tests/edgecases.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ describe('AutoComplete Edge Cases tests', () => {
2929
wrappedComponent.setProps({ data: [] });
3030
const simulatedValue = () => wrappedComponent
3131
.find('#autocomplete-list')
32-
.children().length;
32+
.children('div').length;
3333

3434
wrappedComponent.find('input').simulate('focus');
3535
expect(simulatedValue()).equal(expectedValue);

‎lib/autocomplete/theme.module.scss

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import '../globals/_theme.scss';
22
@import '../globals/animations.module.scss';
33
@import '../globals/common.scss';
4-
54
:local(.autocomplete) {
65
@include customScroll();
76
width: 16em;
@@ -18,43 +17,43 @@
1817
border: none;
1918
border-bottom: 2px solid $input-bottom-border;
2019
outline: none;
21-
&:focus {
22-
border-bottom: 2px solid $secondary-input-active-border;
23-
}
2420
}
2521
}
26-
27-
2822
:local(.autocomplete-list) {
2923
z-index: 1;
3024
box-sizing: border-box;
3125
height: fit-content;
3226
height: -moz-fit-content;
33-
text-align: center;
3427
max-height: 300px;
3528
width: 100%;
3629
overflow-y: auto;
3730
box-shadow: $dropdown-menu-shadow;
3831
border-radius: 2px;
39-
margin-top: 10px;
32+
margin-top: 0.2em;
4033
padding: 2% 0;
4134
position: absolute;
4235
background-color: white;
43-
4436
@include sectionEntry(0.25s);
45-
37+
:local(.no-results) {
38+
display: flex;
39+
padding: 2% 5%;
40+
box-sizing: border-box;
41+
color: rgba(0, 0, 0, 0.5);
42+
font-size: 0.8em;
43+
}
4644
:local(.autocomplete-list-item) {
4745
display: block;
4846
box-sizing: border-box;
47+
text-align: left;
4948
cursor: pointer;
50-
padding: 2% 2%;
49+
padding: 5% 4%;
5150
box-shadow: none;
5251
&:hover {
53-
background-color: $input-active-item;
52+
background-color: rgba(160, 198, 255, 0.77);
5453
}
5554
}
5655
:local(.item-hover) {
57-
background-color: $input-active-item;
56+
background-color: rgba(160, 198, 255, 0.77);
5857
}
5958
}
6059
}
@@ -63,16 +62,16 @@
6362
&::after {
6463
content: '';
6564
display: block;
66-
background-color: $primary-input-active-border !important;
65+
background-color: rgba(160, 198, 255, 0.77) !important;
6766
height: 2px;
6867
@include inputFocus();
6968
animation-duration: 0.3s;
7069
animation-timing-function: linear;
7170
margin-top: -2px;
7271
position: relative;
7372
/* Safari only style */
74-
@media not all and (min-resolution:.001dpcm) {
75-
bottom: 2px;
73+
@media not all and (min-resolution: .001dpcm) {
74+
bottom: 2px;
7675
}
7776
}
7877
}

0 commit comments

Comments
 (0)