Skip to content

Commit 34bea26

Browse files
aeagleaeagle
committed
Updated docs
1 parent 19b412c commit 34bea26

File tree

8 files changed

+178
-3
lines changed

8 files changed

+178
-3
lines changed

‎demo/src/App.scss

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
body {
1+
body, li, p, table, pre {
22
font-size: 18px;
33
}
44

@@ -55,6 +55,45 @@ pre {
5555
}
5656
}
5757

58+
.docs-main-container {
59+
h3 {
60+
font-weight: 400;
61+
font-size: 20px;
62+
color: #193549;
63+
margin-top: 20px;
64+
margin-bottom: 20px;
65+
}
66+
67+
table {
68+
width: 100%;
69+
margin-bottom: 20px;
70+
71+
tr {
72+
td, th {
73+
border-bottom: 1px solid #eee;
74+
padding: 5px 10px
75+
}
76+
77+
th {
78+
strong {
79+
font-weight: 400;
80+
}
81+
}
82+
83+
th:first-child, td:first-child {
84+
width: 25%;
85+
}
86+
}
87+
88+
tbody {
89+
strong {
90+
font-weight: 500;
91+
color: maroon;
92+
}
93+
}
94+
}
95+
}
96+
5897
.mobileDesc, .mobile {
5998
display: none;
6099
}

‎demo/src/docs/Docs.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { SizingInfo } from './SizingInfo';
1313
import { VersionHistory } from './VersionHistory';
1414
import { Intro } from './Intro';
1515
import { Try } from './Try';
16+
import { KnownIssues } from './KnownIssues';
1617

