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

Match native styles - card titles & selected items list #199

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Match native styles - card titles & selected items list #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9a047dc
Cards titles are headingSm in native discount form
justinhenricks Mar 29, 2024
2308bfc
remove box padding
justinhenricks Mar 29, 2024
73c46c9
Match selected items list styles
justinhenricks Mar 29, 2024
7157874
Revert "remove box padding"
justinhenricks Mar 29, 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
2 changes: 1 addition & 1 deletion src/components/ActiveDatesCard/ActiveDatesCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export function ActiveDatesCard({
<Box paddingBlockEnd="400">
<Card padding="400">
<FormLayout>
<Text variant="headingMd" as="h2">
<Text variant="headingSm" as="h2">
{i18n.translate('DiscountAppComponents.ActiveDatesCard.title')}
</Text>
<FormLayout.Group>
Expand Down
2 changes: 1 addition & 1 deletion src/components/AppliesTo/AppliesTo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function AppliesTo({
{productSelector || collectionSelector ? (
<Box paddingBlockEnd="400">
<BlockStack gap="400">
<Text variant="headingMd" as="h2">
<Text variant="headingSm" as="h2">
{i18n.translate('DiscountAppComponents.AppliesToCard.title')}
</Text>
<ChoiceList
Expand Down
2 changes: 1 addition & 1 deletion src/components/CombinationCard/CombinationCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export function CombinationCard({
<Box paddingBlockEnd="400">
<Card padding="400">
<BlockStack gap="400">
<Text variant="headingMd" as="h2">
<Text variant="headingSm" as="h2">
{i18n.translate('title', I18N_SCOPE)}
</Text>
{shouldShowBanner && (
Expand Down
4 changes: 2 additions & 2 deletions src/components/CountriesAndRatesCard/CountriesAndRatesCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export function CountriesAndRatesCard({
<Box paddingBlockEnd="400">
<Card padding="400">
<BlockStack gap="400">
<Text variant="headingMd" as="h2">
<Text variant="headingSm" as="h2">
{i18n.translate(
'DiscountAppComponents.CountriesAndRatesCard.title',
)}
Expand Down Expand Up @@ -120,7 +120,7 @@ export function CountriesAndRatesCard({
/>
</>
)}
<Text variant="headingMd" as="h2">
<Text variant="headingSm" as="h2">
{i18n.translate(
'DiscountAppComponents.CountriesAndRatesCard.excludeShippingRatesSection.title',
)}
Expand Down
3 changes: 1 addition & 2 deletions src/components/CustomerEligibilityCard/CustomerEligibilityCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,11 @@ export function CustomerEligibilityCard({
selectedCustomerSegments,
}: CustomerEligibilityCardProps) {
const [i18n] = useI18n();

return (
<Box paddingBlockEnd="400">
<Card padding="400">
<BlockStack gap="400">
<Text variant="headingMd" as="h2">
<Text variant="headingSm" as="h2">
{i18n.translate('title', I18N_SCOPE)}
</Text>
<ChoiceList
Expand Down
2 changes: 1 addition & 1 deletion src/components/DiscountApplicationStrategyCard/DiscountApplicationStrategyCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export function DiscountApplicationStrategyCard({
<Box paddingBlockEnd="400">
<Card padding="400">
<BlockStack gap="400">
<Text variant="headingMd" as="h2">
<Text variant="headingSm" as="h2">
{i18n.translate('title', I18N_SCOPE)}
</Text>
<ChoiceList
Expand Down
2 changes: 1 addition & 1 deletion src/components/MinimumRequirementsCard/MinimumRequirementsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ export function MinimumRequirementsCard({
<Box paddingBlockEnd="400">
<Card padding="400">
<BlockStack gap="400">
<Text variant="headingMd" as="h2">
<Text variant="headingSm" as="h2">
{i18n.translate(
'DiscountAppComponents.MinimumRequirementsCard.title',
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/PurchaseTypeCard/PurchaseTypeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export function PurchaseTypeCard({purchaseType}: PurchaseTypeCardProps) {
<Box paddingBlockEnd="400">
<Card padding="400">
<BlockStack gap="400">
<Text variant="headingMd" as="h2">
<Text variant="headingSm" as="h2">
{i18n.translate('DiscountAppComponents.PurchaseTypeList.title')}
</Text>
<ChoiceList
Expand Down
4 changes: 3 additions & 1 deletion src/components/SelectedItemsList/SelectedItemsList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
.SelectedItemsList {
margin: var(--p-space-400) 0 0;
padding: 0;
list-style: none;
margin: 0;
border: var(--p-border-width-025) solid var(--p-color-border-secondary);
border-radius: var(--p-border-radius-200);
}
7 changes: 3 additions & 4 deletions src/components/SelectedItemsList/components/Item/Item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
$close-btn-size: 20px;

.Item {
padding: var(--p-space-400) 0;
padding: var(--p-space-300);
display: flex;
align-items: center;
justify-content: space-between;

&:not(:last-child) {
border-bottom: var(--p-border-width-025) solid
var(--p-color-border-secondary);
box-shadow: 0 var(--p-border-width-025) 0 var(--p-color-border-secondary);
margin-bottom: var(--p-border-width-025);
}
}

.Content {
flex: 1 1 auto;
padding: var(--p-space-100);
max-width: calc(100% - $close-btn-size);
overflow: hidden;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/UsageLimitsCard/UsageLimitsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export function UsageLimitsCard(props: UsageLimitsCardProps) {
<Box paddingBlockEnd="400">
<Card padding="400">
<BlockStack gap="400">
<Text variant="headingMd" as="h2">
<Text variant="headingSm" as="h2">
{i18n.translate('DiscountAppComponents.UsageLimitsCard.title')}
</Text>
<ChoiceList
Expand Down
4 changes: 2 additions & 2 deletions src/components/ValueCard/ValueCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export function ValueCard({
<Box paddingBlockEnd="400">
<Card padding="400">
<BlockStack gap="200">
<Text variant="headingMd" as="h2">
<Text variant="headingSm" as="h2">
{i18n.translate('DiscountAppComponents.ValueCard.title')}{' '}
</Text>
<InlineStack gap="300" align="start">
Expand Down Expand Up @@ -187,7 +187,7 @@ export function ValueCard({
</InlineStack>
{sellsSubscriptions && (
<>
<Text variant="headingMd" as="h2">
<Text variant="headingSm" as="h2">
{i18n.translate(
'DiscountAppComponents.ValueCard.purchaseType.title',
)}
Expand Down
Loading