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.

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

improvement: fix #186 [accordion] add props for paddings #187

Closed
wants to merge 1 commit into from

Conversation

mattgoud
Copy link
Collaborator

@mattgoud mattgoud commented Sep 5, 2023

possibility for the user to modify the header and content paddings

❓ Types of changes

New Props :

  • headerPaddingX
  • headerPaddingY
  • contentPaddingX
  • contentPaddingY

available values for props above:

  • "smaller" (4px)

  • "small" (8px)

  • "normal" (16px) => default value for vertical paddings

  • "large" (24px), => default value for horizontal paddings

  • "larger" (32px)

  • 📖 Documentation (updates to the documentation or readme)

  • 🐞 Bug fix (a non-breaking change that fixes an issue)

  • 👌 Enhancement (improving an existing functionality)

  • 📦 New feature (a non-breaking change that adds functionality)

  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📝 Checklist

  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes
  • The component exists on old Prestashop UIKit and my pull request on migrating documentation is accepted.

@mattgoud mattgoud added the enhancement New feature or request label Sep 5, 2023
@mattgoud mattgoud self-assigned this Sep 5, 2023
@mattgoud mattgoud linked an issue Sep 5, 2023 that may be closed by this pull request
Comment on lines +38 to +101
headerPaddingX: {
control: 'select',
options: ['smaller', 'small', 'normal', 'large', 'larger'],
description: 'Set horizontal paddings of accordion header',
table: {
defaultValue: {
summary: 'large',
detail: 'large (24px)',
},
type: {
summary: paddingVariantsSummary,
detail:
'smaller(4px) | small(8px) | normal(16px)| large(24px) | larger(32px)',
},
},
},
headerPaddingY: {
control: 'select',
options: ['smaller', 'small', 'normal', 'large', 'larger'],
description: 'Set vertical paddings of accordion header',
table: {
defaultValue: {
summary: 'normal',
detail: 'normal(16px)',
},
type: {
summary: paddingVariantsSummary,
detail:
'smaller(4px) | small(8px) | normal(16px)| large(24px) | larger(32px)',
},
},
},
contentPaddingX: {
control: 'select',
options: ['smaller', 'small', 'normal', 'large', 'larger'],
description: 'Set horizontal paddings of accordion content',
table: {
defaultValue: {
summary: 'large',
detail: 'large (24px)',
},
type: {
summary: paddingVariantsSummary,
detail:
'smaller(4px) | small(8px) | normal(16px)| large(24px) | larger(32px)',
},
},
},
contentPaddingY: {
control: 'select',
options: ['smaller', 'small', 'normal', 'large', 'larger'],
description: 'Set vertical paddings of accordion content',
table: {
defaultValue: {
summary: 'normal',
detail: 'normal(16px)',
},
type: {
summary: paddingVariantsSummary,
detail:
'smaller(4px) | small(8px) | normal(16px)| large(24px) | larger(32px)',
},
},
},
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we've to use tokens set up in global PUIK project. Currently we're using Tailwind's token like p-5 or ml-5. @FrancoisQtr your point of view ?

@mattgoud mattgoud added the WIP Status: Work In Progress label Oct 24, 2023
@mattgoud mattgoud closed this Nov 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request WIP Status: Work In Progress
Projects
None yet
Development

Successfully merging this pull request may close these issues.

VAL-272 [ACCORDION] Give possibility to set content padding
2 participants