Skip to content
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

fix(utils/sui-theme): fix color input schema #2824

Merged
merged 5 commits into from
Jan 28, 2025
Merged

fix(utils/sui-theme): fix color input schema #2824

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab12e88
fix(utils/sui-theme): fix color input schema
andresin87 Jan 28, 2025
f64a53a
fix(components/atom/textarea): collor schema
andresin87 Jan 28, 2025
45614b3
docs(components/molecule/inputField): modify demo wrapper
andresin87 Jan 28, 2025
6e49b38
docs(components/molecule/pagination): use the documentation library
andresin87 Jan 28, 2025
1da5946
Merge branch 'master' into text-area-and-input-color-schema
andresin87 Jan 28, 2025
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
4 changes: 2 additions & 2 deletions components/atom/textarea/src/styles/settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ $bgc-atom-textarea--disabled: $c-gray-lightest !default;
$bd-atom-textarea: $bdw-s solid $c-gray-light !default;
$bdrs-atom-textarea: 0 !default;
$bd-atom-textarea--disabled: $bdw-s solid initial !default;
$c-atom-textarea: initial !default;
$c-atom-textarea: var(--c-base-inverse, initial) !default;
$c-atom-textarea--disabled: $c-gray-light !default;
$c-atom-textarea-placeholder: initial !default;
$c-atom-textarea-placeholder: color-mix(in srgb, var(--c-base-inverse, initial) 80%, transparent) !default;
$w-atom-textarea: 100% !default;
$rsz-atom-textarea: auto !default;

