svelte-toolbox / svelte-toolbox Goto Github PK

If the elevation changes the shadow should animate. This could be disabled by setting transitionElevation to false.

There could also be a prop that gives the elevation on hover. This would be useful for making the card elevate on hover.

npm run lint fails with this error:

Error: Failed to load plugin 'svelte3' declared in '.eslintrc': Could not find ESLint Linter in require cache
    at Object.<anonymous> (/workspace/svelte-toolbox/node_modules/eslint-plugin-svelte3/index.js:295:8)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at ConfigArrayFactory._loadPlugin (/workspace/svelte-toolbox/node_modules/eslint/lib/cli-engine/config-array-factory.js:859:49)
    at names.reduce (/workspace/svelte-toolbox/node_modules/eslint/lib/cli-engine/config-array-factory.js:730:33)

hideOverflow="false" does not work.

<script>
	import { Ripple } from 'svelte-toolbox'
</script>

<Ripple hideOverflow="false">
	<p>
		text
	</p>
</Ripple>

Demo here

I am not sure how would be done, but It would be really handy.

An outlined prop would take the shadow off and add an outline.

https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1KZdEJ_rsgaQ79ltEN_Oue2q9RWHXnIqk%2Fcards-elevation-3.png

From svelte-toolbox I want only Ripple component, but there is no possibility to run:

npm install --save-dev svelte-toolbox/ripple

and import the Ripple by default:

import Ripple from 'svelte-toolbox/ripple'

This would be just great to add in future versions!

I think that a checkbox component would be nice.

https://material-components.github.io/material-components-web-catalog/#/component/checkbox

It appears that if UIInput is shown, then removed, then shown again, the MDC styles do not reappear.

Demo here

The problem lies here.

Because of this, target="_self" reloads the page.

This ought to be fixed.

It looks like there is either some extra space on the bottom of the button, or the text somehow jumped too high.

There should be documentation on using Svelte Toolbox components

• in a regular html/css/js site
• with other frameworks such as React, Vue and Angular

The href prop doesn't work: https://github.com/svelte-toolbox/svelte-toolbox/blob/master/src/components/card/README.md#props

An outlined prop on UIButton would be nice.

<UIButton outlined={true}>Learn More</UIButton>

This would create a button like this one.

Some css selectors for Ripple and UIButton like those on Switch and UIInput would be nice!

This is very important.

Ripple could use the href and newTab props.

It appears that the block prop on UIButton is not working.

https://svelte.dev/repl/b256f8934be64692898fd7d67c1ef3fa?version=3.9.2

