Skip to content

Fix typography in some components #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 1, 2021
Merged

Fix typography in some components #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
76fcb5c
typography was not applied to some components
hobbitronics Jul 1, 2021
5c1e437
update README
hobbitronics Jul 1, 2021
39a6f5b
updated CHANGELOG
hobbitronics Jul 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]

## [2.0.0](https://github.com/silinternational/ui-components/releases/tag/v2.0.0) - 2021-07-02
### Changed
- README - Instructions for running Storybook locally
- global.css is compiled during Storybook dev and deployment build from global.scss and used only for Storybook
Expand All @@ -19,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Added
- $$props.class to Badge, Form, CustomCard, Tour and StaticChip so they can accept global classes
- mdc-typography class to Badge, StaticChip and Card as it was not being applied
- Badge, CustomCard, Drawer, Form, StaticChip and Tour stories to Storybook
- global.scss to generate full range of padding and margin from 1rem to 8rem, height and width from 0 to 100% in increments of 5, z-index from 0 to 10.
- align-item and align-self flex utilites to global.scss
Expand Down
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ Reusable Svelte components for some internal applications
To install to your Svelte project, open your project's root directory in a terminal. Type `npm i @silintl/ui-components` and press enter.

### bundler configuration
Your Svelte project will need the bundler (rollup most likely) configured to compile Sass files. If you are using rollup your plugins in your "rollup.config.js" should look something like this taking special note of postcss and svelte (it may work still without autoPreprocess):
Your Svelte project will need the bundler (rollup most likely) configured to compile Sass files. If you are using rollup your plugins in your "rollup.config.js" should look something like this taking special note of postcss and svelte:
```
import postcss from 'rollup-plugin-postcss';
import autoPreprocess from 'svelte-preprocess';
Expand Down Expand Up @@ -179,7 +179,7 @@ An example of using Drawer:
```

### storybook
Try out our components at https://silinternational.github.io/ui-components/
Try out our components and see examples at https://silinternational.github.io/ui-components/
or run storybook locally. Just copy this repo to your machine and run `npm install` then `npm run dev.` Storybook should open a browser window when it finishes building.

### CSS utility classes
Expand Down
2 changes: 1 addition & 1 deletion components/Badge.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,4 @@
}
</style>

<span class="dib text-align-center white fs-16 br-50 background {$$props.class}" style="--theme-color: {color}" ><slot /></span>
<span class="mdc-typography dib text-align-center white fs-16 br-50 background {$$props.class}" style="--theme-color: {color}" ><slot /></span>
Copy link
Contributor

@briskt briskt Jul 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this make Badge dependent on MDC? If so, should it move to the mdc directory?

Copy link
Contributor Author

@hobbitronics hobbitronics Jul 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mdc-typography is only applied if typography is in the project, so it depends on the consumer. Also, it is not in the mdc catalog so I am still leaning toward not moving it for now.

2 changes: 1 addition & 1 deletion components/StaticChip.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
}
</style>

<div class="chip black flex justify-center align-items-center mb-1 mr-2 fs-14 br-16px {$$props.class}">
<div class="mdc-typography chip black flex justify-center align-items-center mb-1 mr-2 fs-14 br-16px {$$props.class}">
Copy link
Contributor

@briskt briskt Jul 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as Badge

<div class="chip-content flex align-items-center">
<slot></slot>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/mdc/Card/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export let color = 'white'
}
</style>

<div class="mdc-card {$$props.class}" style="background-color: {color}" class:mdc-card--outlined={outlined}>
<div class="mdc-card mdc-typography {$$props.class}" style="background-color: {color}" class:mdc-card--outlined={outlined}>
{#if secondary.length}
<div class="secondary-text uppercase gray">
{secondary}
Expand Down