Expand Down
4 changes: 2 additions & 2 deletions components/molecule/inputField/demo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const darkBackground = {
const MoleculeInputFieldWithState = withStateValue(MoleculeInputField)

const Demo = () => (
<main>
<div className="sui-StudioPreview">
<H1>Input Field</H1>
<Paragraph>
The InputField component is an Input component wrapped with a Field. It adds some more functionalities to a basic
Expand All @@ -35,7 +35,7 @@ const Demo = () => (
<WithoutLabel />
<br />
<WithContrastLabel />
</main>
</div>
)

export default Demo
Expand Down
69 changes: 34 additions & 35 deletions components/molecule/pagination/demo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
/* eslint-disable react/prop-types, no-unused-vars, no-console */

import MoleculePagination from 'components/molecule/pagination/src/index.js'
import {H1, H2, H3, H4, Paragraph} from '@s-ui/documentation-library'

import LayoutMediaQuery from '@s-ui/react-layout-media-query'

import MoleculePagination from '../src/index.js'
import DynamicMoleculePagination from './DynamicMoleculePagination/index.js'
import {nextButtonIcon, prevButtonIcon} from './Icons/index.js'

Expand Down Expand Up @@ -40,18 +41,16 @@ const Demo = () => {
return (
<div className="sui-StudioPreview">
<div className="sui-StudioPreview-content sui-StudioDemo-preview">
<h1>Pagination</h1>
<h2>Size</h2>
<H1>Pagination</H1>
<H2>Size</H2>
<div className={CLASS_DEMO_SECTION}>
<h3>Small</h3>
<H3>Small</H3>
<MoleculePagination totalPages={25} page={17} size="small" />
<h3>Large</h3>
<H3>Large</H3>
<MoleculePagination totalPages={25} page={17} />
</div>

<h2>
Responsive <code>w/ LayoutMediaQuery</code>
</h2>
<H2>Responsive with LayoutMediaQuery</H2>
<div className={CLASS_DEMO_SECTION_RESPONSIVE}>
<LayoutMediaQuery>
{({S, M}) =>
Expand All @@ -64,43 +63,43 @@ const Demo = () => {
</LayoutMediaQuery>
</div>

<h2>Dynamic</h2>
<H2>Dynamic</H2>
<div className={CLASS_DEMO_SECTION}>
<h3>Extended Version</h3>
<H3>Extended Version</H3>
<DynamicMoleculePagination totalPages={25} page={17} />
<h3>Extended Version (hide Disabled)</h3>
<H3>Extended Version (hide Disabled)</H3>
<DynamicMoleculePagination totalPages={25} page={17} hideDisabled />
<h3>
Extended Version <code>showPages=7</code>
</h3>
<DynamicMoleculePagination totalPages={25} page={17} showPages={7} />
<h3>
<H3>
Extended Version <code>showEdges</code>
</h3>
</H3>
<DynamicMoleculePagination totalPages={25} page={17} showPages={7} showEdges />
</div>
<div className={CLASS_DEMO_SECTION}>
<h3>Compressed Version</h3>
<H3>Compressed Version</H3>
<DynamicMoleculePagination totalPages={25} page={17} compressed />
</div>

<h2>Static</h2>
<h3>Extended Version</h3>
<H2>Static</H2>
<H3>Extended Version</H3>
<div className={CLASS_DEMO_SECTION}>
<h4>Basic</h4>
<p>
<H4>Basic</H4>
<Paragraph>
<code>totalPages=25 page=7</code>
</p>
</Paragraph>
<MoleculePagination totalPages={25} page={7} />
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>Basic with links and linkFactory</h4>
<p>
<Paragraph>
<code>
totalPages=25 page=7 linkFactory urlPattern="
{`/?page=%{pageNumber}`}" renderLinks
</code>
</p>
</Paragraph>
<MoleculePagination
totalPages={25}
page={7}
Expand All @@ -110,42 +109,42 @@ const Demo = () => {
/>
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>w/ Next</h4>
<p>
<H4>w/ Next</H4>
<Paragraph>
<code>totalPages=25 page=7</code>
</p>
</Paragraph>
<MoleculePagination totalPages={25} page={7} {...Icons} {...OnClicks} />
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>w/ Prev & Next</h4>
<H4>w/ Prev & Next</H4>
<p>
<code>totalPages=25 page=17</code>
</p>
<MoleculePagination totalPages={25} page={17} {...Icons} {...OnClicks} />
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>w/ Prev</h4>
<H4>w/ Prev</H4>
<p>
<code>totalPages=25 page=27</code>
</p>
<MoleculePagination totalPages={25} page={27} {...Icons} {...OnClicks} />
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>No Arrows</h4>
<H4>No Arrows</H4>
<p>
<code>totalPages=25 page=7</code>
</p>
<MoleculePagination totalPages={25} page={17} {...OnClicks} />
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>Different Texts</h4>
<H4>Different Texts</H4>
<p>
<code>totalPages=25 page=7</code>
</p>
<MoleculePagination totalPages={25} page={17} {...Icons} {...Texts} {...OnClicks} />
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>Out of range current page</h4>
<H4>Out of range current page</H4>
<p>
<code>totalPages=25 page=-2</code>
</p>
Expand All @@ -159,7 +158,7 @@ const Demo = () => {
<MoleculePagination totalPages={25} page={2} hideDisabled {...Icons} {...Texts} {...OnClicks} />
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>Show edges</h4>
<H4>Show edges</H4>
<p>
<code>totalPages=25 page=15 showEdges</code>
</p>
Expand All @@ -175,14 +174,14 @@ const Demo = () => {
<MoleculePagination totalPages={25} page={1} {...Icons} {...OnClicks} compressed />
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>w/ Prev & Next</h4>
<H4>w/ Prev & Next</H4>
<p>
<code>totalPages=25 page=17</code>
</p>
<MoleculePagination totalPages={25} page={17} {...Icons} {...OnClicks} compressed />
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>Out of range current page</h4>
<H4>Out of range current page</H4>
<p>
<code>totalPages=25 page=27</code>
</p>
Expand All @@ -196,21 +195,21 @@ const Demo = () => {
<MoleculePagination totalPages={25} page={17} {...OnClicks} compressed />
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>Different Texts</h4>
<H4>Different Texts</H4>
<p>
<code>totalPages=25 page=17</code>
</p>
<MoleculePagination totalPages={25} page={17} {...Icons} {...Texts} {...OnClicks} compressed />
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>Hide Disabled</h4>
<H4>Hide Disabled</H4>
<p>
<code>totalPages=25 page=1</code>
</p>
<MoleculePagination totalPages={25} page={1} {...Icons} {...Texts} {...OnClicks} compressed hideDisabled />
</div>
<div className={CLASS_DEMO_SECTION}>
<h4>Change Navigation Buttons</h4>
<H4>Change Navigation Buttons</H4>
<p>
<code>totalPages=25 page=1</code>
</p>
Expand Down
28 changes: 14 additions & 14 deletions package-lock.json
View file
Open in desktop

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

2 changes: 1 addition & 1 deletion utils/sui-theme/src/components/atom/input/_settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ $bd-atom-input: $bdw-s solid $c-primary !default;
$bd-atom-input-focus: $bd-atom-input !default;
$fz-atom-input: $fz-base !default;
$bgc-atom-input: $c-white !default;
$c-atom-input: initial !default;
$c-atom-input: var(--c-base-inverse, initial) !default;
$bd-atom-input-base: $bdw-s solid $c-gray-light !default;

$bd-molecule-autosuggest-focus: $bd-atom-input !default;
Expand Down
Loading