Skip to content

Commit

Permalink
Merge pull request #58 from bindable-ui/input-pattern-fix
Browse files Browse the repository at this point in the history 
c-form-text fixes
  • Loading branch information
@lukelarsen
lukelarsen authored Jun 11, 2020
2 parents 888b735 + b9be383 commit d33a26f
Show file tree
Hide file tree
Showing 16 changed files with 152 additions and 90 deletions.
2 changes: 1 addition & 1 deletion dev-app/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
<c-nav-horizontal-item
position="right"
href="https://github.com/bindable-ui/bindable"
title="v1.2.0"
title="v1.2.1"
></c-nav-horizontal-item>
</c-nav-horizontal>
</l-box>
Expand Down
Binary file removed dev-app/assets/fonts/ProximaNova-Bold-webfont.woff
View file
Binary file not shown.
Binary file removed dev-app/assets/fonts/ProximaNova-Reg-webfont.woff
View file
Binary file not shown.
Binary file removed dev-app/assets/fonts/ProximaNova-RegIt-webfont.woff
View file
Binary file not shown.
Binary file removed dev-app/assets/fonts/ProximaNova-Sbold-webfont.woff
View file
Binary file not shown.
7 changes: 4 additions & 3 deletions dev-app/routes/components/forms/text/properties/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
<c-h3>button</c-h3>
<c-code-sample>
<l-grid min-size="25ch">
<c-form-text label="Button Text Input" placeholder="Name Here" button="info" button-action.call="testFunction()"></c-form-text>
<c-form-text label="Button Text Input" button="info" button-action.call="testFunction()"></c-form-text>
</l-grid>
</c-code-sample>
</l-stack>
Expand All @@ -50,7 +50,7 @@
<c-h3>clearable</c-h3>
<c-code-sample>
<l-grid min-size="25ch">
<c-form-text label="Label Text" placeholder="Placeholder Text" clearable.bind="true"></c-form-text>
<c-form-text label="Label Text" clearable.bind="true"></c-form-text>
<c-form-text label="Button Icon Input" placeholder="Name Here" button="bin" clearable.bind="true"></c-form-text>
<c-form-text label="Button Text Input" placeholder="Name Here" button-text="Button" clearable.bind="true"></c-form-text>
<c-form-text label="Colored Button" placeholder="Placeholder Text" button="lock" button-color="subOne"></c-form-text>
Expand Down Expand Up @@ -121,14 +121,15 @@