1718
export const Docs = () => {
1819
return (
@@ -35,6 +36,7 @@ export const Docs = () => {
3536
<Menu.Item><a href="#stacked">Stacked</a></Menu.Item>
3637
<Menu.Item><a href="#sizeinfo">Sizing information</a></Menu.Item>
3738
<Menu.Item><a href="#try">Try</a></Menu.Item>
39+
<Menu.Item><a href="#issues">Known issues</a></Menu.Item>
3840
<Menu.Item><a href="#changes">Version history</a></Menu.Item>
3941
</Menu>
4042

@@ -62,6 +64,7 @@ export const Docs = () => {
6264
<Stacked />
6365
<SizingInfo />
6466
<Try />
67+
<KnownIssues />
6568
<VersionHistory />
6669

6770
</Space.Fill>

‎demo/src/docs/Intro.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const Intro = () => {
3131
</p>
3232

3333
<p>
34-
<img src="/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
34+
<img src="https://www.allaneagle.com/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
3535
</p>
3636
</>
3737
)

‎demo/src/docs/KnownIssues.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as React from 'react';
2+
3+
export const KnownIssues = () => {
4+
return (
5+
<>
6+
<h2 id="issues">Known issues / limitations</h2>
7+
8+
<ul>
9+
<li>
10+
Rendering an anchored horizontal space and an anchored vertical space within the same parent space will cause a gap
11+
to appear in the corner where the two anchored spaces meet. You can workaround this by using nested <strong>&lt;Fill /&gt;</strong>
12+
spaces to seperate the horizontally and vertically anchored spaces.
13+
</li>
14+
<li>
15+
There isn't currently any consideration for using spaces in a responsive manner. You can however give spaces class names and
16+
target them with media queries like you would with any other DOM element.
17+
</li>
18+
</ul>
19+
20+
</>
21+
)
22+
}

‎demo/src/docs/Resizable.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,40 @@ export const Resizable = () => {
117117

118118
</Tabs.TabPane>
119119
</Tabs>
120+
121+
<h3>Extra properties</h3>
122+
123+
<table>
124+
<thead>
125+
<tr>
126+
<th>Property</th>
127+
<th>Description</th>
128+
</tr>
129+
</thead>
130+
<tbody>
131+
<tr>
132+
<td><strong>minimumSize</strong></td>
133+
<td>
134+
Optionally sets the minimum size the space can be resized to in pixels.
135+
</td>
136+
</tr>
137+
<tr>
138+
<td><strong>maximumSize</strong></td>
139+
<td>
140+
Optionally sets the mazimum size the space can be resized to in pixels.
141+
</td>
142+
</tr>
143+
<tr>
144+
<td><strong>overlayHandle</strong></td>
145+
<td>
146+
By default, the resize handle is overlayed on top of the spaces content. This might cause issues if a clickable element
147+
sits underneath the resize handle. You can optionally set this to <strong>false</strong> to make the resize handle sit
148+
next to the space content.
149+
</td>
150+
</tr>
151+
</tbody>
152+
</table>
153+
120154
</>
121155
)
122156
}

‎demo/src/docs/Types.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,48 @@ export const Types = () => {
6565
</ul>
6666
</Tabs.TabPane>
6767
</Tabs>
68+
69+
<h3>Properties</h3>
70+
71+
<table>
72+
<thead>
73+
<tr>
74+
<th>Property</th>
75+
<th>Description</th>
76+
</tr>
77+
</thead>
78+
<tbody>
79+
<tr>
80+
<td><strong>as</strong></td>
81+
<td>
82+
By default React Spaces will render a div to the DOM. You can override the element rendered by setting this property
83+
with the element name, i.e. <strong>as="article"</strong> or <strong>as="aside"</strong>.
84+
</td>
85+
</tr>
86+
<tr>
87+
<td><strong>centerContent</strong></td>
88+
<td>
89+
Instead of using the <strong>&lt;Centered /&gt;</strong> or <strong>&lt;CenteredVertically /&gt;</strong> components inside space
90+
you can specify the centering type here. Possible values are <strong>"Vertical"</strong> or <strong>"HorizontalVertical"</strong>.
91+
</td>
92+
</tr>
93+
<tr>
94+
<td><strong>scrollable</strong></td>
95+
<td>
96+
Makes the space scrollable. By default content that overflows the space will be hidden. This will allow the space to add a scroll bar if
97+
the content overflows.
98+
</td>
99+
</tr>
100+
<tr>
101+
<td><strong>trackSize</strong></td>
102+
<td>
103+
Tells the space to report it's size when it changes size to the <strong>&lt;Info /&gt;</strong> component. With this turned off
104+
the space will only report the initial size.
105+
</td>
106+
</tr>
107+
</tbody>
108+
</table>
109+
68110
</>
69111
)
70112
}

‎demo/src/docs/VersionHistory.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,41 @@ export const VersionHistory = () => {
55
<>
66
<h2 id="changes">Version history</h2>
77

8+
<div>
9+
<h3>0.1.10</h3>
10+
<ul>
11+
<li>
12+
Added 'as' property to allow rendered DOM element to be specified (thanks to{" "}
13+
<a href="https://www.reddit.com/user/MahNonAnon/" target="_blank">u/MahNonAnon</a> and{" "}
14+
<a href="https://www.reddit.com/user/trevoreyre/" target="_blank">u/trevoreyre</a> on Reddit
15+
for suggestion of this).
16+
</li>
17+
<li>
18+
Added 'centerContent' property as short-hand for centering space content instead of having
19+
to introduce the extra &lt;Centered /&gt; or &lt;CenteredVertically /&gt; components.
20+
</li>
21+
<li>
22+
Allow resize handle width to be specified and also it's placement within space controlled
23+
with the 'overlayHandle' property.
24+
</li>
25+
<li>
26+
Fixed issue with dynamically added/removed anchored spaces where an anchored space would
27+
see itself as a space taking space.
28+
</li>
29+
</ul>
30+
</div>
31+
<div>
32+
<h3>0.1.9</h3>
33+
<ul>
34+
<li>Added repository field to package.json</li>
35+
</ul>
36+
</div>
37+
<div>
38+
<h3>0.1.8</h3>
39+
<ul>
40+
<li>Removed clear fix from space</li>
41+
</ul>
42+
</div>
843
<div>
944
<h3>0.1.7</h3>
1045
<ul>

‎react-spaces/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-spaces",
3-
"version": "0.1.9",
3+
"version": "0.1.10",
44
"main": "dist/index.js",
55
"repository": "github:aeagle/react-spaces",
66
"author": {

0 commit comments

Comments
 (0)