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

fix(docs): Reapply styles for vertical rhythm #2349

Merged
merged 8 commits into from
Dec 11, 2023
Merged

Conversation

imagoiq
Copy link
Contributor

@imagoiq imagoiq commented Dec 4, 2023

What

  • Fixed rules for vertical rhythm that didn't apply anymore since Storybook v7.
  • A couple of fixes about the documentation (link, heading).
  • Removed padding-bottom on tabs content.

@imagoiq imagoiq self-assigned this Dec 4, 2023
Copy link

changeset-bot bot commented Dec 4, 2023

🦋 Changeset detected

Latest commit: 26a7fb0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages
Name Type
@swisspost/design-system-documentation Patch
@swisspost/design-system-styles Patch
@swisspost/design-system-components Patch
@swisspost/design-system-demo Patch
@swisspost/internet-header Patch
@swisspost/design-system-intranet-header-workspace Patch
@swisspost/design-system-intranet-header Patch
@swisspost/design-system-components-react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@@ -56,7 +56,6 @@

.tab-content {
padding-top: spacing.$spacer;
padding-bottom: spacing.$spacer;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This one is important. I'm not sure why it was added, but in my case it adds unwanted spacing. We should either remove it completely and let the user be responsible for the spacing, or convert it to a margin so that it collapses with margin-top of the next element and don't disturb vertical rhythm.

Copy link
Contributor

Choose a reason for hiding this comment

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

As per design, we want the accordion content to have a default spacing. But sure it would be better with a margin-block instead of these padding

@swisspost-bot
Copy link
Contributor

swisspost-bot commented Dec 4, 2023

Preview environment ready: https://preview-2349--swisspost-web-frontend.netlify.app
Preview environment ready: https://preview-2349--swisspost-design-system-next.netlify.app

@imagoiq imagoiq linked an issue Dec 4, 2023 that may be closed by this pull request
Copy link

sonarcloud bot commented Dec 11, 2023

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@imagoiq imagoiq merged commit c678e34 into main Dec 11, 2023
9 of 10 checks passed
@imagoiq imagoiq deleted the fix/2162-vertical-rhythm branch December 11, 2023 10:01
gfellerph added a commit that referenced this pull request Jan 8, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @swisspost/design-system-components@1.7.0

### Minor Changes

- Added the `post-popover` component. This component can display text
and interactive elements in a popover in front of the page content. (by
[@gfellerph](https://github.com/gfellerph) with
[#2109](#2109))

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@6.5.1

## @swisspost/design-system-icons@1.0.17

### Patch Changes

- Added icons number 2566 and 2567.Updated icons number 1001, 1002,
1003, 1004, 1005, 1006, 1007, 1008, 1009, 1010, 1011, 1012, 1013, 1014,
1015, 1016, 1017, 1019, 1020, 1021, 1022, 1023, 1024, 1025, 1026, 1027,
1028, 1030, 1031, 1037, 1038, 1040, 1042, 1043, 1044, 1045, 1047, 1048,
1049, 2000, 2001, 2002, 2005, 2006, 2007, 2009, 2010, 2011, 2012, 2013,
2014, 2015, 2016, 2017, 2019, 2023, 2024, 2026, 2027, 2028, 2029, 2030,
2031, 2032, 2035, 2036, 2037, 2039, 2041, 2044, 2045, 2047, 2048, 2054,
2055, 2056, 2057, 2058, 2059, 2060, 2063, 2069, 2070, 2072, 2073, 2075,
2076, 2078, 2080, 2081, 2082, 2083, 2084, 2085, 2086, 2087, 2088, 2089,
2090, 2091, 2092, 2093, 2094, 2095, 2096, 2097, 2099, 2100, 2101, 2102,
2107, 2108, 2114, 2115, 2116, 2117, 2118, 2119, 2120, 2122, 2123, 2124,
2126, 2128, 2131, 2132, 2133, 2134, 2135, 2137, 2138, 2139, 2140, 2141,
2142, 2143, 2144, 2145, 2146, 2147, 2148, 2149, 2151, 2153, 2154, 2155,
2156, 2157, 2158, 2159, 2162, 2163, 2164, 2166, 2167, 2168, 2169, 2170,
2171, 2172, 2173, 2175, 2177, 2178, 2179, 2180, 2181, 2182, 2183, 2184,
2185, 2186, 2187, 2188, 2189, 2190, 2191, 2192, 2194, 2195, 2196, 2198,
2199, 2200, 2201, 2202, 2203, 2205, 2206, 2207, 2208, 2209, 2210, 2211,
2212, 2213, 2214, 2215, 2216, 2217, 2218, 2219, 2220, 2221, 2222, 2225,
2227, 2228, 2229, 2230, 2232, 2233, 2234, 2235, 2236, 2237, 2238, 2239,
2240, 2241, 2243, 2244, 2245, 2246, 2247, 2248, 2249, 2250, 2251, 2252,
2253, 2254, 2255, 2256, 2257, 2258, 2259, 2260, 2261, 2262, 2263, 2264,
2265, 2266, 2267, 2268, 2269, 2270, 2271, 2272, 2273, 2274, 2275, 2276,
2277, 2278, 2279, 2280, 2281, 2282, 2283, 2284, 2285, 2286, 2287, 2288,
2289, 2290, 2291, 2292, 2293, 2294, 2295, 2296, 2297, 2298, 2299, 2300,
2301, 2303, 2304, 2305, 2306, 2307, 2308, 2309, 2310, 2311, 2312, 2313,
2314, 2315, 2316, 2317, 2318, 2319, 2320, 2321, 2322, 2323, 2324, 2325,
2326, 2327, 2328, 2329, 2330, 2331, 2332, 2333, 2334, 2335, 2336, 2337,
2338, 2339, 2340, 2341, 2342, 2343, 2344, 2345, 2346, 2347, 2348, 2349,
2350, 2351, 2352, 2353, 2354, 2355, 2356, 2357, 2358, 2359, 2360, 2361,
2362, 2363, 2364, 2365, 2366, 2367, 2368, 2369, 2370, 2371, 2372, 2373,
2374, 2375, 2376, 2377, 2378, 2379, 2380, 2381, 2382, 2383, 2384, 2385,
2386, 2387, 2388, 2389, 2390, 2391, 2392, 2393, 2394, 2395, 2396, 2397,
2398, 2399, 2400, 2401, 2402, 2403, 2404, 2405, 2406, 2407, 2408, 2409,
2410, 2411, 2412, 2413, 2414, 2415, 2416, 2417, 2418, 2419, 2420, 2422,
2423, 2424, 2425, 2426, 2427, 2428, 2429, 2430, 2431, 2432, 2433, 2434,
2435, 2436, 2437, 2438, 2439, 2440, 2441, 2442, 2443, 2445, 2446, 2447,
2448, 2449, 2450, 2451, 2452, 2453, 2454, 2455, 2456, 2457, 2458, 2459,
2460, 2461, 2462, 2463, 2464, 2465, 2466, 2467, 2468, 2469, 2470, 2471,
2472, 2473, 2474, 2475, 2476, 2477, 2478, 2479, 2480, 2481, 2482, 2483,
2484, 2485, 2486, 2487, 2488, 2490, 2491, 2492, 2493, 2494, 2495, 2496,
2497, 2498, 2499, 2500, 2501, 2504, 2505, 2506, 2507, 2508, 2509, 2510,
2511, 2512, 2513, 2514, 2515, 2516, 2517, 2518, 2519, 2520, 2521, 2522,
2523, 2524, 2525, 2526, 2527, 2528, 2529, 2530, 2531, 2532, 2533, 2534,
2535, 2536, 2537, 2538, 2539, 2540, 2541, 2542, 2543, 2544, 2545, 2546,
2547, 2548, 2549, 2550, 2551, 2552, 2553, 2554, 2556, 2558, 2560, 2561,
2562, 2564, 3013, 3021, 3022, 3024, 3027, 3032, 3033, 3036, 3038, 3040,
3042, 3043, 3044, 3047, 3048, 3049, 3050, 3054, 3055, 3056, 3057, 3058,
3059, 3060, 3062, 3063, 3064, 3066, 3068, 3069, 3070, 3074, 3075, 3076,
3077, 3078, 3079, 3080, 3082, 3083, 3084, 3085, 3088, 3091, 3094, 3096,
3097, 3098, 3099, 3101, 3102, 3103, 3105, 3108, 3109, 3110, 3111, 3112,
3113, 3114, 3118, 3119, 3120, 3121, 3122, 3127, 3128, 3129, 3130, 3131,
3132, 3133, 3134, 3135, 3138, 3139, 3140, 3142, 3143, 3144, 3146, 3147,
3148, 3150, 3151, 3152, 3153, 3154, 3155, 3156, 3157, 3158, 3159, 3161,
3162, 3163, 3164, 3168, 3169, 3170, 3171, 3172, 3173, 3174, 3177, 3178,
3179, 3180, 3181, 3182, 3184, 3185, 3186, 3187, 3190, 3191, 3192, 3193,
3194, 3196, 3197, 3198, 3203, 3204, 3206, 3207, 3208, 3209, 3210, 3212,
3213, 3214, 3216, 3217, 3218, 3219, 3222, 3224, 3225, 3227, 3231, 3234,
3238, 3239, 3240, 3241, 3242, 3244, 3245, 3246, 3248, 3249, 3250, 3255,
3256, 3258, 8000, 8005, 8007, 8011, 8012, 8014, 8015 and 8019. (by
[@swisspost-bot](https://github.com/swisspost-bot) with
[#2388](#2388))

- Added icons number 2568, 2569 and 2570. (by
[@swisspost-bot](https://github.com/swisspost-bot) with
[#2420](#2420))

## @swisspost/internet-header@1.13.2

### Patch Changes

- Improve the main navigation slot placement and styling. (by
[@alizedebray](https://github.com/alizedebray) with
[#2280](#2280))

- Fixed an issue with stickyness scrolling where the logo would not
react to scroll events and the header did not appear when scrolling back
up. (by [@gfellerph](https://github.com/gfellerph) with
[#2377](#2377))

-   Updated dependencies:
    -   @swisspost/design-system-styles@6.5.1

## @swisspost/design-system-intranet-header@5.0.6

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@6.5.1

## @swisspost/design-system-styles@6.5.1

### Patch Changes

- Added breakpoint specific utility classes to set width to `25%`,
`50%`, `75%`, `100%`, or `auto`. (by
[@imagoiq](https://github.com/imagoiq) with
[#2308](#2308))

- Changed color of text on the success background (#2c911c) to white
from black for better contrast according to WCAG 3.0 (by
[@b1aserlu](https://github.com/b1aserlu) with
[#2358](#2358))

- Converted padding-bottom to margin after tabs-content so it doesn't
impact vertical rhythm. (by [@imagoiq](https://github.com/imagoiq) with
[#2349](#2349))

- Fixed close button color in high contrast mode. The button is now
visible when forced colors are active. (by
[@gfellerph](https://github.com/gfellerph) with
[#2109](#2109))

## @swisspost/design-system-documentation@2.7.0

### Minor Changes

- Add a page on how to add custom content to the internet header main
navigation. (by [@alizedebray](https://github.com/alizedebray) with
[#2280](#2280))

### Patch Changes

- Added breakpoint specific utility classes to set width to `25%`,
`50%`, `75%`, `100%`, or `auto`. (by
[@imagoiq](https://github.com/imagoiq) with
[#2308](#2308))

- Renamed "Text input" component to "Input". (by
[@imagoiq](https://github.com/imagoiq) with
[#2401](#2401))

- Fixed vertical rhythm that didn't apply anymore since migration to
Storybook v7. (by [@imagoiq](https://github.com/imagoiq) with
[#2349](#2349))

-   Updated dependencies:
    -   @swisspost/design-system-icons@1.0.17
    -   @swisspost/internet-header@1.13.2
    -   @swisspost/design-system-styles@6.5.1
    -   @swisspost/design-system-components@1.7.0
    -   @swisspost/design-system-components-react@1.0.24

## @swisspost/design-system-components-react@1.0.24

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-components@1.7.0

## @swisspost/design-system-demo@7.1.2

### Patch Changes

- Documented how to translate specific labels on the ng-bootstrap
datepicker. (by [@imagoiq](https://github.com/imagoiq) with
[#2315](#2315))
-   Updated dependencies:
    -   @swisspost/design-system-styles@6.5.1
    -   @swisspost/design-system-intranet-header@5.0.6

## @swisspost/design-system-intranet-header-workspace@3.0.6

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@6.5.1

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Docs: Vertical rhythm is disturbing
3 participants