<div>
<l-stack spacing="var(--s-3)">
<c-h3>type / pattern</c-h3>
<c-h3>type / pattern / title</c-h3>
<c-code-sample>
<l-grid min-size="25ch">
<c-form-text type="number" label="Number" placeholder="23"></c-form-text>
<c-form-text type="url" label="URL"></c-form-text>
<c-form-text
type="tel"
label="Tel"
title="Example tel format: 888-888-8888"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"
></c-form-text>
<c-form-text type="password" label="Password"></c-form-text>
Expand Down
17 changes: 11 additions & 6 deletions dev-app/routes/components/forms/text/properties/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,12 @@ export class TextInputProperties {
{
description: 'Will not show until state is set to error.',
name: 'error-msg',
value: '',
value: 'string',
},
{
description: 'Will not show until state is set to warning.',
name: 'warning-msg',
value: '',
value: 'string',
},
{
default: 'false',
Expand All @@ -91,7 +91,7 @@ export class TextInputProperties {
{
description: 'Set the label text. If left off no label will be placed.',
name: 'label',
value: '',
value: 'string',
},
{
description: 'Place an icon in front of the label. See icon component for a list of icons.',
Expand All @@ -110,9 +110,9 @@ export class TextInputProperties {
value: 'string',
},
{
description: 'Leave off if not needed.',
description: 'Set the placehodler text. Leave off if not needed.',
name: 'placeholder',
value: '',
value: 'string',
},
{
description: 'Set a state for the text input.',
Expand All @@ -122,7 +122,12 @@ export class TextInputProperties {
{
description: 'Sets the value of the text input',
name: 'text-value',
value: '',
value: 'string',
},
{
description: 'Set the title of the input. Useful for setting the message if your "pattern" prop is not matched by the user.',
name: 'title',
value: 'string',
},
{
default: 'text',
Expand Down
81 changes: 29 additions & 52 deletions dev-app/routes/home/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@
</g>
</svg>
<h1>bindable</h1>
<p>A themeable design system built in Aurelia JS that allows for faster and easier web development.</p>
<p>A themeable design system built in Aurelia JS that allows for faster and easier web development</p>
<c-button
href="/#/introduction/getting-started"
title="Get Started"
Expand Down Expand Up @@ -165,11 +165,7 @@ <h1>bindable</h1>
size="xlarge"
color="var(--c_lightGray)"
>
One downside to using a design system is you end up being forced to use the visual
style set by the design system. That isn’t the case with Bindable. You can theme
Bindable to follow the visual style that you set. This is accomplished through CSS
custom properties (variables). If you are okay using the visual style of Bindable
you just use the default theme.
The primary downside of a design system is that it forces you to use a default visual style. That isn’t the case with Bindable. You can theme Bindable to a customized visual style. This is accomplished through CSS custom properties (or variables). However, you can stick with the default Bindable visual style if that works for you.
</c-p>
<c-button
color="neutral"
Expand Down Expand Up @@ -252,10 +248,7 @@ <h1>bindable</h1>
size="xlarge"
color="var(--c_lightGray)"
>
Having a modular scale in Bindable allows visual harmony in your app. Everything
from font-size to button padding and even spacing between grid items can be set with
increments of the the modular scale. You can set the math of the scale to whatever
you wish and easily break out of it to have a custom size when needed.
Having a modular scale in Bindable allows visual harmony in your app. Everything from font size, button padding, and spacing between grid items can be set with the modular scale increments. You can set the scale to whatever you wish and easily break out of it to have a custom size when needed.
</c-p>
<c-button
color="neutral"
Expand All @@ -281,10 +274,7 @@ <h1>bindable</h1>
size="xlarge"
color="var(--c_lightGray)"
>
Aurelia is a simple, powerful, and unobtrusive javascript framework. We love its
clean syntax and high performance. Many of the components have added features thanks
to Aurelia. Typescript is a superset of javascript that makes working with
javascript a lot better. Bindable uses both of these.
Aurelia is a simple, powerful, and unobtrusive javascript framework. We love its clean syntax and high performance. Many of the components have added features, thanks to Aurelia. Typescript is a superset of javascript that makes working with javascript a lot better. Bindable uses both of these.
</c-p>
</l-stack>
</l-stack>
Expand Down Expand Up @@ -634,18 +624,14 @@ <h1>bindable</h1>
size="xlarge"
color="var(--c_lightGray)"
>
By default everything in CSS is global. This might be a problem. You don’t want any
of your apps CSS to conflict with CSS in Bindable. With CSS Modules this won’t be a
problem. The CSS in Bindable is scoped locally by default. No more CSS conflicts
with the design system.
By default, everything in CSS is global. This might be a problem. You don’t want any of your CSS to conflict with CSS in Bindable. The CSS Modules allow the CSS in Bindable to be scoped locally by default. No more CSS conflicts with the design system.<Paste>
</c-p>
</l-stack>
</l-stack>
</l-sidebar>
</l-stack>
</l-center>
</l-stack>

<l-stack spacing="var(--s5)">
<l-center
max-width="80ch"
Expand Down Expand Up @@ -716,8 +702,7 @@ <h1>bindable</h1>
color="var(--c_subOneLight)"
></l-icon>
<c-h3>Color</c-h3>
<c-p size="large">There are 36 color CSS custom properties you can set to color
you app as you see fit.</c-p>
<c-p size="large">There are 36 color CSS custom properties you can set to color your app as you see fit.</c-p>
</l-stack>
<l-stack spacing="var(--s0)">
<l-icon
Expand Down Expand Up @@ -773,10 +758,7 @@ <h1>bindable</h1>
size="xlarge"
color="var(--c_lightGray)"
>
All spacing between items in Bindable happens with Layouts. This allows for
spacing around and between things to stay concistent and orderly. You can create
complex layouts when using them together. Below are 6 of the 9 layouts included
in Bindable.
All spacing between items in Bindable happens with layouts. This allows for spacing around and between things to stay consistent and orderly. You can create complex layouts when using them together. Below are 6 of the 9 layouts included in Bindable.
</c-p>
</l-center>
</l-stack>
Expand All @@ -794,8 +776,8 @@ <h1>bindable</h1>
color="var(--c_secondaryMain)"
></l-icon>
<c-h3>Box</c-h3>
<c-p size="large">The most simple layout of them all. The box simply puts
your content in a box. You can configure margin, padding, and more.
<c-p size="large">
The box, the most simple layout of them all, simply centers your content in a container. You can configure margin, padding, and more.
</c-p>
</l-stack>
<l-stack spacing="var(--s0)">
Expand All @@ -806,9 +788,9 @@ <h1>bindable</h1>
color="var(--c_secondaryLight)"
></l-icon>
<c-h3>Center</c-h3>
<c-p size="large">The center layout allows centering something within its
parent. Some configuration options are spacing, max-width, and
text-center .</c-p>
<c-p size="large">
The center layout allows centering something within its parent. Some configuration options are spacing, max-width, and text-center.
</c-p>
</l-stack>
<l-stack spacing="var(--s0)">
<l-icon
Expand All @@ -818,32 +800,33 @@ <h1>bindable</h1>
color="var(--c_secondaryLighter)"
></l-icon>
<c-h3>Cluster</c-h3>
<c-p size="large">The cluster will place items in a nice orderly row for
you. You can configure spacing, alignment, wrapping, and other
properties.</c-p>
<c-p size="large">
The cluster places items in a nice orderly row for you. You can configure spacing, alignment, wrapping, and other properties.
</c-p>
</l-stack>
<l-stack spacing="var(--s0)">
<l-icon
icon="cover"
spacing="0"
size="3em"
color="var(--c_secondaryLighter)"
color="var(--c_secondaryMain)"
></l-icon>
<c-h3>Cover</c-h3>
<c-p size="large">The cover will simply cover all the available space that
it can. Some configuration options are padding, scrolling, gutter
spacing.</c-p>
<c-p size="large">
The cover simply covers all the available space that it can. Some configuration options are padding, scrolling, and gutter spacing.
</c-p>
</l-stack>
<l-stack spacing="var(--s0)">
<l-icon
icon="grid"
spacing="0"
size="3em"
color="var(--c_secondaryLighter)"
color="var(--c_secondaryLight)"
></l-icon>
<c-h3>Grid</c-h3>
<c-p size="large">The grid will layout items in a nice grid formation for
you. You can configure min-size, gap, auto-sizing, and others.</c-p>
<c-p size="large">
The grid places items in a nice grid formation for you. You can configure min-size, gap, auto-sizing, and others.
</c-p>
</l-stack>
<l-stack spacing="var(--s0)">
<l-icon
Expand Down Expand Up @@ -900,9 +883,7 @@ <h1>bindable</h1>
size="xlarge"
color="var(--c_lightGray)"
>
Components make up the bulk of Bindable. There are over 40 componetns currently
and more always being added. Each has it’s own set of properites and
configurations. Below is an example of three components.
Components make up the bulk of Bindable. There are over 40 components currently and more always being added. Each has its own set of properties and configurations. Below is an example of three components.
</c-p>
</l-center>
</l-stack>
Expand Down Expand Up @@ -1108,9 +1089,7 @@ <h1>bindable</h1>
size="xlarge"
color="var(--c_lightGray)"
>
Value Converters will take data and convert it to a more human friendly version
that can be displayed in the UI. Bindable is up to 18 converters. Below are a
few examples.
Value converters will take data and convert it into a more human-friendly version that can be displayed in the UI. Bindable has 18 converters currenlty. Below are a few examples.
</c-p>
</l-center>
</l-stack>
Expand Down Expand Up @@ -1191,9 +1170,7 @@ <h1>bindable</h1>
size="xlarge"
color="var(--c_lightGray)"
>
There are two repos hosted on Github for Bindable. The main repo has all that we
have been over and the icons repo hold the icons used in Bindable. You don’t
have to use the Bindable Icons. You can load your own icons if you want.
There are two repos hosted on Github for Bindable. The main repo has everything except for icons. The icons are located in their own repo. You don’t have to use the Bindable Icons. You can load your customized icons if you want.
</c-p>
</l-center>
</l-stack>
Expand Down Expand Up @@ -1232,9 +1209,9 @@ <h1>bindable</h1>
color="var(--c_primaryLighter)"
></l-icon>
<c-h3>Bindable Icons</c-h3>
<c-p size="large">All the icons used in Bindable are contained in this repo.
If you choose to use your own icon set you will need to load them as an
svg sprite. Then Bindable will have access to them.</c-p>
<c-p size="large">
All the icons used in Bindable are contained in this repo. If you choose to use your own icon set, you will need to load them as an SVG sprite. Then Bindable will have access to them.
</c-p>
<c-button
color="neutral"
icon="chevron-right"
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@bindable-ui/bindable",
"description": "An Aurelia component library",
"version": "1.2.0",
"version": "1.2.1",
"repository": {
"type": "git",
"url": "https://github.com/bindable-ui/bindable"
Expand Down
Loading

0 comments on commit d33a26f

Please sign in to comment.