It will be better to put --css-vars in conditional styles like style={someprop is defined ? "--css-var: ${someprop}" : ""} insted of style="--css-var: {someprop}"`

this way you doesnt need to put !important if you do

.some-component{
  color: #fff:
}

I am not sure exactly what to call this, but I think that "Style Theme" sounds good.

It's just a set of CSS vars in global.css that look like this:

:root {
	--back: #ffffff;
	--back-light: #f6fafd;
	--back-api: #eff8ff;
	--prime: #98603d;
	--second: #434346;
	--flash: #40b3ff;
	--heading: var(--second);
	--text: #444;
	--sidebar-text: rgba(255, 255, 255, 0.75);
	--border-w: 0.3rem;
	--border-r: 0.4rem;
}

Then all the other vars would be set to those variables.

Yeah, more vars such as --prime-t-10 (--prime transparent 10%) would probably be needed, but for the most part I think this would work.

Notice any problems with this idea? Have a comment?

Drop it below.

There should be a prop on Card to adjust the border-radius, with options something like the following:

• rounded (default)
• extra-rounded
• sleek-right
  
• sleek-left

This would be really handy, especially for creating a GitHub icon.

Button?

We need some sort of popper component.

We might be able to wrap popper.js.

Where is the documentation for Card? It should be here.

Why have href if there is no newTab option?

We need some more props for colors in card. Here are some suggestions:

• backgroundColor
• backgroundColorHover
• outlineColor
• outlineColorHover

The last two are obviously waiting on #79.

Here are some ways that Ripple can be improved upon:

• Ripple could have a block prop which should default to false. If true the ripple should have display: block, else inline-block.
• Ripple could have a disabled prop, which, as can be guessed, disables the ripple.
• The default span should be higher, and the default time might even need to be shorter. This is requested, so that the animation does not have such a tired and slow look to it.

This would be a group of svg based loading bars.

The usage would probably look like this:

<LoadingBar
	value={50}
	preset="line"

	backgroundWidth={10}
	backgroundCorners={0}
	foregroundWidth={20}
	foregroundCorners={0}
	backgroundColor="var(--loading-bar-background)"
	foregroundColor="var(--loading-bar-foreground)"

	showLabel={true}
	showUnits={true}
	units="%"
	labelColor="var(--loading-bar-label)"
	unitsColor="var(--loading-bar-units)"

	borderWidth={20}
	borderColor="var(--loading-bar-border)"
/>
<!-- preset values: `line`, `circle`, `fan`, `bubble` -->

As seen in this REPL, the input has an extra margin on the bottom.

As this is just the default Svelte REPL styles, it can be overridden with the following css:

input, button, select, textarea {
    margin: 0;
}

But that is just a pain to do every time.

This prop would directly set the autocomplete value on UIInput.

https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands

This would normally be used inside List, but it could also be used inside card, or anything else really.

Card component like this: https://material-components.github.io/material-components-web-catalog/#/component/card

It would be nice if there was a way to have transitions when an icon changes in IconButton.

This would be key to doing that: https://svelte.dev/examples#transition-events.

We could just add another prop:

<IconButton
    icon={[
        { name: 'favorite' },
        { name: 'favorite_outline' }
    ]}
    transition="scale"
    bind:on
/>

Then, every time on is toggled, the old icon will animate out with a scale transition, and the new one will animate it with a scale.

I am getting this error in Sapper:

ReferenceError: getComputedStyle is not defined

Show error on build.

src/components/components.module.js → dist/index.min.mjs, dist/index.min.js...
[!] Error: Could not resolve '../styles/internal/wrapped-styles.js' from src\components\Style.svelte
Error: Could not resolve '../styles/internal/wrapped-styles.js' from src\components\Style.svelte
    at error (D:\work\svelte3\svelte-toolbox\node_modules\rollup\dist\rollup.js:9365:30)
    at ModuleLoader.handleMissingImports (D:\work\svelte3\svelte-toolbox\node_modules\rollup\dist\rollup.js:16317:17)
    at ModuleLoader.<anonymous> (D:\work\svelte3\svelte-toolbox\node_modules\rollup\dist\rollup.js:16368:26)
    at Generator.next (<anonymous>)
    at fulfilled (D:\work\svelte3\svelte-toolbox\node_modules\rollup\dist\rollup.js:15368:28)

bundle.css is how non-svelte users have access to the styles.

A text prop on button might be nice.

Take a look at this code:

<IconButton
    icon="build",
    text="Build"
/>
<!--
    I am still not sure if 'text' should be a prop,
    or if it should be in IconObject.
-->

Wouldn't it be nice if it were to show a label under the icon on a touchscreen, and a tooltip on the icon on desktop?

I think so.

The page that is used for manual testing should be updated.

This will keep every developer who looks at the page from going into heartache when he has made changes that need visual approval.

Something like the Roberto font, maybe some dummy text, and a hash system such that the url looks like this: localhost:5000/#some-component. This will keep us from having to scroll to just the right place when the page gets really long.

Please see sveltejs/sapper#774.

The usage instructions in the readme need to be updated.

The MDC component just has to go. It would greatly improve the quality of UIInput if the MD component wasn't there.

This sets up a list of items. It would be relatively simple, or very complex if it does something like this.

If it is, when you click away from the label it quietly checks or unchecks the checkbox.

Try clicking in the top right corner.

https://svelte.dev/repl/779db8a42b4f4079a69347fbdb62c142?version=3.7.1

Isn't that annoying?

This should be fixed.

If a user clicks on an element that is supposed to ripple many times quickly, the ripples barely appear.

If the label prop is specified, then Switch would become a block element that gets no shorter than 48px, and just as tall as the label forces it to.

There could also be a left prop of type boolean (default should be false) that puts the switch on the left side of the element.

Example:

Without left:

<Switch on={true} label="Allow notfications"/>

With left:

<Switch on={true} label="Allow notfications" left={true}/>

The location does not change when a UIButton with the href prop is clicked. (See Repl below.)

https://svelte.dev/repl/8ada451156b44c7a80ff4b4a92f2ddfe?version=3.5.3

This would just scroll the page to the top when the button is clicked.

Very useful for SPA applications when the route is changed.