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

Jump to bottom

feat(item): add styles for default size in ionic theme #29559

Merged
merged 19 commits into from
Jun 3, 2024
Merged

feat(item): add styles for default size in ionic theme #29559

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
9edff07
Adding ionic theme for item
rugoncalves May 28, 2024
d28e9b9
Adding test page for item in ionic theme
rugoncalves May 28, 2024
dc62783
Merge branch 'next' into ROU-10762
rugoncalves May 28, 2024
b63f085
Removing dead code
rugoncalves May 28, 2024
28cabd3
Code improvements
rugoncalves May 28, 2024
5f6e594
Merge branch 'ROU-10762' of https://github.com/rugoncalves/ionic-fram…
rugoncalves May 28, 2024
393e90b
Fix identation and small issues
rugoncalves May 29, 2024
682c199
Small improvement of inner item elements selector
rugoncalves May 29, 2024
c3af61b
Changes to scss
rugoncalves May 29, 2024
41c9ffb
Update item.ionic.scss
rugoncalves May 29, 2024
efa69a3
Update item.ionic.scss
rugoncalves May 29, 2024
e741477
Lint fix changes
rugoncalves May 29, 2024
12d3f48
Update item.ionic.scss
rugoncalves May 29, 2024
9de1f97
Update api.txt
rugoncalves May 29, 2024
5f27144
Merge branch 'next' into ROU-10762
brandyscarney May 30, 2024
8d313e1
Merge branch 'next' into ROU-10762
brandyscarney May 30, 2024
6daa00c
Merge branch 'next' into ROU-10762
brandyscarney May 31, 2024
6a69aa6
Merge branch 'next' into ROU-10762
rugoncalves Jun 3, 2024
dac40fb
Changing color of the border
rugoncalves Jun 3, 2024
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
90 changes: 90 additions & 0 deletions core/src/components/item/item.ionic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;

// Item
// --------------------------------------------------

:host {
/**
* @prop --background: Background of the item
*
* @prop --border-color: Color of the item border
* @prop --border-style: Style of the item border
* @prop --border-width: Width of the item border
*
* @prop --min-height: Minimum height of the item
*
* @prop --padding-bottom: Bottom padding of the item
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item
* @prop --padding-top: Top padding of the item
*
*/
--background: #{globals.$ionic-color-base-white};
--border-color: #{globals.$ionic-color-neutral-200};
--border-style: #{globals.$ionic-border-style-solid};
--border-width: #{globals.$ionic-border-size-025};
--min-height: #{globals.$ionic-scale-1800};
--padding-top: #{globals.$ionic-space-200};
--padding-end: #{globals.$ionic-space-400};
--padding-bottom: #{globals.$ionic-space-200};
--padding-start: #{globals.$ionic-space-400};

@include globals.font-smoothing;

display: flex;

position: relative;

align-items: center;
justify-content: space-between;

outline: none;

font-family: globals.$ionic-font-family;

text-align: initial;
text-decoration: none;

overflow: hidden;
box-sizing: border-box;
}

// Item: Structure
// --------------------------------------------------
.item-native {
@include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
display: flex;

align-items: center;

width: 100%;

min-height: var(--min-height);

border-bottom-width: var(--border-width);
border-bottom-style: var(--border-style);
border-bottom-color: var(--border-color);

background: var(--background);

overflow: inherit;
brandyscarney marked this conversation as resolved.
Show resolved Hide resolved
box-sizing: border-box;

slot[name="start"]::slotted(*) {
@include globals.margin(inherit, #{globals.$ionic-space-400}, inherit, inherit);
brandyscarney marked this conversation as resolved.
Show resolved Hide resolved
}

slot[name="end"]::slotted(*) {
@include globals.margin(inherit, inherit, inherit, #{globals.$ionic-space-400});
brandyscarney marked this conversation as resolved.
Show resolved Hide resolved
}

.item-inner,
.item-inner .input-wrapper {
display: flex;

flex: 1;

overflow: inherit;
box-sizing: border-box;
}
}
2 changes: 1 addition & 1 deletion core/src/components/item/item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import type { RouterDirection } from '../router/utils/interface';
styleUrls: {
ios: 'item.ios.scss',
md: 'item.md.scss',
ionic: 'item.md.scss',
ionic: 'item.ionic.scss',
},
shadow: true,
})
Expand Down
197 changes: 197 additions & 0 deletions core/src/components/item/test/theme-ionic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
<!DOCTYPE html>
<html lang="en" dir="ltr" theme="ionic">
<head>
<meta charset="UTF-8" />
<title>Item - Basic</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>

