changes after review

mantinedev · Nov 28, 2024 · e817c63 · e817c63
1 parent 80d2bdb
commit e817c63
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 22 deletions.
diff --git a/...icker/DatePicker.demo.showWeekNumbers.tsx → ...icker/DatePicker.demo.withWeekNumbers.tsx b/...icker/DatePicker.demo.showWeekNumbers.tsx → ...icker/DatePicker.demo.withWeekNumbers.tsx
@@ -5,15 +5,15 @@ const code = `
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
-  return <DatePicker showWeekNumbers />;
+  return <DatePicker withWeekNumbers />;
 }
 `;
 
 function Demo() {
-  return <DatePicker showWeekNumbers />;
+  return <DatePicker withWeekNumbers />;
 }
 
-export const showWeekNumbers: MantineDemo = {
+export const withWeekNumbers: MantineDemo = {
   type: 'code',
   centered: true,
   component: Demo,

diff --git a/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demos.story.tsx b/packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demos.story.tsx
@@ -113,7 +113,7 @@ export const Demo_excludeDate = {
   render: renderDemo(demos.excludeDate),
 };
 
-export const Demo_showWeekNumbers = {
-  name: '⭐ Demo: showWeekNumbers',
-  render: renderDemo(demos.showWeekNumbers),
+export const Demo_withWeekNumbers = {
+  name: '⭐ Demo: withWeekNumbers',
+  render: renderDemo(demos.withWeekNumbers),
 };
diff --git a/packages/@docs/demos/src/demos/dates/DatePicker/index.ts b/packages/@docs/demos/src/demos/dates/DatePicker/index.ts
@@ -19,4 +19,4 @@ export { renderDay } from './DatePicker.demo.renderDay';
 export { hideWeekdays } from './DatePicker.demo.hideWeekdays';
 export { hideOutsideDates } from './DatePicker.demo.hideOutsideDates';
 export { excludeDate } from './DatePicker.demo.excludeDate';
-export { showWeekNumbers } from './DatePicker.demo.showWeekNumbers';
+export { withWeekNumbers } from './DatePicker.demo.withWeekNumbers';
diff --git a/packages/@mantine/dates/src/components/Calendar/Calendar.tsx b/packages/@mantine/dates/src/components/Calendar/Calendar.tsx
@@ -204,7 +204,7 @@ export const Calendar = factory<CalendarFactory>((_props, ref) => {
     __onDayMouseEnter,
     withCellSpacing,
     highlightToday,
-    showWeekNumbers,
+    withWeekNumbers,
 
     // YearLevelGroup props
     monthsListFormat,
@@ -350,7 +350,7 @@ export const Calendar = factory<CalendarFactory>((_props, ref) => {
           static={isStatic}
           withCellSpacing={withCellSpacing}
           highlightToday={highlightToday}
-          showWeekNumbers={showWeekNumbers}
+          withWeekNumbers={withWeekNumbers}
           {...stylesApiProps}
         />
       )}

diff --git a/packages/@mantine/dates/src/components/Month/Month.module.css b/packages/@mantine/dates/src/components/Month/Month.module.css
@@ -12,7 +12,11 @@
 }
 
 .weekNumber {
+  --wn-size-xs: 30px;
   --wn-size-sm: 36px;
+  --wn-size-md: 42px;
+  --wn-size-lg: 48px;
+  --wn-size-xl: 54px;
   color: var(--mantine-color-dimmed);
   font-weight: normal;
   font-size: var(--wn-fz, var(--mantine-font-size-sm));

diff --git a/packages/@mantine/dates/src/components/Month/Month.story.tsx b/packages/@mantine/dates/src/components/Month/Month.story.tsx
@@ -101,6 +101,6 @@ export function Sizes() {
   return sizes;
 }
 
-export function showWeekNumbers() {
-  return <Wrapper showWeekNumbers />;
+export function withWeekNumbers() {
+  return <Wrapper withWeekNumbers />;
 }
diff --git a/packages/@mantine/dates/src/components/Month/Month.tsx b/packages/@mantine/dates/src/components/Month/Month.tsx
@@ -106,7 +106,7 @@ export interface MonthSettings {
   highlightToday?: boolean;
 
   /** Determines whether week numbers should be displayed */
-  showWeekNumbers?: boolean;
+  withWeekNumbers?: boolean;
 }
 
 export interface MonthProps
@@ -173,7 +173,7 @@ export const Month = factory<MonthFactory>((_props, ref) => {
     withCellSpacing,
     size,
     highlightToday,
-    showWeekNumbers,
+    withWeekNumbers,
     ...others
   } = props;
 
@@ -278,7 +278,7 @@ export const Month = factory<MonthFactory>((_props, ref) => {
 
     return (
       <tr key={rowIndex} {...getStyles('monthRow')}>
-        {showWeekNumbers && <td {...getStyles('weekNumber')}>{getWeekNumber(row)}</td>}
+        {withWeekNumbers && <td {...getStyles('weekNumber')}>{getWeekNumber(row)}</td>}
         {cells}
       </tr>
     );
@@ -297,7 +297,7 @@ export const Month = factory<MonthFactory>((_props, ref) => {
             classNames={resolvedClassNames}
             styles={resolvedStyles}
             unstyled={unstyled}
-            showWeekNumbers={showWeekNumbers}
+            withWeekNumbers={withWeekNumbers}
           />
         </thead>
       )}

diff --git a/packages/@mantine/dates/src/components/MonthLevel/MonthLevel.tsx b/packages/@mantine/dates/src/components/MonthLevel/MonthLevel.tsx
@@ -77,7 +77,7 @@ export const MonthLevel = factory<MonthLevelFactory>((_props, ref) => {
     __onDayMouseEnter,
     withCellSpacing,
     highlightToday,
-    showWeekNumbers,
+    withWeekNumbers,
 
     // CalendarHeader settings
     __preventFocus,
@@ -182,7 +182,7 @@ export const MonthLevel = factory<MonthLevelFactory>((_props, ref) => {
         static={isStatic}
         withCellSpacing={withCellSpacing}
         highlightToday={highlightToday}
-        showWeekNumbers={showWeekNumbers}
+        withWeekNumbers={withWeekNumbers}
         {...stylesApiProps}
       />
     </Box>

diff --git a/packages/@mantine/dates/src/components/MonthLevelGroup/MonthLevelGroup.tsx b/packages/@mantine/dates/src/components/MonthLevelGroup/MonthLevelGroup.tsx
@@ -60,7 +60,7 @@ export const MonthLevelGroup = factory<MonthLevelGroupFactory>((_props, ref) =>
     __onDayMouseEnter,
     withCellSpacing,
     highlightToday,
-    showWeekNumbers,
+    withWeekNumbers,
 
     // CalendarHeader settings
     __preventFocus,
@@ -163,7 +163,7 @@ export const MonthLevelGroup = factory<MonthLevelGroupFactory>((_props, ref) =>
           static={isStatic}
           withCellSpacing={withCellSpacing}
           highlightToday={highlightToday}
-          showWeekNumbers={showWeekNumbers}
+          withWeekNumbers={withWeekNumbers}
         />
       );
     });

diff --git a/packages/@mantine/dates/src/components/WeekdaysRow/WeekdaysRow.tsx b/packages/@mantine/dates/src/components/WeekdaysRow/WeekdaysRow.tsx
@@ -44,7 +44,7 @@ export interface WeekdaysRowProps
   cellComponent?: 'td' | 'th';
 
   /** Determines whether week numbers should be displayed */
-  showWeekNumbers?: boolean;
+  withWeekNumbers?: boolean;
 }
 
 export type WeekdaysRowFactory = Factory<{
@@ -77,7 +77,7 @@ export const WeekdaysRow = factory<WeekdaysRowFactory>((_props, ref) => {
     weekdayFormat,
     cellComponent: CellComponent = 'th',
     __staticSelector,
-    showWeekNumbers,
+    withWeekNumbers,
     ...others
   } = props;
 
@@ -109,7 +109,7 @@ export const WeekdaysRow = factory<WeekdaysRowFactory>((_props, ref) => {
 
   return (
     <Box component="tr" ref={ref} {...getStyles('weekdaysRow')} {...others}>
-      {showWeekNumbers && <CellComponent {...getStyles('weekday')}>#</CellComponent>}
+      {withWeekNumbers && <CellComponent {...getStyles('weekday')}>#</CellComponent>}
       {weekdays}
     </Box>
   );