<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Item - Basic</ion-title>
</ion-toolbar>
</ion-header>

<ion-content id="content">
<ion-list>
<ion-list-header>
<ion-label>List Header</ion-label>
</ion-list-header>
<ion-item>
<ion-label> Item</ion-label>
</ion-item>
<ion-item-divider>
<ion-label>Item Divider</ion-label>
</ion-item-divider>
<ion-item>
<ion-label> Item</ion-label>
</ion-item>
</ion-list>

<ion-item>
<ion-label> Plain Ol' div with some text</ion-label>
</ion-item>

<ion-item>
<ion-label class="ion-text-nowrap">
Single line text that should have ellipses when it doesn't all fit in the item
</ion-label>
</ion-item>

<ion-item lines="none">
<ion-label>Single line item with no lines</ion-label>
</ion-item>

<ion-item>
<ion-label class="ion-text-wrap">
Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on ion-label
</ion-label>
</ion-item>

<ion-item color="secondary">
<ion-label>
<h1>H1 Title Text</h1>
<p>Paragraph line 1</p>
</ion-label>
</ion-item>

<ion-item>
<ion-label>
<h2>H2 Title Text</h2>
<p>Paragraph line 1</p>
</ion-label>
</ion-item>

<ion-item>
<ion-label>
<ion-text color="primary">
<h3>H3 Title Text</h3>
</ion-text>
<p>Paragraph line 1</p>
<ion-text color="secondary">
<p>Paragraph line 2 secondary</p>
</ion-text>
</ion-label>
</ion-item>

<ion-item>
<ion-label>
<h4>H4 Title Text</h4>
<p>Paragraph line 1</p>
<p>Paragraph line 2</p>
<p>Paragraph line 3</p>
</ion-label>
</ion-item>

<ion-item>
<ion-label>Item using inner ion-label </ion-label>
</ion-item>

<ion-item class="overflow-visible">
<ion-input
label="PIN:"
label-placement="fixed"
type="number"
pattern="[0-9]*"
inputmode="numeric"
formControlName="acct_no"
placeholder="Enter 7 digits"
></ion-input>
<span class="error">Must enter 7 digits</span>
</ion-item>

<ion-item class="overflow-scroll">
<ion-label class="ion-text-wrap"
>Item with overflow scroll. Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Mattis molestie a iaculis at erat pellentesque adipiscing
commodo. Vulputate enim nulla aliquet porttitor. Fermentum dui faucibus in ornare quam viverra orci sagittis
eu. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Cras semper auctor neque vitae. Cursus
eget nunc scelerisque viverra mauris in aliquam. Non sodales neque sodales ut etiam sit amet. Sit amet nulla
facilisi morbi tempus. Accumsan in nisl nisi scelerisque eu. Sed elementum tempus egestas sed sed. Urna nunc
id cursus metus aliquam. Gravida dictum fusce ut placerat orci nulla pellentesque. Id diam maecenas
ultricies mi eget. Elementum nisi quis eleifend quam adipiscing vitae proin.</ion-label
>
</ion-item>

<ion-item detail>
<ion-label>Item with details.</ion-label>
</ion-item>

<ion-item>
<ion-label>
<h1>Heading</h1>
<p>Normal paragraph</p>
</ion-label>
</ion-item>

<ion-item>
<ion-label>
<h1>Heading</h1>
<p>Normal paragraph</p>
</ion-label>
<ion-button slot="end" fill="outline">Outline</ion-button>
</ion-item>

<ion-item>
<ion-label slot="start">Start</ion-label>
<ion-label>
<h1>Heading</h1>
<p>Normal paragraph</p>
</ion-label>
</ion-item>

<ion-item>
<ion-label slot="start">Start</ion-label>
<ion-label>
<h1>Heading</h1>
<p>Normal paragraph</p>
</ion-label>
<ion-button slot="end" fill="outline">Outline</ion-button>
</ion-item>
</ion-content>

<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>

<style>
.overflow-visible {
--border-color: red;

overflow: visible;
}

.overflow-scroll {
margin-top: 10px;
height: 140px;

overflow: scroll;
}

.error {
display: inline-block;
position: absolute;
bottom: -4px;
right: 1em;
padding: 0 6px;
color: red;
background-color: #fff;
font-size: 12px;
height: 12px;
}
</style>
</body>
</html>
Loading